よくある質問|メンズ医療脱毛のレーザースキンクリニック【公式】 Handa | 東京のWeb制作会社・ホームページ制作会社 | SPIQA DESIGN(スピカデザイン)

よくある質問

Handa

Q 【サイトレビュー】ただの牛乳ではない…「ANOTHER MILK」のサイトレビュー

こんにちは!デザイナーのHandaです。

今回はアニメーションが特徴的な、牛乳のサイトデザインについて考察してみました。 ユーザーを惹きつけるアイディア満載のサイトデザインを、ぜひ参考にしてみてください!

今回レビューするサイト

生協の食材宅配“生活クラブ”の乳製品「ANOTHER MILK」の公式サイトです。

ANOTHER MILK:https://seikatsuclub.coop/100ex/anothermilk.html

くるくる回るアニメーション牛乳瓶と、グラフアニメーション、牛乳を飲んでいる女性のビジュアルを組み合わせたファーストビューが印象的です。

「はじめて飲んだその味に、100人が驚きました。」というキャッチコピーは、他の牛乳とは一体なにが違うのかと、思わず続きが読みたくなるような気にさせます。

競合サイト

まずは他のメーカーの牛乳のサイトを調べてみました。

明治おいしい牛乳 おいしい暮らし~Natural Taste~

明治おいしい牛乳 おいしい暮らし~Natural Taste~:https://www.meijioishiigyunyu.com/

明治のおいしい牛乳の公式サイトです。 牛乳といえば…と思い浮かべる人は多いのではないでしょうか。

▼配色

【ベース】白 【メイン】青 【アクセント】赤

▼分析

「牧場でのむ搾りたての牛乳のようなおいしさをお届けする」という商品のコンセプトを表したパッケージ同様に、シンプルなサイトデザインとなっています。 過剰な表現は避け素直にレイアウトされており、「しぼりたてそのまま」を視覚化したパッケージを思い浮かべます。

湯田牛乳公社 公式サイト

湯田牛乳公社 公式サイト:https://shop.yudamilk.com/?mode=f4

かわいらしいマスコットキャラクターが印象的な、生乳にこだわった低温殺菌(牛乳)の公式サイトです。 商品名に「牛乳」という言葉が使われていませんが、何にこだわったのかが一目でわかりやすいパッケージが特徴的です。

▼配色

【ベース】白 【メイン】黒 【アクセント】オレンジ

▼分析

マスコットキャラクターと、そのかわいらしい雰囲気に合わせた丸みのあるゴシック体のフォントを引き立てるような色数の少ないシンプルなサイトデザインです。 余計な装飾はせず、ただシンプルに伝えたいことだけをまっすぐに伝えているデザインだと感じました。

総論

どの牛乳ブランドも基本的にはパッケージと雰囲気を合わせており、子供も飲むものだからこそ優しく柔らかな雰囲気のサイトが多く見受けられます。 配色には牛乳を思わせる「白」を使っているものが多く、清潔感のあるシンプルなデザインの印象が強いです。

また、商品サイトのためファーストビューではパッケージを大きく見せているサイトがほとんどでした。

今回のサイト「ANOTHER MILK

ANOTHER MILK:https://seikatsuclub.coop/100ex/anothermilk.html

▼配色

【ベース】白 【メイン】青 【アクセント】赤

今回考察する「ANOTHER MILK」のサイトは、競合サイトでも多く見られるように、パッケージが大きく配置されたファーストビューになっています。 背景の大きなアルファベットもインパクトがあります!

いいなと思ったポイント

人工的な強い青をメインカラーとして使ったインパクトのあるサイトデザインがとても良いと思いました! CV(コンバージョン)となる「WEB加入」ボタンが、単純なボタンではなく牛の絵文字のマウスカーソルをぴったり合わせたくなるようなアイディアで作られている部分も面白いです。

また、どのコンテンツも思わずじっくり読みたくなるようなデザイン・アニメーションが盛り込まれています。

商品の特徴をチャットのような吹き出しのデザイン&動きで見せているコンテンツや…

牛乳を飲む前、飲んでる最中、飲んだ後の表情の変化をグラフで表したコンテンツなど…

