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

よくある質問

H.Abe

Q 【サイトレビュー】アニメーションが印象的な認証機関の採用サイト

こんにちは!デザイナーのH.Abeです。

今回は随所にアニメーションが組まれている認証機関の採用サイトをご紹介します。

アニメーションによって印象に残る工夫がされているのでぜひ参考にしてみてください!

今回レビューするサイト

今回レビューするサイトは、世界最大級の試験・検査・認証機関である、SGSジャパン株式会社の採用サイトです。

SGSジャパン株式会社 採用サイト|https://sgsjapan-career.jp/

認証機関とは国際的な標準化の決まりごと、規格を制定・管理することが主な役割です。

競合サイト

株式会社セシオス

株式会社セシオス|https://www.secioss.co.jp/recruit/

▼配色

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

▼分析

シンプルなデザインです。情報が非常にわかりやすいです。

特設の採用サイトを用意しているということではなく、コーポレートサイトの1コンテンツとして採用ページを設けておりました。

ビューローベリタスジャパン株式会社

ビューローベリタスジャパン株式会社|https://www.bureauveritas.jp/careers

▼配色

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

▼分析

前述同様、シンプルなデザインです。詳細情報は各リンクに飛ばすことで、求職者が求めている情報に的確に遷移できるような構成になっています。

こちらも同様に、特設の採用サイトを用意しているということではなく、コーポレートサイトの1コンテンツとして採用ページを設けておりました。

総論

「歴史がある業界であること」「生活をする上で必要不可欠な機関であること」から、企業のバリューよりも業種のバリューの方に比重があるのか?と考察しました。そのため、サイトは「世界観を伝える」よりも「情報を伝える」ことを目的としているのではないでしょうか。

今回のサイト「SGSジャパン株式会社|採用サイト」

SGSジャパン株式会社 採用サイト|https://sgsjapan-career.jp/

▼配色

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

いいなと思ったポイント

世界観の演出に振り切っていること

コラージュのような表現をしていること、ホバーアニメーションやオートアニメーションを多数用いて、情報を伝えるよりも世界観の表現に振り切っているところが他社との差別化ポイントだと思いました。

ヘッダーのロゴアニメーション

数秒に1回の頻度でアニメーションが発動します。

これはあくまでも主観になってしまうのですが、ニュース番組の番組ロゴのような使い方に感じました。

news zero|https://youtu.be/RUGk-_xKbag?si=cs3cGRctoge7Eog5

ニュース番組然り、ロゴアニメーションのメリットはロゴが動くことで【記憶に残りやすいから】ではないでしょうか。

本サイトもロゴが動いていることで一層他社との差別化ができているのではないかと思いました。

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

アニメーションの大きな効果は印象に訴えることができるということです。

本サイトも競合と比較すると深く印象に残るのではないでしょうか。

また、「かっこいい」「スタイリッシュ」「意識が高い」「信頼度が高い」印象であることから、同意識の若年層による応募増加も期待できるのではないかな?と考察しました。

まとめ

アニメーションとコラージュによって視覚的に印象に残るサイトでした。

一方、本文に明朝体を使うことで読みづらい印象を与えてしまうことがあります。

しかし本サイトはフォントサイズや行間、文字間まで気を遣ってデザインされていることで読みづらいと感じることなく、まっすぐに企業からのメッセージを受け取ることができるのではないかと感じました。

Q 【サイトレビュー】寝具製品を展開する企業のコーポレートサイト

こんにちは。デザイナーのH.Abeです。

今回は生活に寄り添う雰囲気を十分に表現した素敵なコーポレートサイトを見つけたのでレビューをしていきます。

今回レビューするサイト

株式会社Morght(モート):https://morght.com/

南青山にあるベンチャー企業、株式会社Morghtのコーポレートサイトです。

こちらの会社は「あなたがあなたらしく生きるための最高の準備を届け続ける」をミッションとして掲げており、具体的には老舗マットレス設計会社と共同開発したマットレス「NELL」が有名です。

競合サイト

生活雑貨を展開する企業にフォーカスを当てました。

株式会社アクタス

株式会社アクタス:https://www.actus-interior.com/

▼配色

【ベース】白 【メイン】グレー 【アクセント】ブラウン

▼分析

製品をメインコンテンツに置いている構成です。

行間は広め、可読性の高いゴシック系を用いることで「親しみやすさ」を表現しています。

株式会社良品計画

株式会社良品計画:https://www.ryohin-keikaku.jp/

