Meet the whiteboard transforming the way teams work together. Try Freehand

Wordcamp Tokyo 2017で発表したプレゼンテーションです。 動画： https://wordpress.tv/2017/09/28/yutaka-sekiguchi-%E3%81%BF%E3%82%93%E3%81%AA%E3%81%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%81%E3%81%82%E3%81%AA%E3%81%9F%E3%82%82%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/ -- WordCamp Tokyo 2017 https://2017.tokyo.wordcamp.org/ hanarenoheya http://www.hanarenoheya.com/

先進的から最適化へ 3年前、Facebook が今までのニュースフィードを完全に変えた「Paper」というアプリをリリースしました。ネイティブコンポーネントが使われていないオリジナルの UI とインタラクション。今までありそうでなかった新しい操作方法を提案していました。Paper をはじめ、様々な実験的なアプリを Creative Labs としてリリースを続けていましたが、2015 年にラボは閉鎖され、その半年後には Paper も配信停止されました。 今でも Things 3 for iOS のように新鮮な UI とインタラクションが生まれる場があるものの、あまり見かけなくなりました。今のアプリ UI デザインは、目新しいものを作るより、今まで培われたノウハウを基に使いやすさ、見やすさを磨き上げるフェイズに来ています。斬新なアニメーションと目新しい形状のメニューを作るより、ガイドライン

Ben Shneiderman氏の『Designing the User Interface』とJakob Nielsen氏の『Ten Usability Heuristics』の著書に基づく、インタラクションデザインに関する10個の原則というものがあります。 この原則は、「ヒューリスティック」と呼ばれるもので、経験則による広範なルールであり、特定のユーザビリティに関するガイドラインではありません。 １．一貫性を重視する 同じことを意味する複数の名称や状態があることは、ユーザーにとって好ましくありません。ユーザーの混乱を招かないように、用語と動作を一致させるようにしましょう。相手の驚きを最小限にする「驚き最小の原則（The Principle of Least Surprise）」に留意することが大事です。 アプリ内のすべての要素に一貫性を持たせるようにしましょう。たとえば、同じスタイルの

Title : 自分を生かすコンセプト -Think of your own concept- Event : Service Design Night #4 - 2017.02.28 Speaker : 割石裕太 (@wariemon) / OH : Art Director, UI Designer. Service Design Night #4 のテーマは『デザイナーのキャリアについてどう思う？』。 今イベント 2番目のスピーカーとして、自分のキャリアを見つめ直した結果、非常に重要な存在だった「自分のコンセプト」についてお話しをさせていただきました。 UIデザイナーになった理由、そして Fablic に転職した理由。それも全て、自らのコンセプトに起因してアクションしただけ。 このコンセプトの考え方と、また身につけるための「1年にひとつ自信作をつくる」という具体的なアクションについて

リンク ライブドアニュース 映画ドラえもんの最新ポスターが一挙公開に 惹き込まれると話題 - ライブドアニュース 映画「ドラえもん」の最新ポスターが公開され、ネット上で話題になっている。コピーの一文と相まって、一瞬で惹きこまれる魅力に包まれているポスター。「シンプルなのに惹きこまれる」「期待値が高まる」といった声が寄せられた 1 user 47

深津 貴之 / THE GUILD / note @fladdict アニメーションの監修で、「 Random();の代わりに、(Random()+Random()+Rrandom()+Random()+Random())/5.0f; を使うと、動きにコクが出る」と言ったら、ピュアオーディオ扱いされるのですが・・・これは根拠のあるアルゴです。 2016-11-03 11:29:43 深津 貴之 / THE GUILD / note @fladdict 乱数のコクをチューニングする話をすると、なぜピュアオーディオ扱いされるのか？ みんな乱数の波動を、もっと体で感じようよ。全然ヴァイブレーションが違うよ。 2016-11-03 11:36:47

機能的なアニメーションとは、演出のみのアニメーションと違い、その意図が明確かつ論理的に校正された、控えめなアニメーションのことです。それはUIにおける認知的負荷を軽減させ、変化の見落としを防ぎ、そしてよりその空間の記憶を呼び起こしやすくさせ、何よりもUIに命を吹き込みます。 その動きは、増えたり、分かれたり、その形やサイズが変わることで、画面をさらに生き生きと見せることができます。機能的なアニメーションは、ナビゲーション上でユーザーをスムーズに移動させ、スクリーン上の要素の配置の変化を説明し、要素の階層を明確にするために使用するものです。 成功する機能的なアニメーションには、以下の６つの特徴があります。 1. レスポンスがよい UIデザインにおいてビジュアル・フィードバックはとても重要です。なぜなら、ユーザーの認知に対するごく自然な要求に訴えかけるからです。現実世界ではボタンやコントロール

アプリケーションのUI（主にGUI）の設計・評価をする際、ほとんどの場合は評価の範囲が画面（ページ）単位で行われることが多く、この設計・評価のフォーカスの粒度についてもっと考えたほうがいいのではないかと最近よく思います。 画面単位での評価をしていてよくあることは…画面 A 画面 B どちらにもリストがあり、そのリストは同じリストアイテムを表示していたりする場合でも、 「画面 Aとリストがー…」 「画面 Bのリストがー… 」 と同じリスト要素なのに画面単位で話をしてしまうことがよくあります。これはかなり無駄なことをしているように思えます。 もちろん、《そのデザイン要素はどういうコンテクストなのか》を議論する上で画面を持ち出すのは必要な事と思いますが、そもそもそのコンテクストは何に依存するものでしょうか？ それはコンポーネントとして分解していくと実は画面そのものにあまり依存していない事が見えて