ANOTHER MILKの魅力を引き出すアイディアがたくさん詰まったサイトデザインだと感じました!

なぜこのデザイン?どういう効果が期待できる?

「生活クラブ」という生協の商品を注文してもらうために、ユーザーの興味を惹くことができるようなWEBならではの表現を詰め込んでいるようのではないでしょうか。 牛乳という味の差別化が難しいものをいかによく魅せるかが、WEBデザインで重要だと思います。

また、牛乳は小さな子供もターゲットとなるため、データを使用して安心感も与えているのだと思います。 情緒的な部分だけに訴えかけるのではなく数字を用いた正確な情報も伝えることができる、機能的なデザインでもあると思いました!

まとめ

インパクトのある配色とフォント遣いに加え、ユーザーの興味を惹くコンテンツの見せ方が特徴的なサイトでした。

グラフを使って見せる数字は商品の特徴に説得力を足す一方で、堅い印象になりがちです。 しかし配色やフォントをポップにしたり、実際に飲んでいる人のビジュアルを使ったりすることで親しみやすさ出しています。

他の牛乳ブランドにはないオリジナリティ溢れるデザインで、飲んでみたくなるような興味を惹かせる素敵なサイトでした!

ぜひ参考にしてみてください!

Q 【サイトレビュー】都内にあるおしゃれなホテルのサイトレビュー

こんにちは。デザイナーのHandaです。

今回は素敵なコンセプトのホテルのサイトを見つけたので、サイトレビューをしてみました。

都内のおしゃれなホテルのサイトも参考にしつつ、考察していきます!

今回レビューするサイト

TRUNK (HOTEL) YOYOGI PARK:https://yoyogipark.trunk-hotel.com

東京都 渋谷代々木公園に隣接し、都会の刺激とくつろぎを同時に愉しむ「Urban Recharge」をコンセプトとしたスモールラグジュアリーブティックホテル「TRUNK (HOTEL) YOYOGI PARK」の公式サイトです。

競合サイト

TRUNK (HOTEL) YOYOGI PARK と同じく、都内にあるホテルのサイトを2つ挙げます。

DDD HOTEL

DDD HOTEL:https://dddhotel.jp/

東京都中央区にあるデザイナーズホテル「DDD HOTEL」の公式サイトです。

「ビジネスホテルとはなにか」を考え作られたホテルで、ただ単に寝るだけの場所ではなく食やアートを中心とした文化的な時間も過ごせるようにと、アートギャラリーまで併設されています。

▼配色

【ベース】ベージュ 【メイン】ダークグリーン 【アクセント】ゴールド

▼分析

「目まぐるしい現代を生きる人々が泊まる」というコンセプトから、現実を切り離せるような空間を演出するために全体像がわかりにくい内装写真を使っています。

サイト全体のレイアウトもかなり自由でスタイリッシュなデザインとなっています。

THREE

THREE:https://threehotel.jp/

品川区にある長期滞在も可能なアパートメントホテル「THREE (スリー) 」の公式サイトです。

「ささやかな日常」をコンセプトに、個性の異なる3つのお部屋が特徴的なホテルとなっています。

▼配色

【ベース】白 【メイン】カーキ、ネイビーなどアースカラー

▼分析

アースカラーを使うことで目に優しく落ち着く空間やコンセプトの「ささやかな日常」を表現しています。

また、3つのお部屋のメインカラーを変えることで、それぞれの印象を引き立てています。

総論

ホテルのコンセプトに合わせたデザイン表現が特徴的でした。

コンバージョンである予約ページは外部へ遷移させる場合が多く、公式サイトはホテルのコンセプト・世界観を伝えるためにデザイン性が高いものが多く見受けられました。

今回のサイト「TRUNK (HOTEL) YOYOGI PARK」

TRUNK (HOTEL) YOYOGI PARK:https://yoyogipark.trunk-hotel.com

▼配色

【ベース】アイボリー 【メイン】ベージュ

いいなと思ったポイント

線できっちりと区切られたデザインの中に手書きのタッチが混ざっており、色が少ない中でも形・動きでアクセントをつけている部分が素敵な表現だと思いました。