▼配色

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

▼分析

社内の様子、商品などのスライドで構成されています。

ページ構成はシンプルで見やすさが表現されています。

総論

生活に「馴染んで、気に入って、使い続けてもらう」ために質の良いものである必要があります。それらを表現するため、過度な演出はせず、製品をストレートに魅せていました。

今回のサイト「株式会社Morght」

▼配色

【ベース】ベージュ 【メイン】黄色・オレンジ 【アクセント】なし

いいなと思ったポイント

  • 写真の選定

競合が製品のイメージであるのに対し、当サイトは「製品を生活に導入したことによって豊かになった人々の様子」を魅せていました。 前者は表現としては分かり易く、十分に伝わるのですが、当サイトは一つ演出を加えているので凝った印象になっていると感じました。

また、製品の数が少ない場合にもこのような手法は最適だと感じました。

  • 手書きの要素

写真に重なるように動くアニメーションや、強調ポイントで用いられている手書き文字が世界観の演出を大きく担っていると感じました。

特に、押して欲しい詳細リンクに対して矢印のアニメーションが発動しているのはサラっと通過することなく、目が止まるので視線誘導にも有効なのではないかと分析しました。

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

  • 他社に企業のフレッシュさ、若々しさを表現するため

起業から6年目の企業であることや代表の方が20代であることから、こちらの企業の「らしさ」の一つでもあると考察しました。

<サインペンの走り書きのような文字>から背伸びをせず、荒削りではあるものの一生懸命で真摯な姿勢を感じました。

まとめ

わかりやすさとは商品がわかりやすく見えていることですが、あえて商品は見せず、「商品を用いたことによる結果」を魅せるという表現も技法として有るのだということに気づきました。

次回のサイトレビュー記事もお楽しみに!

Q スピカのアクション〜イヴ・サンローラン展編〜

こんにちは!スピカおでかけ企画実行委員会です。

スピカおでかけ企画とは?

日々、デザインと向き合っている私たち。
モノを作る人間が避けるべき状態は【停滞・こう着】ではないでしょうか。
常に更新される流行の中で、良いデザインを作るには良いデザインを知ること。
じゃあ、社内に籠り続けるのはもったいないじゃな〜い!?
ということで、外に出て良いデザインを観に行きましょう!という企画です。

本記事はそんなおでかけ企画のレポートになります!

イヴ・サンローラン展 時を超えるスタイル

新国立美術館にて開催されていた、「イヴ・サンローラン展 時を超えるスタイル」に行ってきました。

本展覧会は、「モードの帝王」と呼ばれる、イヴ・サンローランの大回顧展と言われています。
デビューから、独自のスタイルを確立するまでの40年にわたる歴史をルック110体、アクセサリー、ドローイング、写真を用いて紹介されています。

メインビジュアルについて

本イベントのビジュアルについて分析してみました。

グリッドシステムを用いた配置になっている=モダンを演出

本イベントパンフレット

看板やパンフレット、チケット全てのものがグリッドを意識した配置になっていました。
グリッドできっちりと揃っていることで、整ったモダンな印象を感じることができるのではないかと分析しました。

縦組みの配置をされており、「N」の視線誘導がされている。

スタンダードな視線誘導の技法が用いられており、文字〜ビジュアルの自然な流れが意図的に演出されています。

フォントで雰囲気を演出

フォントを調べてみたところ、Juanaというフォントが一番近い印象でした。
こちらのフォントは太い部分と細い部分のギャップがあり、高級感があります。
また、カウンター※がたっぷりとある印象で、余裕のある印象も感じます。

※カウンター:フォントの部位名称。直線や曲線の字画に囲まれた内側の空間のこと。

実際に観てみて

現代でも最先端に感じるスタイルの数々に圧倒されました。

イヴ・サンローランは「ファッションは女性を飾るものではなく、女性に自信をつけさせるもの」という信念を持ってスタイルを確立されたようです。

当たり前のことですが、「強い信念があるのとないのとでは、結果に大きく影響する」ということをまざまざと見せつけられたようでした。圧巻です。


クリエイティブに向き合う姿勢や思考は吸収したいと思える内容でした!次回、スピカおでかけ企画は何処へ…!お楽しみに〜\(^^)/

Q 【サイトレビュー】デジタル事業を展開する企業のホームページ

こんにちは!H.Abeです。
先日、lottieというサービスの情報を手に入れ、それからというものWebデザインにおける「動き」に対してちょっとしたブームが来ている私です。
今回は、「動き」に着目してサイトを見漁っていたところ、AI事業をしている企業のホームページにたどりついたのでデザインの考察をしたいと思います。

