https://kiyoshinakazato.studio.site/
STUDIOでポートフォリオサイトを作りました。詳細は後日noteに記載します！

ゼロからモバイルオーダーアプリをデザインしてみた #BONO #UI #パターン作成編

ゼロベースからモバイルオーダーアプリのUIをデザインしました。
その過程をご紹介します。

今回は「#パターン作成編」となります。
その前の記事「#準備編」「#ラフデザイン編」も合わせてお読みください。

1. パターン作成の準備ラフデザインが済んだので、パターン作成の準備に取り掛かります。
一度UIを作成する中で自発的にアイデアが浮かんでいたり、参考UI調査時にもアイデアが見つかっています。
ま

ゼロからモバイルオーダーアプリをデザインしてみた #BONO #UI #ラフデザイン編

モバイルオーダーの話です。

利用した人なら既に体感していると思いますが、モバイルオーダーは飲食店での体験を大いに変えるサービスです。
実際に「これは本当に便利なサービスだ」と思わせるような取り組みは多くありませんが、待ち時間の短縮から表立って見えなかったカスタマイズまで、顧客の立場で利用すると様々なメリットを体感できます。
列に並ぶのが大嫌いな私にとっては、半ば革命的な瞬間でもありました。

デ

ゼロからモバイルオーダーアプリをデザインしてみた #BONO #UIパターン #準備編

例えば、大きな滝が見たいと思って、海外旅行に行きたいとします。
色々な旅行サイトがありますが、一つの滝しか紹介していないサイトと、複数の滝スポットを取り扱っているサイトがあったとしたら、どちらを参考にして旅行先を決めますか？

できれば、色んな場所を閲覧できた方が目的の場所を網羅してから選択できますよね？大きいとか小さいとか、近くに休める場所があったら良いとか、様々な検討ができます。
既に行きたい

【BONO】ナビゲーションUIについて　〜知識編〜

UI/UXデザインコミュニティBONOの「UIナビゲーションの基本」というUIパターンを学ぶコンテンツを紹介する。

最大の学び今更になるかもしれないが、UIデザインには「パターンが存在する」ということが最大の学びである。ナビゲーションも例外ではないので、紹介すると共に作例を展開していこうと思うのでお付き合い願いたい。
（作例は別の記事で紹介するよ！UIと共に作成中だよ！）

今回の学習は、サービ

【BONO】音声SNSアプリのデザイン　〜フィードバック編〜

音声SNSアプリ、三部作の最終章。
どうぞよろしく。

この記事は、UI/UXデザインコミュニティBONOの「音声SNSアプリ」をデザインするというお題のフィードバック編である。
アプリの大元を考えるコンセプト編、グラフィックを作り込んだビジュアル編の後の、フィードバックからUIをカイゼンさせるという内容である。

・カイさんから受けたフィードバック
・自分で気になったポイントをフィードバック

【BONO】音声SNSアプリのデザイン　～ビジュアル編～

前回の続き。

この記事は、UI/UXデザインコミュニティBONOの「音声SNSアプリ」をデザインするというお題のビジュアル作成編である。
前回はコンセプト編と題して音声SNSアプリのコンセプトを紹介したが、今回はビジュアルに落とし込む工程、個人的にどんな所に気をつけて作成したのかがメインとなる。
なるべく読みやすくなるように善処したい。

再三だが、この課題の目的は
「自分でUIをデザインしなが

【BONO】音声SNSアプリのデザイン　～コンセプト編～

気づけば春が終わっていた。
その代わり、アウターを着込まなければならない早朝や、炎天下を思わせる白昼が入り混じって、一体何の季節なんだと清々しい日本晴れにツッコミを入れたくなる日々が続いている。
着実に日本の気候は変動していると思わざるを得ない。

現在UI/UXデザイナーに転職するため、朝に夕に奮闘中だ。
本記事はその奮闘記録である。
一刻も早く、アプリとかサービスとか事業戦略とか死ぬまで考えた

最近読んだ本　～UI/UX編～

