TIPS

【webにも紙にも使える】フローデザインの「基本〜作り方〜事例」までのすべてを紹介。

更新日:

 

アニメーション

 

フローデザインの作り方が、分からない方向け。

 

「”流れを示す図”を作りたいけど、どうやって作ればいいか分からない」

「いまいち上手く作れない」

「簡単にできる、作り方を教えてほしい」

 

こんな疑問を解決していきます。

 

※この記事は、3分くらいで読み終わります。

読み終える頃には、「フローデザインの作り方」が理解できるはず(`・ω・´)ゞ

 

本記事の内容

1:【基礎知識】フローデザインを作るための基本を解説。

2:【作り方】初心者でもできる、フローデザインの作り方を解説。

3:【事例】おすすめにフローデザイン事例を紹介。

 

こんにちは!takaです。

グラフィックデザイナー・クリエイティブディレクター歴12年。

毎月30万〜50万の収入を、コツコツ稼ぎつつ生きています。

 

また、今のLINE@のお友だち登録数は、402人で、

毎月のブログ訪問者は1万人くらいです。

 

グラフ

 

今回のお話は、「フローデザインの作り方」について。

今回でいうフローデザインとは、下記のようなやつです

 

フローデザイン

流れを示す図のことですね。

一度は見たことがあるかもですが、いざ作るとなると、わりと難しいと思います。

 

今回は、初心者の方でも「マネしただけで簡単にできる、フローデザインの作り方」を解説していきます。

 

「フォントサイズ」「余白の取り方」「装飾の加え方」など、すべて数値で解説しているので、わりとすぐに出来ると思います。

 

3分少々、お付き合いください(`・ω・´)ゞ

 

 

 

1:【基礎知識】フローデザインを作るための基本を解説。

本と子供

 

まずは、フローデザインを作るための、基本を解説します。

 

抑えるべき「基本」は、下記の2つです。

 

・フローデザインに含める「必要要素」を知る。

・フローデザインの「種類」を知る。

 

こんなかんじ。

詳しく解説します。

 

 

基本1:フローデザインに含める「必要要素」とは。

 

フローデザインは、主に下記の要素で成り立っています。

 

・順番を示す「数字」

・内容を示す「見出し」

・流れを表す「要素(矢印や線など)」

 

こんなかんじ。

 

基本的に、この3つを加えれば、フローデザインとして成立します。

 

そして、フローを「さらに説明的」に見せたい場合は、下記を加えるとOKです。

 

・写真やアイコン

・数行の説明文

 

こんなかんじ。

まとめると、下記のとおりです。

 

【必ず含める要素】

・数字

・見出し

・流れを表す要素(矢印など)

【必要に応じて含める要素】

・写真

・アイコン

・説明文

 

具体的には、下記のようなフローデザインです。

 

【必ず含める要素】を掲載したフローデザイン。

フローデザイン

 

【必要に応じて含める要素】を掲載したフローデザイン。

フローデザイン

 

こんなかんじ。

まずは、各必要要素を把握しましょう。

 

 

基本2:フローデザインの「種類」とは。

 

フローデザインの種類は、下記の2つがあります。

 

・縦型

・横型

 

この2つです。

さらに詳しく解説します。

 

 

縦型のフローデザインの特徴。

 

縦型のフローデザインは、下記のようなものです。

 

フローデザイン

 

上から下へ向けて、視線が流れる形です。

 

このザインの特徴は、視線の移動がシンプルで読みやすい点。

読み手のことを考えると、一番みやすいデザインかもです。

 

 

横型のフローデザインの特徴。

 

横型のフローデザインは、下記のようなものです。

 

フローデザイン

 

左から右へ向けて、視線が流れる形です。

 

このフローデザインの特徴は、「使用のしやすさ」です。

 

横型は、紙面の収まりがよく、「紙媒体とWEB」のどちらにも使用しすいです。

 

 

以上が、フローデザインの基本知識です。

次の項では、数値を使いながら作り方をレクチャーしていきます。

 

 

2:【作り方】初心者でもできる、フローデザインの作り方を解説。

女性

 

今回の記事では、下記の4つを解説します。

 

フローデザイン

フローデザイン

 

上の2つは、「必ず含める要素(数字・見出し・流れを表す要素)」を使ったもの。

下の2つは「必要に応じて含める要素(写真・アイコン・説明文)」を使ったものです。

 

この4つを、「フォントサイズ」「字送り」「余白のとり方」「ポイント」の順に解説していきます。

 

 

【フローデザイン1】横型の作り方。

 

はじめに、下記の横型のデザインを作ります。

 

フローデザイン

 

いちばん基本的なフローデザインです。

 

 

【フローデザインの作り方1】フォントの大きさを決める。

 

