個人的に実践しているWebデザインガイドラインまとめ

本

個人的に実践しているWebデザインの理解向上とクオリティの均一化などを目的としたガイドラインです。備忘録として。ちょくちょくコンテンツを追加しています。

運営しているクリエイター: TAK / Web Creator.

個人的に実践しているWebデザインガイドライン① デザイン基本事項編

こんにちは！ Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。基本的には以下のツイートに注釈をつけて説明したものとなります。記事が長くなるのでパート毎に記事を分けてます。【注意書き】 - 僕がn

個人的に実践しているWebデザインガイドライン② 配色編

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。基本配色とはベースカラー・メインカラー・アクセントカラーの3種。＜ベースカラー＞全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるために明度が低い無彩色を使用することが多い。メインカラーの明度を上げた色をベースカラ

個人的に実践しているWebデザインガイドライン③ レイアウト編

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離やコントラストを変えると引き立てやすい。関連するコンテンツはグループとして認

個人的に実践しているWebデザインガイドライン④ 画像編

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # 共通事項画像は可能な限り高解像度のものから使用する。拡大ぼけした画像、ジャギや透かしの残った画像、画質が粗すぎる画像の利用は禁止。画質は統一する。画像によって解像度が違いすぎるようなことは避ける。ロゴやアイコンなどのプリミティブな素材は可能な限りSVGで作成する。写真のトーンは適切に補正する。撮影したままの写真は極力使わない。有料素材サイトの画像を使用する場合は、ライセンス面

個人的に実践しているWebデザインガイドライン⑤ テキスト編

あくまで個人的に実践しているデザインガイドラインです。記事一覧はこちら↓ # 基本事項使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。文章の頭位置を揃え、他の要素とのベースラインも揃える。文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基本的に右揃えの文章は使用しない。中央揃えは利用場所を考慮する。見出しなどの短

個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編

あくまで個人的に実践しているデザインガイドラインです。記事一覧はこちら↓ # 基本事項必ずWeb用設定で作成する。カラーモード → RGB 単位 → 定規・文字ともピクセル(px) 基本解像度 → 72dpi 解像度については以下の記事が分かりやすいと思った。僕は現在はXDでデザインカンプを作ってますが最近までPhotoshopでした。そのため、Photoshopでの作業環境を意識したデザインガイドラインになると思います…。 # レイヤー名は必ず整理する

個人的に実践しているWebデザインガイドライン⑦ その他重要事項編

あくまで個人的に実践しているデザインのガイドラインです。記事一覧はこちら↓ # モバイル対応モバイルフレンドリー対応を考慮する。高画素密度ディスプレイ（Retina）対応を考慮する。回線速度や通信量を意識する。サイズの重い画像や動画などの乱用は避ける。ギガ泥棒なWebサイトは直帰率が高くなることを意識する。 Android 4系は対応していないCSSやCSS関連のバグが多い。ラジオボタンやテキストリンクはスマホではタップしにくいので、どのデバイスでも操作