デザインの学習記事

Webデザインがトップレベルになるガイド

「なぜか思うようなデザインができない。」「どこかやぼったい。」「クライアントからのフィードバックに対応できない。」そのうような悩みがあるデザイナーの根本的な原因は大きく２つあります。デザインの基礎がそもそも身に付いていない。 Webデザインのトレンドを習得できていない。デザインの基礎は余白感・フォントの選び方・カラーの配分・レイアウトのルールなどの知識とそれを実践できる身体スキルが培われている必要があります。ただ、最初の悩みで大きな原因になっているのがい

答えのないデザインの戦い方

デザインに正解はない。だからデザイナーは悩む。それなのに、クライアントや上司に「このデザインはどうですか？」と相談するのはどうしてだろう？この矛盾に気づいているだろうか。あなたに正解がわからないように、クライアントや上司も正解は知らない。そもそもデザインだけでなく、このVUCAの時代に答えのある仕事の方がマレだ。まず、認識を改めよう。あなただけでなく、雲の上の存在のような上司も優秀なクライアントも、誰も彼も答えのないゲームの中で戦っている。そして答えのないデ

デザインの言語化を高めるには、デザイン力より理解力

デザインの言語化を苦手にしているデザイナーは多い。なぜこのデザインなのか？を説明できないと、クライアントやエンジニアとの合意をとることは難しい。それでは、なぜデザインを説明できないのか？それは、デザインを「客観視」できておらず、「整理」できていないからだ。デザインの客観視まず、客観視から始めよう。これは単純にデザインのお勉強が必要になる。ゴシック体と明朝体のメリットとデメリットカラーが与える様々な印象目の錯覚によるレイアウトの調整認知バイアスによる適切

デザインの基礎のキ 3選

デザインのメンティーしていて気になった、デザインの基礎のキについて書きます。今日は大きく以下の3つを覚えてください。もしくは「スキ」してください。身体感覚や目の錯覚を知識として学ぶこと。デザインの基本は情報の整理。神は細部に宿るはガチ。最終的なクオリティは1pxに左右される。以上。といっても、何言っているの？という感じだと思うので、今日はより具体的にhowを書いていきます。 1. 背景のカラーを変えるなFigmaの背景カラーは#E5E5E5にしましょう。背景

タイポグラフィの基礎のキ 3選

基本的なデザインのスキルはタイポグラフィの扱い余白の扱いの2つを見れば分かります。今回はタイポグラフィの基礎中の基礎について書いていきます。 1. 英数字で日本語フォントは使うなタイポグラフィをすごく拡大してよーく観察したことはありますか？下の画像は異なるフォントで記入した「aと1」です。比べてみると形が大きく違うことが分かります。どちらが、日本語フォントでどちらが欧文フォントか分かりますか？正解は、左が「ひらぎの角ゴ」右が「Helvetica」です。日

センスを鍛える、Webサイトのオリジナル化

Webサイトを模写できたけど、オリジナル化でつまずく初級デザイナーさんは多いです。一番の課題は、オリジナル化する過程でクオリティが下がってしまうことでしょう。ギャラリーサイトで掲載されるレベルのクオリティを保ったままオリジナル化するには、あなた自身のセンス（審美眼）を鍛えるしかありません。まず、認識しておいて欲しいのはクオリティが下がってしまうのはあなたのセンスのレベルが低いからです。クオリティの高いデザインは全体の余白感、要素の配置、フォント、文字間、行間、カラーな

デザインのつくり方

新卒２年目の時に博報堂のコピーライターさんと、ヤングカンヌに挑戦していました。そのコピーライターさんは半端ない量の案件に関わっており、どうやって大量のクオリティの高いコピーを考えられるのか不思議でした。ヤングカンヌが終わった時に、その疑問をぶつけてみると「24時間考えていて、机の上では書くだけ。」とおっしゃっていました。クリエイティブを早く仕上げるコツはここにあります。そのことを書こうと思ったら、自分よりもわかり易く記事にしてくれていたので、まずは以下を読んでみ

デザインスキルを向上させる、時間の作り方

私のメンティーさんはデザインの勉強を始めたばかりの方や、デザインスキルに自信のない方が半数近くいます。そのようなメンティーさんには以下のnoteで書いたデザイン練習のフローをやってもらっています。（たくさんのいいね！ありがとうございます！）デザインにある程度慣れているレベルの方なら難しくないフローですが、初級者の方だと慣れるまでは難しいです。そもそも、練習する時間がない場合があります。平日は仕事で忙しいく、夜遅くまで業務があるので帰宅したらヘトヘト。休日だってゆっく

デザインコンセプトの考え方

Webデザイン、LPデザイン、アプリデザインを提案するときに、デザインコンセプトと一緒に提案していますか？今日はデザインコンセプトについて書いていきます。デザインコンセプトの定義デザインコンセプトを検索すると、「サイトデザインのイメージに一貫性を持たせること」みたいなことが書いてあります。しかし、私のデザインコンセプトの定義はもう一段抽象度を上げて、「何のためにどう表現するかを定めた基本概念」と定義しています。ストーリーで提案するなにをどう表現するかを定義したデ

実は難しい？Webサイトの正しいキャプチャ方法

ギャラリーサイトからWebサイトを正しくキャプチャしていますか？MacのディスプレイやFIgma、ブラウザの仕様をきちんと理解していないと、実は正しくキャプチャすることはできません。この記事では、正しいキャプチャの仕方をPCとSPに分けて説明していきます。MacのGoogle Chromeを利用して、Figmaにアップロードすることを前提にして話します。 PCのキャプチャ方法1. 動きがあるサイトはまず下までスクロールしておく動きがあるWebサイトだとうまくキャプチ

WEB&UIデザイナーに最高の3Dツール Spline

WEB&UIデザイナーに最適な無料の3DツールのSplineを紹介します。サイトはこちら。Figmaのようにブラウザからでも利用できます。サンプルを見ると分かりますが、Blenderのように超クオリティの3Dモデリングを作れるわけではありません。しかし、WEB&UIデザイナーが手軽に利用するにはちょうどいい3Dツールになっています。特徴としてはレンダリング不要。美しい状態のまま作成・編集ができる。操作が直感的。特にカラーは少しいじるだけでそれっぽくなる。

それっぽいUIをデザインする方法

下のUIデザインは、私のメンティーさんがポートフォリオのために作成したUIデザインです。これは「小さな目標を毎日5分間継続させる」サービスとのこと。このUIデザインを、メンティーさんの参考用に2画面だけ私がデザインし直しました。それが以下になります。今回はこの改善フローを思考プロセス含めて書いてみます。何かしらのデザインの参考になれば嬉しいです。 1. タイマー系アプリのデザイン探索思考：このサービスはタイマー系アプリだから、タイマー系のアプリってどんなのがあるか

#UIデザイナー