フォントサイズは、下記の数値にするとOKです。

 

フローデザイン

 

番号と見出しは、「どちらも同じくらい重要な情報」なので、優劣をつけずに、同じフォントの大きさにしています。

 

 

【フローデザインの作り方2】字送りのサイズを決める。

 

字送りは、下記の数値にするとOKです。

 

フローデザイン

 

字送りの設定がわからない方は、上図右下のボックス部分を変更すればOKです。

 

 

【フローデザインの作り方3】余白を空ける。

 

余白の取り方は、下記を目安にするとOKです。

 

フローデザイン

 

左右は、文字サイズの「約半分くらい」の余白を取ればOKです。

また、「天」の余白は、「文字一個分」の余白をとると、すっきりして見やすくなります。

 

 

【フローデザインの作り方4】その他のポイント。

 

その他のポイントは、下記のとおりです。

 

フローデザイン

 

「四角の枠」と「流れを示す線」の太さは、同じほうがキレイに見えます。

「流れを示す線」は、「図の中心」におくと、見え方が安定します。

また、各順番の間隔は「枠の半分くらい」を設ければOKです。

 

デザイン初心者の方は、まずはこの基本の形を覚えましょう。

 

 

【フローデザイン2】縦型の作り方。

 

2番目に、下記の縦型のデザインを作ります。

 

フローデザイン

 

これも基本的なフローデザインです。

 

 

【フローデザインの作り方1】フォントの大きさを決める。

 

フォントサイズは、下記の数値にするとOKです。

 

フローデザイン

 

一つ目の横型とおなじです。

 

 

【フローデザインの作り方2】字送りのサイズを決める。

 

字送りは、下記の数値にするとOKです。

 

フローデザイン

 

これも、一つ目の横型とおなじです。

字送りの設定がわからない方は、上図右下のボックス部分を変更すればOKです。

 

 

【フローデザインの作り方3】余白を空ける。

 

余白の取り方は、下記を目安にするとOKです。

 

フローデザイン

 

天地は、文字サイズの「約半分くらい」の余白を取ればOKです。

また、左右の余白は、「白地の四角の中心」にすれば、視線の流れにそった、見やすいデザインになります。

※文量によっては、左揃えでもOKです。

 

 

【フローデザインの作り方4】その他のポイント。

 

その他のポイントは、下記のとおりです。

 

フローデザイン

 

「四角の枠」と「流れを示す線」の太さは、同じほうがキレイに見えます。

「流れを示す線」は、「白地の四角の中心」におくと、見え方が安定します。

また、各順番の間隔は「枠の半分くらい」を設ければOKです。

 

デザイン初心者の方は、この基本の形を覚えましょう。

 

 

【フローデザイン3】横型の作り方|応用編

 

ここからは、下記のような「必要に応じて含める要素(写真・アイコン・説明文)」も使ってデザインしていきます。

 

フローデザイン

 

詳しく解説します。

 

 

【フローデザインの作り方1】フォントの大きさを決める。

 

フォントサイズは、下記の数値にするとOKです。

 

フローデザイン

 

番号と見出しは、「どちらも同じくらい重要な情報」なので、優劣をつけずに、同じフォントの大きさにしています。

 

 

【フローデザインの作り方2】字送りのサイズを決める。

 

字送りは、下記の数値にするとOKです。

 

フローデザイン

 

字送りの設定がわからない方は、上図右下のボックス部分を変更すればOKです。

 

 

【フローデザインの作り方3】余白を空ける。

 

余白の取り方は、下記を目安にするとOKです。

 

フローデザイン

 

天地は、文字サイズの「約半分くらい」の余白を取ればOKです。

また、左右の余白は、文字を「中央揃え」にするとOKです。

 

 

【フローデザインの作り方4】その他のポイント。

 

その他のポイントは、下記のとおりです。

 

フローデザイン

 

上記のようにアイコンを配置する場合、「四角の枠」を設けて配置すると、全体のバランスがとりやすいです。

そして、アイコンの大きさは「5つとも同じ大きさに見える」ことと、「すこし小さめ」に配置すると、スッキリして魅せることができます。

このとき、アイコンの大きさの明確な決まりはありません。

ここは「デザイナーの感覚」で決めればOKです。

 

ちなみに、各順番の間隔は「矢印の幅の1.5倍〜2倍くらい」を設ければOKです。

矢印の作り方がわからない方は、下記の記事で紹介しています。

 

【1分でできる】デザインの飾りを作るコツを紹介。

 

 

【余談】さらにスッキリ魅せたい方は、枠をとってもOKです。

 

スッキリ魅せたい方は、枠をとってデザインすればOKです。

例えば、下記のかんじ。

 

フローデザイン

フローデザイン

 

1つ目のデザインは、枠を外して、文字を上にずらしただけです。

