ちょっと難しいぞ!【第8問】未経験者向けWebデザインとフォトショップのクイズです!




中の人
こんにちは。
鹿児島にあるスタバ仙巌園店に行ってみたいcoffeebreakの中の人(@ra_cer_X)です。

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

Webデザインとフォトショップクイズの第8問目です。
そろそろ実践的な形を作ってWebデザインとフォトショップの解説を充実させていきたいと考えています。

今回は架空のコーヒー店舗を紹介するページが題材。

Webデザインやフォトショップが勉強できる記事を執筆してから、コーヒー屋さんを転々とする事が増えました。
地元の人が自宅兼お店的にオーブンしたお店、図書館に併設したwifi付きのカフェとか、皆さんが知っているスタバもですね。
マイカーを走らせて探し、そこで記事原稿を書きおろしながらお店の雰囲気を楽しんでいます。

中の人
デザインアカウントとしてtwitterやっている人もこんな感じだよね

そんな事がきっかけで架空のコーヒー屋さんのWebサイトデザインをクイズにしたので、みなさんは問題を楽しんでください!

中の人
私のデザインノウハウは手抜きに見えるけど状況しだいで時短になるよ!

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

こうやって週1で1問だけ題材にしたクイズを出題して、未経験からでもデザインを楽しく学んでいければと思いはじめました。
過去のクイズのは地味すぎて分かりにくいものもありますが、私が身につけておいてよかった事ばかりをクイズにしています。

中の人
なので多分役立つよ!

活用の仕方はですね。例えば朝通勤の時間にクイズをやってみるとか、トイレ中のスマホをポチポチする時とか、
みなさんのちょっとした「ながら時間」に学んでいただければと思います。

すぐ読み終わるクイズなので、主婦のみなさまにも最適です!
家事や育児の合間でも、無理の無い範囲で活用してみてください。

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

理想は、「今週は残業続きで全然勉強できないけど、coffeebreakでクイズやってたな。ちょっとWebデザインのながら勉強してみようかな」くらいで吸収してもらえれば幸いです。

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

コーヒー店舗の雰囲気を紹介する為に画像のようなワイヤーフレームを考えてみました。

中の人
ふむ。どうやらトップページではなく下層ページの構成ぽいね。

下層ページ右側の写真①から③に合うイメージを以下の画像素材から3つピックアップしてください。
※画像素材はトリミングされた枠にいれ拡縮で調整するのみ


左側のテキストは以下が入るものとします。
※デザインするフォントはゴシック体を基本

見出し

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

説明文

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

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

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

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

注釈文

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

第8問のヒント

今回は2択ではなく、写真素材のピックアップです。
この空間がどんなところで何が満ちているのかが伝わる画像素材をピックアップすればいいと思います。
見出しと説明文の流れに合った写真を順番に上げてみましょう。

第8問の回答は翌週に発表します!

写真のレイアウトはこんな感じですね。

紹介文からみて登場人物中心のレイアウトにしていくのが分かりやすいのではと思います。

「カウンターでコーヒーを注文して席で待っていると、窓越しに眺める景色がとても忙しい世界に感じる。」

さらに深堀解説

メイン画像は分かりやすいですが、残りの二つはどのように判断したのかを解説していきます。
まず一つはこの店舗がコーヒー屋さんという事がわかるのでお店の雰囲気が分かる写真ですね。
さらに店の特徴を紹介しているの雰囲気にあったものを選んでいます。

「私が来る時間にはいつもお客がこない。映画館で一人で新作を楽しめるようにお店全体を独り占めしてしまう。」

もう一つの画像ですが、コーヒーや豆の説明ですね。

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

まず、コーヒーであること、そして豆の匂いは抽出しないと広がらないのでこの写真になります。
※実はこの写真はエスプレッソの抽出なのでコーヒーではないですが・・・

文章のデザインはどうするのか?

今回のクイズは画像レイアウトなので第9回は左側のレイアウトとデザインを題材に出題をしていきます。
といっても配置して体裁を整えていくだけですが、できれば天地・ジャンプ率・カーニングといった技術をどう活かすかを紹介したいですね。

構成のアドバイスがあればいいな

とお考えの人には、直接添削はできませんが構成やデザインの勉強を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