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

9 days ago

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

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

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

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

時には「ダサさ」も大切!?伝わるバナーデザイン(株式会社ワンクルー)

株式会社ワンクルー(One-clue)は、宮城県仙台市にあるホームページ制作会社です。代表をはじめ、所属しているスタッフのほとんどが女性で、女性目線、主婦目線、ママ目線でのホームページ制作を得意としています。

記事スクショ


なかでも、分かりやすく洗練された、清潔感のあるホームページの制作に定評があり、求人・採用ページ、美容サロンや病院、クリニック、歯科医院のホームページなどを多く制作されていることが特徴です。
こちらでは、同社のブログより《時には「ダサさ」も大切!?伝わるバナーデザイン》という記事を紹介します。

記事スクショ

記事によると、売上につなげたいバナー広告やチラシなどは「おしゃれ」よりも「伝わりやすさ」を重視する必要があるそうです。
そういえば、Webサイトで見かけるバナーや街で見かける看板など、目に留まるのは「どこかダサいデザイン」だったりしますよね。
今は、ほとんどの人がスマホで情報収集する時代。スマホはスクロールのスピードが速いため、ぱっと見た瞬間に思わず目に留まるような「伝わりやすさ」が大切だといいます。いくらおしゃれで洗練されたデザインでも、「伝わりやすさ」のないデザインはあっという間にスルーされてしまうのだそうです。

しかし、「ダサくて伝われば良いのであれば、素人でバナー作っても良いのでは?」というと、そうではありません。その「ダサさ」は「プロのダサさ」を追求したもので、デザインセンスの軸を明確に確立しているデザイナーが高度なテクニックを駆使し、見やすさ・分かりやすさ・インパクトが絶妙なバランスで成り立つ「ダサさ」を生み出しています。
バナーデザインを考える際は、独りよがりのおしゃれ感になっていないか、きちんと「伝わるデザイン」になっているかをチェックすることが大事だそうです。

こちらでは、記事の内容について軽く紹介しました。記事本文には、目に留まるデザインの特徴について、事例を踏まえて詳しく書かれていますよ。気になる方はぜひ、記事を一読してみてくださいね。

■時には「ダサさ」も大切!?伝わるバナーデザイン
https://www.one-clue.com/information/blog20231001/

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/
トップページ
https://blog.maho--design.com/

バナーデザイン作成する方必見!バナーデザインの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/
トップページ
https://www.design-ac.net/articles/

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

トーン(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秒!あなたにピッタリの案件が届く 無料会員登録

あなたにピッタリ
フリーランス案件が見つかる

  • 110万件以上のフリーランス案件から一括検索

    10万件以上のフリーランス案件から一括検索

  • 2あなたの経験やスキルに適した案件をメールでお知らせ

    あなたのプロフィールからおすすめの案件・求人

今すぐ無料登録

あなたにピッタリ
フリーランス案件が見つかる

  • 110万件以上のフリーランス案件から一括検索

    275,185の案件を保有しており、エンジニアやクリエイター向けを中心にたくさんの案件を一括検索可能です。

    ※ 7月18日(Thu)更新

    10万件以上のフリーランス案件から一括検索

  • 2あなたの経験やスキルに適した案件をメールでお知らせ

    マイページに入力して頂いた経験や希望条件に合わせて、ご希望にマッチした案件をメールでお送りするので効率的な案件探しが可能です。

    あなたのプロフィールからおすすめの案件・求人

今すぐ無料登録

フリーランスの案件を検索する

都道府県を選択
  • 関東

  • 北海道・東北

  • 甲信越・北陸

  • 東海

  • 関西

  • 中国

  • 四国

  • 九州・沖縄

あわせて読みたい関連記事

集客アップにつながる!参考にしたい「SEO施策」のブログ記事まとめ

SEOは[Search Engine Optimization(直訳すると「検索エンジン最適化」)]の略称です。具体的には、検索結果の上位表...

SEO

2 years ago

LP制作の悩みを即解消!すぐに試したくなる集客方法や改善方法を紹介

「ユーザーの目を惹くようなページを作りたい」「集客をもっと上げたい」という思いから、クオリティの高いLP(ランディングページ)の制作に興味を...

a year ago

フロントエンドエンジニアに役に立つ資格とは?資格とその勉強方法をチェックしよう!

Webサイトやアプリケーションにおいて、ユーザーの目に触れる部分がフロントエンドです。フロントエンドは、ユーザー側の目線を最も重視する部分。...

資格フロントエンドエンジニア

4 months ago

資格で実力を証明!データサイエンティストに役立つ資格の合格体験記まとめ

データサイエンティストの資格には、データサイエンティスト検定や基本情報処理技術者試験/応用情報技術者試験、統計検定などさまざまな資格がありま...

資格データサイエンティスト

a year ago

AI関連の資格取得を目指すなら!事前にチェックしておきたい合格体験記の紹介

AIや機械学習の分野を深く理解するには、資格取得を目指して勉強するという方法もおすすめです。AIに関連する資格として挙げられるのは、Azur...

資格学習

5 months ago