gallery

ギャラリー

LP

Parts

ホワイト アーカイブ | theta - blog ホワイト アーカイブ | theta - blog

gallery

手描きのイラストがペンのアナログな雰囲気を伝えています。
全体的にシンプルなデザインですが、人の温もりや柔らかさを感じるデザインです。

とくちょう

高級感と時の流れの静寂さが伝わってくる

イメージ

余白を十分にとっているので、高級感がでています。
また、文字書きのゆっくりした雰囲気がつたわってきます。

イラストアイコンがアクセントになる

イメージ

アイコンイラストがなくても成り立つけど、
あると統一性もでるし、項目の詳細が伝わりやすいと思いました。

ポイント

メニューバーも手書きで統一

イメージ

イラストに合わせて、メニューバーも手描きなのが良いなと思いました。

FVの写真から「パン」を食べたときのほっこりした気持ちなどがイメージできます。
「いい暮らし」＝「時間」と捉えているのかなと思います。

UI / UX

一覧ボタンがわかりにくい

イメージ

トピックスの部分はサイトに合った線のデザインで良いなと感じたが、
一覧への遷移のボタンがあしらいに見えてしまったので、少しわかりにくいのかなと感じました。

ポイント

パンに合わせた楕円の形

イメージ

円ではなく楕円になっています。
パンの形に合わせているのだと思いますが、こういったささいな表現が全体のデザインを活かすポイントになると思います。

英文字のあしらい

英文字のあしらいが生きるデザイン。

キャッチコピーに合わせたデザイン。空気のように軽く、柔らかい印象を受けます。

UI / UX

見出しのテキストバランス

イメージ

ジャンプ率がよく、目立たせたい部分に目が止まる

遷移先がわかりやすく整理されている

イメージ

「ENTRY」を押すと、年度ごとにエントリー箇所が分かれているのでわかりやすいと思いました。

職に対しての研修内容が整理されている

イメージ

訪れたユーザーに対して、入社後の研修内容をわかりやすく伝えていると思いました

ポイント

動きのあるレイアウト

社内の声など、並べて配置しがちふだが、動きのあるような形式で配置されているのが良いなと思いました。

カーソル合わせると、その人の情報がでてくる点

上部にも記載があるが、カーソル合わせるとでてくる仕様は良いなと思いました！
わかりやすいし、上部の文章より丸枠内の文章の方が読んでしまう。

黒カラーでどっしりとした印象を受けるデザインですが、リアルさの追求が高く、フライパンへの愛情を感じます。

とくちょう

力強さを感じるウェイト

イメージ

スクリプト体のフォントは優雅な印象をもちやすいですが、ウェイトを強くすること力強さがでると思いました。

UI / UX

リアルさの追求がすごい

ポップアップですが、餃子のおいしさを湯気を加えることでユーザーに視覚的に伝えている

360度から見れる商品の伝え方

角度を変えて見れる点
また、切り替えることで構造まで見れる。
リアルさのこだわりと追求。

テクノロジーをキャラクターを用いて表現しています。
DNAに見立てたデジタル調のキャラクターの動きが繊細で秀逸。

とくちょう

キャラクターを活かした技術力

アニメーションの切り替わりが秀逸です。
バーチャル世界を擬似的に楽しめるサイトだと思いました。
最後はちゃんとテキストに視線がいくように構成されていて、UIの視点も消えていない。

ポイント

バーチャルな世界観を楽しめる

カーソルに合わせて視線をずらすことができます。
画面そのものが「視覚」になっていて、Webサイトをみているというより
ゲームなどをしている感覚。

実機で見ると崩れる

イメージ

検証ツールで見ると問題ないが、
実機で見ると崩れていました。
実装が複雑だと思うので、凝ったことをする時は、いろんな角度から検証が必要だなと感じました。

全体的にシンプルなデザインですが、写真の見せ方が非常に上手く、UX的にも良い印象を受けました。

UI / UX

写真にフォーカスさせたデザイン

イメージ

文字の視認性は若干悪い感じもしますが、それよりも写真で意図が伝わるデザインだと思いました。
読ませるより見せているデザイン。

ホバーの切り替え

イメージ

カーソルを当てると使用イメージの画像に切り替わります。
１画面で２枚写真を見せることができるの良いなと思います。

一番見せたい部分を左に配置

イメージ

人間の視線は左から右に動くので、
一番見せたいものを左に置くと伝わりやすいのではないかと思いました。
また、動画になっているので手をとめてつい見たくなります。

「和」×「若年層」といった斬新な組み合わせ。高級路線だと年配層のターゲットをイメージしがちですが、写真などの使用により、若い人をターゲットとしているのが明確です。

とくちょう

ターゲット層の写真を使用し、誰に届けたいのか明確

イメージ

キャッチコピーと合う写真選定。

商材を取り入れた形

イメージ

写真の切り抜きの枠が商材である「おまんじゅう」で表現されています。
お饅頭を彷彿とさせながらも柔らかい親しみやすさを感じられるデザインになっています。

縦書き表現

イメージ

和歌のようなデザインがサイトに合っていて良いなと思いました。

先進的なイメージとクリーンで透明感を感じるシンプルなデザインです。

とくちょう

先進的な動きのあるFVの動画が秀逸

横に流れ、水の物体の変化のあわらし方が素敵だと思います。

アクセントカラーとのバランスが◎

イメージ

アクセントカラーの赤を取り入れながらも、「クリーン」なイメージを損なわないように
ブルーを組みわせた画像の使い方に細部のこだわりを感じます。

パラパラ漫画のように画像を組みわせたアニメーション

一定の動きではなく、ランダムに変わる動きが秀逸で、これだけでデザイン性を感じます。

ポイント

ページ切り替わりの動きが◎

水が流れるように切り替わる動きが自然に移り変わるので
目に負担がなく良いなと思いました。

写真をゆっくり見せて、ユーザーの心の思い出に訴えかけているようなモーション。

とくちょう

写真をゆっくり表示

「明治安田生命」のCM風な見せ方をしていると思いました。

ミニマムよりのシンプルよりのデザイン

イメージ

無駄な装飾をなく、写真と文字のみでみせています。
FVは余白を多く取り、キャッチを浮きだつようにみせています。

UI / UX

四回クリックしないとTOPページに遷移しない

FVからスタートして、四枚写真を見ないとTOPページに飛びません
写真を見せることを優先させている印象です。
ユーザーとしては早く先をみたいので少し使いにくいサイトだと感じました。

色も装飾もないシンプルなデザインだけど、文字の強弱やレイアウトで楽しさやワクワクするような印象を受けるデザインです。

UI / UX

FV直下に情報設置

イメージ

FVの直下におくことで「伝えたい情報」をユーザーに届けることができる。

レイアウトの配置が良い

イメージ

着画と商品単体を分けて入れているのも良いし、キャッチの文字部分もデザインされているので、色がなくても動きのあるデザインに見える。

１画面で収まるスマホパーツ

イメージ

どのコンテンツも１画面で収まるので情報が追いやすい、見やすい。

ポイント

上にぴょこっと動くアニメーションの動き

シンプルだけどポップさを感じるのは、上下のアニメーションの動きが入っていることもポイントの１つとしてあると思いました。

ランキングデザインの表現

イメージ

王冠つけて表現しがちですが、色で変化をつけているのみで表現しています。デザインテイストにあった表現が良いなと思いました！

余白を多く取り高級感を演出。余白の取り方、レタースペーシングの開け方が秀逸なデザインです。

とくちょう

モノクロ・シンプルで高級感を感じさせるデザインです。

UI / UX

余白を多くとることで、文字に目が止まる

イメージ

文字サイズが11pxと小さめですが、余白とレタースペーシングとのバランスで、文字にしっかり目がいくようにデザインされています。

最低限の装飾

装飾を極力少なくし、写真に視線が向くようにデザインされています

シンプルとミニマル

イメージ

どちらかというとミニマルに近いデザインです。余白が多いと埋めがちですが、うめることはせず、極限まで引いた美しくまとまりのあるデザインだと思いました。