2020.01.23 WEBWebデザイン 【初心者向け】Photoshopのスマートオブジェクトって一体何？画像を劣化させずに拡大・縮小ができる便利な技 Photoshopを使っていると必ず目にする「スマートオブジェクト」。名前だけ聞くと何なのかわかりません。 ですがこのスマートオブジェクト、理解すると画像のクオリティはおろか、作業スピードもアップする素晴らしいものなのです！ 今回はこのスマートオブジェクトとは何なのか、そして便利な使い方につい [...]
2020.01.20 WEBWebデザイン AdobeXDのリピートグリッドを使ってコンテンツを一括で流し込む方法 前回、AdobeXDのリピートグリッドを利用したコンポーネントの作成方法を紹介しました。 前回の記事AdobeXDのリピートグリッドを使ってプロトタイプを効率よく作成しよう リピートグリッドを利用することでコンポーネントを繰り返すようなデザインを効果的に作成することができるようになりましたが、今 [...]
2020.01.17 WEBWebデザイン 「画像優位性効果」を理解してユーザーの記憶に残るwebサイトを作成しよう 皆さんは、webサイトを閲覧するときに、理解するのに時間がかかったり、見終わったあとに内容を忘れてしまって再度サイトを確認したりした経験はありませんか。 今回は、web担当初心者の方もすぐに実行しやすい方法で、人間の心理から見た記憶に残りやすく理解しやすいwebサイトを作成するコツをお伝えいた [...]
2019.12.17 WEBWebデザイン 擬似要素タグbeforeとafterを活用しよう！基礎知識と使い方を解説！ 前回紹介した擬似要素・擬似クラスの指定方法の中から、今回はbeforeとafterについて詳しく解説をしていきます。 基本的な知識から具体的な活用方法まで、丁寧に解説していきますので是非参考にしてください。 INDEX属性要素「before」「after」とはbeforeとafterの基本的 [...]
2019.12.09 WEBWebデザイン webデザイナー・ディレクターなら知っておきたい「ネガティブスペース（ホワイトスペース）」の活用方法 webサイトを作るには、「ユーザーに読みやすい・理解しやすいページにするためにはどうしたら良いか」「数ある類似ページより自分の作ったページを評価してもらうにはどうしたら良いか」などを考えることが多いですよね。 「充実した内容が必要だろう」と考えて1ページ目一杯に情報を詰め込みすぎてしまうケース [...]
2019.11.20 WEBWebデザイン AdobeXDのリピートグリッドを使ってプロトタイプを効率よく作成しよう 弊社ではお客様にWebサイトのデザインを提案する際にレイアウト作成ツールとしてAdobeXDを利用しています。 AdobeXDは2017年に正式リリースされたばかりのまだまだ新しいアプリケーションですが、非常に活発に開発が進められており、毎月のようにアップデートが行われています。 Adobe B [...]
2019.11.08 WEBWebデザイン PhotoshopやXDで整列したのにちょっとずれてる？webサイト作成時に考えうる錯視が与える効果について 皆さんはwebサイトのレイアウトを作成する際に、「中央に揃えたはずなのに真ん中に見えない」や「全く同じ大きさの円なのに同じ大きさに見えない」など、違和感を覚えたことはありませんか。 今回は、錯視が与える違和感や活用について、ご紹介いたします。 INDEX身近で利用されている錯視街で見かけ [...]
2019.10.16 WEBWebデザイン 【初心者向け】CSSの属性セレクタを活用しよう！種類や指定方法を解説！ 前回の記事【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ではCSSを使った擬似的な要素の指定方法をまとめました。 今回は属性を使った指定方法を解説していきます。 INDEX属性セレクタとは属性セレクタの種類1. A[属性名] （指定の属性を持つ要素A）2. A[属性名=”属性値 [...]
2019.10.09 WEBWebデザイン webサイトにおいてのメディア・ユニバーサル・デザイン（MUD）の必要性・ポイントとは？ 近年、ユーザーインターフェース（UI）や色覚障がい者に配慮したカラーユニバーサルデザイン（CUD）など、ユーザー目線から考えるデザインの重要性が定着してきているように思えます。それらはこれからの時代の変化に適応していくために重要な内容です。 今回は、すべてのユーザーが対象となるメディア・ユニバ [...]
2019.10.09 WEBWebデザイン 【初心者向け】Photoshopで書き出してもぼやけない文字を作るコツ Photoshopで文字を含んだ素材を作り、Web用に書き出したあと、なぜか文字がぼんやりとぼやけてしまった、なんて経験はありませんか？ 恥ずかしながら筆者もその一人です。気になってほかのサイトを見てみると、なんだか文字画像がクリアでシャープに書き出されている…。 この違いは何故なのか、どうや [...]
2019.09.27 WEBWebデザイン 【初心者向け】CSSだけで矢印をスタイルしてコーディングを効率化しよう HTML・CSSコーディングを行っていると、ナビゲーションやメニューに使われるテキスト部分がアンカーリンクであることが伝わるように、矢印アイコンの装飾が施されたデザインをよく目にします。 従来はgifやpngなどの形式で画像として書き出し、CSSの背景に指定してデザインを再現する手法が一般的で [...]
2019.08.07 WEBWebデザイン 【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ 前回の記事【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 INDEX擬似要素とは ～擬似要素の適用例～擬似 [...]
2019.06.21 WEBWebデザイン PerfectPixelを使ってデザインカンプとコーディングの確認時間を短縮しよう 筆者はコーダーとして日々コーディング業務を行っていますが、HTML・CSSコーディングを行う上で一番重要で手間のかかる作業はデザインカンプとコーディングデータを比較する確認作業だと考えています。 今回はこの確認作業を効率よく行うことができるChromeのアドオン「PerfectPixel」をご [...]
2019.04.23 WEBWebデザイン 【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編） CSSとは正式にはCascading Style Sheets（カスケーディング・スタイル・シート）といい、webサイトにデザインを施すための言語です。HTMLとセットで扱われ、HTMLで記述した文章構造を装飾し見栄えを良くする役割を担っています。 今回はCSSを記述する際に必要となる「セレク [...]
2018.10.02 WEBWebデザイン 【初心者向け】ジャンプ率を利用して効果的なデザインを作成しよう デザインをするうえでぜひ知っておきたい知識の一つにジャンプ率による効果が挙げられます。今回はデザインにおける基本的な知識である「ジャンプ率」について解説していきます。 INDEXデザインにおける対比効果とは？対比効果の設定例ジャンプ率とは？ジャンプ率の概念文字のジャンプ率画像のジャンプ率ジャ [...]
2018.10.01 WEBWebデザイン デザインを美しくする「白銀比」について理解しよう（日本人が魅かれやすい白銀比） 前回の記事「デザインを美しくする「黄金比」について理解しよう！（身の回りにある黄金比） 」では、デザインを美しくするためのテクニックとして、古来より人間が最も美しいと感じる比率である「黄金比」について解説しました。 今回は、黄金比に並ぶ美しい比率のひとつとして、日本人に馴染みのあるとされている [...]
2018.09.20 WEBWebデザイン デザインを美しくする「黄金比」について理解しよう！（身の回りにある黄金比） 美術やデザインの勉強をしたことがある方はご存知かと思いますが、古来より人間が最も美しいと感じる比率として「黄金比」と呼ばれるものが存在します。 この「黄金比」は、歴史的建造物や美術品をはじめ、近代ではデザインや写真の構図などにも取り入れられています。 今回は、デザインを美しくするためのテクニッ [...]
