横スクロールを使って「ヘンテコ」なブランドが伝わるアニメーションのサイトを作りたい

2025.6.52025.7.30

グラフィックデザイナーの黒羽照葉様（以下テリコさん）のサイトを制作させていただきました。
お客様は20年ものグラフィックデザイナーであり、また個性を活かすブランディングを作るコンサルティングサービスとしてヘンテコレクション（ヘンテコ+コレクション）という名前のサービスを提供されています。

一人一人ヘンテコな個性が合って、それを隠すのではなく活かすことで、違和感なく自分らしさを出せるようになりビジネスも成長させるというコンセプトです。

サイトを依頼いただいた方がグラフィックデザイナーでしたので、デザインはご本人（テリコさん）していただきました！

サイトの依頼内容

使用CMS：WordPress
使用テーマ：JIN
依頼ページ：トップページ、記事一覧（ブログトップ）、サービスLP2ページ
デザイン：グラフィックデザイナーの黒羽照葉様のサイトでしたので、ご本人にデザインをしていただきました。
仕様：元々ブログサイトとして運用されており、記事数も十分にあったのでブログ記事はそのまま使い、上記4ページのみ追加構築させていただきました。
アニメーション：トップページの横スクロールのスライダー表示の指定をいただいておりました。ヘンテコなブランドに合うように、散らばっているカタチを動かしてみたいと思いよしなに実装させていただきました。

こだわりポイント

トップページの横スクロールアニメーション

ここがこのサイトの肝とも言える横スクロール！
百聞は一見に如かずなので是非サイトで見てみてください。
ちなみにPCだと横スクロールですが、スマホでは縦スクロールで実装しております。

メディアトップページ

記事一覧をまとめたメディアトップページも構築させていただきました。
カテゴリーごとにスライダーで表示したり、間にプロフィールを挟んだり、カテゴリーやタグ検索ができるブロックを作ったりさせていただきました。

ブロックエディタで構築が難しい箇所はPHPのファイルをところどころ読み込ませながら構築しております。
その他背景の固定など随所にこだわりを入れて構築したのでよければ見てみてください！

既存ブログ資産を活かしたリニューアル設計

過去に積み重ねてこられたブログ記事へのアクセスやSEO効果を維持するため、URL構造は変更せずにサイトを再構築しました。
また、既存の記事ページにレイアウトの崩れが起きないよう丁寧に調整を重ね、移行後も違和感なくコンテンツをご覧いただけるよう配慮しています。

お客様の声

私自身がエンジニア出身でコーディングには強いこだわりがありますが、けいこさんには安心してお任せできます。アニメーションスキルが特に素晴らしく、いつも期待を上回る仕上がりで感動しています！他の方にはわからない部分かもしれませんが、納品されるコードの美しさと品質の高さに、本当に良いパートナーに出会えたと実感しています。やり取りもスピーディーで、プロジェクト進行がとてもスムーズです！

こんたホームページ製作所

今田紋奈様

ホームページを見る

グラフィック一筋でデザインをしてきたため、WEBの知識はほぼないものの、自分のサイトは自分でデザインしたい！というわがままを叶えていただきました。Web用に設計されていないデザインデータの上、こんなの無理じゃない…？と思うようなトリッキーな動きのリクエストにも関わらず、「自由にやってOK！」と心強い言葉をいただき、思うままに発想を広げられました。
結果は想像以上！デザイナーの意図をここまで再現できるとは！と大感動でした。

ヘンテコレクション

黒羽照葉様

ホームページを見る

コーディング事例

よかったらシェアしてね！

URLをコピーしました！

この記事を書いた人

鍵仲　恵子

愛知県豊田市にて、コーディングをメインにホームページ制作をおこなっています。
ただデザインのままを形にするだけの実装・構築ではなく、強固な基盤を整えて、彩りと工夫を加えた、育てやすさを重要視しています。
依頼者、閲覧者、そしてサイトに関わるすべての人に愛されるサイトを目指し、事業への愛着やファンを増やすようなポジテイブな循環を生み出す。この想いを形にするために、私にできることを全力でお手伝いしたいと思っています。