デザインの前提条件

参考資料として、要件定義書と、制作するアプリと同機能の既存アプリの提示と、制作する企業のキーカラー（緑色）が用意された。
要件定義書を読み込む。特に制作上、難しい画面遷移やUIパーツはない。同時にUXについても考える。既に要件定義は出来上がっており、今からUXを変更することは困難だが一応念のため。新規サービスだが、同種のアプリは既に多く存在し、私も普段から、同種のアプリを複数使用しているので、使いやすい部分、使いにくい部分を書き出した。

今回はコーディングの必要はなく、デザインのみ依頼された。
特にデザイン制作アプリの指定はないので、Figmaでも制作上問題はなかったが、Adobe XDで制作することにした。Figmaの場合、プロトタイプ制作の部分で機能面においてXDにやや劣るということ理由である。
画面サイズは、WEBでスマートフォン・サイトを作る時と同様、 iPhone 6/7/8 のサイズで作る。これは、iPhone版、Android版両方を制作する場合、アプリデザイン制作の標準作業サイズではないだろうか。余程特定のスマートフォン機種に特化している場合、Android版のみ作る場合は、もちろん別である。
Figma、Adobe XDの両アプリ共に単位の表記が特にないが、ptを単位としている。

ワイヤーフレーム制作

通常は、まず各画面のワイヤーフレームを作り、その後画面遷移や画面レイアウトを検討するが、今回は参考とする既存アプリが明確に指定されており、またスケジュール上制作期間が短いこともありワイヤーフレーム制作は省略した。

ラフデザイン制作

ラフデザイン制作に入る。参考とするアプリが明確なので、今回はワイヤーフレームがなくても可能であった。また制作期間が短いことも理由である。

UIデザインの基本

UIデザインの指針としては、AppleのHIG（Human Interface Guidelines）が有名である。UI設計のガイドラインなので、UIデザイナーであれば一読して置いたほうが良いだろう。以下は日本語での抜粋。

developer.apple.com

4 Posts

499 Users

687 Pockets

ユーザーインターフェイスのデザインのヒント - Apple Developer

https://developer.apple.com/jp/design/tips/

MicrosoftのFluent UIでは、デバイスごとに代表的なUIパーツが別れていて参考になる。ダークモードでのプレビューも簡単に確認できる。

developer.microsoft.com

120 Users

Home - Fluent UI

https://developer.microsoft.com/ja-JP/fluentui#/

The official front-end framework for building experiences that fit seamlessly into Microsoft 365.

Microsoftの設計とUIに関するドキュメント。

docs.microsoft.com

1 Pocket

Windows アプリの設計とコーディング - Windows apps

https://docs.microsoft.com/ja-jp/windows/uwp/design/

Windows 10 でアプリのエクスペリエンスを作成するための Fluent Design ガイドラインと UI のコード例

現在、主流であるGoogleのマテリアルデザイン。フラット・デザインをベースに、よりユーザーを主体に考えたUIデザインの設計方法。私もマテリアル・デザインを採用する事が多い。

Material Design

3 Posts

441 Users

27429 Pockets

Material Design

https://material.io/design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

上記は大手IT企業のデザイン・ガイドラインで参考になるのだが、大手が言っていることだから絶対的に正しいということではない。日々UIデザイン制作をしていると、必ずイレギュラーな部分や、ガイドラインに沿わない方が使いやすい部分が出てくる。最終的には制作者が個別に判断して、よりユーザーにとって快適な操作を経験してもらえるようなデザインを制作することが大事だ。

UIデザインの基本サイズ

様々な企業と仕事をしているが、スマートフォン・アプリのUIデザイン制作をする場合、2020年現在、制作基本サイズとして、iPhone 6/7/8の画面サイズ（375×667pt）を指定されることが多い。この機種の利用者が多いということもあるが、iPhone X（375×812pt）やiPhone 6/7/8 plus（414×736pt）を加えた、ほとんどのスマートフォン画面サイズを網羅した場合の最小サイズであるからである。
iPhone 6/7/8の画面サイズでレイアウトをすれば、Androidを含むほぼメジャーなスマートフォンでの表示に、ボタンを押すことができないなど、アプリ機能上の破綻がないからだ。
もちろんAndroidの特定の機種においては、表示に不都合が生じることがあるかもしれない。その場合は、あとからその機種に合わせて修正する。とくかく制作基本サイズを決めないと、デザイン制作は進まない。ここをはっきり決めないと、制作後ボタンを押すことができないなど、致命的な欠陥が発覚し、追加作業が増えるので重要な部分だ。