今回レビューするサイト

株式会社ACES:https://acesinc.co.jp/
今回紹介するサイトは株式会社ACESのコーポレートサイトです。
こちらの企業はAIアルゴリズムを用いて、属人化しているヒトの知見や業務をデジタル化する「AIトランスフォーメーション事業」を通して、「シンプルな社会」の実現を目指している企業です。

競合サイト

AI inside 株式会社

AI inside 株式会社:https://inside.ai/
テキスト・画像・音声・動画など複数の種類のデータを一度に処理できる独自のAIの技術を活用しながら、あらゆる企業・団体のDXを一気通貫で支援しAIのビジネス活用を推進している企業です。

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

▼分析
FVの写真の印象から、先進的・近未来的な印象を受けます。
デザインの構成は非常にシンプルで、余計なものは排除されたことで、必要な情報がすぐに手に入るような構成になっています。

株式会社PKSHA Technology

株式会社PKSHA Technology:https://www.pkshatech.com/
自然言語処理、画像認識、機械学習/深層学習技術に関わるアルゴリズムソリューションを展開している企業です。

▼配色
【ベース】白、淡いグラデーション 【メイン】黒 【アクセント】なし

▼分析
FVの印象から、先進性や洗練された印象を受けます。
主に線や色味が洗練された印象を表現していると考察しました。
不規則に動く線はデジタル世界を彷彿とさせる奥行き感を感じます。

総論

AIという近未来的な要素を、図形や線などを抽象的な要素として用いて、先進性を表現しているものが多く見受けられました。

今回のサイト

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

▼配色
【ベース】白 【メイン】黒 【アクセント】なし
ビジョンの「アルゴリズムで、社会はもっとシンプルになる。」という内容に合わせてシンプルな色味を選んでいるのではないかと考察しました。
また、先進性を表現する方法として、「動き」がキーワードなのではないか?と考え、動きを際立たせるために、あえて他の要素(有彩色)は除いたのではないかと考察します。

いいなと思ったポイント

ビジョン、ミッションにあったテイスト

ビジョンの「アルゴリズムで、社会はもっとシンプルになる。」
ミッションの「アルゴリズムで、人の働き方に余白をつくる。」の内容に合わせたデザインがされていると感じました。
具体的には2点です。

①大胆に取られた余白
ミッションの内容が視覚的に表現されています。

②シンプルな印象が徹底されている
シンプルな図形を用いることで、ビジョンの内容が視覚的に表現されています。

先進性を感じる要素

①2進数で表現されたアニメーション

コンピューターの内部では、全ての情報(命令やデータ)が2進数で取り扱われています。
コンピューターとAIは切っても切り離せない関係性であることから、このようなアニメーションが用いられているのではないかと考察しました。

②ローディング、FVのアニメーション、ページ遷移時のアニメーションをlottieで実装されている
ローディングのアニメーション、FVアニメーション、ページ遷移時のアニメーションは全てlottieで実装されています。
lottieを用いることで、サイトスピードを下げることなく、高画質なビジュアルの再現が実現しています。

③英字フォントが図形的なシェイプをしており、無機質な印象

シンプルに振り切っている印象を一番感じた箇所です。
「シンプルがキーワードなので、フォントに雰囲気を出すセリフや強弱は必要ないのだ」と言わんばかりのフォントに感じました。
正円、正三角形で構成ができそうなフォントで無機質さから生まれる先進性を感じました。

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

AIを用いた先進的な事業であることを表現するためではないかと考えます。
シンプルな印象から、端的に説明をしてくれているように感じます。
そのような印象から、過不足なく企業の情報を伝えることができ、結果として問い合わせをする企業は、ミスリードが少ない状態にすることができるのではないでしょうか。

まとめ

動きをつけることで、奥行きを演出することができるのではないかと考察しました。
今回ご紹介した業界は、AIを用いた最新技術をそれぞれのアプローチで事業展開しています。
AIの印象は「最新技術」「先進的」「未来的」であることから、奥行き(=奥深さ)が必要であったのではないかと感じました。

Q 【サイトレビュー】芸術の秋だ!イベントのサイト

デザイナーのH.abeです。

芸術の秋ということでいつも以上にインプット熱がアチィな私です。

今回、実際に参加予定のイベントサイトがとてもカッコよかったのでトレンドデザイン勉強会で共有しよう!となった次第です💃