UI/UXデザイナーになるべく、やはり読書は欠かせないと思い、UI/UXについて巷でよく読まれている本をかき集めて読んでいる。

所感なので、さらっと見て頂けたら幸いである。詳細を知りたい場合は、リンク先の目次を読むなどして頂きたい。

ちなみに、私の能力として

デザイナー歴10年ぐらい

Adobeのソフト大体触れる

Webコーディング（HTML、CSS）

プログラミング知識はそんなにない

【BONO】グラフィック入門 後編

この記事は、UI/UXデザインコミュニティBONOの「グラフィック入門」という課題の後編である。まだ前編をご覧になられていない方はコチラから。

後編は、配色～デモサイト作成までの経緯を記述する。

■最終アウトプット

7.配色所要時間：2時間

レイアウトおよびスタイリングのパターン作成段階では、変数が上がるためカラーリングをせずにいたが、それらがまとまってきたので、次は具体的な配色を行った。

【BONO】グラフィック入門 前編

UI/UXデザインコミュニティBONOの「グラフィック入門」という課題を終了した。結構ヘビーだった。
制作過程を前編・後編にわたってお送りします。
一デザイナーの脳内を知りたい方はぜひお読みになって頂きたい。
後半はこちら。

0.はじめにBONOのグラフィック入門では、その名の通りグラフィックにフォーカスしており、見た目を作っていくプロセスをトレースする方法でUIデザインを学ぶ設計になっている。

【BONO】UI構造×UIリデザイン

ギュスターヴ・ル・ボン曰く、群集心理とは情動的で扇動されやすく、原始人のような振る舞いをするのだが、時に英雄的でもあるらしい。

敬愛するナポレオン・ボナパルトが常勝将軍としてフランスにその名を轟かせ、皇帝に即位できたのは、この英雄的である群集心理を掌握して指揮を執ったからである。今で言うマーケティング能力に近い。いや、一英雄をマーケターにカテゴライズするのはどうか…

いつの時代でも英雄的で原始

【BONO】レスポンシブ×UIリデザイン

「どうなるのか分からない」＝「偶有性」

　茂木健一郎さんのYouTubeが面白い。特に「偶有性について」の説明は、UXにおいてヒントになる。人間は予想できない事態に遭遇するとき、ドーパミンを用いて脳を活性化させ、脳を若返らせたり行動を変化させるという。脳が若返るのは人間の快楽なのだろうか？
　果たして、程よいバランスの情報が人間に対して心地よさを提供するものであれば、それは人間の欲求を満たす鍵と

【BONO】配色×UIリデザイン

　今回も、UI/UXデザインコミュニティのBONOによるUIビジュアル基礎コースの「配色の基本」という課題を完了したのでご報告する。
　毎日、何かをやり続けるとフロー状態になるのではないか。少し苦しかったことも徐々に慣れてくるものだ。

1. 配色の基本×リデザイン　今回の課題は「SP版：動画詳細UIのリデザイン」である。
　早速だが、リデザインのBefore／Afterを御覧いただきたい。

　

レイアウトの基本×UIをリデザイン

　人生は短い、すぐやる。
　今回もUI/UXデザインコミュニティのBONOによるUIビジュアル基礎コースの「レイアウトのきほんでリデザイン！」という課題を完了したのでご報告する。

1.レイアウトの基本を意識してリデザイン　今回の学習の目的は「レイアウトの基本を実践」し、動画詳細UIをリデザインすること。
　早速、リデザインのBefore／Afterを見て頂きたい。

■Before

■Afte

システム化×UIリデザイン

　今回、UI/UXデザインコミュニティのBONOによるUIビジュアル基礎コースの「ビジュアルシステムでリデザインしよう！」という課題を完了したので、その行程をご紹介する。

1.構造をシステム化するとは？1-1.まず、Before, Afterから

　今回の学習の目的は「UIの構造をシステム化し、それを利用してUIを設計すること」である。Webデザインをしている人ならCSSフレームワークのような