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デザイン デザインを美しくする「黄金比」について理解しよう！（身の回りにある黄金比） 美術やデザインの勉強をしたことがある方はご存知かと思いますが、古来より人間が最も美しいと感じる比率として「黄金比」と呼ばれるものが存在します。 この「黄金比」は、歴史的建造物や美術品をはじめ、近代ではデザインや写真の構図などにも取り入れられています。 今回は、デザインを美しくするためのテクニッ [...]
2018.09.04 WEBWebデザイン Webフォントとは？Webフォントを利用してWebサイトのデザイン性を高めよう Webサイトをデザインする際、フォントはWebサイトの雰囲気を左右する重要な要素になります。今回は、フォント選択の幅が広がるWebフォントについて解説していきます。 Webフォントとは Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し [...]
2018.07.06 WEBWebデザイン 伝わりやすいバナーをデザインするポイント（装飾編） 「伝わりやすいバナーをデザインするポイント」シリーズでは様々な切り口からバナーデザインのポイントをご説明してきました。 今回はすぐにバナー作成に取り入れられるデザインの「装飾」についてご紹介していきたいと思います。 INDEX様々な場面で使えるデザイン【その1】背景に色を敷く【その2】円 [...]
2018.06.06 WEBWebデザイン コーディングスピードが上がる画像書き出し方法 – Photoshop CCの「画像アセット」機能 – Webサイト制作の際に必要となる画像書き出し作業。Webデザイナー・コーダーの方はどのような方法で書き出し作業を行っていますか？ 1枚ずつ書き出しをしている、もしくはスライス機能のみで書き出しをしているという方に向けて、今回はPhotoshop CCから登場した「画像アセット」機能をご紹介 [...]
2018.04.06 WEBWebデザイン 可読性の高いデザイン作成のポイント（後編：行間＆字間＆行長） 前回の記事「可読性の高い文章をデザインするポイント（前編）」では「フォント」と「文字サイズ」についてご紹介させていただきました。 今回は、読みやすい文章をデザインする上で配慮すべき5つの要素のうち、残り3つの要素である「行間」「字間」「行長」についてご紹介いたします。 行間 文章の行 [...]
