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

よくある質問

Shindo

Q 【サイトレビュー】製品特長がアニメーションで伝わる!ペンのブランドサイト

こんにちは、Webディレクターのしんどうです。

かっこいいボールペンのブランドサイトを見つけたので、レビューします!

今回レビューするサイト

フリクションシナジーノック:https://pilot-frixion-synergy.jp/

PILOTが販売しているペン「フリクションシナジーノック」の公式サイトです。 PILOTが独自開発したペン先「シナジーチップ」を搭載していることで、なめらかな書き味を実現しています。

競合サイト

同じくペンを製造・販売している競合企業のサイトを調査してみました。

ジェットストリームスタンダード(三菱鉛筆)

ジェットストリームスタンダード:https://www.mpuni.co.jp/products/ballpoint_pens/jetstream/jetstream/standard.html

ボールペンでは「ジェットストリーム」、マーカーでは「ポスカ」、シャープペンシルでは「クルトガ」や「ユニ アルファゲル」などペン分野でたくさんの人気ブランドを打ち出している三菱鉛筆株式会社です。

現在、特にブランドごとの専用ページは設けていないようでしたので、同価格帯の人気のボールペン「ジェットストリーム スタンダード」の詳細ページをピックアップしました。

▼配色

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

▼分析

製品紹介ページらしく、決められたコンテンツエリアに製品の特長などが記載されている、というシンプルでわかりやすい構成です。

配色は、サイト全体のトンマナに合わせて、白をベースとしてロゴカラーである赤を装飾やあしらいに差し込んでいます。

ペンの概要や特長が理路整然と説明されており、内容がとても入ってきやすく、Webページとしての役割がしっかりしている印象です。

ZOOM

ZOOM:https://www.zoom-japan.com/

トンボ鉛筆が販売する日本発のコンテンポラリーデザインペン「ZOOM」のブランドサイトです。

機能性だけでなく、デザインの美しさにもこだわりを持ってつくられたデザインペンです。

▼配色

【ベース】グレー 【メイン】白 【アクセント】なし

▼分析

総論

そもそもですが、公式サイト内で製品紹介ページをそれぞれ設けて紹介しているというケースがほとんどで、ペン商品単体でのブランドサイトを公開している事例が少なかったです。

高価格帯のペン商品のブランディングのため、新商品開発のPRのためという目的でつくられているようです。

今回のサイト「フリクションシナジーノック

フリクションシナジーノック:https://pilot-frixion-synergy.jp/

以上を踏まえて、今回ピックアップしたサイトをレビューしていきます。

▼配色

【ベース】グレー 【メイン】白 【アクセント】ペンのカラーバリエーション

いいなと思ったポイント

まず、ファーストビューのビジュアルがとても印象強いです。

影のように引かれたペンのラインが、モノトーンでまとめられた空間に切り裂くように差し込んでいてクールです!

なんと、画面左下でカラーを切り替えるボタンがあり、クリックするとラインの色が切り替わります!

ついつい気になってクリックしてしまうので、ユーザーがペンのカラーバリエーションを認知しやすい面白い仕掛けです。

スクロールしていくと、本商品のポイントであるシナジーチップにズームされたり、ペンが書かれるアニメーションなどさまざまなギミックが仕込んであります。

ペンの細さは0.3~0.5のバリエーションがあり、これも切り替えることが可能です。細さをアニメーションで確認することができるのは斬新ですね!

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

おそらく、シナジーチップという新しいペン先の開発製品を認知させるために、アニメーションでユーザーに楽しんでもらいながら伝えるWebサイトをつくったのかと考えています。

カラーや細さの切り替えができたり、セクションごとにペンがズームインしたり、多機能で躍動感あるデザインにすることで、先進性のある製品であることが伝わります。

まとめ

ユーザーにUXを与えつつ商品のバリエーションや特長を伝えることができる、非常に優れたWebサイトでした!

アニメーション一つとっても、ちゃんと意味を持たせて実装させるのが大事です。

Q 【サイトレビュー】「にがり成分」にこだわったライフケアブランドのWebサイト

こんにちは、Webディレクターのしんどうです。