ページ遷移のアニメーションや、常に動く波のアニメーションの速度やイージングにも細かなこだわりを感じ、心地良さを感じます。

なぜこのデザイン?どういう効果が期待できる?

都会の「くつろぎ」と「刺激」を同時に愉しむというコンセプトから、余白を広く取って「くつろぎ」を表現したり、全体にノイズをかけることで「刺激」を表現しているように感じました。

綺麗に整列され線で区切られたレイアウトと、英語が波を打つようなアニメーションも「静」と「動」=「くつろぎ」と「刺激」といったコンセプトを表しているのではないでしょうか。

ホテルの世界観や雰囲気を文字だけでなくサイト全体で表現することで、このホテルに泊まることがステータスになるような高クオリティを求めるユーザーへの集客に繋がっていると思います。

まとめ

色数の少ない配色で洗練された印象のデザインの中に、対立するワードのコンセプトが混ぜ込まれた素敵なデザインのサイトでした。

ホテルの立地やインテリアの雰囲気、コンセプト、ターゲットなどを深掘りすることで、唯一無二のそのホテルらしさが表現できるのだと感じました。

今後もトレンドデザイン勉強会での共有内容をこのスピカマガジンに掲載していく予定なので、どうぞお楽しみに!

Q 【サイトレビュー】生まれたての美しさを大人へ届ける!トータルビューティブランドのサイト

こんにちは。デザイナーのHandaです。

季節の変わり目で肌の調子が良くないこの時期、いろんなサプリメントを試しがちな私ですが、とてもかわいい容器の気になるサプリメントを見つけました。
公式サイトを見てみると素敵な世界観でデザインされていたので、今回はこちらのサイトのデザインについて考察してみます!

今回レビューするサイト

Bonu:https://bonu-bonu.com/

今回レビューするサイトは、体を健やかに美しくするためのトータルビューティーブランドBonu (ボニュー)の公式オンラインストアです。

「ラクトフェリン」という産まれたての赤ちゃんを外敵から守るための貴重な栄養素を生かして、肌を根本的に美しくするサプリメントとクリームを展開しています。
ボールのような容器は「ライスレジン」と呼ばれるお米由来の国産バイオマスプラスチックを使用しており、廃棄処分されるお米をアップサイクルして作られています。
中身だけでなく容器までこだわりの詰まったブランドです。

競合サイト

KINS

KINS:https://yourkins.com/

総合的な菌ケアサービスを展開する「KINS」の公式オンラインショップです。
菌でケアする「菌ケア」という独自のアプローチで、サプリメントやスキンケアアイテムを展開しています。

▼配色
【ベース】白・ベージュ 【メイン】くすみピンク

▼分析
ベージュとくすみピンクを基調とした、女性らしい柔らかさを感じるデザインのサイトです。
僅かに角丸処理が加わったフォントを使用しており、全体的に温もりを感じます。

Waitless

Waitless:https://www.wait-less.com/

パーソナライズボディメイクサポート「Waitless」の公式サイトです。
ダイエットの目標やライフスタイルなどの簡単な問診結果から、ユーザー専用の食事&運動のダイエットプログラムとサプリメントをセットでお届けするサービスを展開しています。

▼配色
【ベース】白 【メイン】ピンク〜紫などのグラデーション

▼分析
明るいグラデーションと、白背景のビジュアルが洗練された印象を受けます。
細い線のイラストやエレガントなデザインのフォントを使い、シンプルで綺麗な大人の女性を連想させるデザインとなっています。

総論

どちらも「女性らしさ」を感じるデザインでした。
丸みを帯びた柔らかな印象のシェイプや、余白を広めにとることで女性らしい華奢な印象を感じます。
また、配色もピンクをメインで使うことで女性らしい温もりを感じます。

今回のサイト「Bonu」

次は今回のサイト「Bonu」を競合サイトと同じように分解してみます。

Bonu:https://bonu-bonu.com/

▼配色
【ベース】ベージュ 【メイン】濃いグレー

