Adobe XDとSketchで飲食店のサイトを作る【前編】

フロントエンドデザイナーの平尾誠です。

日暮里にあるイスラム系のムスリムの方のためのレストラン”HALAL SAKURA”のホームページ制作をさせていただくこととなりました。
そこでディレクション・デザイン・実装を僕一人で完結するこのプロジェクトを、前編と後編の二部作に分けて記事にします。

この記事はこんな人に向けて書いています

受託のWeb制作の進め方が知れます。

身につけたい技術

このプロジェクトを通して、僕が身につけたいスキルは主に二つです。

・Adobe XDで何ができるかを知り、今後のフローに組み込んでいく
・初めてSketchを使ってデザインし、Photoshop脱却を計る

デザインや実装をスムーズに行うためには、クライアントとのスムーズなコミュニケーションが不可欠です。そしてたくさんの差し戻し・変更を避けるためには、情報の共有がキモになります。そこでAdobeXdを使い、サイトを作る目的やサイトの内容を共有し、確認しながら進めていきます。
また、Photoshopは機能が多すぎて辛い。Photoshop脱却を狙ってこれからはSketchでデザインしていきたいです。

クライアントの紹介とプロジェクト内容

店主はムスリムの方ですが、店名にサクラとつけてくれるあたりが日本人として嬉しいですね。それではデザインをする前段階、ワイヤーフレームを作りましょう。

Adobe XDでワイヤーフレームを作っておく

どのような内容をホームページに掲載していくのかを確認するためにもワイヤーフレームを作ります。

これまでとフローと今回のフローの比較

これまでのフローはスタートダッシュがとても早く、70%の段階までのデザインはとてもスムーズに出来上がります。
ですが、フィードバックをもらう段階で、設計ミスが発覚したり、大きめのレイアウト変更が必ず起こります。

単純にディレクション不足、情報伝達ミスです。
これは一番最初の①の時点で参考にしているデザインの感じ方が人によって違うからです。
当たり前ですが、僕のWebに対するリテラシーとクライアントのリテラシーは違います。ただの情報伝達不足ならまだしも、フィードバックと変更を繰り返すうちに制作側への不信感が募ります。そうなってしまうと全てがこちらの意図通りにプロジェクトを運べなくなってしまいます。

これらの課題を解決するためにもワイヤーフレームを作りました。

AdobeXDとSketchのコンビネーションが最強

AdobeXDでワイヤーフレームを作った

今回はPSDを作る前にワイヤーフレームを用意しました。
なぜならAdobeXDを覚えたかったから。ワイヤーフレームとは見た目の設計書のことです。

あらかじめワイヤーフレームを作っておくと、前段階の作業の工数は少し増えるけれど、クライアントの信用を得られる上に、実装段階でひっくり返ることがないと考えたからです。これは結果的に大正解でした。

実際に見せた僕の初めてのワイヤーフレームはこちらです。
ワイヤーフレーム：プロトタイプが別窓で開きます

個人的な感想としては、やはりこの時点でも100%のワイヤーフレームは作らなくてもいいと思います。
今回はPCレイアウトですが、この時すでにスマホで組むことをイメージして設計しています。

SketchとAdobeXDでプロトタイプを作った

デザイン業務はSketchを使って作業しました。今回が初めてのSketchでしたがストレスはありませんでした。

Sketchを使ってデザインしたデータをJPGに書き出し、XDを使ってプロトタイプを作っています。
プロトタイプと言ってもこの段階で実際に公開されるデザインにかなり近いものが出来上がりました。ボタンも実際に押せてページ遷移がわかります。コーディングに入る前に、ブラウザでの見え方をクライアントに確認してもらうのは少し緊張しますよね。

SketchとAdobeXDで作ったプロトタイプが別窓で開きます

AdobeXDを使ってワイヤーフレームを作るメリット

欲しい素材が伝わる

”この場所に、ふさわしい文章を用意して欲しいんです”がクライアントにちゃんと伝わります。
今回はとても親切で、協力的なクライアントでしたので、ワイヤーフレームを見せるなり、すぐに考えてくれたので、文章待ちで僕のデザインの手が止まることはありませんでした。

ページ遷移のイメージがついた

このボタンを押すとこのページに飛ぶのか。ということが実装前にわかります。これはペーパープロトタイプなどを作らなくては体感的にはわからなかったことです。

レビューをURL一つで共有できる

さきほどのようにURLを見せれば誰でもプレビューを閲覧することが可能です。

また、動画も作ることができますので、言葉で説明できないものも見せればわかります。
ボタンを押す様子やページ遷移などもイメージが具体的に湧きますね。

Sketchを使うメリット

Photoshopに比べて格段にSketchの方が簡単でWebに向いています。

ただ、写真を切り抜いたり、エフェクトをかけてグラフィカルなことをするとなるとSketchだけでデザインを完結することはできないでしょう。しばらくは併用ですね。

宣誓：ディレクションはAdobe Xd、デザインはSketchでこれからはいく

ディレクションはAdobe Xd、デザインはSketchを使ってこれからはデザイン業務をするのがしっくりきました。

Sketchでデザインができたら、ついでにAdobe XDでプロトタイプを作るのが親切です。

僕がしていたこれまで制作フローを大きく変更しましたが、全くと言っていいほどストレスはありませんでした。
それでは引き続きコーディングを進めていきます。

後編はしばらくお待ちください。
後半書きましたので合わせてお読みください。

Adobe XDとSketchで飲食店のサイトを作る【後編】

ほなね。

あわせて読みたい

AdobeXDでプレゼン資料のテンプレートを作ったからダウンロードしてね

Adobe XDとSketchで飲食店のサイトを作る【後編】