それではやっていきます〜〜〜〜

今回レビューするサイト

今回レビューするのはTOKYO NODE開館記念イベント「Syn:身体感覚の新たな地平 by Rhizomatiks x ELEVENPLAY」の特設サイトです。

競合サイト

サイトのポイントを分解する前に、競合として「実際に足を運ぶことを目的としている」イベントサイトを軸に選定をしました。

劇団ゆらじしゃく「命、ギガ長ス」
▼配色
【ベース】薄い小豆色 【メイン】赤 【アクセント】なし

毛筆フォント×iOS絵文字が印象的です。
本サイトを拝見したとき、真っ先に気迫に近いものを感じました。
それは、ビジュアルももちろんですが、ボタンが斜めになっていたり、左右の余白が極端に狭かったり、毛筆フォントとドット風のフォントが混在していたりすることで生じる「違和感」が気迫を演出しているのではないかと考えました。

オードリーのオールナイトニッポン in 東京ドーム
▼配色
【ベース】白 【メイン】緑・黄・赤 【アクセント】なし

構成はとてもシンプルですが、ビジュアルや手書き文字が独自の世界観を演出しているサイトです。
緑・黄色・赤のラスタカラー(リトルトゥースカラー)がとても印象的です。
使用している画像にノイズがかかっていて、これまでの長い道のりを情緒的に魅せていると感じました。

▼結果
実際に足を運んでもらうには「世界観に興味・共感を持ってもらうこと」だと考えました。
そのため、どちらのサイトもそれぞれの手法で世界観を的確に表現されていました。
また、目的は「実際に足を運んでもらうこと」なのでチケット購入がコンバージョンになっているという共通点がありました。

今回のサイト

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

Syn:身体感覚の新たな地平 by Rhizomatiks x ELEVENPLAY
▼配色
【ベース】グレー・黒 【メイン】黄緑 【アクセント】なし

本サイトも目的は上記同様なため、チケット購入がコンバージョンになっています。

いいなと思ったポイント

仮想空間なのか?現実なのか?という世界観をビジュアルで表現

VRのような左右の円の中に世界が広がっています。
建物や生身の人物(現実)とポリゴン調のオブジェクト(仮想空間)を掛け合わせたビジュアルが本イベントを効果的に表現されていると感じました。

「syn」をモチーフにしたパターン

背景の模様は「syn」を抽象的にしたものが施されています。
独自の世界観を表現しつつ、コンテンツの邪魔をしない、適度がとても参考になりました。

Y2Kを感じるデザイン

はっきりとした実線と蛍光色の掛け合わせやグリッチ加工にY2Kっぽさを感じました。
本イベントは前例の無い体験をできるということがポイントなので、最新感を表現されているのかなと思いました。

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

効果的に世界観を表現したことにより、興味・共感を持つ人が増加するのではないでしょうか?
また効果としては、イベントへの参加希望者が増えることが期待できると考えます。
チケット購入への導線もスムーズでわかりやすいので、途中で気持ちが変わることなく購入までたどり着くことが期待できます。(実際私がそうでした!)

まとめ

どのサイトもイベントを効果的に表現されていて、なによりもイベントを深く理解していることがとても重要であると感じました。
表現をする側として、マインド含めとても刺激的でした!(そしてイベントとても楽しみ…!)

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

Q サイトレビュー道場#01

押忍!デザイナーのH.Abeです。

私はデザイナーとして幅広いテイストのデザインを作成しておりますが、日頃思っていることがあります。

それは…、



「もっともっと表現の幅を広げたいっ…!」



そんな思いから今回の企画を始めました。

いいなと思った点や、「ここはこういう意図があるのではないか」などの言語化をしていこうと思います!

みなさんのインプットのお役に立てたら嬉しいです^^

レビューのやり方

今回は、以下の視点からレビューを進めます。

1.仮説を立ててみる

2.表現から逆算してみる

3.写真に注目してみる

4.感情の先に得られる効果を考察してみる

5.よくあるモジュールのデザインをチェックしてアイデアのあるものに注目してみる

こちらはWebプロダクション会社である、株式会社クオートワークスの社内用課題で、代表のムラマツ氏がSNSにて公開されていたものです。

今回レビューするサイト

【サイト名】LIFE LABEL(ライフレーベル)

【概要】インテリアやファッション・車・音楽・映画など様々なジャンルを切り口に暮らしがもっと楽しくなるアイデアをお届けしているWEBマガジン

