はてなブックマーク

巷で良く聞かれる「UXデザインとは？」意味が広義にわたるため明快に答えることが出来る人はなかなか少ないのではないでしょうか？ただ「ハラハラという会社で提供するUXデザインとは何？」と聞かれたらこう答えると思います。 “ルック＆フィールによって発生する体験の価値をよりよくする為の作業” UXデザインを正しく運用・開発するためにはIA（情報アーキテクチャ）とそれを実行する手法（ステートメントシート、ペルソナ、カスタマーエクスペリエンスマップ、ワイヤーフレームなど）を組み合わせる必要があります。 今回はそういったツールの中で制作過程におけるレイトステージにおいて弊社で最もハードに使われる「ワイヤーフレーム」と「プロトタイプ」を組み合わせる開発方法を少しだけご紹介いたします(あくまでもアプリの操作法では無くワークフローの一部を抜粋したものになります) 基本的な流れはワイヤーフレーム→プロトタイプの

プレゼンや打ち合わせで参加者の心を掴むのって重要ですよね。 制作工程の初期段階で時間短縮することでUI/UXの開発にじっくりと時間をかけたい、という思いもあり色々なアプリや手法を導入しています。 弊社で現在ハードに活用している便利なアプリを2つご紹介します。 Riflectorを使ってアプリ＆スマホサイトのプロトタイプをその場で共有 Reflector これをインストールすれば写真のようにiPhone/iPadのAirplayを通して現在使っているスマホの画面をPCにダイレクトに写すことができます。ページ遷移やジェスチャーもこれがあれば容易にクライアントに伝えることができますし知らない人からしたらこれ自体のパフォーマンスでグッと引き込まれることでしょう。 インストールしたらiPhone/iPadのホームタスクバーからAirPlayを選択すればあっという間にミラーリングが開始されます。あとは

前回は第3章までご紹介しました。今回はデザインを最終的に完成に持って行くためのブラッシュアップに書こうと思います。 UIデザインをするための5つの工程 ロード第1章　スタディ ロード第2章　モックアップ ロード第3章　仮組デザイン ロード第4章　ブラッシュアップ ロード第5章　なんでもないようなことが幸せだったと思う 前回の仮組デザインがスムーズにいっていれば完成は間近です。ここからは最終的な「モノとモノの適切な距離感」を目で計りながら微調整を行います。この項は全体的に感覚的な話しが多いですがロジックで情報デザインを組み上げた後はノンバーバルでの良さを感じれるデザインを目指しましょう。 デザインに空気を流して全体チェック レイアウトしたオブジェクト（写真、文字、イラストなど）が適切な間隔で配置されているかの確認を行います。優秀なIAの書くワイヤーフレームなどであれば要素毎のマージンをピクセ

弊社はアプリの開発を外部に発注することも多いのですがそういった中でスマホ特有のトランジション(動き)やジェスチャーなどユーザーの右脳に訴えかけるような表現も多くあるのでお仕事をお願いする際に気をつけたいことをまとめてみました。 Webとは違う まず当たり前ですがFlashやjavascriptによるリッチなコンテンツの実装をする場合とは根本的に異なることを認識していただくことが前提です。 Flashやjavascriptの実装出来る人は元Webデザイナーをしていたことや志した人も多いですし長年の業務でデザイナーと共に右脳表現を鍛えているはずです。ただ、アプリのエンジニアに関して言えばそういう経緯からの出身者が少ないことをまず知るべきです。 私が出会ったアプリのエンジニアのほとんどは大手のソフトウェア会社のプログラマやSEがほとんどでした。そのプログラムスキルは時にWebプログラマよりも高い

こんにちは、代表の藤原です。 前回は第2章までご紹介しました。今回はデザイン作業の中で最も重要な作業である仮組デザインの詳細を書こうと思います。 UIデザインをするための5つの工程 ロード第1章　スタディ ロード第2章　モックアップ ロード第3章　仮組デザイン ロード第4章　ブラッシュアップ ロード第5章　なんでもないようなことが幸せだったと思う 前回の手描きモックアップができたらいよいよグラフィックアプリケーションでのデザイン作業となっていきます。PhotoshopやFireworks、最近ではSketchを使っている人も増えて来ているようです。これらの使い方詳細はリファレンスが書籍でもネット上でも多くありますので割愛します。 実際にUIや写真などの要素を仮で作成し、どんどんレイアウトしていきます。その際に意識したいのがそれらの要素を螺旋(スパイラル)を描くようにレイアウトしていくことで