想定される最小サイズで、レイアウトした例

想定される最小デバイスの画面サイズ iPhone 6/7/8（375×667pt）で、デザインしてみる。上図の場合、画面構成上1画面に全ての要素を配置し、ログイン画面という機能上、縦・横スクロールをしてはいけない。ユーザーにスクロールをさせずに、画面上にある全ての要素を1画面で見せる必要がある。
画面サイズが大きくなるのに連れ、左右のマージンが大きくなり、下部の空白が気になるが、ボタンを押すことはでき、テキストには読みにくい部分がないためデザイン上の破綻はない。あとはエンジニアの調整次第だが、最悪このままのデザインでも機能上・使用上問題はない。

この場合は、スマートフォンのネイティブ・アプリだが、WEBアプリの場合はXDなどでデザインを確認後、デザイナーがHTMLのコーディングにおいて、各要素をピクセル固定ではなく、%（パーセント）などの相対的単位によってCSSで左右のマージンを適切に設定し、下部の空白もFlexboxなどで埋めることができるだろう。

想定される最小サイズ以外のサイズで、レイアウトした例（NG例）

iPhone 12（390×844pt）を基本サイズとして制作した場合にはどうなるだろうか。当初想定した最小サイズのiPhone 6/7/8で表示すると、左右のマージンが狭くなり、さらに致命的なのは会員登録ボタン以下を表示するには、下にスクロールしないとならない。これはUIデザインとして破綻している。1画面で全てを見せないといけないからだ。
このままエンジニアにこのデザインを提出すると、このままコーディングするか、気の利いたエンジニアであれば、適切な配置にしてくれるかもしない。しかしそれはエンジニアの仕事ではないし、エンジニアにとっても余計な負担になるので、好ましくはない。

その他の各画面のデザインを制作

基本フォーマットを決めたら、XDのコンポーネントやリピートグリッドなどの機能を使い、効率的にどんどん作ってゆく。
ここでは特に難しいことはなく定石のレイアウトを行った。

プロトタイプ作成

今回プロトタイプの制作までは依頼されなかったが、ワイヤーフレームを作らなかったこともあり、念の為それぞれの要素機能と画面遷移の確認のためにも、簡易なプロトタイプを制作した。

その他必要な画面を制作した後、サイドメニューにはオーバーレイ、ボタン押下にはトランジションなどのアクションを設定しプロトタイプを完成させる。

今回簡易に作成したプロトタイプをXDのデスクトッププレビュー機能で確認。

完成

特に大きな修正もなく、数回のやり取りと修正を施してデザインは完成した。

App Store

‎さわかみmile - さわかみマイルプログラム

https://apps.apple.com/jp/app/さわかみmile-さわかみマイルプログラム/id1502791238#?platform=iphone

‎▼さわかみグループが始めるマイルアプリ▼マイルをためて、利用して世の中づくり！さわかみグループ共通のロイヤルティプログラムが登場。その名も、さわかみマイルプログラム。さわかみグループの加盟店が提供する商品、サービス、イベント等でマイルがたまる、ためたマイルを使える！無料の本アプリをダウンロードして参加しよう！------------------------------------------さわかみmile アプリの特徴------------------------------------------マイルをためるには本アプリの利用が必要です。さわかみmi…

まとめ ─
デザインは最小サイズのものから作るのが基本

スマートフォン・アプリのデザイン制作をする場合は、上述のように想定される最小サイズのデザインを基本にして作れば、上位サイズのバリエーションを制作する場合でも、デザインや機能が破綻することはまずない。
逆に大きなサイズを先に作り、後から同じデザインで小さなサイズのものを作ると、ボタンが入らない、文字サイズを小さくしないと入らないなど、ユーザビリティに関するデザイン上の破綻が起こりやすい。
実はこれWEBデザインでレスポンシブデザインを制作する場合や、紙媒体のデザイン制作にも共通するデザイン方法である。
デザイナーは常に小さなサイズから作ることを気にかけておこう。

WEBやアプリに限らず、日常にあふれているBad UIの様々な実例を画像入りで説明していて面白い本。

現在、企業の公式WEBサイトはどのように作られているのだろうか。
弊社で請け負う場合は、WordPressを使用したサイトが多いが、シンプルなHTMLを使ったサイトも少なからずある。
シンプルなサイトは表示が早く、軽い。
またユーザーにとっても、わかりやすいのが特徴だ。
企業の情報をユーザーに伝えるには絶好だと言える。
今回そんなシンプルに作られた、企業WEBサイトの制作を担当した。

