料理レシピサイトはモバイルファーストというよりモバイルオンリー

モバイルファーストが当たり前の時代ですが、料理レシピは特にそうです。まさにほとんどがスマホから見られています。

ですのでレシピサイトを作るならモバイルファーストというより”モバイルオンリー”ぐらいの意識でいいのではないか、と思っています。実際にそういう意識で作ってみたので、考えてみたことや感想等を記事にします。

スマホ時の表示に注力するべき理由

料理レシピの場合スマホ時の表示をしっかり考えたほうがよい理由、それはユーザーがスマホを見ながら料理するというケースが多そうだからです。

ユーザーの立場に立つとまずは「あまり触りたくない」があります。余計なクリックなどはさせず短いスクロールのみで完結させたいです。簡潔なレシピなら自然にそうなりますが、詳細なレシピの場合は注意が必要かもしれません。「別途リンクで」などの構成にせず全部書いてしまった方が親切そうですが、スクロールが多くなりますし今どこの工程なのか迷子になる可能性もありそうなので、落としどころは要検討です。

また「材料欄だけをみる」というケースもありそうです。材料欄は主流のデバイスのhightに収まるようにしてスクロールを無くすのが親切かもしれません。もっともレシピによってボリュームが異なるので全部を統一するのは無理ですが。ただ行間を空けてスクロールが増えるよりも、行間キツキツで全部が画面に収まっているほうが親切かもしれない、という検討は無駄ではない気がします。

「濡らしたくないのでキッチンの片隅に置いて確認しながら」もありそうです。この場合は遠目に覗き込むことになるかもしれず、適切な文字サイズを考える必要がありそうです。大き目の文字で可読性を上げたいですが、スクロールも減らしたいです。当然フォントサイズと画面文字数はトレードオフなので落としどころは要検討です。若い人向けなのか、高齢者もアクセスしてきそうか、このあたりも関係するかもしれません。

PC用デザインをしないことでの制作上のメリット

制作上”モバイルオンリー”にしてよかった点です。

例えばトップページのデザイン。PCで見たときにトップページくらいは1カラムでドーンとやったほうがおしゃれだし、上部に配置する特集カルーセルの訴求的にも〇と思いましたがレスポンシブの手間を考えて捨てました。スマホで見たパターンだけを考え、PC時にひろがってしまう分の幅は単にサイドバーを置く。そしてサイドバーは余白を埋めるためのバナー置き場。これによってすべてのテンプレートについてスマホ時のモックを作るのみでよくなりました。

またUI的にもモバイルに振り切って作りました。メニューボタンなどはPCでもボトムに固定する形のままです。これにより制作だけでなく運用でも作業をシンプルにできます。例えばCMS化して管理画面からメニューを設定可能にした場合、PC用とスマホ用で別々に設定などの手間がなくなります。

デザイン工数上のメリットは思ったより大きかったです。デバイスごとに数パターン描く形ではなくスマホ版のみをXDでつくることになり作業工程が大幅に少なくなりました。

またコーディング面での工数も下げられました。メディアクエリはレイアウト面ではサイドバーの表示有無くらいです。

PC用デザインを捨てることでのデメリット

以下はPC用のデザインを捨てたことでのデメリットです。

両方ともそこまで気にしなくていいかなと思いました。

1.はCOOKPADなどもトップページをドーンと広く表示したりせず、こぢんまりと2カラムにしています。やはりレシピサイトの一番のポイントは情報の探しやすさです。ただおしゃれさで差別化したい、ブランディングしたいという場合は別です。

2.については、レシピサイトの場合カテゴリーなどをヘッダーに表示する必要があまりないです。

レシピサイトの場合ユーザーにとっても制作者にとっても”モバイルオンリー”はいいこと尽くめだと思います。