“早くデザインが出来る”これは多くのデザイナーにとってのバリューであり、アピールすべきポイントの1つです。 ただ、特に、、企業に属するデザイナーにはその恩恵が薄すぎるように思います。今回はデザイナーとその作業スピードについて弊社の考えをまとめてみようと思います。 企業に属するデザイナーには多くの場合デメリットに働く 初めこそは感謝をされます「あのデザイナーのお陰でデザインフェイズを巻けた、助かった！」ただ、徐々に早いことが当たり前になってしまい通常の制作時間でデザインすると「なんか今回は遅いな」という印象さえ与えてしまいます。 早くデザインが出来たからと言って特別賞与がもらえるわけではありませんし（会社によってあるのかもしれませんが）早く帰れる人は往々にして見たことがありません。 会社としてはクライアントに対して「特急料金」という名目で通常のデザインフィーに何パーセントか乗せた請求ができる

こんにちは、代表の藤原です。 前回の記事でデザインのコツに関するロード第1章  スタディについて書かせていただきました。 UIデザインをするための5つの工程 ロード第1章　スタディ ロード第2章　モックアップ ロード第3章　仮組デザイン ロード第4章　ブラッシュアップ ロード第5章　なんでもないようなことが幸せだったと思う 前回は巷にあふれる良いデザインを常に見て分析する必要性を解かせてもらいました。Webサイトのデザインで言えばブックマークサイトなどをチェックして常日頃からデザインの引き出しを作る重要性を理解していただいたかと思います。それらを踏まえた上で次の章に進みたいと思います。 ロード第2章　モックアップ モックアップとは何か モックアップとはなんでしょうか、人によってはラフスケッチやポンチ絵などと言われることがあります。要はそのWebサイトのデザインの設計図、と思ってもらって構い

こんにちは、代表の藤原です。 私は色々な仕事を兼務しているのですがその中でも最もキャリアのあるデザイン作業には特に思い入れが強くあります。 以前は会社員としてアートディレクターをしていたこともあり若いデザイナーにデザインを教えてきました（生意気ですが…）それを活用している人もいれば全く違うメソッドでデザインをする人もいます、それはそれで全く問題ありません。ここで紹介するのは私の独学と上司や先輩から見聞きしたことを独自にカスタマイズした独自のデザイン理論になります。 デザインと一口に言ってもWebデザイン、グラフィックデザイン、プロダクトデザインなど数多くありますので今回はWebデザインを基軸で考えますが現在弊社でお仕事させていただいているアプリなどにも転用できる考え方なのでUIデザインのお話しでもありますがタイトル的にはSEOを加味してWebデザインとしてあります。 少しこの記事は長くなり

法人化して色々人に会う中でこんなことを聞かれます。 「何をメインに行う会社なのか」 「アプリ制作に転向したのか」 「Webサイト制作はしないのか」 など聞かれることがたまにあります。その辺り誤解もあれば弊社の思いや方向性が上手く外に伝わっていないのは私の至らなさに他なりません、なので折角blogがあるのでその辺りをまとまり無くつらつらと書いてみたいと思います。 Flashの存在意義を問われる さかのぼること2010年、故Appleのスティーブ・ジョブスが元祖スマートフォンであるiPhoneとiPadに技術的な理由としてAdobe Flashをサポートしないという発表が行われました。時代の流れからそれらのデバイスが主流になっていくことは明白でその当時、フリーランスだった私はFlashをベースとしたプロモーションを行うリッチなWebサイトの企画やデザインが主業務だったため「これはマズイ」とその

UI Design haraharaは東京を中心に活動するUIデザイン制作を得意とするプロダクションです。 アプリのデザイン、開発をしたいけど具体的にどうしていいのか分からない。Webサイトに使いやすく高品質なUIデザインが必要。そんな思いをお持ちの方は是非私たちの実績とサービス内容をご覧いただきご相談ください。