企画

新たなWEBサービスを開始するにあたり、同時に新たな会社設立をする事になり、コーポレートサイトが必要になった（ちなみにこの新たなWEBサービスも弊社で請けたのだが現在まで未公開）。
サービスサイトが先に完成したため、コーポレートサイトは、そのサービスサイトのトーン＆マナーを踏襲した。

サイトマップ

載せたいコンテンツ内容を聴き、一般的な図左のサイトマップを提出。
その後、よりシンプルなシングルページを希望されたので、作り替えたのが図右のサイトマップ。
超シンプルなサイトマップである。
Adobe XDで制作し、PDFで提出した。

ワイヤーフレーム

必要なコンテンツの配置を考えつつ、ワイヤーフレームを制作。
全ページ、特に難しい内容もなく、1カラムのシンプルなワイヤーフレーム。
トップページに重要な内容は集約されていて、他のページは「個人情報～」などの企業必須ページのため、実質ほぼトップページのみのシングルページに近い構成。
ここで各コンテンツの順番や扱いの大きさなど、フィードバックを受けて修正する。
Adobe XDで制作し、PDFで提出した。

デザイン

ワイヤーフレームに従いデザインして、とりあえず1案を提出。
トーン＆マナーは、先述のWEBサービスを踏襲した。
特にこだわったのは、トップページのファーストビュー（大きな画像部分）が、どのデバイス、どのブラウザーサイズで見ても、最初に開いた時に高さが100％になること。
これは企業のメッセージがトップページの冒頭にある場合、下につながる部分を見せずに、1つの画面にユーザーを集中させるために有効なデザインだ。
またほとんどシングルページのような構成のトップページ各要素が、なるべくまとまりのある不確定な並びになることを考慮。上から普通に並べると、文字要素が少ないこともあり、あまりに整然としてしまうのを避けるためである。

デザイン案の段階で、トップページのみスマートフォン用のデザインを作る制作会社は多い。
イメージを伝える意味で、発注先次第でそれは問題なだろう。
しかし、デザインが決定した段階では、PC用ページと同じ数のスマートフォン用ページのデザインも作るべきだろう。
デザイナーとコーダーが別の場合は、一部のページデザインをコーダーに渡し「あとはそのページを参考にして適当に」ではコーダーに負担がかかる。
またデザイナーがコーダーも兼任している場合も、出来ればスマートフォン用のデザインを作ることが望ましい。コーディングしながらデザインを考えると、意外と時間がかかったり、PC用デザインとデザイン上の不整合が発覚したりするからだ。

大きな修正はなかったが、他のトップ画像と、各要素の色替えも見てみたいとのことで、基本的なデザインはそのままにして、数案を提出した。
デザイン案に関してはFigmaで制作し、PDFで提出。何故XDではないのか。特に理由はない。

その後、最初の案に決まった。

HTML & CSS コーディング

シンプルなサイトなので、余計なアニメーションやスクリプトは使わないようにした。
通常のHTMLとCSSによってフルスクラッチでコーディング。
ここまでで、今回の作業は終了。
後は、エンジニアがフォーム部分のプログラムなどを組み込む。

完成

シンプルなWEBサイトなので、表示も早く、内容も簡潔で分かりやすいサイトが完成。
実に快適。

ブログや日々の更新が必要ないのであれば、このようなシンプルなサイトを検討してみるのも良いだろう。

音楽関連のデザインに特化したサービス

　音楽関連のWEBサイト制作、CDやDVDのパッケージデザイン、その発売告知の雑誌広告やチラシ、ポスターを専門に扱うデザイン・サービスのWEBサイトを制作しました。
　音楽関連のデザインというと一般的には先ずWEBサイト制作と他の紙媒体の制作は会社が別な場合が多いです。しかし例えばアーティストの新譜を発売する場合、CDやDVDのジャケット・アートワークを基本にWEB、雑誌広告、チラシなど様々に展開してゆきます。普通はジャケット・アートワークを決める前段階のアートディレクションの時点でどの様なイメージで売り出してゆくかの方向性を決めます。その方向性を各デザイナーに伝え宣伝媒体やパッケージを制作してゆくわけですが基本のアートワークを制作する多くの制作会社に送らなければならずかなり面倒です。またアーティストは良い意味で微妙な部分にこだわるので修正も多数回にわたりそのたびに修正データを送り直さなければなりません。その面倒を1つにまとめて引き受けようというのがこのサービスの特徴です。もちろんWEBも紙媒体も同じデザイナーが作るわけですから当然統一感も出ますし、何より経費の大幅削減になります。年々CDを含め売上が下がり宣伝広告費も削減されている音楽業界ですが、現在でも私自身大量のCDやアナログ盤を購入してますので1音楽ファンとして少しでも力になれたらと考えています。

