【第9問】後編!店舗紹介の原稿をデザインしよう!Webデザインとフォトショップのクイズです!




中の人
こんにちは。
コーヒーは好きですが、お店を出す気はないcoffeebreakの中の人(@ra_cer_X)です。

第8問の解答を公開しました!

Webデザインとフォトショップクイズの第9問目です。
8回目で写真レイアウトを問題にしてみました。

今回は架空のコーヒー店舗を紹介するページに使うテキストのレイアウトを進めていきましょう。

Webデザインとフォトショップのクイズについて

週1ペースで1問だけWebデザインやフォトショップを題材にしたクイズを出題して、未経験からでもデザインを楽しく学んでいければと思い出題を続けています。過去のクイズのは地味すぎて分かりにくいものもありますが、私が身につけておいてよかった事ばかりをクイズにしています。

中の人
みなさんも「ながら時間」で身につきますよ!

時短向きのクイズなので、朝通勤の時間に記事を見てみるよか、トイレ中のスマホをポチポチする時とか、みなさんのちょっとした隙間時間を活用して学んでいただければと思います。

だから主婦のみなさまにも最適で、家事や育児の合間でも無理の無い範囲ですすめれるのではと思います。

私が出題するクイズはベテランWebデザイナーさんや新米Webデザイナーにとってなんでもない技術ですが、ベテランさんも躓いた物ばかりを出題しています。今から勉強しておけば将来実務の時に役立つと信じています。

理想は、「今週は残業続きでフォトショプの勉強できてないから、ちょっとWebデザインの「ながら勉強」してみようかな」くらいで吸収してもらえれば幸いです。

それでは第9問をはじめます!

写真をレイアウトした前回の解答を活用して架空のコーヒー店舗の雰囲気を紹介してみましょう。


※第8回で解答した画像をそのまま参照しています

中の人
テキストは前回紹介したものと同じだよ

見出し

「ノスタルジック感じる空間に浸っていると、つかの間の休息が最高の時間に変化していく。」

説明文

カウンターでコーヒーを注文して席で待っていると、窓越しに眺める景色がとても忙しい世界に感じる。
私がよく行くお店がちょっとなつかしさを思い出す空間だからそうなってしまうのだろう。

ここは「coffeebreak」。田舎町の市街地を抜け主が趣味で経営しているコーヒー屋さんだ。
私が来る時間にはいつもお客がこない。映画館で一人で新作を楽しめるようにお店全体を独り占めしてしまう。

おぉ!私の注文したコーヒーが来たぞ。この1杯を飲んだらまた仕事に戻らないといけないが、主が豆を挽いて作ってくれるコーヒーの香りが外の忙しい世界を忘れさせてくれる。

うん。今は忘れよう。
そしてまた元気をもらう為にここに来よう。

注釈文

注釈文は任意です。写真に合うものを考えてください。

第9問のヒント

テキストを配置するデザインを身につけるので天地・ジャンプ率・カーニングを駆使してやってみましょう。
過去記事でこれらの手法を紹介しているので参考にしてみてください。

天地・ジャンプ率についてはこちら
※天地・ジャンプ率の説明はLPを題材に説明しています

カーニングついてはこちら
※カーニングについてはtwitterでも好評だった記事です

第9問の解答を見てみよう!

第8問でレイアウトした画像にテキストを加えてデザインしてみました。

実際の画面で見える大きさでデザインしないとですが、ブログの枠にPCサイズのコンテンツをはめ込んでいるから小さく見えますが、本当はもう少し大きいサイズになります。

まず、フォント体裁も出題文章からターゲットを考え、マッチしたものを選択していきましょう。
見出しだと登場人物が一人でコーヒーを飲みくる程にプライベートを楽しむ年配の人なので、若々しいフォントより年齢を考えて落ち着いた明朝体を選択しています。

この辺りの文章からターゲットを推測

「私がよく行くお店がちょっとなつかしさを思い出す空間だからそうなってしまうのだろう。」
「映画館で一人で新作を楽しめるようにお店全体を独り占めしてしまう。」

もう少し雰囲気を寄せてみると・・・

さらに、説明文に背景画像を加えてみました。
クイズのお題には無い素材ですが、うっすら背景を加える事で雰囲気をグッと寄せる事が可能です。

さらに天地(マージン)を深堀解説

Webデザインのマージンにはそれぞれ呼び名があります。

中の人
Webデザイナー未経験の人はしっかりおさえておこうね。

コンテンツの横幅をとるレイアウトマージン

サイトの横幅を調整するマージンです。
PCサイトのWebデザインで活用されますが、スマホサイトは画像いっぱいに出すのでなじみが少ないかもしれません。

画像と文章のバランスを取るビジュアルマージン

各素材の距離感を調整するマージンですね。
ビジュアルマージンの幅がバラバラで統一感がないと整頓されたWebデザインができません。

見出し文章の天地はコンテンツマージン

文章のジャンプ率を効果的に見せるのに必要なのがコンテンツマージンです。幅広くとりますが、コンテンツの関係性を崩さない程度に調整しましょう。

テキスト文章の天地はテキストマージン

主に行間の幅を調整する時に使います。
この調整も別の文章と統一感がないと不安定なWebデザインに仕上がってしまいます。

ジャンプ率について

ジャンプ率は見出しとテキストの比較なので今回のコンテンツなら調整しやすいのではないでしょうか。

それぞれのフォントの大きさとそれぞれの天地(マージン調整)を見ながら程よい大きさと距離感を間隔で整えていけばできますよ。

レイアウトは素材を配置して体裁を整えていくだけですが、天地・ジャンプ率、そしてカーニングといった技術を使いこなすだけで見やすいデザインに仕上がるのです。あとはコーディングしていけば出来上がりです!

Webデザイン構成のアドバイスがあればいいな

直接添削はできませんが構成やデザインの勉強をtwitterの中でもアドバイスを発信しています。
どんな活動をしているのかは「新しいチャレンジ」の記事を確認してください。

さいごに
私の記事はヘタクソなので未経験のライターのようなものです。
上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【実話】私、転職先の本当の実態を知って失敗したWebデザイナーです。

2019.01.14


良い構成のCVエリアのアイデアをいろいろと考察してみる

2017.12.24

【検証】本物のデザイナーだけが知っているCVエリアのボタンは何色がよいか?

2018.06.03


【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

日本語フリーフォントお探しですか?未経験・新米Webデザイナーさんにおすすめなフォントを選んでみました!

2019.02.11

そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう

2017.11.12

記事でもランディングページ(LP)でもないアンケートページの構成・デザインの作り方

2018.08.26


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google