モーション参考

Web・アプリを中心にフルオーダーメイドで制作するクリエイティブ制作会社です。「編集×表現×技術×ホスピタリティ」を軸に、SEO/AIOやアクセシビリティ、パフォーマンスやCMSまで、裏側の作り込みに強いのが特徴です。
https://studio-spoon.co.jp/

Studio Spoon Works（実装編）

Studio Spoon Works（デザイン＆実装編）

ベタ打ちに比べて少しだけ「手が加えられている感」が出るのがGOOD。
ちょっとした違和感でアテンションを高めたい時に。

font - セリフ・サンセリフ混植

タイポグラフィにビジュアルを組み合わせることで、伝わる情報に奥行きが生まれ、含まれる魅力が自然な形で伝わります。

小窓のむこうに小さな世界が広がっているようで、思わず覗いてみたくなります。

design - タイポグラフィ×ビジュアル

大きな3Dオブジェクトを背景に配置することで、静的なデザインに奥行きと迫力が加わります。見る人の目を引きつけると同時に、先進性や洗練されたイメージを強調します。

空間に浮かぶ3Dが、圧倒的存在感を放ちます。

design - 背景に大きい3Dオブジェクト

SHIFTBRAIN  Works

Web・アプリを中心にフルオーダーメイドで制作するクリエイティブ制作会社です。「編集×表現×技術×ホスピタリティ」を軸に、SEO/AIOやアクセシビリティ、パフォーマンスやCMSまで、裏側の作り込みに強いのが特徴です。
https://studio-spoon.co.jp

Studio Spoon Works（デザインのみ編）

pineal project

訪れる人を魅了する完成したWebサイト。
そこに至るまでの「選択・葛藤・判断」に焦点を当てた記事「Interviews」でご紹介したサイトです。

S5-Style Interview's

