コツやルールを押さえて魅力的なデザインに！デザインに関する記事まとめ

デザインと一言でいっても、その対象や目的はさまざまです。Webデザイナーは、個々に合わせたデザインを行い、そこには多くの工夫やアイデアが施されています。

今回は、そんなデザインのヒントになるようなブログ記事を集めてみました。デザインのルールや生産性がアップするテクニックについて書かれた記事も併せてご紹介。Webデザイナーの方は、ブログを覗いてみてはいかがでしょうか？

※尚、こちらはPR記事ではございません。編集部が独自にテーマを選び、サイト担当者に許可を頂いて作成している記事です。また、記載中の内容は、執筆時の情報になります。

簡単60秒！あなたにピッタリの案件が届く 無料会員登録

Webデザインのトレンド！「スクロールテリング」って何？（株式会社マインドファクトリー）

愛知県にて、WebマーケティングやWebサイト制作、Webシステム開発、SNS広告などのデジタルマーケティング関連事業を展開している、株式会社マインドファクトリー。認知・集客においてクライアントが抱える課題と向き合い、正確かつ効果的なWeb戦略を策定し、確実に成果に繋がるデジタルマーケティングを提案しています。
もちろん、時代と目的に合った施策を提案するため、最新情報の収集にも余念がありません。ニッチな情報までも網羅したうえで、クライアントへ提案するWeb戦略は、根拠に基づいており説得力があるでしょう。

同社のブログ記事《Webデザインのトレンド！「スクロールテリング」って何？》を見ても、常に情報と知識をアップデートしていることが窺えます。

当該記事で紹介されているのは、昨今のWebサイト制作で取り入れられている「スクロールテリング」という手法について。
筆者によると、この手法はUI/UXデザインのトレンドであり、スクロールするとストーリー仕立てを表現できるデザインであることから、特にランディングページのような長編記事での活用が多いようです。

記事中では、スクロールテリングを用いてデザインしたWebサイトがいくつか紹介されています。
それぞれ、画面のスクロールに合わせて文字やエフェクト、動画が動きながら展開されていき、まるで物語を読むような感覚で没入感に浸りながらWebサイトの世界観を楽しめる仕様となっています。

同手法の特徴は、ストレスなく操作できることに加え、ユーザーの興味を惹きつけ、スクロールダウンに連動してストーリー展開することでコンテンツの理解に繋がりやすいことです。
なお、同手法を取り入れるうえでWebサイト作成時に注意すべきことがあるので、こちらも併せて記事にて確認してみてください。

魅力的なデザインのWebサイトを作成したい方や、既存のWebサイトをリニューアルしてトレンドのデザインで仕上げたい方は、ぜひ導入を検討してはいかがでしょうか。

■Webデザインのトレンド！「スクロールテリング」って何？
https://www.mindfactory.co.jp/blog/7697

LPのメインビジュアル（First View）作ってみた。（ゆるっとWEB系BLOG）

LP作成において、最初に目にするメインビジュアルのデザインは、とても重要です。しかし、自ら手掛けたデザインを自身で評価するのは難しいもの。誰かに添削してほしい…そう思っているデザイナーの方も多いのではないでしょうか？

そこで今回ご紹介するのは、フリーランスのWebデザイナーとして活躍するMAHOさんの記事《LPのメインビジュアル（First View）作ってみた。》です。

MAHOさんは、CAから未経験でWebデザイナーに転身。現在はWordpressのオリジナルテーマでのWebサイト制作やイラスト案件などを中心に、幅広く活躍されています。

MAHOさんは、参加しているオンラインコミュニティのワークショップで架空のメインビジュアルを制作したのだそう。記事では、架空のLPのメインビジュアルを制作し、プロに添削してもらったらどう変化したのかというプロセスが紹介されています。
MAHOさんが制作した架空メインビジュアルのテーマは、「美容化粧品の紹介」。商品写真やターゲットの指定など、テーマに沿って30分で制作したのだそうです。

記事では、実際にデザインしたメインビジュアルのBeforeとAfterの画像が貼付されており、一目でどのように変化したのかが分かるようになっています。さらに、講評を受けて学んだことも丁寧に記載。デザインの微調整を繰り返す中で、どのように変化していったのかも分かりやすく紹介されています。

MAHOさんは、最後に「他の人の作例を見たり添削してもらえると、学べることが多いな〜と強く思った」と記載。デザインに自信のない方こそ、勇気を持って見てもらうと良いと語っています。
MAHOさんのブログ『ゆるっとWEB系BLOG』では、このほかにもWebデザインやフリーランスに役立つ記事が複数掲載されています。ぜひ、ブログを覗いてみてはいかがでしょうか？

