ブログBLOG

【画像素材管理】画像素材を検索してヒットさせたい【タグ検索/無料/日本語】

「仕事の内の〇割は探し物をしている時間だ」という話をWebデザインスクールの講師から聞いたことがあります。 年間あたり150時間、一日20分は探し物をしている時間だそうです。年間ともなると膨大な時間ですね。まさにちりも積もれば山となる。時は金なり。 参考：書類探しの時間１日に何分費やしているのか ...

【すぐに使える】ユーザビリティ＆コンバージョン向上！WebサイトのためのUI・UX改善ポイント26こ

せっかく良質なコンテンツや優れたデザインがあるのに、ユーザーにとって「使いにくい」サイトになっていませんか？ サイトの使い勝手が良いかどうかはコンバージョンにも関わってくる重要なポイント。ディレクター・デザイナー・フロントエンドエンジニアのそれぞれが、ユーザーがどう利用するのかを予想しなが ...

【社内デザイン】レスポンシブテーブルのデザインの作り方【Photoshop】【独学デザイナー必見】【WEBデザイン】

以前「もう悩まない。CSSでレスポンシブなtableデザイン＆コーディング」でテーブルのhtmlコーディングについては記事をまとめさせていただきましたが、 今回は社内のデザインデータをあさってテーブルデザインのパターンを見てみたいと思います。 その前に3年くらい前のデザインデータ ...

【Illustrator＆Photoshop】CC 2019 アプリケーション登場 試してほしい８つの新機能！

2018.10.16にリリースされた IllustratorとPhotoshop CC 2019を早速使用してみて 便利だなと感じた８つの新機能をピックアップしてご紹介したいと思います。 （ほとんど職場でメインで使用しているPhotoshopの話になります） いろんなブロガーさんが ...

SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応]

更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめ ...

【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】

もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができる ...

超～かんたん！誰でもできる人物レタッチ【Photoshop】

５分でできるレタッチ？！ Photoshopで誰でも簡単にできる人物写真のレタッチ方法をご紹介します。 参考として「美容系サイトのメインビジュアルで使用する人物写真」のレタッチを行っていきますが、採用サイトやLP制作など様々な場面で使えると思います。 レタッチ作業は時間がかかるというイメージを ...

他社と差をつける名刺デザイン 【Part1】

BRISKではお客様のご要望でWeb制作と一緒に名刺制作のご依頼を受けることがあります。 名刺制作の案件を担当する機会があったのと、前職での紙媒体の制作経験を活かして、今回は私なりの”ひと手間加えた名刺の作り方”についてご紹介します。 名刺をつくるまでの流れ 名刺制作のご依頼いただくときは、直接 ...

GIFアニメをつくってみよう～その2～作り方編[PhotoshopCC]

ご無沙汰しています。作り方編まで大分間が空いてしまいました！ その1ではGIFの作り方についての概要を説明させてもらいましたが、今回はそれを踏まえたうえで実際の手順を詳しく説明していこうと思います。 Contents フレームアニメーションでのGIF作成 ビデオタイムラインでのG ...

SVGの書き出し方【よくある失敗例】+ IllustratorからPhotoshopにシェイプをコピー

SVGは拡縮可能なベクター画像です。 PhotoshopでもIllustratorでも、jpgやpngと同じようにアセット機能で書き出しができます。 ですが、「中身がパスではなく画像になっている」という問題がよく起きるので、本記事ではよくある失敗例をまとめてみました。 上手くいかないあるある 「 ...