目に優しいベージュとグレーを使った配色で、ナチュラルで洗練された印象を受けます。
余白を広くとったシンプルなレイアウトですが、ビジュアル(商品写真)をアーティスティックに仕上げることで単調に感じさせないデザインとなっています。

いいなと思ったポイント

特徴的なプロダクトとロゴをモチーフにしたあしらい

「Bonu」の容器はボールのような球体で、とてもサプリメントやクリームが入っているとは思えないデザインをしています。
そんな特徴的なモチーフをスライダーのドットインジケーターで使用しており、細かなこだわりとブランドのオリジナリティを感じました。

ロゴの「n」「u」が円形の容器を表現しているようです◎

なぜこのデザイン?どういう効果が期待できる?

デザイン性の高いブランディングで、目につくものや体に取り入れるものすべてにこだわりたい女性というターゲットを明確に絞ることができるのではないでしょうか。
おしゃれなインテリアと並んでいても違和感のない容器や、美を追求しつつも体に優しい成分など、どれも自分自身のこだわりを持った人へのプロダクトだと感じました。
また、容器は廃棄処分される予定のお米を使用したサスティナブルな作りで、少しでも環境に良いものを取り入れたい余裕のある大人が試したくなるはずです。

まとめ

優しい色使いのデザインでユーザーに安心感を与えながらも、成分やプロダクトにこだわりのある女性へ刺さるような洗練された雰囲気も感じるサイトでした!
ロゴのデザインから写真の撮り方まで統一されたブランディングをおこなうことで、ターゲットを明確にすることができる効果的なデザインだと思います。

今後もトレンドデザイン勉強会での共有内容をこのスピカマガジンに掲載していく予定なので、どうぞお楽しみに!

Q スキルを上げたきゃ数をこなせ!1ヶ月毎日ロゴを作った話

こんにちは!デザイナーのHandaです。
WEBデザイナーとしてスピカデザインに入社して2年と数ヶ月が経ちました。
ロゴデザインの依頼を受けることも多く、その度に「ロゴ制作って難しい…」と頭を悩ませています。

そんなときに上達方法について調べて見つけた書籍「毎日ロゴ – 無名デザイナーが365日、毎日ロゴをつくり続け有名デザイン賞を受賞したロゴデザイン上達法」を参考に、1ヶ月毎日ロゴデザインを作り続け、練習した内容をまとめていきます!

きっかけ

とにかくロゴデザインのスキルを上げたい!という思いから始めました。
毎月1つ、ロゴデザインのコンペにも応募していますが、なかなか入選できず伸び悩んでいることもあります。

デザインの練習方法は様々ですが、とにかくロゴデザインについて考える時間を増やして数をこなせば上達するのではないかと考えました。

練習する上でのルール

1ヶ月間、毎日ロゴを作っていく上でルールを少しだけ決めました。
なにかを継続することがとても苦手なので、なんとか続けようと絞り出したルールです。

1. 制作時間は1つのロゴに対して30分

参考にした本の中でも「1日30分で作る」という方法をとっていたので、同様に制限時間を設けました。

毎日数時間、ロゴのために時間を作ると考えると負担が大きく感じて嫌になるのですが、「とりあえず30分のクオリティ」としておくだけで気持ちがとっても楽になります。

2. ロゴを作ったらイメージ画像を作る

イメージ画像といってもフリー素材の画像の上にロゴを載せるだけの簡単なものです。
お客様に提案するときもロゴ単体のみではなく、実際にロゴをいろんな使い方したときのイメージを見てもらうための画像を作ります。
ロゴの雰囲気をよりわかりやすくするために、イメージ画像の作成もセットで行うようにしました。

ロゴを商品にはめ込んだモックアップを作成することもあります

3. 説明文を考える

ロゴを作成した後にデザインのポイントなどを言語化しまとめるようにしました。
100〜200文字程度で簡潔に、伝わりやすい文章を心がけます。

ルールは以上です!
早速練習していきます。

1日目

1つ目のロゴは好きなものを作ろうと、自分の好みとそのときの気分で作りました。

ドーナツショップのロゴデザインです🍩
親しみと温もりをイメージして手書きのドーナツキャラクターと、丸みのあるフォントで作成しました。
老若男女、いろんな人から好かれるドーナツショップになるように、キャラクター的にドーナツに顔をつけています。

