「モバイルファーストやってみた」

（写真は設計中のモバイルサイト画面です）

ダックビルのホームページをリニューアルすることにした。CEOブログ描き始めて半年経って月間PVが１万を狙えるところまできたから、欲が出ちゃったw

ニヤニヤしながらアクセス分析しているとなるほど世間で言われている通り、アクセスの7割がモバイルからの流入だ。iPhoneでGoogle検索してやってきた。という人がめちゃくちゃ多い。

分析結果から見えたユーザーニーズ。今回の自社サイトリニューアルはGoogleのモバイルファーストインデックス（GoogleはWebを巡回して情報を整理保存していくんですけれど、モバイルサイトを優先して巡回して整理保存することをモバイルファーストインデックスといいます）への対応は必須ですね。

よし、せっかくだからモバイルファーストでダックビルのサイトもリニューアルしてみよう。ということで弊社敏腕デザイナー「ひよりん」とサイト作り始めました。私が情報設計とライティング、「ひよりん」はグラフィックとレイアウトのデザイン。

モバイルからコンテンツ設計するの初めてだったから、面白かったわぁ。まず、画面の幅が限られているし一度に目に入る可読範囲が狭いから情報の整理と切捨てがPCより遥かに重要。見出しを14文字以内に、本文は140文字以内に収める。

見出しや本文の文字数が暴れると統一性がなくなるからデザインがもっさりする。レイアウトに統一性がでるようにデザイナーの指示に合わせて丁寧に文字数を数えてライティングする。サイト内容がチープに感じないようにギミックを加えながら。

メニューには「こんなことしてます」「特許持っています」「CEO日記書いています」なんてギミックを入れました。説明の文字数を少なくする代わりに「マスコットイラスト」を使って直感的に多くの情報が伝わるように工夫します。情報の「量や質」ではなく情報の「流れ」と「感覚」を意識しました。おぉーいい感じゃん！12月中には公開できると思います。

やっぱ現場は楽しいな。クリエイティブな仕事ってほんと飽きないわ。

一筆啓上いたします。
「ありがとう、ひよりん」

Tried Mobile-First Design

(Photo: Mobile site screen in progress)

We decided to renew our company’s website. After six months of writing the CEO blog, we’re aiming for 10,000 monthly PVs, and I’m getting a bit greedy, haha.

As I gleefully analyzed the traffic, I realized that, as people say, 70% of our traffic comes from mobile devices. A lot of visitors are finding us through Google searches on iPhones.

Based on the analysis, we saw clear user needs. These days, it's essential for websites to be optimized for Google’s Mobile-First Index (Google crawls the web to store and organize information, and now prioritizes mobile content, which is called the Mobile-First Index).

So, I decided to use this opportunity to redesign the Duckbill site with a mobile-first approach. Together with our talented designer, "Hiyorin," we started working on the site. I’m responsible for information architecture and writing, and Hiyorin is doing the graphic and layout design.

This is my first time designing content from a mobile perspective, and it’s been fascinating. The screen width is limited, and the amount of readable content at a glance is much smaller than on a PC, so organizing and cutting information is far more important. I limited the headings to 14 characters and the body text to 140 characters.

If the headings or body text vary too much in length, the design looks uneven, so I carefully adjusted the text to maintain a consistent layout. At the same time, I added some fun design elements to avoid making the site feel too basic.

For the menu, I included fun options like “Here’s what we do,” “We have patents,” and “CEO’s Diary.” Instead of lengthy explanations, we used mascot illustrations to convey a lot of information visually. I focused not just on the “amount and quality” of information but also on its “flow” and “feel.” And wow, it turned out great!

Working on-site is really fun. Creative work never gets boring.

Signing off with today’s final stroke of the brush:
“Thank you, Hiyorin.”