今流行りの音楽サービスのWEBサイト

　デザインは今時のストリーミング音楽サービスSpotifyや他の多くのサイトのように、ランディング・ページのような長い1ページ完結型で1カラムを基本設計として、色も大胆なグラデーションを背景に使ったり、モノクロ画像にビビッドな色使いをしたりなどひと目見て音楽サイトっぽいイメージを押し出しました。

　Bootstrapをフレームワークとして使っています。余計なJavascriptをなるべく使わず、画像の使用も最低限にし、グラデーションもCSSで描きました。まだまだ調整する部分はありますが、割と軽いサイトに仕上がったと自負しております。

　ここまで色々語ってきましたが実はこのサービスは弊社のサービスです。アーティストのアートワーク制作からWEBサイトの制作、広告制作、書籍の制作など多数の実績がある当サービスを音楽関係の方や音楽とは関係のない芸能事務所の方にも是非ご利用いただきたいと思います。インディーズで活躍されているバンドや個人の方、アイドルの方もおすすめです。
　一度WEBサイトを御覧ください。実績も掲載しています。

double#（ダブル・シャープ）
https://d-sharp.com/

IT企業の新サービス・ランディングペー制作

　IT企業がサインサービスを開始するとの事でランディングページの制作を請けました。時間がないため制作スピードが求められました。

デザイン

　文字は大きく、余白を大きく取り、説明も最低限にして読ませるよりも文字を見せるイメージでデザインしました。レスポンシブデザインです。
　同時にサービス・ロゴ、WEBサイト中のイラストも弊社で制作しました。

https://www.cybop.biz/

WEBサイトのリニューアル

　新サービスの発表に伴いコーポレートサイトもリニューアルをするという案件でした。制作のスピード感を求められイメージを一新したいという要望に応えられたと思います。

デザイン

　キーカラーを水色に背景はIT企業を象徴する暗めの動画が支給されました。その動画背景と白を交互に配置しリズム感を出しています。
　説明に使われている線画アイコンも作成しました。

https://www.zeta-inc.co.jp/

WordPressは最も多く利用されているCMS

　一般的なWEBサイト構築はもちろん自社コンテンツ・メディア、ブログなどに多く利用されるCMSの代表WordPress。基本は無料で利用でき、SEOにも効果的なので多く利用されています。ゼロの状態から制作（フルスクラッチ）による独自テーマ制作、既存テーマのカスタマイズなど予算や方針によって様々な制作方法があります。
　 WordPressそのままではデザイン性に乏しいためテーマを適用したり、プラグインを入れたりCSSに手を加えたりして使いやすいようにデザインを整える事は必須です。
　オリジナルのデザインにこだわるのであればオリジナル・テーマの制作（フルスクラッチ）。先ずはある程度の制限がある既存テーマのカスタマイズから制作するなど用途や予算によって選択肢はいろいろあります。WordPressの設置からテーマ制作、カスタマイズ、デザイン、SEO対策、運営などお任せください。

WordPressテーマのカスタマイズ

　WordPressでWEBサイトを構築するには、

• ゼロの状態から作るフルスクラッチ制作
• 既存のテーマをカスタマイズ（編集）する
• 既存のテーマを未編集でそのまま使う

の大きく分けて3つの制作方法があります。
　今回は発注者が選択したテーマをカスタマイズする方法を選びました。ちなみにテーマというのはテンプレート（雛形）のようなものと考えてもらえればと思います。オリジナルのテーマも良く出来たものですがかなりCSSに手を入れてオリジナルとは大きく印象の異なるデザインとなりました。テーマをカスタマイズするとなるとやはりどうしても制限がありますが可能なかぎり発注者の要望を取り入れ使いやすいWEBサイトが制作できたと自負しています。
　フルスクラッチで制作する場合、かなりのコストと時間がかかりそれに見合う費用対効果があるかというと場合にもよりますが通常はないと言えます。特に制作スピードが必要な起業前後の企業やコストを掛けることが出来ない中小企業や個人の方などには、この例のような既存のテーマをカスタマイズする方法がお勧めです。

担当部分

• WordPress設置
• WordPressテーマのカスタマイズ
• レスポンシブ・デザイン
• HTML5
• CSS3

https://lifeworkbalance.co.jp/