暖冬だといわれていた今冬ですが、大雪が降ったり、昼はあったかいな〜と思っていたら急に氷点下まで下がったりと寒暖差のはげしいハードモードになっています。

くれぐれも体調管理には気をつけましょう。

さて、私はお風呂が大好きで毎日湯船に使っていますが、いつもバスソルトを入れて入浴しています。ミネラル成分が体を温めて発汗作用を促すほか、香りがついているものだと倍リラックスできるのでおすすめです。

なにか良いバスソルトはないかな?とネットサーフィンしていたら、とても素敵なWebサイトを見つけたのでシェアします!

今回レビューするサイト

umiral:https://umiral.jp/

「umiral(ウミラル)」というライフケアブランドのWebサイトです。

現在はハンドクリームとバスソルトを販売しており、Amazonで購入することができます。公式オンラインストアはComin Soonとなっているのでこれからリリースされるのだと思います。

「にがり浴でここち良く。」というコピー、雄大な海の景色、波をモチーフとしたあしらいやロゴ。

ブランドコンセプトに沿って、細部までこだわったファーストビューに魅了されました。

競合サイト

umiralはハンドクリームとバスソルトを販売していますが、今回バスソルトを探してたら見つけたので、バスソルトを販売している競合を調査しました。

Kneipp

kneipp:https://www.kneipp.com/jp_ja/home/

19世紀末、ドイツのセバスチャン・クナイプ神父が植物や水などの自然の生命力に着目して誕生した自然派ハーバルブランド。

バスソルトやスパークリングタブレット、バスミルクといった入浴料から、泡ボディウォッシュ、美容オイルやハンドクリーム、ボディケア製品までの様々な製品を取り扱っています。

ちなみに現在私が使っているのはこのブランドのもの!おすすめです。

▼配色

【ベース】白 【メイン】グリーン 【アクセント】なし

▼分析

商品数がとても多く、商品情報とオンラインストアが統合されたサイトになっており、ボリュームがあるWebサイトです。

ファーストビューでは、シーズンのバレンタインギフトについての情報が掲載されています。こちらシーズンやキャンペーンによって載せる情報を変えているのでしょう。

基本ロゴカラーのグリーンをメインとして配色されています。

かなり歴史あるブランドなので詳しいことはわかりませんが、セバスチャン・クナイプ神父の哲学のもと生まれた自然派ハーバルブランドのため、グリーンカラーはさまざまな想いが込められていそうです。

エプソムソルト

エプソムソルト:https://epsomsalt.jp/

バスソルトといったら、「エプソムソルト」といわれるくらい有名ですね。

厳密には塩でもなくソルトでもなく高純度の硫酸マグネシウムとのことです。

▼配色

【ベース】白 【メイン】ブルー 【アクセント】なし

▼分析

こちらもエプソムソルトの情報とオンラインストアが統合されたWebサイトになっていますね。

海をイメージさせるブルーをメインとして、全体的に情報がとても見やすい設計になっています。

総論

競合としてピックアップした2つは、どちらも大規模でさまざまな商品展開をしていてオンラインストアを兼ねたサイトになっているので、テーマカラーを押さえつつ、全体としては見やすさ・使いやすさに重きを置いた設計になっていました。

今回のサイト「umiral」

umiral:https://umiral.jp/

▼配色

【ベース】ブルー 【メイン】ベージュ、白 【アクセント】イエロー

いいなと思ったポイント

「にがり浴でここち良く。」というコピー、雄大な海の景色、波をモチーフとしたあしらいやロゴなど… ブランドコンセプトに沿って、細部までこだわったファーストビューに魅了されました。

ブランドのネーミングもさることながら、Webデザインからも「ミネラルをたっぷり含んだハンドクリーム、バスソルト」だということが0秒で入ってきます。

また、PCでは横スクロールになっていて、Webサイトを見ているというよりはブランドブックをパラパラとめくっているような感覚です。

たまにWebサイトをスクロールするのが億劫になってしまう面倒くさがりなんですが、このような工夫のおかげか、気軽にスクロールしてしまっていました。

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