2つ目のデザインは、枠をストライプの地色に変えて、文字の背景をグレーに変更しただけです。

 

さらに、色を加えたい方は、下記のかんじにすればOKです。

 

フローデザイン

 

ちょっとした加工で、見た目を変えることができます。

 

特に難しいデザイン処理はしていないので、初心者の方でも出来るかな。と思います。

 

 

【フローデザイン4】横型の作り方|応用編

 

次も、下記のような「必要に応じて含める要素(写真・アイコン・説明文)」も使ってデザインしていきます。

 

フローデザイン

 

3つめの応用に「説明文」の要素も加えました。

詳しく解説します。

 

 

【フローデザインの作り方1】フォントの大きさを決める。

 

フォントサイズは、下記の数値にするとOKです。

 

フローデザイン

 

ポイントは、説明文の「7pt」をベースに、見出しと数字のフォントサイズを「7の倍数」または「1.6倍」の文字サイズの比率にしている点です。

この比率にする理由は、下記のnoteで詳しく解説しています。

文字組みに自信の無い方は、ご一読ください。

 

>素人っぽいデザインを解消する|かんたんデザイン術。

 

 

【フローデザインの作り方2】字送りのサイズを決める。

 

字送りは、下記の数値にするとOKです。

 

フローデザイン

 

字送りの設定がわからない方は、上図右下のボックス部分を変更すればOKです。

 

 

【フローデザインの作り方3】余白を空ける。

 

余白の取り方は、下記を目安にするとOKです。

 

フローデザイン

 

天地は、文字サイズの「約1個分くらい」の余白を取ればOKです。

今まで紹介した内容では「半分くらいの余白でOK」と書きましたが、このフローデザインの場合は、「文字をしっかり読ませたい」ので、少し広めの「約1個分くらい」を設けています。

※左の余白も、文字一個分の余白です。

 

 

【フローデザインの作り方4】その他のポイント。

 

その他のポイントは、下記のとおりです。

 

フローデザイン

 

3つ目と同様に、上記のようにアイコンを配置する場合、「四角の枠」を設けて配置すると、全体のバランスがとりやすいです。

そして、アイコンの大きさは「5つとも同じ大きさに見える」ことと、「すこし小さめ」に配置すると、スッキリして魅せることができます。

このとき、アイコンの大きさの明確な決まりはありません。

ここは「デザイナーの感覚」で決めればOKです。

 

 

【余談】さらにスッキリ魅せたい方は、枠をとってもOKです。

 

さらにスッキリして、デザイン性を高めたい方は、枠をとってデザインすればOKです。

例えば、下記のかんじ。

 

フローデザイン

フローデザイン

 

1つ目のフローデザインは、枠を外して、文字を左にずらしただけです。

2つ目のフローデザインは、枠をストライプの地色に変えて、文字を左にずらしただけです。

 

さらに、色を加えたい方は、下記のかんじにすればOKです。

 

フローデザイン

 

ちょっとした加工で、見た目を変えることができます。

矢印を違うデザインに変えれば、違った魅せ方にできます。

 

また、今回は見出しや数字を「7pt」に指定する場合が多かったですが、フロー図のサイズによって「8pt」や「9pt」などに変更してもOKです。

ただしその場合も、文字の倍率は「1.6倍〜2倍」にするとキレイに仕上がりやすくなります。

 

 

以上が、フローデザインの作り方です。

ぜひ一度、お試し下さい(`・ω・´)ゞ

 

 

【余談】フローデザインで使用したアイコンについて

 

今回使用させていただいているアイコンは、「SILHOUETTE ILLUST」さんを利用させていただいてます。

すごくいい素材がそろっているので、利用規約を守ってぜひご使用ください(`・ω・´)ゞ

 

 

3:【事例】参考になるフローデザインの事例を紹介。

パソコン

 

最後に、フローデザインの事例を紹介します。

 

 

フローデザイン事例1:フローの配置方法が、参考になるサイト。

 

ひとつめは、「ao はり治療院」さんのサイトです。

 

サイトの中盤に「6つのポイント」が掲載されていますが、「フロー図を二段で配置したい」ときに参考になります。

 

webサイトをデザインする場合、横型のフロー図にすると横幅に限界があるため、横に並べられる数に制限がでてきます。

その場合は、1列ではなく「2段」にして魅せれば、情報量を増やして掲載することができます。

 

フロー図の情報量が多い場合は、参考になると思います。

 

 

フローデザイン事例2:フローの魅せ方が、参考になるサイト。

 

2つ目は、「ベーシック」さんのサイトです。

 

フロー図とは違いますが、「流れで魅せる」という点では参考になります。

 

