ブログBLOG

AIにおすすめされるWebサイトとは？Webデザイナーが知っておきたいLLMO入門

近年、ChatGPTやGeminiをはじめとしたAIの利用が急速に広がっています。従来はGoogleなどの検索エンジンでキーワードを入力し、検索結果から必要な情報を探すのが一般的でした。しかし現在では、AIに質問を投げかけ、その回答から情報を得る人が増えています。 この変化に伴い、「検索結 ...

Webボタン作成で学ぶFigmaのコンポーネント・バリアント入門

FigmaでWebデザインをする上で必須となってくるのが、作成したデザインを再利用することができるコンポーネントの作成です。 ボタン・見出し・カード型UIなど、同じサイト内で共通で使うパーツを管理することができます。 「コンポーネントって何が便利なの？」 「バリアントってなに？いつ ...

Webデザインの“素人っぽさ”を消す4つのチェックポイント

「なんとなくダサい…」 「頑張って作ったのに、なぜか垢抜けない…」 Webデザインをしていると、そんな壁にぶつかることはありませんか？ 実は、デザインのクオリティを左右しているのは“センス”ではなく、「設計のルール」です。 余白、文字サイズ、配色、CTA、情報整理――。 ...

Figmaで使う「8pxルール」とは？初心者でもレイアウトが整う余白設計の基本

『なんとなく…ここの余白はキリのいい数値で15pxでいいか…。』 Webデザインにおける、この「なんとなく」は局所的な見た目のバランスを見て決められた、手抜きと言われても仕方がない数値です。 「なんとなく」を繰り返すことにより、デザインはまとまりがない上、ルールがない設計はチーム ...

Webデザイナーが「ディレクション視点」を持つべき理由とは

「自分なりに意図を持って制作しても、クライアントとの認識のズレが埋まらない」 「本質的ではない修正対応に、多くの時間を割いてしまっている...。」 そんなもどかしさを感じてはいないでしょうか。 日々、ピクセル単位の調整や最新のトレンド追求に心血を注いでいても、肝心の「なぜこのデザインな ...

Webデザインがスムーズに進む案件の共通点｜進まない案件との違いとは

Webサイト制作やデザイン制作に携わっていると、「驚くほどスムーズに進む案件」と「なぜか毎回止まってしまう案件」があることに気づきます。 同じデザイナー、同じ制作体制でも、案件の進み方は大きく変わります。 その違いは、単に「クライアントの相性」や「予算」だけではありません。 実は、案件 ...

Figmaで「初めて」Webデザインをするときに、最初にやるべき3つのこと

「FigmaでWebデザインをしたい！」 そう思ってFigmaを開いたはいいものの、 真っ白なページを見て何から始めていいのかわかりませんでした。 この記事では、そんな数年前の筆者のように、 Figmaで初めてWebデザインをするときになにからはじめたらいいのかわからない方へ ...

WEBアクセシビリティ対応｜Webデザイナーが知っておきたいコントラスト・フォント設定のポイント

「アクセシビリティ対応」と聞くと、何か特別な対応や難しい要件定義が必要だと感じていませんか？ 実は、日々のデザインワークで意識している「見やすさ」や「使いやすさ」を、明確な数値やルールに基づいて調整するだけで、Webアクセシビリティの品質は劇的に向上します。 今回は、Webデザイナ ...

デザインは並べるだけじゃない！情報整理ができるデザイナーになるための考え方とは

「デザインしたはずなのに、なぜか伝わらない」「要素を置いてみたけど、なんだか読みづらい・見にくい」 そんな経験はありませんか？ 特に、バナーやLP、Webページを作ったときに、「何を伝えたいのか分からない」「情報はそろっているのに、なぜか反応が悪い」と言われた経験がある方も多いのではない ...

【Figma】セクション・フレーム・グループの違いをまとめてみた

日本語版も登場し、ブラウザベースのインターフェース・デザインツールとして大人気のFigma。 WebデザインツールといえばPhotoshopを長年使用してきた筆者にとって、 FigmaはAdobe XDよりも理解しやすいインターフェイスなので とても重宝しています。 なにより無料 ...