視点その1:仮説を立ててみる

・住宅業界の硬さ、とっつきにくい印象をラフに、親身な雰囲気にしたいのではないか?

・角丸四角や漫画、ゲームっぽいコミカルなあしらいにすることで親近感を表現?

視点その2:表現から逆算してみる

ドット絵

→飽きない、もっと知りたい、懐かしさ、親近感

記事一覧のサムネの形がそれぞれ違う

→飽きない、もっと知りたい、個性的


視点その3:写真に注目してみる

・背景を切り抜いたコラージュのような画像は個性的に感じる

視点その4:感情のその先に得られる効果を考察してみる

・「飽きない」「個性的」「親近感」というキーワードから他との違いを感じ、この違いは興味につながる。

・興味は家を建てる・作るという大きなライフイベントへの考え方をラフに娯楽に近いものに変えるきっかけにできそう。

・家を建てることへのネガティブなイメージ(決まりきった息苦しさ、マイホームブルーなど)も減るのではないだろうか。

視点その5:よくあるモジュールのデザインをチェックしてアイデアのあるものに注目してみる

ニュース:記事がFV直下で流れている

→特に見て欲しい記事を流すことで効果的に告知ができる

SNSアイコンがドット絵

→ゲーム、漫画っぽい世界観に合わせている


見出し:画像やサムネイルの下に配置されている

→記事コンテンツとの統一性。記事だけでなく、ショートフィルムやミュージックプレイヤーがあり、記事とは用途が異なるが、本サイトがWEBマガジンであるからのデザインか?

記事サムネ:四角や丸、波型、一部角丸など様々。

→「個性」、「自分」を大事にしているサイトなので矛盾がないあしらい。

まとめ

  • 方向性にもよるが、親近感を表現する引き出しとして漫画・ゲームっぽさなどのコミカルさは適している。
  • 「個性」を表現するとき、カラフルな色での表現だけでなく形や写真の表現技法でも表現ができる。

では今回はこの辺で・・・!

Q 【作業のお供に!】おすすめ深夜ラジオ3選

こんにちは!H.abeです。

昨今のコロナ情勢により、「テレワーク」や「ワーケーション」など新しい言葉と共にお仕事の形も様々になってきました。

そこでみなさんにお聞きしたいのが!

みなさん!作業中ってなに聞いてるんですかッ!

「好きなアーティストの音楽聞いてるよ〜」や「集中できないから無音です!」などあると思いますが・・・・

最近の私はもっぱらラジオです!(大声)

ラジオ歴は2年と短めの私ですが、「これは面白い!!!」となった初心者でもハマるラジオをご紹介いたします。

フワちゃんのオールナイトニッポン0

毎週月曜27時00分~28時30分(ニッポン放送)

令和にHAPPYを持ってきた、(と筆者は本気思っています)元気印フワちゃんが月曜深夜3時から、一時間半1人でおしゃべりをしているラジオです。

おすすめするポイントはフワちゃんとカラオケにきている感覚になれて、HAPPYで満たされるところ!

ラジオ内で流す曲は音源聞こえなくなるくらい、フワちゃんが大声で歌ってます。

かわいい洋楽や、平成生まれは「エモすぎる!!!」と叫ばずにはいられないヒット曲など、選曲もツボです。

JUNK バナナマンのバナナムーンGOLD

毎週金曜 25時00分~27時00分(TBSラジオ)

バナナマンのお2人が金曜深夜1時にお送りしているラジオです。

おすすめするポイントはトークが安定に面白いところ!そして面白いコーナーも豊富です。

特に、ヒムペキ兄さんのコーナーを初めて聞いた時、夜中にゲラゲラ笑いました。笑

Creepy Nutsのオールナイトニッポン

毎週月曜 25時00分~27時00分(ニッポン放送)

ヒップホップユニットのCreepy Nutsのお二人がパーソナリティとして月曜深夜1時にお送りしているラジオです。

一般的にアンダーグラウンドなイメージがあるHIPHOPですが、このラジオはそういった雰囲気はないのでご安心ください!

おすすめポイントは、DJ松永さんのラジオメールを読む時に発動する憑依芸と、R-指定さんの天才的なワードセンス!

リリックの解説などの真面目な話から、おふざけ全開までメリハリ効きまくりラジオです!

まとめ

いかがでしたか?他にも魅力的なラジオはたくさんあるので、聞いてみてはいかがでしょうか!

また、みなさんの作業のお供も教えてください^^