なんといっても、海のミネラルを豊富に含んだこだわりのブランドだということがダイレクトに伝わっていますよね。

普段バスソルトを使用してミネラルの効能を知っている人は、このWebデザインを見たら絶対に気になってしまうと思います。

まとめ

あらためて、デザインの力は偉大だなと思う素敵なWebサイトを見つけたのでした。 また、素敵なサイトを見つけたら発信しますね。

Q 【サイトレビュー】企業メッセージが印象強く伝わるコーポレートサイト

こんにちは。Webディレクターのしんどうです。

今年もあっという間に1/4が過ぎ去ってしまいました… うかうかしているとすぐに1年が終わってしまうので、GWボケに負けずに攻めていきたいと思います!

GWに行った伊勢神宮のことを思い出しながらギャラリーサイトを眺めていると、美しい森林のビジュアルが目を引くWebサイトを見つけました。アクセスしてみると、とても奥が深いWebサイトだったのでレビューします。

今回レビューするサイト

I-ne:https://i-ne.co.jp/

今回レビューするサイトは、シャンプーのBOTANISTやヘアドライヤーのSALONIAを手掛ける「株式会社I-ne」のコーポレートサイトです。

他、ナイトケアビューティーブランドの「YOLU」や、泥が持つ機能を生かしたトータルクレイビューティーブランド「DROAS」など、たくさんのヒット商品を生み出しています!

競合サイト

同じく、スキンケアブランドを展開する企業のコーポレートサイトを調査してみました。

KOSE

KOSE:https://corp.kose.co.jp/ja/

「雪肌精」などの人気ブランドを展開する、化粧品業界の大企業「コーセー」のコーポレートサイトです。

▼配色

【ベース】白 【メイン】青・黒 【アクセント】なし

▼分析

ファーストビューでは、理念や品質管理、企業としての取り組みをムービーで見せています。コーポレートサイトは主に取引先がアクセスする想定で、企業ブランドをアピールすることを最優先にしているのだと思います。

配色は、モノトーンをベースに、ロゴにも使用されているブルーをメインカラーで取り入れています。

POLA

POLA:https://www.pola.co.jp/

化粧品からスキンケア用品まで幅広くブランド展開する企業「POLA」の公式サイトです。

▼配色

【ベース】白 【メイン】黒 【アクセント】なし

▼分析

オンラインショップ機能と企業情報が統合された構造になっており、対消費者向けにオンラインショップがメインコンテンツになっています。企業情報はグローバルナビゲーションに導線が設置されていますが、優先度低めになっています。

トップページは、各ブランドへのバナーリンクが並んだシンプルな構造になっているのが特徴的でした。

総論

化粧品・スキンケア業界では、「企業情報」と「自社ブランド」の2コンテンツを情報発信する必要があるため、各社の規模や方針によって、サイト構造はさまざまでした。

企業規模が大きくなるほど、ブランド数や企業情報が多く複雑化していくため、ユーザーが迷わないようにできる限りシンプルな構成・デザインにしていることがわかりました。

今回のサイト「I-ne」

I-ne:https://i-ne.co.jp/

▼配色

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

いいなと思ったポイント

「自社ブランド商品の宣材写真」と「キャッチコピー」エリアを分けている

ファーストビューで、「自社ブランド商品の宣材写真」と「キャッチコピー」のエリアを分けてレイアウトを組んでいます。

写真+キャッチコピーでデザインを組む時、商品写真を背景してその上にキャッチコピーを載せる、という手法をやりがちだと思うんですよね。

そのようなデザインにすると、文字が読みにくくなるので、背景写真に暗くフィルターをかけるか、逆に透明度を下げたり明るくする必要があるので、どうしても商品写真がぼやけてしまいます。

このようにエリアを分けることで、商品写真とキャッチコピーのどちらもすごい印象に残ると感じました。

また、キャッチコピーエリアの背景には、それぞれのブランドに合わせたテイストのビジュアルを選定して敷いていて、よりブランドイメージを伝える役割を担っています。

やりそうであまりやらないな…と思い、とても刺激になりました!

スクロールすると現れるイメージギャラリー