■LPのメインビジュアル（First View）作ってみた。
https://blog.maho--design.com/design02/

バナーデザイン作成する方必見！バナーデザインの4つのコツとタイプ別サンプル事例まとめ（ACワークス株式会社）

バナーの目的は、一目でユーザーに興味を持ってもらうこと。画像に目を留めたり、印象に残ったりするようにデザインすることが重要なポイントとされています。
そこで、今回注目したのは、《バナーデザイン作成する方必見！バナーデザインの4つのコツとタイプ別サンプル事例まとめ》というブログ記事です。

本記事では、バナーデザインで押さえておくべきコツとして、以下の4点を伝えています。

1．文字は短く＆簡潔に
メッセージが一瞬で伝わるようなバナーを作成するには、文字数を少なく簡潔に配置することが大切です。同項目では、伝えたいキーワードを一目で分かるようにするためのコツを紹介。また、ターゲットにダイレクトに伝えるための方法として、「アピール文言」を大きくレイアウトした強調するデザイン手法をおすすめしています。

2．画像で世界観を演出
伝えたい内容を瞬時に印象づけるためには、写真やイラストなどの画像のデザインも重要です。キーワードが少なくても、イメージが湧いてくるような画像を差し込むことで独自の世界観を表現できる、といった手法について書き綴られています。

3．色味で印象をコントロール
バナーデザインでは、文字の色や配色に悩むことも多いでしょう。背景とのコントラストをつけることで宣伝効果がアップするため、カラー選びも重要な要素の一つです。同項目では、宣伝内容と関連性の高い色味を採用する、色味を統一するといったポイントを伝えています。

4．伝わりやすいレイアウト
最終項目では、「Zの法則」を用いたレイアウト方法を解説。人の目の動きに注目し、どのようにレイアウトするとよりよい配置ができるのか、情報が伝わりやすくなるのかといった工夫を紹介しています。

記事内ではイメージを掴みやすいよう、同社の［デザインAC］のバナーテンプレートの画像を用いて分かりやすく説明されており、デザイン初心者でも直観的に学ぶことが可能です。バナー作成時には、ぜひ4つのコツも取り入れてみてくださいね。

デザインACには、バナーテンプレートのほか、キーワードだけでプロが作ったかのようなプレゼンテーション資料を生成できる［プレゼン資料AI］機能もあります。業務効率をアップさせたいときや記憶に残るような資料を作りたいときなどに、ぜひ活用してみてはいかがでしょうか。

同記事が掲載されているのは、『design AC blog』というブログサイトです。サイト内では、無料で使えるデザインツール［デザインAC］の操作方法やデザインに関する知識などについて解説。また、おすすめの活用法も発信されているので、参考にしながら自分らしいバナーデザインを仕上げることができるでしょう。

■バナーデザイン作成する方必見！バナーデザインの4つのコツとタイプ別サンプル事例まとめ
https://www.design-ac.net/articles/2021/12/28/banner-design/

トンマナとは？オウンドメディア作成で役立つトンマナの作り方（クランチタイマー株式会社）

トーン（tone）＆マナー（manner）の略称として、業界問わず使用されている「トンマナ」。
中でも、Webデザインの制作においては必要なルールとして認識されているようです。
Webデザインは、コンセプトや雰囲気に一貫性をもたせることで、ユーザーに与える印象を統一化できます。そのため、トンマナをどのように作っていくかがデザインのポイントともいえるでしょう。

そこで今回は、クランチタイマー株式会社が運営するブログをご紹介します。
同社は、アプリ・Webサービスなどの開発を手掛けるWebデベロッパーとして事業を展開。
ブログには、Webだけでなく、システム開発、トレンドツールのほか、課題解決までのプロセスを記述した記事など、読み応えのある記事が揃っています。

中でも、今回注目したいのが《トンマナとは？オウンドメディア作成で役立つトンマナの作り方》の記事です。
こちらの記事では、オウンドメディアのトンマナを作るにあたって、ライティングとデザインそれぞれの目線で、必要なポイントが詳細に書かれています。
たとえば、ライティングでは表記や段落、改行といった部分を事前に統一しておいたほうが良いとのこと。またデザインでも、フォントや余白の取り方でトンマナを意識できるのだそうです。
そのほか、双方に必要な「ペルソナ」「目的」「キーワード」についても言及。多角的な視点からデザインを捉えていることが分かる内容になっています。

おわりには「トンマナは一度作ったら終わりではなく、自社や時代の変化にあわせて常にアップデートし続けていくことも大切」と言及。同社では常にアンテナを高く張ってデザイン制作に取り組んでいる様子もうかがえます。

