ROKUNECT公式Webサイト制作

デザインの指定は、ありませんでした。あったのは、屋号に込めた想いだけ。

デザインの指定は、ありませんでした。

通信販促イベント事業を営む個人事業主様の公式サイトです。屋号の意味を読み解くところから始め、企画・情報設計・コピー・デザイン・WordPress実装・公開まで、一貫して担当しました。

通信販促イベント事業の公式サイトです。
屋号の読み解きから、企画・設計・コピー・デザイン・実装・公開まで一貫して担当しました。

指定がないことを、自由ではなく「問い」だと受け取りました。

指定がないことを、
「問い」だと受け取りました。

「ROKUNECT」には、人・モノ・カネ・情報・時間・知的財産という6つの経営資源を「つなぐ」想いが込められています。
最初に整えたのは見た目ではなく、その意味と事業の特徴です。方針は、ROKUNECTらしい表現と、事業サイトとしての分かりやすさの両立に決めました。

屋号「ROKUNECT」には、6つの経営資源を「つなぐ」想いが込められています。
まずその意味と事業の特徴を整理し、世界観と分かりやすさを両立する方針を立てました。

入口をひとつにすると、誰かが迷います。

訪れるのは、「仕事について相談したい方」と「協業や現場運営について相談したい方」です。目的が違う二人を同じ流れに並べると、自分に関係する情報がどこにあるのか分からなくなります。
そこで、入口を分けました。CTAも「仕事について相談する」「協業について相談する」の2つに整理しています。

訪れるのは、仕事の相談と、協業の相談をしたい方です。
目的が違うため、入口を2つに分け、CTAも整理しました。

世界観は大胆に。順番は、あえて素直に。

各セクションの役割を一つに絞り、読み進めるだけで自分に合った相談先へたどり着ける流れにしました。

各セクションの役割を絞り、
自分に合った相談先へ迷わず進めるようにしました。

「つなぐ」を、一本の線ではなく、巡る水にしました。

「つなぐ」を、巡る水にしました。

6つの経営資源は、一方向に伸びるのではなく、巡りながら次へ続くものです。その循環を水の流れに、通信を金の細い線画に置き換えました。通信・衛星から着想した深い群青の宇宙に、水彩の青と紫を重ねています。
表現は「企業サイト × アートブック」。ただし、事業内容と問い合わせへの道筋は、具体的に伝わるよう設計しています。

経営資源の循環を水に、通信を金の細い線画に置き換えました。
群青の宇宙に水彩を重ねた「企業サイト × アートブック」です。

デザインで終わらせず、開いて動くところまで。

開いて動くところまで、つくりました。

WordPressのオリジナルテーマとして実装しました。
スマートフォンは、PCの縮小版にしていません。文字量・余白・画像配置・ナビゲーションを画面幅に合わせて組み直し、小さな画面でも世界観と読みやすさが続くようにしています。お知らせは、管理画面から更新できます。

WordPressのオリジナルテーマで実装しました。
スマートフォンは縮小せず、余白や文字量から組み直しています。お知らせは管理画面から更新できます。

重さは、世界観の敵になります。

大きな画像とアニメーションを使うため、画像の最適化、キャッシュ設定、CSS・JavaScriptの調整を行いました。PageSpeed Insightsのデスクトップ計測で、パフォーマンススコア85を記録しています。
タイトル、ディスクリプション、見出し構造、代替テキスト、パーマリンクなど、基本のSEOも整えています。

画像の最適化とキャッシュ設定で、軽さを確保しました。 SEOの基本設定、HTTPS化、バックアップ、計測環境まで整えています。

動かしすぎない、という設計です。

宇宙の中で光がわずかに瞬くように、金の粒が数秒おきに静かに光ります。読む邪魔にならない程度に、世界観だけを補う動きにとどめました。

金の粒が数秒おきに、静かに光ります。
読む邪魔にならない、世界観を補うだけの動きです。

世界観が強いほど、文章と構成は堅実に。

これが、今回いちばん大きな学びです。魅せる表現と伝える設計は、どちらかを削って両立させるものではなく、役割を分けて両立させるものだと実感しました。
企画から公開後の計測環境までを担当し、デザインカンプを運用できるサイトとして完成させました。

魅せると伝えるは、役割を分ければ両立できると実感しました。
企画から計測環境まで担い、運用できるサイトに仕上げました。