スクロールすると、ファーストビューのビジュアルが引いていき、グリッドで並べられたイメージギャラリーが現れます。

並べられたビジュアルはどれも美しく、しばらくスクロールを止めて魅入ってしまいます。

個人的な憶測ですが、このイメージギャラリーは「会社が大切にしている美しさや実現したい幸せの連鎖」表現しているのだと思います。

I-neは、「私たちは、“美しく革新的な方法”で、“幸せの連鎖”があふれる社会の実現に、挑戦し続けます。」というミッションを掲げています。

自社ブランドはこのミッションを達成するためのアイテムの一部であり、広い視野を持って、さまざまな事業展開や取り組みによってこのミッションを実現するために挑戦している

そんなストーリーをこのWebデザインから感じました。

そんな憶測を加速させる要因として、サステナビリティについてのセクションではファーストビューで見せていた森林のビジュアルが、イメージギャラリーからクローズアップされて背景にバシッとハマるんですよね。

トップページのアニメーションでここまでのストーリー性を感じさせる作り込みに脱帽です。

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

サイトへ訪問したユーザーに対してミッションや取り組みを伝えるために、Webサイト全体を使って企業ブランドを表現しているのだと思います。

ファースト〜セカンドビューでコピーがクローズアップし、ミッションセクションへと繋がっていく動きや、トップページ全体を使ったストーリー性のあるアニメーションによって、企業からのメッセージはユーザーに印象強く焼き付くこと間違いなしです。

まとめ

以上、株式会社I-neのコーポレートサイトのレビューでした。

余談ですが、株式会社I-neは、徹底的にデジタルマーケティングにこだわってきたという背景があります。

I-ne代表の大西洋平氏は、「大手さんと同じやり方でやっても勝てないと思い、創業からデジタルマーケティングをメインにやってきたことで、得意分野となった」と語っています。

今回のコーポレートサイトも含めて、「BOTANIST」や「SALONIA」など各ブランドの公式サイトはどれもデザイン性が高く素敵です。

これからも参考にさせていただいては、たくさん刺激をもらおうと思います!

参考: https://audee.jp/news/show/101723

Q 【サイトレビュー】めでたい日には「愛でたまご」!たまごのブランドサイトが素敵!

こんにちは!ディレクターのしんどうです。

この前までは、11月なのに暑すぎて異常気象だとか言われていましたが、一気に寒くなりました!
寒暖差が激しいので体調管理はしっかりしましょう。

寒くなると鍋料理とかあったかい料理が食べたくなりますよね!
私は韓国料理が好きなのでスンドゥブにたまごぶっ込んで温まりたいです。

そんなスンドゥブを食べたい気持ちを抑えながらWebデザインのギャラリーサイトを眺めていたら、さらにスンドゥブ欲を刺激してくるWebサイトを見つけてしまいました!

とっても素敵なデザインでしたので、スピカデザインの社内取り組みであるトレンドデザイン勉強会で共有しました!

今回レビューするサイト

たまらん堂:https://www.tamarando.com/

今回レビューするのは、長崎県・島原にある養鶏場「松本ポートリー」が運営しているたまらん堂のサービスサイトです。

たまらん堂では、松本ポートリーが生産するブランドたまご「愛でたまご」を販売しています。お祝いの日に贈る一品としておすすめの商品です!

競合サイト分析

サイトのポイントを分解する前に、競合として同じく養鶏場のWebサイトを調べてみました!

矢部養鶏場

矢部養鶏場:https://www.yabetama-topran.jp/

▼配色
【ベース】白・ベージュ 【メイン】ブラウン 【アクセント】オレンジ

▼分析
埼玉県比企郡川島町にある矢部養鶏場のWebサイトです。
配色は白とベージュをベースとしてやわらかくやさしい雰囲気です。
重要・目立たせたい部分にはオレンジを使用している傾向にあります。
鶏やたまごのシルエットやイラストを散りばめていて、シンプルながらも遊び心があってかわいいですね。

田子たまご村

田子たまご村:https://www.tamagomura.com/index.html

▼配色
【ベース】ライトグリーン 【メイン】グリーン 【アクセント】なし

