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

デザインの「上達」に効果があった勉強法まとめ

どうもせんざきです！noteは毎回気合い入れて書いているので、あんまり頻繁に更新できていなくて恐縮なのですが、結構反響いただくことが多いので定期的に出したいと思っている所存です。さて、今回のテーマについてですが、「Photoshop(or Illustrator)使えるようになったけど、なんかダサいデザインになる、、、」とか、そういう悩みありません、、？わたしはあります！！！！しかも、その「ド初心者じゃないけど、一人前でもない」っていう人向けの情報って

僕がおすすめするデザイン系Webサービスまとめ

2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.03 追記)こちらのnoteですが、公式マガジン「#デザイン記事まとめ」に掲載され

100

Photoshop画像アセットの生成ルールまとめ

Photoshopの「画像アセットの生成」がとても便利で重宝しています。ルールがややこしいので、一覧で見られるようにまとめましたので参考になれば幸いです。 ……… 「画像アセットなにそれ？」って人は、下部にAdobeの公式解説サイトを掲載しておくのでそちらをご参照ください。他にもわかりやすく書いているサイトさんがあるので、初めての人は「画像アセット photoshop」で検索をおすすめします。画像アセットとは？・レイヤー名に名前をつけると画像が自動生成される便利機能

個人的に実践している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

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

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

「デザイン貯金」のやり方

「デザイン力」とは生まれ持ったセンスよりも、どれだけたくさんのデザインに触れてきたか、のほうが大事になります。 webサイトのデザインをするときなんかは、そのサイトを1つデザインするまで「目標 100サイトのデザインをチェックする」をしましょう！ダラダラとたくさんのデザインを流し見だけしてても、どんどん忘れていってしまうのが人間です。ですのでここで紹介するおすすめのやり方でやってみてください。このルールでデザインを集めておくと後からとても役に立ちますよ ※この記

#Webデザイン