(30,000訪問者御礼！はてなブックマークで4位を取りました) (もし共感頂いたら文末の❤️を押していいね！お願い致します) 先日伊藤忠の同期Tと酒を飲んだ時、 “お前、やるじゃん！なかなか凄いな！”と言われたので、 もしかしたら人様の役に立つかもと思い、 ノウハウとやった事リストを公開します。 情報商材っぽいタイトルで恐縮なのですが、、 月収150万円は分かりやすい数字かと思い、あえてそうしました。 お許しください。 あと、世の中の成功者から見たら月収150万円は全く大した事ないのはよくわかっております。 ポイントは、 全く何もない状態から自営業で月収150万円作るのは結構難しい事と、 私の手法を使うと、 多くの方が同じくらいは稼げる点です。 なので、生生しいストーリーとして公開する意味はあるかと思いました。 この話は、昨年好評いただき、6000訪問者を記録した私のブログ、 “ プログ

99designsのこれまでの成長ぶりから判断して、今年は重要な年になりそうです。本サイトはかつてないほどの速さで進化を遂げているので、ぜひデザイナーの皆さんも一緒に成長してほしいと願っています。 優れたデザイナーになる12の方法を紹介しますので、毎月1つ試してみてください。新しいスキルを学び、新たなヒントを生かしていくことで、さらに優れたデザイナーになりましょう。 1. グリッドの使い方を習得する — ウェブサイトであろうと印刷物であろうと、デザインする上でバランスのとれたレイアウトを決定することは、最も難しく、非常に悩ましい作業の一つです。しかし、この問題はグリッドがあっという間に解決してくれます。グリッドを使えば、いつもの試行錯誤を繰り返すことなく、レイアウト作業を系統立てて行うことができるのです。 この方法なら、グリッドに沿ってレイアウトを決めていけばいいので、コンセプトやタイポグ

はてブで新人エンジニア向けに技術書を紹介するエントリを見かけて、思わず「デザイナー版を書いてみたい！」と思ったので、書くことにしました笑 この春からデザイナーになられる方で、「勉強したいけど、どんな本を読めばいいの？」という方はぜひ参考にしてみてください。 おすすめデザイン書10選 01.誰のためのデザイン 02.美の構成学 03.ノンデザイナーズ・デザインブック 04.融けるデザイン 05.デザインのルール、レイアウトのセオリー 06.７日間でマスターする配色基礎講座 07.タイポグラフィの基本ルール 08.インタフェースデザインの心理学 09.絵ときデザイン史 10.プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド おわりに デザインを本格的に学ぶなら おすすめデザイン書10選 01.誰のためのデザイン 誰のためのデザイン？　増補

たまには本もいかがですか？ セミナーやワークショップのあとに質問を受けることがありますが、「おすすめの書籍はありますか？」と聞かれることがあります。 Web には膨大な情報がありますし、英語まで手を広げると研究者による文献にもアクセスすることができます。しかし、ある特定のトピックを要所を落とさず学びたいときは書籍が便利です。 目まぐるしく状況が変わるだけでなく、デザイナーとして知っておくべき領域も広い今日のデザイン。ソフトウェアの使い方を覚えることも重要ですが、作るための考え方や伝えた方を学ぶことに多くの時間を費やしたほうが良いでしょう。自分のデザインの意図が説明できて、ようやく同僚やクライアントにデザインを理解してもらえるからです。 今回は、デザイナーとして読んでおきたいオススメの入門書を紹介。Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍を

最近はアイコンデザインの進化もめざましいものがあります。 かわいいアイコン、かっこいいアイコン、面白いアイコン、そのデザイン・設計や見せ方がすばらしいアプリ用のアイコンを紹介します。

企業にとって非常に重要なロゴマークは、決定するのに時間や手間がかかることも。ロゴにはどういうタイプがあり、人々にどう作用し、現在ではどのようなロゴが人気なのか、そして、ロゴ作りにおいて本当に大事なことは何なのかをグラフィックデザイナーのマイケル・ビアラット氏がムービー「What makes a truly great logo」で解説しています。 What makes a truly great logo - YouTube ロゴは現在において過大評価されている側面があり、グラフィックデザイン会社の副社長マイケル・ビアラット氏は「私がロゴに対して持つ感情はさまざまなものが入り交じっています」と語ります。 ロゴは人にとっての「顔」と同じく、企業にとっての「顔」と言えるもの。人によって好き嫌いがあるのは当然です。 ロゴは小さく表示されても…… 大きく表示されても機能する必要があります。 ロゴに

グラフィックデザイナーがドキュメントをデザインするにあたって特に重要な要素を「Color(カラー)」「Contrast(コントラスト)」「Repetition(反復)」「Arrangement(アレンジ)」「Why(なぜ)」「Organization(組織化)」「Negative Space(ネガティブスペース)」「Typography(タイポグラフィ)」「Iconography(図像学)」「Photography(フォトグラフィ)」という10のカテゴリに分類し、各カテゴリに5つずつ、全部で50のルールを盛り込んだインフォグラフィックが「Color CRAYON-TIP」です。 The 50 Most Important Rules of Document Design: Color CRAYON-TIP Method http://thevisualcommunicationguy.co