記事一覧
メンテナンス性の高いCSSコーディングが大切な理由
はじめまして！TAK(@tak_dcxi)と申します。
noteのアカウントを取得して数週間経つのですが、一度も投稿をしていないはずなのにフォロワーが15人もいたのでそろそろ手を出さないとなーと思いながら書いております。
今後もnoteを投稿していこうとは思っておりますが、僕が投稿するnoteは基本的に自分自身への備忘録のつもりで書いています。
今回のnoteもあくまで自分の感想の紹介であり
個人的に実践しているWebデザインガイドライン① デザイン基本事項編
こんにちは！
Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。
せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。
基本的には以下のツイートに注釈をつけて説明したものとなります
個人的に実践しているWebデザインガイドライン② 配色編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。
基本配色とはベースカラー・メインカラー・アクセントカラーの3種。
＜ベースカラー＞
全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるため
個人的に実践しているWebデザインガイドライン③ レイアウト編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。
コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。
重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離
個人的に実践しているWebデザインガイドライン④ 画像編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# 共通事項画像は可能な限り高解像度のものから使用する。拡大ぼけした画像、ジャギや透かしの残った画像、画質が粗すぎる画像の利用は禁止。
画質は統一する。画像によって解像度が違いすぎるようなことは避ける。
ロゴやアイコンなどのプリミティブな素材は可能な限りSVGで作成する。
写真のトーンは適切に補正する。撮影した
個人的に実践しているWebデザインガイドライン⑤ テキスト編
あくまで個人的に実践しているデザインガイドラインです。
記事一覧はこちら↓
# 基本事項
使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。
文章の頭位置を揃え、他の要素とのベースラインも揃える。
文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。
日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基
個人的に実践しているWebデザインガイドライン⑥ デザインカンプ編
あくまで個人的に実践しているデザインガイドラインです。
記事一覧はこちら↓
# 基本事項必ずWeb用設定で作成する。
カラーモード → RGB
単位 → 定規・文字ともピクセル(px)
基本解像度 → 72dpi
解像度については以下の記事が分かりやすいと思った。
僕は現在はXDでデザインカンプを作ってますが最近までPhotoshopでした。そのため、Photoshopでの作業環境を
個人的に実践しているWebデザインガイドライン⑦ その他重要事項編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# モバイル対応
モバイルフレンドリー対応を考慮する。
高画素密度ディスプレイ（Retina）対応を考慮する。
回線速度や通信量を意識する。サイズの重い画像や動画などの乱用は避ける。ギガ泥棒なWebサイトは直帰率が高くなることを意識する。
Android 4系は対応していないCSSやCSS関連のバグが多い。
僕がおすすめするデザイン系Webサービスまとめ
2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。
おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。
(※2019.11.03
僕がおすすめするVSCodeのプラグインまとめ
Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。
おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。
(※2019.11.14 追記)