デザインの統一感にお悩みの方、デザインのコツを知りたい方、新しい視点でデザイン制作に励みたい方など、ぜひご一読ください。
新しい発見があるかもしれませんよ。

■トンマナとは？オウンドメディア作成で役立つトンマナの作り方
https://www.crunchtimer.jp/blog/16053

【デザイナー必見！】生産性を高めるポモドーロテクニックをデザイナーが実践するメリット！（inouek Design）

今回ご紹介する記事《【デザイナー必見！】生産性を高めるポモドーロテクニックをデザイナーが実践するメリット！》では、冒頭にデザイン制作でよくあるエピソードが書かれています。

・やっとの思いでできたデザイン。翌日見直したらイマイチだった
・降ってこないアイデア閃きを待ち続けて1日が終わる
・考えすぎて、デザインの良し悪しが判断できなくなる
・1日8時間。集中力が続かない

こちらの記事を書いているのは、滋賀・京都を中心にフリーランスのデザイナーとして活動している井上カツオさん。
上記は、デザイン制作をしている筆者自身の「デザイナーあるある」であり、同じデザイナーとして共感できるという方もいらっしゃるのはないでしょうか。

筆者の経験によると、どれだけ時間を費やしても、良いアイデアはいつもすぐに出てくるわけではないそうです。
そこで筆者は、品質にこだわりながら、生産性の向上を叶えたいデザイナーに向けて「ポモドーロテクニック」を提案。
時間管理のテクニックの1つであるポモドーロテクニックは、時間管理術や集中力を維持して生産性を高めることにつながるのだそうです。

筆者は、ポモドーロテクニックを実践することで、下記4点のメリットを得られると書いています。

・時間とタスクの管理
・集中力の持続
・立ち止まってデザインを見直す
・クリエイティブな能力が向上

次に、ポモドーロテクニックを実践するために便利なアプリを紹介しています。
通常のタスク管理アプリにポモドーロテクニックの機能が付いたアプリや、ポモドーロテクニックに特化したアプリなどさまざま。
アプリの説明文と一緒に、総合評価を分かりやすく表示しているので、自分にぴったりなアプリが見つかるかもしれませんよ。
最後のほうに、実践してみて「作業時間の25分はあっという間に終わり、休憩の5分がメチャクチャ長く感じるようになる」という感想を記述。
効率的な仕事術に興味のある方は、ぜひ読んでみてくださいね。

■【デザイナー必見！】生産性を高めるポモドーロテクニックをデザイナーが実践するメリット！
https://inouek.jp/workstyle/pomodoro-recommend/

【Vol.2】Adobe XDでコーディングしやすいデザインデータをつくろう！（line-height編②）（株式会社マイロプス）

2023年1月に販売が終了したAdobe XDですが、WebデザインのツールとしてXDユーザーのニーズはまだまだ高いようです。

そこで、XDユーザーに向けに役立つ記事を発信しているブログに注目しました。
記事タイトルは《【Vol.2】Adobe XDでコーディングしやすいデザインデータをつくろう！（line-height編②）》。ブログの運営元であるマイロプス社のデザイナーizumiさんが書かれた記事です。

当記事は「line-height編」の第2回目として発信されたもの。XDユーザーの困りごとを解決する方法について、以下2つのことが綴られています。

・見出しパーツに設定するline-heightについて
・XDでのデザインデータ作りをスピードアップかつ省力化するためのヒント

見出しパーツの設定は「line-height: 1.5;以上にすること」がおすすめなのだそう。運用中に、デザイン修正により文字量が増えることを想定した結果、この設定がベストだと感じたそうです。
また、チームでWebデザイン作る際には「耐久性のあるデザイン（修正やイレギュラーにも強いデザイン）」という視点を持ち合わせておくことの重要性を強く感じたと伝えています。

そして、XDで効率よくデザインデータを作るヒントとして、文字にマスクをかけずにコーディングする方法も紹介。文字数が変わってしまうと手間になるので、マスクを省いて作業の効率化を図っているのだそうです。
細かな部分にも焦点をあてることで作業スピードが向上し、より良いWebデザイン制作につながることでしょう。

「line-height編」のシリーズ第1回目では、概要をはじめ、実践した感想やメリット・デメリットについて書かれていますよ。また、同社では、XDからFigmaへ移行する方向けの記事も発信する予定とのことですので、ぜひほか記事もあわせて目を通してみてくださいね。

■【Vol.2】Adobe XDでコーディングしやすいデザインデータをつくろう！（line-height編②）
https://mylops.jp/blog/000213.html

簡単60秒！あなたにピッタリの案件が届く 無料会員登録