デザイン初心者におすすめコンテンツ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UIデザイン力を鍛えるリデザインの勧めとコツ

Twitterでクラシルのリデザインの題材として使って良いとつぶやいたら数名からリデザイン案をもらえました。ありがとうございます！リデザインは、デザインの基礎スキルを身につけられると思うので、どんどんやったら良い派ですが、リデザインする際は何かにフォーカスすると振り返りしやすく技術を積み上げやすいです。今回は、僕もクラシルのリデザイン案を作りつつそのコツを書いてみたので参考になればと思います。デザイン力を鍛えるリデザインのコツインターン採用でリデザイン課題を出す

正しいHTMLを書く方法

webを学び始めた人からよくいただく質問で「HTMLの使い方が合ってますか？」と聞かれることが多いです。まずはじめに書きますが、正しいHTMLかどうかを全て完璧に「チェック」して「修正できる」ツールは2019年10月現在ありません！！なぜなら「正しいHTML」って定義がとても難しいので、結局は人間が判断しないといけない分野になり、AIなどではまだ判別が難しいという点があるのと、そもそもの正しいルールが少しフワッとしている点があるから、と個人的に思っています。ところ

画像の書き出し形式｜WDSG策定チーム［#09］

みなさんは普段、Photoshopなどで行う書き出し画像のファイル形式は、どんな形式で書き出しますか？ WDSG策定チーム専用Slackにて、メンバー間で談義を行い［画像の書き出し形式］のガイドラインを作成しました。 WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。１．画像の書き出し形式１）基本的に、画像の書き出し形式は［

メンテナンス性の高いCSSコーディングが大切な理由

はじめまして！TAK(@tak_dcxi)と申します。 noteのアカウントを取得して数週間経つのですが、一度も投稿をしていないはずなのにフォロワーが15人もいたのでそろそろ手を出さないとなーと思いながら書いております。今後もnoteを投稿していこうとは思っておりますが、僕が投稿するnoteは基本的に自分自身への備忘録のつもりで書いています。今回のnoteもあくまで自分の感想の紹介であり、世間一般の考え方とは違うものも含まれます。あくまで参考としてご覧いただけますと

フォローしませんか？

2019年10月の記事一覧