▼分析
青森県田子町にある田子たまご村のWebサイトです。
緑色のたまごが特徴のため、Webサイトの配色もグリーンをベースとしたデザインにしています。

総論

田子たまご村のように、明確な特徴がある場合は特徴に合わせた配色を取り入れていますが、上記2サイト以外にも調査したところ、配色は白・ベージュをベースとしてオレンジなどの暖色を織り交ぜたデザインがほとんどでした。

今回のサイト分析

次は今回選定したサイトを競合サイトと同じように分析しました。

たまらん堂:https://www.tamarando.com/

▼配色
【ベース】白・ベージュ 【メイン】赤・黄・緑 【アクセント】なし

いいなと思ったポイント

たまごをイメージさせるモチーフやデザインがかわいい

メインビジュアルを見ると、たまごをイメージさせるモチーフが散りばめられています。
ナビゲーションやSNSリンクも丸みを帯びたかたちになっていて、細かいところにもデザインのトンマナを合わせていました。

また、たまごモチーフの中にイラストが入れ込まれています。これはめでたい日、たとえばお正月、還暦のお祝い、出産祝いなどがイラスト化されています。

くわしくはお祝いカレンダーページでを見てみると、お祝いの日がかわいいイラストとともに案内されているので面白いですよ!

大胆な色展開がされるメインビジュアル

メインビジュアルは、黃、赤、ベージュとフェードアウトしながら色がガラッと変わっていきます。登場するモデルさんたちも背景色に合わせた衣装を着ていて、作り込まれているなあと…!

全面の色がガラッと変わるのはインパクトがあって、一度見たら頭から離れません!

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

たまごモチーフにお祝いの日のイラストを入れ込んでいるのは、まさしく「愛でたまご」ということで、ブランドをデザインで上手く表現していますね!

色については、憶測になりますが、ベージュと黄はたまごからの着想だと思います。
赤は、日の丸や赤飯、紅白など、日本では縁起のいい色として使用されているため取り入れているのかなと!

それ以外にも、トーンを合わせた他色や、やわらかいイラストを散りばめていることで、Webサイト全体からにぎやかで楽しい雰囲気が伝わってきます。

デザインからすぐに「お祝いの品として贈る用のたまごかな」とわかるのはすごいですね…

まさしく、「めでたい」を表現したデザインだと思います!

まとめ

ブランドコンセプトがしっかり定まっているので、Webデザインも気持ちよく表現されていて素敵なサイトでした。

めでたい日には「愛でたまご」、検討してみてください。

Q 【楽しく作業しよう!】おすすめの作業用BGMを3つ紹介

どうも、しんどうです。

急ですが、人の集中力は15分くらいが限度らしいです。

(15分すらあやしいな自分…)

なんにせよ、人は思ったよりも集中力が続かないようです。しかし容赦なくタスクは近づいてきます。

音楽聞いて上げてくしかない!そういう結論に至ります。
実際に私が作業中に聴いているBGMを紹介しましょう。

自分がもの凄いことをしている気分になれるBGM

映画やドラマのスリリングなシーンやクライマックスで流れるBGM集です。まるで自分が映画の主人公のように、もの凄いことを成し遂げようとしている気分になれます。

コーダーやエンジニアなら、一度はコードを打っている時にそのような気分になったことがあるものです(偏見)
さらに拍車をかけてゾーンへと没入していきます。

高揚感を得ながら仕事も捗り、いいことづくしです。

パッヘルベルのカノンの無限BGM

色褪せることのない名曲「パッヘルベルのカノン」の1時間耐久BGMです。
こちらは落ち着いておしゃれに作業したい時におすすめ。

この曲を弾けるようになろうと思って3年が経ちました。

その名の通りゾーンに入るBGM

その名の通り、ゾーンに入ることに特化したBGM。
壮大な音楽はもちろん、映像も素晴らしいのでリラックスしたい時にもぜひ。

まとめ

作業中はもちろん、凄いことしてる気分になれるBGMは運動中にもおすすめですし、ゾーンに入れるBGMは入眠時にも利用できるBGMです。

またいいBGMを見つけたら紹介します。
ではでは。