BNN出版の書籍、遊び心のあるデザイン 視線を勝ち取る「ウィット」なアイデア (https://bnn.co.jp/products/9784802511278)にインスパイアされたので、ウィットな工夫を凝らしたWebサイトまとめてみました。

Idea：遊び心のあるウィットなデザインまとめ

西谷デザイン WORK

WORK

体験装置やイベント、グラフィックは夜.サイトからご覧ください。
https://yoru.design/

横澤が担当いたしました😎🤟

円という形状で目を引き、更に回転させることでアテンションが高まるので、小さい表示でもしっかりとしたアクセントになります。

直線的インテリアの中に置かれた丸テーブルのような、心地よい「くずし感」があります。

design - 回転する円形テキスト

matome - 愛すべきキャラクター達

illust - 線画のイラスト

複数画像を組み合わせることで、視覚的な情報量を増やし、ストーリー性や多面的な魅力を伝えるのに効果的です。
各画像がリズムを生み出し、ユーザーを惹きつけます。

ドラマのワンシーンが並んだように、それぞれの画像が物語を語りかけます。

design - 複数画像で構成されたKV

画面を2分割し、片方を固定表示、もう片方をスクロール可能にすることで、「印象付けたいもの」と「読ませたいもの」の役割が明確になり、視覚的にも整理されて自然に読み進めやすいデザインです。

静と動のメリハリが心地よいスクロール体験を生み出します。

scroll - スプリットスクリーンレイアウト

セクション間に複数の画像がアニメーションで横スクロールするエリアを挟むことによって、ページ全体にリズムを与えつつ、世界観やストーリーを凝縮して伝えます。

挿絵のようにページに心地よい間を与え、自然に次のセクションへ繋ぎます。

animation - 横スクロールするイメージ画像

ショーリール形式のKV動画を採用することで、視覚的なダイナミズムと多彩な印象を一度に伝え、短時間で会社やブランドの魅力を凝縮して届けます。

映画の予告編を観ているように、次々と繰り出されるシーンが期待感を高めます。

movie - KVがショーリール

illust - 3Dのイラスト

スクロールスピードに応じてオブジェクトが歪む、スピード感のある演出です。
画像が連続するレイアウトのさりげないオシャレとして。

scroll - オブジェクトが歪む

スクロール動作に慣性を加えることで、動きに程よい余韻が生まれ、体験としての高級感や美しさを演出します。
また、パララックス（視差効果）を活かす際にも有効です。

高級車のようなしっとりとしたブレーキが、上質なスクロール体験を生んでいます。

scroll - ぬるっとした慣性スクロール

スタイリッシュさや、ちょっとしたデジタル感を出したい時に。
写真や動画の画角でもそうですが、人はなぜ横に細長いほうがかっこよく感じるのでしょうか？

font - EXTENDED（幅広）フォント

古くは「マーキー」、今で言う「スクロールテキスト」ですね。
一時的なトレンドかと思いきや、かなり定番化しています。
これで何かを伝えるというより、グラフィカルな要素としての役割が大きい気がします。

animation - 英語が横に流れる

Studio.Design, Framer, Webflowなど、ノーコードWeb制作プラットフォームで作成されたサイトをまとめました。

ノーコードツールで作成されたサイトまとめ

人や空間に漂うなんともいえない雰囲気を作り出している写真事例をまとめました。

Photo：質感にこだわりを感じる写真まとめ

ダイナミックな演出に強いFunTech株式会社のコーポレートと採用ブランディング制作事例まとめ
https://www.funtech.inc/ja

Work of FunTech

簡単に見えてとても難しい、ナチュラルテイストのスナップ写真をまとめました。

Photo：人々の自然体を捉えた写真まとめ

株式会社ドロネーの制作サイト・協力サイトです。

DELAUNAY Inc.

ブランドやサービスが歩んできた道のりを振り返り、感謝を伝える場として効果的です。ユーザーとの関係を再確認し、共に過ごした年月を感じさせ、これからの未来を共に描くことで、より一層のつながりを生み出します。

祝い方もそれぞれ。企業の色が濃く表れます。

design - 周年コンテンツ

ホバーやドラッグなどユーザーの操作に応じて動きや変化を見せるインタラクティブなデザインは、ユーザーに驚きや楽しさを与え、静的なデザインでは得られない没入感のある体験を提供します。

サイトと対話しているかのように、楽しい反応を返してくれます。

design - インタラクティブ

ファッション、プロップ、インテリアを駆使して、素敵な写真を作り上げた事例をまとめました。

Photo：スタイリングを駆使した写真まとめ

アイソメトリックと言われる斜め上から見下ろすような視点でイラストを描くことで、平面のイラストに立体感をもたせ、俯瞰視点で複雑な構造をわかりやすく整理して伝えることができます。

ジオラマを覗き込んだような、細やかで可愛らしい世界が広がっています。

illust - アイソメトリックのイラスト

通常のスクロールのセオリーからあえて外れることで、「枠にとらわれない」、「自由な発想」といった印象を楽しい操作体験と共に与えることができます。

年に一度見るかどうかのレアなタイプ、出会えた人はラッキーです。

design - 縦横無尽に移動できる

画像をタイル状に並べることで、イメージを多角的に伝え、それをアニメーションで動かすことで、1画面で得られる情報の幅を広げます。

画像一枚一枚がそれぞれの物語を語りながら、全体で一つの世界を作り上げています。

animation - タイル状に並んだ画像が動く

ホバー時にカーソルがオリジナルのものへと変わることでユーザー体験に遊び心がプラスされ、操作のたびに小さな発見があり、ブランドの印象やデザインの独自性をより印象付けることができます。

何気ないデザインに個性を感じさせる一手間がステキです。

hover - ホバーでオリジナルのカーソルに変わる

遊び心のあるあしらいが、デザインにちょうど良い「抜け感」を生みだし、かっちりとしたサイトにおいても、すこしフレンドリーなニュアンスを加えることができます。

ファッションと同じく、崩し方や加減にセンスが表れます。

style - 抜け感のあるあしらい（絵文字・ステッカーなど）

複数要素の「つながり」を感じさせたり、平面のビジュアルに奥行きを与えます。

Design Sets