このロゴデザインを作ったとき、とにかくお腹が空いていてドーナツが食べたい気分でした。

練習1日目、張り切って作ってみたところ1時間近くかかってしまいました…。
このままではどこかで面倒になってサボってしまいそうなので、明日からはスピードアップを図ります!

2日目

2つ目は、タピオカ専門店のロゴです!
ロゴだけでなく、チラシも作成してみました。

タピオカの黒い粒をイメージして、アルファベットに黒塗りを作っています。
タピオカ+牛乳のクリーミーな感じをイメージした丸みのある筆記体のフォントを使用しています!

このロゴデザインを作ったときも、甘いおやつが食べたい気分でした。

そして1日目の反省を活かし、とにかくスピード重視で30分以内で収めるようにしました。
チラシっぽいイメージ画像まで作ったにしては早くできたのですが、全体的なバランスの悪さや「t」と「p」をつなげた曲線の処理の甘さが気になるように…。
明日はクオリティを少しでも上げるために、時間配分を考えて作ります。

3日目

今回はかなりシンプルに、会社のロゴを作ってみました!

※現在こちらのロゴは実際に使用しています

イメージはおしゃれな制作会社。
アルファベットのGとAを組み合わせて、イマドキ感のあるスタイリッシュでシンプルなロゴマークにしています!

このシンプル感、とても自分好み。

2日目の反省を活かして、30分以内におさめつつロゴのクオリティも落ちないように作りました。
結果としては自分好みの得意とするデザイン(スタイリッシュな感じ)で落ち着きましたが、フォントの選定も満足いくようにできたので良かったです!

4日目

4つ目のロゴは猫ちゃんを意識したデザインです!

架空の猫カフェ「HOME CATS」のイメージで、Sの部分が猫じゃらしのモチーフにしています🐱
フォントの角を丸くしたことで、温かみと可愛らしさをプラスしています!

2日目のタピオカ専門店のロゴでフォントに曲線を馴染ませた際に処理が甘くなってしまったという反省点があったのですが、今回は丁寧な処理を心がけ、カーブが馴染むように作成しました。

作ってから、もう少し猫要素があっても良いかな?と課題が見えてきました。
猫じゃらしが猫じゃらしに見えないかもと…。
明日は客観的な視点で見ることができるように作ろうと反省です。

5日目以降

なんやかんやで毎日ロゴを作り、都度課題を見つけつつ改善し続け…。

1ヶ月でこれだけのロゴデザインができました!
すべて制作時間は30分以内、イメージ画像もセットで用意して、簡単な説明もできるようにしました。

5日目以降のロゴデザインは、Twitterで発信していくので良かったら見てください!

やってみた感想

いつも依頼を受けてロゴデザインを作成する場合、コンセプトは自分で考えるものではありませんでした。
今回の練習では自分でコンセプトを考えてアイデアをまとめ、言語化することでデザインの引き出しはかなり増えたように感じます!
アイデアをまとめる際に様々なロゴデザインを調べて見るようになったので、それだけでも良い基礎練習になったなと思います。
また、自分の好きなロゴデザインばかり作ったようなものなので、逆に苦手なデザインが見つかってきました。

さらに、ロゴ制作で使ったツール「Adobe Illustrator」の練習にもなりました。
やりたい表現を実際に形にするために、調べながら色々やってみることが勉強になりました!

まとめ

ロゴデザインの練習として1ヶ月毎日1つ作り続けることで、様々な気づきがありました!

  • デザインの引き出しが増える
  • デザイン・アイデアをまとめて言語化する力がつく
  • 自分の苦手分野がわかる
  • ツール(Adobe Illustrator)の練習になる

毎日続けることはなかなか大変ですが、とても良い練習になるのでぜひお試しください!

Q デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

こんにちは!デザイナーのHandaです。
みなさんはフォントについて考えたことはありますか?

WEBサイト制作でも重要なフォント選び。フォントが変わるだけでサイト全体の印象がガラッと変わったりします。フォントはデザインをおこなう上で重要な役割を持っています。

