#Webデザイン
【2020年総まとめ】WebデザインギャラリーS5-Styleで秀逸だった国産サイト
S5-Styleでは2020年に659件ものサイトを更新させていただきました。この記事では、その中でも特に素敵なサイトを国産限定に絞ってまとめさせていただきました！
そして、記事の最後に2020年の秀逸サイトを筆者の観点で3つ選んでいます。ぜひ最後までご覧ください。
S5-Styleとは、通算8,000弱におよぶハイクオリティなWebサイトを毎日キュレーションしているWebデザイナーのためのギャ
2019年が終わるまでにデザイナーが絶対に読むべきnote50選
こちらの記事を拝見させて頂き、これのデザイナー版を読みたいなと思ったので、自分でまとめました。
ただ調べていくうちに今まで読んだことのなかった神noteがどんどん出てきたので、結果的に2019年という枠を飛び越え、50選までいってしまいました。
偉大な先人たちの英知が全てのデザイナーに届くことで、世の中がデザインによってより良くなっていったらいいなと思います。
また最後の組織デザインについて
個人的に実践している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
個人的に実践しているWebデザインガイドライン③ レイアウト編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# レイアウトの基本事項Webサイトは文書。テキストは左から右に読み進める、署名は右寄せなど、文法にも配慮した配置を心掛ける。
コンテンツの重要度と優先度を考慮してデザインする。情報の位置関係に注意を払う。
重要なコンテンツは目立たせる。ユーザーはWebサイトを読み飛ばして見ることが多い。周囲のコンテンツとの距離
個人的に実践しているWebデザインガイドライン① デザイン基本事項編
こんにちは！
Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。
せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。
基本的には以下のツイートに注釈をつけて説明したものとなります
個人的に実践しているWebデザインガイドライン② 配色編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# 基本色の設定あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。
基本配色とはベースカラー・メインカラー・アクセントカラーの3種。
＜ベースカラー＞
全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるため