配色の記憶が残るデザイン

煮詰まった時、これらのサイトを眺めるだけで穏やかな気持ちになれそうです。

illust - ほっこりイラスト

ビジュアルの全貌をあえて見せないようにすることでユーザーの興味を引き、下へのスクロールを促しつつ、視覚的なインパクトを強めます。

巨大な壁画を眺めるように、上から下へ視線が自然に誘導されます。

design - 1画面に収まらないKV

多種多様感を表現しつつ、規則的に配置することで、全体として見たときに有機的なイラストに整然とした印象を持たせることができます。

illust - パターン状に並ぶイラスト

文字の下に色のついた帯、通称「座布団」を敷くことにより、コントラストが上がり視認性を強めます。背景が複雑の上に文字を配置する際に有効です。

テプラのように、文字が存在を主張します。

style - 座布団が敷かれた文字

漫画の吹き出しなどで使用される、ゴシック体の漢字と明朝体のかなが組み合わさったフォント。
ゴシックの力強さと明朝の情緒性が共存しているので、見出しとして大きく使用することで、独特な存在感を放ちます。

まさに、人の声が聞こえてきそうなフォントです。

font - アンチック体

余白の取り方、本文幅、写真のリズム、回答項目などの参考に。
※基本的に下層に該当ページあり

recruit - インタビューページ参考

テキストをホバーした際に、リンク先のサムネイルなどをカーソルに追従表示させることで、デザイン自体をシンプルにすることができ、雑多な印象を回避することができます。

小窓から景色を覗くように、遷移先への期待感が高まります。

hover - カーソルに画像がついてくる

レイアウト、写真、項目の参考に。
※基本的に下層に該当ページあり

recruit - メンバー一覧ページ参考

具体的な数値を示すことで、求職者がもつ疑問や不安を解消します。
レイアウト、項目、数値の目立たせ方、イラスト&グラフのデザインの参考に。
※基本的に下層に該当ページあり

recruit - 「数字で見る」コンテンツあり

本編とは別レイヤーのような表現をすることで、
目次のような、あくまで機能としての役割感が強まります。

scroll - フッターがめくれるように出てくる

手書き文字のデザインに対し、なぞるようなアニメーションをつけることで、
元々の手書き文字に含まれる、温もり、感情、人間味などを強調することができます。

animation - 手書き文字アニメーション

デザイン頻度少ないので「あれ、どんなんだったっけ？」ってなった時に。

design - Cookie表示ありのサイト

サイトマップ機能としての役割が強く殺風景になりがちなフッターも、画像を配置することでグラフィカルな印象を与える事ができます。

目次に挿絵が入ったように、イメージを掻き立てます。

design - フッターに画像を配置

テキストと背景画像が重なる部分の色味をネガ反転させることで、いい意味での緊張感が生まれ、アクセントとして視線を引きつけます。

七味のように、少しの量でピリリと効きます。

style - ネガ反転で重なる

メガメニューは、画面スペースを広く使用したドロップダウンメニューのことで、複雑なサイト構造をわかりやすく表示し、ユーザーが目的のページにたどり着けるようサポートします

広げた地図のように、目的地までの最短ルートを示してくれます。

navigation - メガメニュー採用

長いページだとしても「あとどれくらいか」がわかることで、ユーザがモチベーションを保ちつつページの最後まで到達することができます。
また、バーにアクセントカラーを使用することで、1画面でのカラーの表現において、常に画面にアクセントカラーを登場させることができるのがGOOD。

scroll - ページ位置に応じてバーが伸びる

必ず置く要素であるロゴを大きく表示させることで、どうしても殺風景になってしまいがちのフッターにグラフィカルな表現を加えることができる。
シンボルありのロゴより、テキストベースのロゴのほうが、タイポグラフィー的に表現できるので向いてそう。

design - フッターにデカいロゴ

Y2K=Year 2000。
2000年代初頭を彷彿とさせる、その当時の人がイメージした未来的なデザインをY2Kとして集めています。

style - Y2K

illust - フラットなイラスト

滑らかな流体シェイプ(blob)の図形をデザインに取り入れることで、直線的になりがちのデザインに有機的な動きを与え、自然な柔らかさと優しさを演出します。

円形を超えた優しいニュアンスで、穏やかな気持になれます。

design - 流体シェイプ（blob）

グロナビを縦並びにし、左or右揃えにすることで、縦のラインが強調され、整然とした印象を強めます。
また、余白の空いた部分に配置すると、レイアウトの法則性が際立ち、効果的です。

要素が規則的に並んだファーストビューは、緻密に設計されたグラフィックのようです。

navigation - 縦並びのグロナビ

「DOPE」はヒップホップのスラングで「かっこいい」、「イケてる」という意味で使われます。

個人視点で、音楽やアートカルチャーの影響が感じられたり、アンダーグラウンドな香りが漂うイカしたサイトをまとめています。

design - DOPEなサイト

公開から推定5年以上経ち、トレンドの荒波を乗り越え、今もなお色褪せず現役で中身が更新され続けている耐久性の高いサイトを、独断と偏見でセレクトしました。

名建築のような「変わらない良さ」があります。

matome - 不朽の名作（5年以上）

丸みを帯びたゴシック体は、硬さを和らげた柔らかな印象を与え、親しみやすさやフレンドリーさを表現し、子ども向けからモダンなデザインまで幅広く活躍します。

穏やかな口調で語りかけられたような、安心感があります。

font - 丸ゴシック

幅の狭いCONDENSEDフォントはその細身なフォルムで、限られたスペースでも、スタイリッシュな印象と視覚的な存在感を与えることができます。

スリムな佇まいに、洗練さと機能美が凝縮されています。

font - CONDENCED（幅狭）フォント

傾いて重なった画像を配置することで直線的なレイアウトに変化をもたらし、さらにアニメーションやスクロールでめくれていくような演出をつけることで、遊び心やカジュアル感を強調します。

現像された写真をめくっていくように、次に何が出てくるか期待が高まります。

animation - 傾いて重なった画像がめくれる

社員インタビューページ内に、「1日のスケジュール」があるサイト。中には「1ヶ月」、「1年」もあります。
これがあることにより、ジョインした際の具体的な働き方がイメージしやすくなります。

recruit - 「1日のスケジュール」あり

エリアの境界線を直線でブツッと切るのではなく、曲線やジグザグに区切ることで、デザインに動きや遊び心を加え、サイトの世界観を強めます。

パズルのピースが組み合わさったような、全体の調和が生まれています。

design - エリアの境界線が変形

担当した案件をまとめてみたよ。

担当したよ。

Works

PXD WORKS

素晴らしいリアルタイムアニメーション、Shader芸の世界。

効果的なWebGL

がっつり読みたくなる、縦書きサイト。

縦書き

実物がある商材を販売・訴求するコーポレートサイト

有形商材

採用サイト

コーポレートサイト

5iveの制作実績です。

5iveには、「企画から全て作る」「実装だけで力を発揮する」の2つの面があります。
このDesign Setsは後者の事例をまとめたものです。