今回は日々フォントを眺め、選定し、ときには手を加えたり、常にフォントと関わっている弊社の現役WEBデザイナーに「好きなフォント」について聞いてみました!

スピカデザインのデザイナー

今回フォントについて語るのは以下の4人です!

Sugo:デザイナー歴20年のSugo(以下、S)です!前職はエステティシャン。

C.Abe:デザイナー歴10年のC.Abe(以下、 C)です!写真撮影が得意。

H.Abe:デザイナーのH.Abe(以下、H)です!映像制作もできる。

Handa:そして私、Handa(以下、Han)です!イラストも描きます。

好きなフォントについて

Han:早速ですが、好きなフォントを教えてください!

S:やっぱり「Futura」!小文字やOのフォルムが丸くて可愛いながらも高級感のある感じがたまりません。ミディアムが特に好みです。

幾何学形態を用いた合理的なデザインの欧文フォント

Han:私も一番好きです!定番ですが、やはりハイブランドで使用されるだけあってとても綺麗ですよね。「M」や「N」の角が尖っているところも好きです。よくネットで見る人気なフォントランキングでも上位常連のイメージです!

S:それから、個性的でデザイン性のある「キリギリス」も好き!ポップなデザインにハマります!直感的に好みです。

漢字の収録が少ないものの、雑誌やパッケージでもよく見る特徴的な日本語フォント

Han:一目で「キリギリス!」とわかるほど特徴的なフォントですよね。確かにポップで可愛いデザインを作るときに使いたくなります!

Han:続いてC.Abeさんはいかがでしょうか?

C:「Cochocib Script Latin Pro」が好きです!筆記体の中でもクセがありすぎず、なさすぎずで丁度良いのでよく使います。

エレガントな手書き風の筆記体フォント

Han:これはおしゃれですね…!装飾にも使えそうです!手書き風の筆記体っていろいろありますが、丁度良いものを探すのが大変なんですよね。

C:筆記体でもいろんな印象のフォントがありますからね…。お洒落なデザインを作りたい時に使いやすいのでお気に入りフォントです!

Han:間違いなくお洒落なデザインになりますね。他に好きなフォントはありますか?

C:「Oswald」がインパクトを持たせたいときやスタイリッシュなデザインにしたいときによく使っている好きなフォントです!

細長くスタイリッシュで、すっきりとしたまとまり感があるフォント

Han:先ほどの筆記体とは真逆な印象のデザインですね!間違いなくインパクトがあります。

Han:最後にH.Abeさん教えてください!

H:一番好きなのは「貂明朝体」です!明朝体だけれど丸っこさがあり、可愛らしい印象のフォントです。

日本の伝統的なイメージが入り混じっている、可愛らしさのある明朝体

Han:明朝体!渋くなりすぎず良いフォントですよね。

H:可愛らしさだけではなく妖しい雰囲気があるところも好きなポイントです!人物に例えると椎名林檎さんっぽいな〜と個人的に感じています!

Han:なるほど。すごくわかりやすいイメージですね!平仮名がとくに特徴的で妖しい雰囲気、たしかに感じます。

Han:ちなみに私は一番好きなのは「Futura」で、英数字はこれを使っておけば間違い無いと思っています!

S:それっぽくいい感じになるね!

Han:あとは「A1ゴシック」。圧倒的に使用率が高くて、好きなデザインを作っていいと言われたら大体これを使ってしまいます。

線画の交差部分の墨だまり表現と僅かな角丸処理によって温もりを感じるフォント

Han:交差部分で墨だまりになっている表現が好きです。そして日本語だけでなく数字、アルファベットまで温かみのある丸っこい形が大好きです!

C:A1ゴシックはウェイト(太さ)が4種類あるのも使い勝手が良いですね!

フォントは使いやすさだけじゃない!

今回はスピカデザインのデザイナー4人の好きなフォントを紹介してみました!
どんなデザインでも使いやすいフォントもあれば、一目であのフォントだ!とわかるような特徴的なものもありました。

みなさんも色んなフォントを探して、お気に入りを見つけてみてください!