すべての記事
Web Designing

あの注目クリエイターの"こだわり"
―デザイン・実装からドメイン名選定まで―

3D表現技術でインパクト 細部にまで活きるクリエイティビティ
― 株式会社ホムンクルス ―

少数精鋭メンバーで、技術力や表現力を駆使した数々のキャンペーンサイトを手がけているWeb制作会社ホムンクルス。先日、Webブラウザで3D表現ができる技術「WebGL」を駆使した自社サイトを公開したことでさらに注目を集めている。
デザイナーの木村靖裕さん、ディレクターの三芳哲也さん、テクニカルディレクターの山仲啓之さんに、サイト制作時のこだわりや話題化の秘訣について話をうかがった。

左から、ホムンクルス テクニカルディレクター・山仲啓之さん、ディレクター・三芳哲也さん、デザイナー・木村靖裕さん

自社サイトはプロモーションの場

ホムンクルスは同じWeb制作会社に勤めていた4人が独立し、2012年9月に設立した。キャンペーン・プロモーションサイトを得意としていて、技術力を活かした面白い表現に定評がある。2015年1月には、自社サイトをWebGLを駆使した表現でリニューアルし、Web業界内外で話題を集めた。

homunculus

2015年1月にリニューアルされた、ホムンクルスの自社サイト。トップページの背景でゆらゆらと揺れる文字は二重のレイヤーで少しズラして配置され、マウスカーソルの動きに応じて布が揺れるような動きをする。これはWebGLを用いて表現したもの。

制作事例にマウスカーソルを置くと、画像に紙をクシャっと丸めたようなモーションが入る。こちらはHTML5のCanvasで実現している

「広告関係の仕事がメインなので、広告代理店さんなどの目にとまるよう、インパクトに主眼を置きました。いわば自社プロモーションですね。以前はFlashの案件をよく手がけていたのですが、いまはFlashが使われなくなってきてるし、スタティックなサイトはすでに巷に溢れているので、WebGLは他社との差別化を出しやすい技術でした」(木村)

「ブックマークサイトなどで取り上げていただき、国内外から1週間で10万件以上ものアクセスがありました。海外の方が、Canvasで実装している、ポートフォリオをロールオーバーしたら写真が変化するところがすごいとツイートしてくれたりしました」(山仲)

「制作は木村がほぼ一人でやっています。ある程度できると僕らに見せてきて、意見を聞いて反映してという感じで進めていきました」(三芳)

公開から数カ月のうちに、実際にWebGLを用いた仕事に繋がったそうだ。

「FACTというバンドのサイト『the way down Smartphone Music Video』で、WebGLを使いたいからと声をかけていただき、他にも3〜4件問い合わせがありました。ファーストビューはショーケース的な役割と考えているので、今後もちょっと変わった見せ方をするものを2〜3カ月ごとに出していけたらと思っています」(木村)

ドメイン名をビジュアルで考える

キャンペーンサイトの案件では、見る人の気持ちを惹きつけるアピールが求められることが多いため、技術力だけでなくアイデアに富んだものも多い。なかでも「THIS IS JAPAN QUALITY 日本のおいしい米」のサイトは、ゼロが28個並ぶという驚きのドメイン名が採用されている。

THIS IS JAPAN QUALITY 日本のおいしい米

全日本コメ・コメ関連食品輸出促進協議会による、海外輸出に向けて、日本の米の魅力を伝えるためのプロモーションサイト。日本の色彩選別機は、色が付いた米や欠けた米といった不良品を取り除く精度が高いことを、サイトの背景に飛び交う米の文字で表現している。こちらもWebGLで実装

「これは日本のお米の海外輸出を促進するためのプロモーションサイトなので、代理店の方とドメイン名の相談をしていたときに、『okooooooome.com』はどうですかという案を最初に出したんです。そうしたら、o(オー)よりも0(ゼロ)を並べた方が見た目が米粒っぽく見えるんじゃないかという話になって。最初は、サイトで使っているロゴの稲穂が88粒あるので、ゼロを88個並べようかと思ったのですが、よくよく調べてみるとドメイン名って63文字が上限で。47都道府県だから47個にしようなどいろいろ考えていくなかで、最終的に28個に落ち着きました。それはiPhone6のWebブラウザが表示しきれる数ということなどが理由です。サイトが日本の米の魅力を海外に向けて発信するものだったので、トップレベルドメインは『.jp』にしました」(三芳)

ドメイン名は見た目が米粒らしいということで0(ゼロ)を28個並べていて、iPhone 6のWebブラウザで表示できるギリギリの長さになっている
  1. ­
  2. 1
  3. 2
  4. 次へ