Bootstrapを使用したリーフレットのWEBサイト化

　この例は元々8ページのサービス紹介用紙製リーフレットをWEBサイト化したものです。横に展開するリーフレットとは異なり、WEB用では縦に展開して破綻がないように再構成しました。

デザインについて

　今やどの業務分野でも対応必須のスマートフォン用のWEBデザイン。一つのHTMLファイルでPCからスマートフォンまでカバーできるレスポンシブWEBデザインが主流です。ゼロの状態からデザインを起こし、コーディングをするフルスクラッチ制作よりもCSSフレームワークの一つであるBootstrap（ブートストラップ）を利用する事により制作コスト削減、制作時間短縮を実現しています。またPCはもちろん各タブレット、各スマートフォン等様々な画面解像度を持つデバイスによる各要素の最適化などを破綻なく容易に実現できます。

担当部分

• BootstrapのカスタマイズによるレスポンシブWEBデザイン
• Illustratorデータからの画像切り出し
• 紙からWEBへの構成変更
• HTML5
• CSS3

https://www.miracle.west-gr.co.jp/

ランディングページ

　通常WEB広告のリンクから誘導されてたどり着くページがランディング・ページです。この例の場合は厳密にはランディング・ページとは言い難いのですが製品通販ページとランディング・ページの中間のようなものと言えば良いでしょうか。
　WEBでも紙媒体でも化粧品のデザインで一番気をつけなければならないのは撮影でしょう。非常にきれいな写真を使用していますのでデザインも画像に合わせています。

デザインとコーディング

　独自のCMSを使用しており弊社ではHTMLコーディングのみを担当しました。またレスポンシブではなくPCとスマートフォン画面を2つ制作しました。各デバイスの分岐はユーザーエージェントで判断しJavascriptにより分岐している通常のパターンだと思われます。
　レスポンシブと違いHTMLは全く別なのでコーディングも2回必要なのでその分作業量も増えます。

　今日飲食店に限らずですが、店舗の集客導線はスマートフォンのGoogle Mapsなどで検索→店のホームページで詳細を確認という流れになっています。そのためWEBサイト（ホームページ）のPCでの表示画面よりもスマートフォンでの表示画面の方が需要になります。
　今回依頼を請けた飲食店の場合もPC画面よりもスマートフォン画面の方を重要視して注力しました（これを「スマとファースト」と言ったりします）。

デザインについて

　保守的な紺色をベース・カラーにしていますが、店の方針が「気軽に」なので、あまり堅くならないようにしています。飲食店の場合、料理ももちろん大事なのですが、それ以上に店の雰囲気も非常に重要になります。特にWEBサイトを見て来店する方も多いので、店頭を大きな画像で見せ近くまで来た方にもすぐに分かるようにしています。また店の内部を大きな画像で紹介することで、初めて来店される方にも気軽に扉を開けてもらえるようにしました。やはり初めて行く飲食店では店内がどのようになっているのか不安だと思います。
　スマートフォン画面を第1に考えましたのでBootstrapをカスタマイズしたレスポンシブ・デザインとしています。

https://b-iida.com

イメージが非常に重要になる美容業界

　WEBサイトに限らずですが、美容業界というのは非常にイメージが重要になります。店の外装、内装、チラシ、チケット、名刺、ショップカード、スタンプカード…弊社でもWEBに限らずアナログ分野でも美容業界のデザインを多数経験してきました。
　WEBで検索しSEOで上位に表示にされる事も大事ですがキーワードを絞り込んでいかないと美容系のビックワードはどこでもなかなか難しいものがあります。SEOで検索上位に表示された後、ユーザーは店のWEBサイトを見ます。その時に見るWEBサイトのデザインはこれから来店しようとしている見込み客にとっては重要な決め手になるでしょう。若い女性が行くのであれば今どきのヘアスタイルに対応しているのだろうか？、年配の女性が行くのであれば今は流行りのヘアスタイルよりも自分の好みに仕上げてくれるのだろうか？ただ格好良くWEBサイトを作れば良いという訳ではありません。

デザインについて

　先に述べたように非常にイメージが重要になる業界ですから、画像も高品質のものが必要になります。今回別広告を制作した際にプロ・カメラマンが過去に撮影した素晴らしい画像が豊富にありましたのでそこから選出したものを使用しています。
　発注者の要望により既にあるロゴからオレンジとシックなイメージを表したいとの事から黒を地に使用しています。
　大手チェーン店はもちろん個人店舗の制作などご予算に合わせたWEBサイトを制作いたしますのでお問合せください。