とくに、これからwebデザイナーを志す方は、「数字+見出し+本文+画像」の文字組みで、「企業コンセプト」「サービスの特徴」「自社の強み」を伝えるケースがでてくると思います。

 

フロー図とは違いますが、「流れで魅せる」という点では参考になるデザインです。

 

 

フローデザイン事例3:フローのイラストでの魅せ方が、参考になるサイト。

 

3つ目は、「ピンタレスト」で見つけたデザインです。

 

今回紹介した作り方とは少し異なりますが、「アイコン+流れを示す図(チェックや線)+見出し」の3つの構成で、フローをデザインしています。

 

文章よりも「イラスト」でフローを魅せたい方には参考になると思います。

 

 

以上が、参考になるフローデザインです。

 

他にも一流デザイナーさんの作品をたくさんみて、日々スキルアップしていきましょう(`・ω・´)ゞ

 

 

4:まとめ

登山

 

というわけで、今回は以上です。

 

最後に告知ですが、僕のインスタでも今回みたいな情報を随時発信しています。

皆さんの暮らしに、少しでもお役に立てればうれしいです(`・ω・´)ゞ

※下記みたいなことを紹介しています↓

 

 

この投稿をInstagramで見る

 

. . 【午前中のクリエイティブワークの生産性がアップした本📖】 . . 本日のおすすめ良本です🙆‍♂️ 僕は今デザインの仕事をしており、「BRAIN - 一流の頭脳 - 」のおかげで、午前中のクリエイティブワークの生産性が圧倒的にアップしました😌(#言い過ぎてたらごめんなさい) . . 本の重要な部分を ぎゅっと凝縮すると、下記のとおりです。 . . 1:「 集中力と創造力」をアップさせたいなら、「すごい脳みそ」を持つといいよ。 2:すごい脳みそは、誰にでも作れるよ。(#iphoneみたいにアップグレードできる) 3:「すごい脳みそ」の作り方は、“運動”することだよ。(#本の内容のすべて) . . こんなかんじ😌 . . すごい脳みそ(一流の頭脳)を作るには、「脳の側坐核(そくざかく)のドーパミンの分泌量を増やして集中力を高めること」と「脳内でBDNF(脳由来神経栄養因子)の分泌量を増やして海馬の成長を促す」などが重要になってきます。(#結果集中力や創造力が高まる) . . そして、これらを実現するカギになるのが「運動」で、一流の脳を作り上げるには、ふだんの生活の中に「いかに運動を加えるか」が重要になってきます。(#この後方法を話します) . . 🔻なので、僕は午前中に下記を実践しています✏️ . . ① 朝起床。(#朝は一番脳が冴えている状態) 🔻 ② 読書しながら30分ウォーキング。(#ここで知識をインプット#プラスダイエット効果) 🔻 ③ 12時まで、企画書づくりやデザインなどのクリエイティブワークをする。(#ウォーキング後30分から数時間の間は創造力が高まった状態になる#運動により集中力もアップした状態) . . こんなかんじ😌 . . さらに言うと、ウォーキングのときは「5本指シューズ」をはいて歩くとメカノセプターという足裏のセンサーも刺激され、ボディバランスも鍛えられます。(#過去のインスタで紹介しています) . . また、ウォーキングの時に本でインプットした情報をクリエイティブワークですぐに使えば、「インプット→アウトプット」までもセットで出来ます🙆‍♂️(#アイデアの作り方で詳しく解説します) . . つまり、ふだんの暮らしに運動を上手に組み込んであげれば、午前中だけで「①創造性アップ ②集中力アップ ③ダイエット ④読書 ⑤知識のアウトプット」まで、マルッと一気にこなすことが出来ます✅ . . 休日のときやテレワークの人は、わりと実践できると思います。 . . 気になる方はぜひお試しを😌 . . . . . 【 BRAIN - 一流の頭脳 - 】 . . . . . 集客#集客方法#集客アップ#集客力#集客アイデア#プログラミング#プログラミング初心者#プログラミング勉強中#プログラミング学習#集中力アップ#集中力を高める#ビジネススキル#社会人スキル#心理学#クリエイター#マルチクリエイター#クリエイティブ#グラフィティ#ストリートグラフィティ

デザインのコツ。|デザイナー taka(@taka_designtips)がシェアした投稿 -

 

よければフォローいただけるとうれしいです(`・ω・´)ゞ

 

Design is easy!

 

The following two tabs change content below.
Owner|taka
designer Taka | From Japan I'm Taka from Japan, a graphic and web designer. 月間PV数1万人の「Blog | design tips」を運営しています。専属契約、インハウス、単発案件を受注しつつ、毎月30~50万稼ぎながらcreative workを楽しんでいます。

Copyright© Blog | デザインのコツ。 , 2020 All Rights Reserved Powered by AFFINGER5.