人気ランキング 期間:11月28日 〜 12月5日
プロフェッショナルによるUX\UI デザインいたします
業務内容
自社のエンジニアはいるがデザイナーを抱えていない、新鮮なアイデアが欲しい、世界のエンターテイメント業界で通用するデザインをとの理由で、アートデレクション、UX・UIデザインをして欲しいというリクエストをよく頂きます。
ウェブサイト、タッチパネル、アプリ、小さい画面から大きな画面まで機能的、論理的、かつシンプルでエレガントなUIデザインいたします。アニメーションのモックアップとしてアフターエフェクトなどを使ってアニマテックスを作成することも出来ます。
ブランディングに基づいたデザイン、写実的なイメージを多用したスタイル、納期が短い案件も得意です。
作業の流れ:
1)UXからですとフローチャートを含めた白黒画面でのUXの提案をいたします。
2)UX リビュー
3)既存(または私が提案する)UXの画面を元に、UIのlook&Feelのモックアップをいたします。大体メインの3画面程を作成いたします。
4)UIデザインリビュー
5)基本3画面のデザイン承認後、残りのデザイン
5)デザイン修正(必要に応じてヒヤリング・デスカッション後)
6)納品
印象的で記憶に残る!デザイン性の高いアプリをデザインいたします
業務内容
この度は、数ある出品の中から当パッケージをご覧いただきありがとうございます。
当社はイギリス・ロンドンから 【こだわりデザインで美しく、印象的に】をコンセプトに、お客様の記憶に残るデザインを作成いたします。
英語をはじめとする多言語翻訳の対応も行っておりますので、ご希望の方はご相談時にお申し付けください。
---- このような方におすすめです
・デザイン性と質が高く、ユーザの記憶に残る魅力的なアプリにしたい
・詳細までデザイン・ユーザービリティを追求した理想のアプリを作りたい
・アプリを日本以外にも展開したい
nnw studioは皆様にご納得いただけるよう「質」を重視し、しっかり作り込みをいたします。
クオリティ重視の皆様におすすめです。
デザインの力でダウンロード数は大きく変化いたします。
一回きりのお仕事ではなく、長いお付き合いで様々な面でサポートさせていただき、お客様の事業の成長に貢献したいと考えております。
---- ご依頼から納品までの流れ
1.「見積り、カスタマイズの相談に進む」からご連絡ください
2.ヒアリング(イメージのすり合わせを行います)
3.お見積りの提出
4.ご発注、ご契約
5.デザイン作成
6.クライアント様チェック
7.納品
--
最後までご覧いただきましてありがとうございます。
メール相談やお見積もりは無料で行っておりますので、ぜひお気軽にご連絡ください。
ご検討のほどよろしくお願いいたします。
- アプリの種類
- 美容・化粧品 書籍 ビジネス コミュニケーション デベロッパーツール 教育 エンターテインメント イベント ファイナンス 飲食 ゲーム グラフィックデザイン ヘルスケア・フィットネス 住居 キッズ ライフスタイル 地図・ナビゲーション メディカル 音楽・オーディオ ニュース・オンラインマガジン 写真・動画 生産性向上 リファレンス ショッピング SNS スポーツ 旅行 ユーティリティ 天気予報
- ツール
- Adobe XD Figma Adobe Illustrator Adobe Photoshop After Effects
- デバイス
- モバイル デスクトップ タブレット ウェアラブル端末 ゲーム機 電子書籍リーダー テレビ
経験豊富なUI/UXデザイナーによるモバイルアプリデザインをfigmaで制作します
業務内容
iOSやAndroid対応のスマートフォンアプリのUI/UXデザインを提供します。アプリの設計は、単に見た目を美しくするだけでなく、ユーザーが直感的に操作でき、目的を達成しやすいようにすることが重要です。ユーザーの体験を最大限に高めるためのデザインを提供します。
作業の流れ
1. ヒアリング・要件定義
クライアントとのヒアリングを通じて、プロジェクトの全体像と要件を確認します。どのようなアプリケーションを作りたいのか、ターゲットユーザーは誰なのか、必要な機能やページ数、クライアントの希望するデザインスタイルなどを把握します。必要に応じて、クライアントが現在抱えている課題やゴールも確認します。
ヒアリングの後、デザインプロセスのスケジュールや納期、予算などを確定させます。
2. ワイヤーフレーム作成
アプリケーションの基本構造を設計するために、ワイヤーフレームを作成します。これにより、画面レイアウトや情報の配置をクライアントと確認し、デザインの方向性を固めます。場合によってはワイヤーフレームを作成せずデザインから入る場合もあります。
3. UIデザイン作成
ワイヤーフレームが承認された後、UIデザインの作成に入ります。ブランドガイドラインやクライアントの要望に基づいて、アプリの見た目をデザインします。配色、フォント、ボタンなど魅力的で使いやすいデザインを目指します。
4. プロトタイピング・インタラクションデザイン(一部プランのみ)
完成したUIデザインを元に、実際の動作をシミュレーションするプロトタイプを作成します。ボタンをクリックした際の遷移や、アニメーション、スクロール時の動作など対応します。
プロトタイプはクライアントと共有し、実際のアプリの使用感を確認してもらいます。
5. フィードバック・修正
プロトタイプに対してクライアントからのフィードバックを受け付け、必要な修正を行います。
6. 納品
修正が完了し、最終デザインが確定したら、必要なデザインファイルを納品します。納品形式は、Figmaデータとなります。
FigmaでのWeb・スマホのUIデザイン制作承ります
業務内容
Figmaでウェブ / スマホアプリのUIデザイン制作を行います。
既存/新規サービスの見た目をブラッシュアップしたい、使い勝手をもっと良くしたい、案はあるがデザインを起こすことが難しい、といったお悩みを解決するお手伝いをいたします。
【ご提供内容】
・Web/スマホアプリのUIデザイン制作(新規・既存サービス問わず)
・編集可能なFigmaデータの納品(JPG / PNG / PDF納品も可)
・クリーンでトレンドを取り入れたデザイン
・既存サービスのデザインルールに合わせたデザイン
・利用導線やわかりやすさを考慮したデザイン
・レスポンシブを考慮したデザイン
・配色バランスを考慮したデザイン
※Figmaを使用した簡単なロゴ制作やバナー制作等も可能です、お問い合わせください。
※お急ぎの場合はスケジュールをご相談ください。
【ご依頼の流れ】
1. 「まずは相談する」ボタンよりご連絡ください。
2. ヒアリングと見積もりをさせていただき、お支払い手続きが完了後、デザイン制作を行います。
3. デザイン提案をさせていただき、修正希望があれば調整いたします。
4. ご指定の納品形式で書き出しし、ご確認いただき納品となります。
【ご依頼方法】
「まずは相談する」ボタンよりお進みいただき、ご希望の内容をお書き添えの上ご連絡ください。
主に下記について記載をお願いします。
・あなたのお名前と職種
・サービスの概要
・ワイヤーなど資料の添付(画面数や掲載内容など、構成がわかるもの)
・ご希望のデザインの方向性(現在の課題、希望の配色やテイスト、参考URLなど)
※情報は小出しにせずまとめてご連絡ください。
【注意事項】
・修正箇所は小出しにせず、まとめて連絡ください。
・修正対応も料金に含めておりますが、無制限ではありません。
修正指示により作業量が増大した場合等には、追加料金をお願いする可能性があります。
・ai、xd、psdでの納品には対応していません。
・オンラインミーティングは行いません。
・事前のご相談なく連絡が5日以上なかった場合はキャンセル扱いとさせていただきます。
その他ご不明な点がありましたらお問い合わせください。
よろしくお願いいたします。
【リサーチからデザインまで対応可能!】あなたの希望の金額でアプリのデザイン制作します
業務内容
▼ こんな方へおすすめ
・プロのデザインを低価格でほしい方
・できるだけ早くデザインがほしい方
▼ ご提供内容
アプリのデザインを提供します。
対応出来る範囲は下記になります。
・リサーチ/分析
・要件定義(ペルソナ・サイトマップ)
・ワイヤーフレーム
・デザイン
・プロトタイプ
▼ ご購入の流れ
・ページ数
・作業範囲
・参考イメージ
・希望額
・納期
をお伺いしますので、まずはご相談ください。
▼ 料金プランやオプション
お客様の希望額で制作します。
▼ 納期
出来るだけご希望に応えれるようにいたします。
現在スケジュールに空きがあるので、柔軟に対応可能です。
WEBデザイナー歴は今年で11年目になります。
コーポレートサイトやサービスサイト等のWEBデザインの経験は豊富なのですが、アプリデザインの経験が乏しいため、今回、アプリデザインの実績を積むためにパッケージを出品しました。
その経緯があるため、低価格での出品をしております。
デザインクオリティには自信があります!
実務の非公開ポートフォリオのサイトがありますので、気になる方はメッセージいただけましたらURLをお送りいたします。
ご検討のほどよろしくお願いいたします。
web/ios/android/アプリのデザイン制作いたします!デザインで解決します
業務内容
ご覧いたただきありがとうございます!
シンプルで伝わりやすいデザインを目指しています。
丁寧なコミュニケーションをいたします。安心してお任せください!
《このようなことに困っていませんか?》
・アプリ作ったけど、デザインに自信がない
・なんか使いにくい
・なぜか使ってくれない
単にアプリを制作するだけでは、クライアント様のコンセプトに合っていない、成約につながらないこと(ユーザーの離脱に繋がってしまう使いにくさ、など)があります。
その齟齬をなくすために、ご要望を詳しく確認させていただき、UIデザインの考慮を含めてアプリの制作をさせていただきます!
▪️サービス内容
・web(pc/sp)
・android
・iOS
・ラフ1案
▪️納品までの流れ
①ヒアリング・見積もり (ヒヤリングシート記入)
②ご購入
③ 詳細ヒヤリング(テキスト、素材受け取り)
※内容によっては、ビデオ通話など対応いたします。
④ワイヤーフレーム作成
⑤確認
⑥デザイン作成
⑦ 確認
⑧ 納品
▪️納品データ形式
figma/XD/AI/PDF/PSD
※デザイン自体はfigmaで制作いたします。
▪️制作前の確認事項
【情報設計】
・作成の背景
・LPのゴール
・ターゲット
・競合サイト
【デザイン】
・「こんな風なデザインが良い」イメージや,参考サイトなどのアプリやURL
・素材(テキスト、ロゴ、画像)
・コンテンツ内容(「よくある質問」など)
・デザイントンマナの希望(フォント、色など)
・デザインサイズの大きさ
(※ご要望がなければ、PC:1280px、TB:768px、SP375pxで作成いたします。)
・ブレイクポイント
(推奨PC:1280px、TB:768px、SP375px)
※ヒヤリングシートを用意しておりますので、ご記載いただきます。
素材内容など不安や不明な点などありましたらご相談ください!
▪️見積もりの際に記載していただきたい項目
・納品日
・おおまかな内容
・納品形式
・素材の有無
・コンテンツの内容 ※もし決まっている場合
・ページ数
▪️注意事項
・制作素材のご用意に不安がある方にはご相談ください。ビデオチャットなどでもご相談可能です。
・キャンセルや3日以上音信不通の場合は納品完了とみなしクローズさせていただく場合がございます。
一緒にお仕事できるのを楽しみにしております!
【土日祝OK】洗練されたWeb・スマホアプリのUI/UXデザインをご提案します
業務内容
\清潔感のある引き締まったUI・UXデザインは私にお任せください/
【こんな方におすすめ】
・既存のデザインがどこか垢抜けずごちゃごちゃしている感があり、すっきりさせたいとお思いの方
・ユーザー様にとってストレスフリーな使いやすいUXをお求めの方
・ミニマルでタイムレスなデザインを通して、自社サービスの印象アップを狙いたい方
・Android、iOS、Webなどで共通で使用できるUIの制作をお探しの方
・GoogleマテリアルデザインをベースとしたUIをご希望の方
【ご提供可能内容】
・Web・スマホアプリのUI/UXデザイン
・カラーパレット
・デザインシステム
・Figmaファイル、またはJPG / PNG / PDF納品も可能
・企画や機能等のアイデア提案(プレミアムのみ)
【プラン概要】
ベーシック
・ご提供いただいた構成(ワイヤーフレーム、ラフスケッチ、参考デザイン等)からスマホアプリUIデザインを起こします。
・タブレット、Webアプリ・サイトのリスポンシブデザインは別途料金の上制作させていただきます。ご希望の方はご相談ください。
・基本的にはご提供の構成通りにUIを作成していきますが、多少の変更には対応可能です。
スタンダード
・構成から最終デザインまで、こちらで担当させていただきます。
・タブレット、Webアプリ・サイトのリスポンシブデザインは別途料金の上制作させていただきます。ご希望の方はご相談ください。
プレミアム
・クライアント様のざっくりとしたご要望からサービスや機能等のアイデアを多数練り提案した経験を生かし、スタンダードプランに加え、構想や企画を一緒に練る、外部からの視点の提供、アイデア提案、機能の見直し、フェーズ設定、サービスの効率化など、UX/UIの範疇にとらわれない、より大きな視点から見たサービスのデザインのお手伝いをさせていただくプランです。
・プラン表の価格は目安です。価格はサービスの規模や求められる範囲によって変わりますので、まずはご相談ください。
【ご提供いただくもの】
・サービス概要
・既存サービスのリンクや画面等(リデザインの場合)
・デザインのご希望(色の系統、参考デザイン等)
・アプリ内で使われる素材(ロゴ、イラスト、テキスト等)
スムーズなデザイン進行のため、素材はできればPNGまたはGIFで、背景は透明のものをお願いいたします。
【ご了承ください】
・ロゴやその他アイコン以外の制作やバナー制作、ライティング、LPの制作は含まれておりません。
・修正箇所がある場合は、まとめて連絡を下さると早く仕上がります。
・修正指示の内容や量によっては、納期を延長したり追加料金をお願いすることもあります。
【土日祝対応 / Figma】モダンで高品質なUI・UXデザインをご提案いたします
業務内容
はじめに
数多くのワーカーの中から、私のページをご覧いただき、誠にありがとうございます。
大阪府を拠点に現在スタートアップCDO兼モバイルアプリエンジニア(iOS/Android)として、モバイルアプリ制作やデザインに関する業務を行っております。
私の強み
UI/UXデザインだけでなく、モバイルアプリの実装も手掛けています。HTML/CSS/JavaScriptに関する知識を持つデザイナーは多いですが、モバイルアプリ制作における専門知識を有することは珍しいです。デザインと実装の双方を理解することで、”実現可能”かつ”効果的”なソリューションを提供します。これにより、作業の手戻りを防ぎ、チームの効率を最大化することに貢献しています。
サービス内容
Figmaを使用して、アプリのデザインを作成します(PC・モバイル対応可能)
納品形式
PNG、JPEG、PDFなどの画像ファイルを、可能な限りご希望の形式で納品します。詳細はご相談ください。
※ 編集可能なデザインデータ(.fig)の納品をご希望の場合は、別途「デザインファイル納品」オプションをご利用ください。
作業のながれ
- ヒアリング
- ワイヤーフレーム作成
- UIデザイン作成
- 修正
※ 原則として修正は2回まで対応いたします(大幅なデザイン変更には追加料金が発生する場合があります) - 納品
料金について
- 1画面が長い場合、複数画面として計算する場合がありますので、予めご了承ください。
- WebサイトやWebアプリでレスポンシブ対応が必要な場合は、別途ご相談ください。
ご相談・お見積り
プロジェクトに関するご相談やお見積もりにつきましては、いつでもお気軽にご連絡ください。
また、 既存のデザインのリニューアルにも対応しています。ゼロからのデザインではなく、既にあるものをリニューアルすることも可能ですので、お気軽にご相談ください。
アプリストア(AppStore)のスクリーンショットのデザイン作成をします
業務内容
AppStoreのスクリーンショットデザインの作成
- アプリをAppStoreでより引き立たせ、ダウンロード数を増加させるような、魅力的なスクリーンショットデザインをお手伝いします。
- アプリの特長を最大限に引き出すキャッチコピーとデザインを提供します。
- AppStoreでアプリの運用経験もあります。
サービスの流れ:
- お客様:依頼後、アプリの内容、要望、必要な素材をお伝えください。
- 私:アプリの特長とお客様の要望に基づいて、5.5か6.5インチ版のスクリーンショットデザインとキャッチコピーを一度作成し、提案。
- お客様:提案されたデザインを確認し、フィードバックまたは要望をお伝えください。
- 私:フィードバックをもとに、5.5、6.5、12.9インチ版を完成させ、提出します。
- お客様:提出されたデザインを確認し、必要に応じて更なる修正をリクエスト。
納品内容
- AppStore指定の各インチサイズ(5.5, 6.5, 12.9インチ)に対応したスクリーンショットデザイン
- png形式での納品
- 必要に応じて修正(3回)
アプリのデザインコンサル
業務内容
デザイナーとして、アプリ開発やそのマーケティングに携わっております。
企画面やアプリストア最適化などのマーケティングやデザインのご相談を受けています。
【相談無料】UI / UXデザインを作成いたします
業務内容
AdobeXDやFigmaを使ってUI・UXデザインを承ります。
相談無料ですので、WEB制作やデザインに関してお困りの方はお気軽にメッセージにてお声がけください。
スマホアプリ・WebサービスのUI/UXデザインを承ります
業務内容
スマホアプリ・WebサービスのUI/UXデザインを承ります!
Adobe XD・ Illustrator・Photoshop・Figmaなどご希望に合わせたデータにてご納品させていただきます。
▼こんな方におすすめ
・デザインのことが分からないので任せたい
・平日・作業の進捗状況や提案の連絡がほしい
・デザインを大切に一緒にサービスをつくり上げたい
・今後のサービス展開を考慮してブランディングを含めたデザインがしたい
▼業務内容について
・サービス全体を通したUI/UXデザインを行います
・コーディングは一切含まず、デザインデータの作成のみとさせていただきます
・作成する画面の内容や構成のご用意をお願いしております(簡単なラフ画やフローチャートなどで構いません)
・PCソフトウェア、モバイル端末のデザインなど幅広くご対応いたします。
▼デザイン作成のステップ
①アプリ・Webサービスのヒアリング
②UI/UXデザインのご提案
③デザインのブラッシュアップ
④納品
▼納品形式
・Adobe XD・ Illustrator・Photoshop・Figma
・PNG、JPEG、PDF等の画像ファイル
ご希望の納品形式には可能な限りご対応いたします
▼納期
・作業開始時から1週間程度を目安としています
・修正は各ステップごとに数回程度ご対応させていただきます(大規模な修正には対応できません)
▼依頼料
・ご依頼内容に応じてデザイン料をお見積もりさせていただきますので、作成希望の内容をお気兼ねなくご相談ください。
韓国のアプリUI/UX専門家アプリの企画とデザインを制作いたします。ます
業務内容
世界的なトレンドをアプリに適用したい方。
韓国にアプリサービスを準備している方。
韓国風アプリを作りたい方。
Adobe XD ツールを使用します。
ワイヤーフレーム全体を描きます。
インタラクションを追加いたします。
プロトタイプで製作いたします。
- アプリの種類
- 美容・化粧品 書籍 ビジネス コミュニケーション デベロッパーツール 教育 エンターテインメント イベント ファイナンス 飲食 グラフィックデザイン ヘルスケア・フィットネス 住居 キッズ ライフスタイル 地図・ナビゲーション メディカル 音楽・オーディオ ニュース・オンラインマガジン 写真・動画 生産性向上 リファレンス ショッピング SNS スポーツ 旅行 ユーティリティ 天気予報
- ツール
- Adobe XD Figma Adobe Illustrator Adobe Photoshop Zeplin After Effects
- デバイス
- モバイル タブレット ウェアラブル端末 テレビ
iOSアプリのUIデザインします(10,000円/1画面)
業務内容
iOSアプリのUIデザインを受注後5日以内に納品します。
メインとなる色・機能などが未確定の場合は、そこからの要件詰めとなるため、追加で数日いただくことがあります。
また、もし複数画面が必要な場合は、私のプロフィール画面右上「メッセージで相談する」ボタンからご相談いただけますと幸いです。
figmaを使用し、アプリのプロトタイプを格安で作ります
業務内容
格安でアプリのモックアップを制作します。
アプリのモックアップをご要望に沿って作成します。
デザインや画像は提供頂くか、こちらで作成することもプラン次第で可能です。
figmaで作成した画面を、Wordpressで構築することも可能です。
【内容】
figmaにて納品します。
WEBアプリ、モバイルアプリ、どちらも可能です。
希望があれば、デザインをHTML,CSS,JavaScriptのコードでも納品します。
最善を尽くさせて頂きます。
何卒よろしくお願い致します。
■アプリデザインとは
アプリデザインとは、開発するアプリケーションのデザインを構築する作業です。具体的には、UIデザインやUXデザインといった作業を行って、利便性や利用価値を向上していきます。トップページや各画面の構成、ビジュアルデザイン、アニメーション、アプリ利用によって得られる体験などを考えていきます。
アプリデザインは、新たに開発するときだけ行うものではありません。リリース後であっても、ユーザーの意見や競合アプリの動向を見ながら、改善し続けていくものです。アプリデザインによって、操作性が良く特別な体験ができるアプリが開発できれば、多くの人に利用してもらえるでしょう。
UIデザインとは
UIデザインとは、ユーザーが触れる部分のデザインをすることです。そもそもUIは「User Interface」の略で、ユーザーとの接点を意味します。ユーザーが操作するアプリ画面のデザインをすることで、より使いやすいアプリにしていくのがUIデザインです。
UIデザインでは、全体的なレイアウトや配色、ボタン、アイコン、文字デザインなどを考えていきます。どんなデザインか、またどんなアニメーションを用いるかといった点を考えるのがUIデザイナーの仕事です。
UIデザインの重要性
UIデザインが優れているかどうかで、ユーザーが継続して利用してくれるか、また多くのユーザーに利用してもらえるかが大きく変わります。
UIデザインがよくなかった場合、ユーザー離れを引き起こし、サービス終了に追い込まれてしまうケースもあるでしょう。スマホが普及してから15年ほど経過しますが、これまでにさまざまなアプリが登場してきました。現在まで残っているアプリの多くは、ユーザーの意見を取り入れながら機能を拡充し、ユーザービリティを向上し続けてきたものです。
どれだけ素晴らしいアイデアから生み出されたアプリでも、UIデザインが良くなくユーザーが使いたいと思わないアプリであれば、ユーザーの増加は期待できません。逆に優れたUIデザインであれば、ブランドイメージの確立やUXの向上に役立つでしょう。
UXデザインとは
アプリ開発におけるUXデザインは、利用したユーザーの体験をデザインすることです。UXとは「User Experience」の略で、ユーザー体験を意味します。アプリを利用してどういった体験を得られるか、その目標を考えるのがUXデザインです。
スマホにインストールされたアプリを利用すると「世界中の情報が一瞬で手に入る」「趣味があう人と繋がれる」「人気の音楽を聴ける」などさまざまな体験が得られるでしょう。また、細かく見ると「商品ページに行くと興味のある商品が見つかる」「ポップなフォントで楽しい気分になる」といった体験も得られるかもしれません。こうしたアプリ利用による体験すべてがUXなのです。
UIデザインとUXデザインの主な違いは、デザインする対象です。UIデザインは主にユーザーとの接点となる操作画面をデザインしますが、UXデザインではユーザー体験という目に見えないものをデザインします。UXデザインで考えた目標を達成するための手段が、UIデザインと言えるでしょう。
UXデザインの重要性
UXデザインによって、そのアプリを利用する価値が大きく異なります。UXデザインをして、アプリで得られる体験を深く考えていけば、ユーザーにさまざまな利用メリットを提示できるでしょう。
例えば「その日の気分に合わせたコーディネートが見つかる」「一人暮らしで料理を楽しみたい人のコミュニティに参加できる」「画面遷移がなく直感的に使える」といったユーザーのニーズを捉えた体験が、UXデザインです。UXデザインがしっかりとしてると、ターゲットへの訴求力が高まり、より多くの人に利用してもらえます。
開発するアプリを通して、ユーザーにどうなって欲しいか、どんな気分にさせたいかを考えるのがUXデザインです。優れたUXデザインは他社との差別化を図り、競争優位性を高めるのにとても役立ちます。
■アプリデザインをする際の5つの考え方
アプリデザインをする際、大切なポイントがいくつかあります。
①ユーザーの手間・負担を軽減させる
アプリデザインにおいて特に大切なのが、ユーザビリティです。どれだけオシャレで洗練されたデザインであっても、行きたいページまでになかなかたどり着かなかったり、どこに何があるか分かりにくかったりすれば、ユーザーのことを考えたアプリとは言えません。ユーザーの手間を減らし、快適に使えるデザインを考えるべきです。
具体的なポイント
- ・情報量が多い
- ・インターフェースがシンプル
- ・メニュー画面が分かりやすい
- ・行きたい場所に2〜3タップで到達する
ユーザーニーズを満たすような情報量を確保しつつ、いかにシンプルで操作しやすいUIを設計できるかがアプリデザインにおける大きな課題です。情報量は多くてもまとまりがなかったり、逆にシンプルすぎて情報量が少なすぎたりすれば、ユーザーは使ってくれません。
また、どれだけ情報量が多くても、目的の階層に2〜3タップほどで到達できる設計になっていないと、ユーザーは使いにくいと感じます。トップページから各階層まで、最短距離で行けるフローになっているか、また各画面の設計が見やすく移動しやすいかも大切なポイントです。
②直感的にシンプルなデザインを追求する
アプリデザインにおいて大切なのは、直感的に操作できるかどうかです。ゲームであればチュートリアルがあっても問題ありませんが、ショッピング系やSNSなどに関しては、操作説明がなくても利用できるくらいの操作性が求められます。
チェックポイント
- ・テキストサイズは適当か(5インチ画面でも見にくくないか)
- ・アイコンは簡潔で見やすいか
- ・ナビゲーション設計はシンプルか
- ・ボタンはイラストベース・文字ベースどちらが適当か
人気のアプリを見てみると、例えばボタンひとつでも、イラストベースと文字ベースをうまく使い分けていたり、テキストサイズが適当でどんなスマホでも見やすいデザインになっているのが分かります。また、新機能のみポップアップでナビゲーションがあったり、スワイプで戻るボタンを他のアプリと同様のUIにしたり、ユーザーへの負荷をかけにくいデザインにすることが大切と言えるでしょう。
③ブランドイメージを反映する
アイコンのデザインや配色、アニメーションに至るまで、ブランドイメージと統一させるのも重要なポイントです。例えば、洗練されたイメージのブランドなのに、ポップな配色や、飛び跳ねるようなアニメーションを用いてデザインしてしまうと、ブランドイメージを損ねてしまうでしょう。
逆に、アプリデザインをするうえでは、ブランドイメージが確立されている必要があるともいえます。ブランド全体の世界観や、製品・サービスごとのコンセプト、ターゲット像などが明確になっていないと、良いアプリデザインはできません。ブランドイメージが確立されていない場合は、まず世界観やターゲットについて考える作業が必要になります。
④モバイル最適化を重要視する
モバイル最適化は、アプリデザインにおいて基本となるものです。ただし、スマホだけに最適化するのではなく、タブレットでも使いやすいUIにしていく必要があります。また、PCにも対応させるのであれば、PC画面に最適化したアプリも制作する必要があるでしょう。
スマホやタブレットに関しては、レスポンシブ対応になっているかが大切です。レスポンシブ対応とは、ユーザーが使用するデバイスごとにページのレイアウトが変動する仕組みのことでUXの向上に繋がります。また、なるべくスクロールせずに利用できるデザインにするのも大切です。
⑤改善を繰り返しアップデートする
利用者を増やし続けるために、定期的なアップデートは必須です。どれだけ利用者が増えても、また広告を打って認知度を高めたとしても、利用を止める人が新規利用者を上回っては結果的にユーザー数は減少してしまうことになります。
機能を充実させるのはもちろん、アプリの操作画面をより使いやすくしたり、ユーザーフローを見直したりして、よりユーザーが快適に利用できるアプリにしていくのが大切です。
またアプリのアイコンに関しても、適宜アップデートが必要です。大手企業のアプリを見ても、ほんの少し明るい色味にして目立つようにしたり、余計な要素を排除してより印象に残るものにしたりとアップデートを繰り返しています。
アップデートをするうえでは、ユーザーのニーズを正しく把握する必要があります。ユーザーレビューを参考にするのはもちろん、SNSや公式サイトなどをうまく利用して、ユーザーがストレスに感じている部分はないか、他社で参考になる機能はないかなどを調査し、ユーザーニーズを探っていきましょう。
■アプリをデザインする手順・やり方
①要件定義
要件定義とは、アプリを作成する目的や実装する機能などをまとめた工程です。作成する際は、まず発注者と開発者でコミュニケーションをとり、発注者の要求を「要求定義書」にまとめます。そして、開発者が描く理想のアプリのイメージを明確化し、具体的な作業内容へと落とし込んだのが「要件定義書」です。要件定義書には、以下のような内容をまとめます。
要件定義書にまとめる内容
- ・アプリ開発の目的
- ・アプリ開発の概要(おおまかなイメージなど)
- ・システム方式と構成
- ・文書内の用語定義
- ・業務要件(現状と構築後のフロー、規模など)
- ・機能要件(画面やデータフローなど)
- ・非機能要件(予算やスケジュールなど】
要件定義書には、アプリ開発に関わるさまざまな内容を記載します。開発に携わる全ての人と、理想とするアプリのイメージや開発工程などを共有するためのものなので、誰でも分かるように作成するのが重要です。
②構造設計
構造設計では、要件定義書にまとめられた機能要件をもとにして、アプリの構造マップやコンテンツの流れなどを作成していきます。どんな階層が存在するか、各画面の情報の配置はどうなっているかなどを考えるのが、構造設計の工程です。
例えば、アプリをインストールしたユーザーに最初に表示させる画面を「トップページ」にするのか「会員登録画面」にするのかによって、その後の画面遷移は大きく異なります。もし会員登録画面をトップに持ってくるのであれば、登録しない限りほかの機能は利用できないようにするのか、それとも会員登録しなくても特定の機能は利用できるようにするのかといった点を考えなくてはなりません。
このように、どういった画面をどのタイミングで見せるか、どこからどこへ移動できるのか、それぞれの画面にはどういった情報をどんな配置で表示するのかといった点を考えるのが、構造設計です。
③骨子作成
構造設計が完了したら、ワイヤーフレームを作成します。ワイヤーフレームとは、各画面の構成をビジュアル化した工程です。構造設計で考えたものを具体的なデザインに落とし込むために作成します。ワイヤーフレームはあくまでデザインに落とし込むための資料なので、無彩色で作成します。
骨子作成において注意したいのは、細かく作りすぎないことです。フレームワークではあくまで画面構成を決定するだけで、具体的なUIデザインは後で行います。フォントやボタンの色、テキストサイズなどを細かく作り込んでしまうと、表層作成で行える作業が狭まってしまうので注意してください。
ワイヤーフレームは、SketchやAdobe XD、Figma、Balsamiqなどのツールを使って作成するのが一般的です。
④表層作成
ワイヤーフレームが完成したら、細かな部分を作り込んでアプリデザインをする「表層作成」を行っていきます。ロゴデザインやテキストサイズ、フォント、利用する写真やイラスト、素材作成、アプリ全体の構成などを決めるのが表層作成の工程です。
表層作成では、とにかくユーザーが悩まず何も考えなくても利用できるくらいに、使いやすいデザインを考えるのがポイントになります。また、フォントや配色などを工夫して、ブランドイメージやアプリのコンセプトに則したデザインにしていくのも重要です。
なお、昨今ではさまざまなフリー素材サイトや画像素材のサブスクサービスがありますが、アプリ開発に利用できないケースも少なくありません。外部サイトで画像やイラスト、ボタン背景、フォントなどの素材を探す場合は、アプリ開発に利用できるか、また商用でも問題ないかなどをしっかりと確認しましょう。
⑤実装
アプリが完成したらテストをしましょう。なお、テストをする際には第三者にもチェックしてもらうのがおすすめです。デザイナーは制作したアプリの画面を見慣れてしまうため、ミスや違和感、使いづらさに気付きにくくなります。第三者にチェックしてもらえば、自分では気付けなかった不便さや違和感が分かるでしょう。
問題なくデザインが完成したら、アプリを実装(リリース)していきます。なお、App StoreやGoogle Playではアプリをリリースする際に登録や審査の工程があるので、あらかじめ確認しておきましょう。審査には数週間ほどかかるケースもあるので、リリース日が決まっている場合は、余裕を持って作業を進めておくと安心です。
■アプリ開発をランサーズで依頼する方法
アプリ開発を外部に依頼したい場合は、ランサーズを利用する方法もあります。ランサーズとは、アプリ開発を発注したい依頼者と、アプリ開発やデザインができる受注者を繋げてくれるサービスです。アプリ開発以外にも、ライティングや動画編集、サイト構築などさまざまな分野の受注者を探せます。
ランサーズでアプリ開発を依頼する方法としては、受注者に直接メッセージを送って依頼する方法のほかに、案件を掲載して受注者を募る方法や、出品パッケージから依頼する方法などがあります。以下では、ランサーズを初めて利用する方にもおすすめな、出品パッケージから依頼する方法を解説します。
出品パッケージを探す
出品パッケージは、受注者(ランサー)それぞれが、自分が対応できる業務を、レベルごとに料金を設定して掲載しているシステムです。どんな業務をどのくらいの予算で依頼できるかが分かるため、アプリ開発の発注に慣れていない方でも利用しやすいでしょう。
出品パッケージは、トップページ上部にある「パッケージを探す」からジャンルを選択して探せます。アプリ開発の場合は「プログラミング・システム開発」の中にある「モバイルアプリ・スマホアプリ」や「デスクトップアプリ」などから探しましょう。出品パッケージを選べない場合は、画面左側のメニューから予算や納期などを選択して絞り込み検索をしてみてください。
無料見積もり相談
良い出品パッケージが見つかったら、無料見積もり相談をしましょう。まず、出品パッケージのトップ画面にある「ベーシック・スタンダード・プレミアム」から、自分が依頼したい内容にあわせたプランを選択します。そして「スポット・3ヶ月継続・6ヶ月継続」のいずれかを選択したら「まずは相談する(無料)」から無料見積もり相談をしましょう。
無料相談のボタンを押すと、無料見積もり相談の画面に移動します。追加オプションや希望納期などを選択してから、依頼内容の詳細欄に具体的な開発内容を記入していきましょう。どんなアプリを開発したいか、どんな機能が欲しいのかなど詳しく記入すると、開発者側もイメージが共有しやすくなるでしょう。
発注
無料見積もり相談をしてみて、納期や予算、対応スキルなどに問題がなければ、発注をしましょう。発注をする際には、改めて納期や修正対応などについても聞いておくと安心です。なお、ランサーズでは「仮払い」を導入しており、依頼主が仮払いをしてから業務をスタートすることになっています。
仮払いシステムは、依頼主がランサーズに依頼料金を払っておき、納品が完了してからランサーズが開発者へ料金を支払う流れです。仮払いの手続きを行い、依頼を進めていきましょう。
確認・納品
アプリのデザインが完了したら、実際にテストをしてみましょう。テストをして問題があれば、開発者に修正をしてもらってください。なお、修正に関しても納期を設定しておくと、お互いにスムーズに業務を進められます。問題がなければ、リリースをしていきましょう。
リリースまで完了し、大きな問題がなければ依頼は終了です。最後にお互いの評価を入力してランサーズでの契約は完了となります。
■一般的な制作会社へ「アプリデザイン」を依頼した際の料金相場
アプリデザインを外部に依頼する場合、デザイン会社の規模やデザイナーの単価、デザインの複雑さ、リビジョンの回数などによって料金が異なってきます。
また依頼先によっては、デザインするページ数で価格設定がされていることもあります。
それ以外には、アプリのユーザー体験を考慮したページの構成案作成から依頼するのか、またモックアップの作成も依頼するのか、アニメーションを付加するのかといった具体的な依頼内容によっても料金は変わってきます。
このようにアプリデザインは、依頼内容によって大きく料金が変わるため、どの工程をお願いしたのかを事前に明確にし、相見積もりを取ってより最適な価格でお願いできる業者を見つけるのがおすすめです。
企業 | 内容 | 相場例 |
---|---|---|
企業A | 構成設計 | 約50,000円~ |
ワイヤーフレーム制作(10画面) | 約50,000円~ | |
UIデザイン(10画面) | 約80,000円~ | |
グラフィックデザイン | 約20,000円~ | |
モックアップ作成(10画面) | 約30,000円~ | |
アニメーションカンプ(10画面) | 約80,000円~ | |
企業B | メイン画面 | 約150,000円〜 |
下層ページ(1つ目) | 約70,000円~ | |
下層ページ(2つ目) | 約50,000円~ | |
下層ページ(3つ目) | 約30,000円~ | |
下層ページ(4つ目) | 約10,000円~ | |
企業C | ネイティブアプリのデザイン | 約300,000円〜 |
※大凡の価格を表示しています。実際の料金は依頼内容や会社によって異なります。
※こちらで記載している金額はランサーズ上の依頼金額ではありません。
※当社調べの「一般的な制作会社や企業に依頼した際の目安の依頼料金」となります。