この記事では、音楽アプリの一覧画面（以下のような画面）の各アプリの比較を行っていきます。 基本的に、以下の観点から分析していきます。 ・他のサービスとは異なる機能、コンセプトは何か ・どんなユーザー層を想定しているか 各アプリがどんな項目を一覧画面に入れているかの特徴を紐解き、分析していきます。 Apple Music項目一覧 ・アーティストインタビュー ・プレイリスト（地域ごと） ・プレイリスト（気分別） ・プレイリスト（アーティストごと） ・ベスト（世界都市別） ・
バナー画像制作第二弾です。 お題は、前回と同じく、こちらのこばやすさんの記事からいただきました。 お題の内容はこちら。 【特典】 ❶通常料金より10%OFF ❷貸切風呂 利用無料(要予約) ❸○×美術館ペアチケットプレゼント ---------------------------------- バナー設置場所：旅館公式サイトのTOPページ（予約の導線に近い所） 対象：Web予約・カップル限定 ターゲット：30〜40代 カップル 1泊2食付の通常料金：大人一人12,000円
僕は現在、Web制作会社でフロントエンドエンジニアとして勤務しているのですが、デザインの方も勉強したいと考え、最近Webレビュー記事をいくつかあげています。今回、自分でもデザインを作ってみたいと考え、手始めにバナー画像を制作してみました。 お題は、こちらのこばやすさんの記事からいただきました。 お題の内容はこちら。 バナー設置場所：自社ECサイトのサイドメニュー 商品概要：冬限定一口チョコ。普段高いが今だけ割引価格で売っている ターゲット：20〜40代の働く男女 イメー
ルクア大阪に新しくオープンしたフロアのサイト。 ターゲットは若い女性。 基本的にルクア大阪のサイトから流入しているサイトである。そのため、訪問者がこのサイトの概要をあらかじめ把握している前提であるため、ナビゲーションメニューや概要説明などの具体的な説明を省き、コピーやイラストなどの抽象的な表現を中心としている。 波線中心の、ゆったりとした雰囲気 以下の部分に波線が使われている。 ・ロゴの「A」の部分 ・コピーの囲い線 ・背景の境界 ポイントポイントで波線を使用することによ
春日井製菓のミルクキャンディ「女王のミルク」のキャンペーンサイト。ショートストーリーをコンテンツとして展開しているサイトで、商品紹介よりもショートストーリーをじっくり読んでもらうような情報設計になっている。 キャンディターゲットは中年女性。時間に少しゆとりのあるタイミングで読んでもらうキャンペーンサイト。 キャンディのおいしさ、贅沢さをビジュアルによって再現している。 落ち着いた色彩の背景デザイン 左側のベーシックな背景には、濃紺に細かい文様が仕立てられており、高級感を感
JAL STEAM SCHOOLの案内サイト。 https://www.jal.com/ja/csr/soraiku/steamschool/ ターゲットは親子（子供は小学生）。 以下二点で、他の親子講座との差別化を図っている。 ・STEAMという、5つの領域の学習ができる ・JALという航空会社の持つ、「飛行機」というブランド 基本的にはシンプルな配色、ページ構造にして、安心感を与えつつ、ところどころに遊び心を入れ、ワクワクを喚起させるデザインになっていると思う。
https://www.serta-japan.jp/ ターゲットは家族を大切にしたい人。睡眠を大事にしたい人。睡眠を大事にできる家計的な余裕のある人。 上品さの演出＋文字・図説・チャートを用いた機能説明により、高級感があり左脳で心地よさを理解できるサイトになっている。シンプルにそれなりに頭がいい人をターゲットにしてそう。 格式、品を感じさせる額縁コンセプト トップに商材であるベッドと共に、大きな額縁が目に入るデザインになっている。そして、スクロールしていくと、額縁の中
https://umaimon.yoro-meat.co.jp/ ターゲットは、中高年の、男性女性。食欲が旅へのモチベーションに繋げる層をターゲットにしている。 イラストを用いたコーポレートサイトとの差別化 コーポレートサイトが写真を中心としたデザインなのに対し、「うまいもん広場」のサイトは絵が中心で写真はポイントポイントで使用するデザインになっており、差別化が図られている。フォーマルさが少し柔らかになった印象を受ける。また、食材のカラーが映えるように、背景の色合いが薄
https://www.felissimo.co.jp/youmore/aquarium/ ターゲットは、可愛い小物、動物が好きな、若い女性。動物（というか海洋生物）好きに響くようなグッズのこだわりを見せつつ、揺らぎや曲線といった、海をイメージしやすいサイトデザインになっている。 海洋を思わせる「揺らぐ」デザイン スクロール遷移は波線で移行。海洋写真に海を思わせる揺れのようなアニメーションがあり、水中の浮遊感をうまく表現している。ボタンやメニュー枠線も曲線を用いたデザイ
全体の印象シンプルで洗練されたデザインの印象を受ける。 ・モノトーン中心で構成された配色。 ・シンメトリー ・シンプルで癖のないフォント フォント 落ち着きのあるフォント StoneSansITCPro-Medium 写真 背景をモノトーンにして、影をうまく使った明暗をきれいに分けている写真が多い。シンプルで洗練されたイメージを受ける。 情報設計 商品のブランディングサイトにはあまりない、「LABORATORY」という項目が含まれている。 研究項目をわかりやすく
テーマ「透明感」 透明なガラスの写真を使用 寒色系の水色、銀色によって、透明感を演出している。また、透明感のある対象物（ダイヤ）を大きくうつし、澄んだ印象を与えられるようにした。 余計なイメージを与えないように、フォントの色は白にしている。 消えてなくなっていくような書体をロゴのフォントに使うことで、透明感を演出している。 こちらも画像を寒色中心にした。洞穴写真にしたが、もっと開けた場所（空とか）の写真の方がよかった気がする。和文のフォントは、平坦なものを置くと、ダサく
与えたい印象「肉おいしそう」と思える写真を利用した。肉アップでうまそう。 煙もくもく感で、テキストゾーンを作成した。 とりあえず、おいしい肉が3500円の安価で食べ放題だからおいで、というメッセージがシンプルに伝わればいい、と思っている。
与えたい印象 本屋＝「自分に合う本を探しに行く場所」と、捉えた。 隠されているものを探す、みたいなイメージから多層に重なったものの奥を探しに行く、ということで多層なイメージにした。 フォントはしっかりしている感じ。
全体の印象トップの「CREAGE」の表記と、トップ画像を見たときに、アート系のサイトかな、と思って下にスクロールしていくと、「女性専用クリニック」と書いてあってびっくりした。 一風変わったというか、只者ではない女性専用クリニックなのだろうな、と感じた。絵の描き方で丁寧だから、丁寧で品のあるクリニックなんだろうな、と感じた。 https://www.creage.or.jp/
全体の印象シンプルでありながら、随所に遊び心がある。植物を育てるのが得意そう。 いつも余裕があって人との接し方が丁寧で、でも少し話してみると、冗談とかも言ってくれる人みたい。友達にしたいタイプ。 フォント崩し過ぎず、固すぎず、親しみやすい、絶妙なフォントチョイスだと思う。 03のちょっと遊び心がある感じも素敵である。 情報設計ブログ（？）っぽい、短文＋写真の読み物の内容が素敵である。 植物をじっくり堪能できる写真と、運営者の人柄が伝わってくる文章で、ゆっくり読み進めたい
全体の印象絵が変わっていくが、全体で統一感がある →絵と、背景が一致しているため。 緊張感がある →絵の背景に線が走っているため、緊張感が生まれる 品がある →「あやしい絵展」のフォントが素敵。「し」の伸びが、艶めかしさを生んでいるため、品が出てきている。 情報設計時代ごとに、あやしい絵の代表例が載っている →時代ごとに、整理された絵が展示されているんだ、と想像できる →時代ごとに、テーマでまとめられているんだ、と想像できる 背景に、「明治」と明朝体で載っているが、か
