はてなブックマーク

こんにちは、tamuです。 最近、今の会社に転職して１年経ったことに気がつき、「自分はどれくらい成長したのだろうか？」と考えていました。 確実に成長したと言えることは、いくつもあります。 元々はWebデザイナーでしたが、iOSやAndroidのガイドラインをある程度理解し、WebだけでなくアプリのUIデザインもできるようになりました。 ユーザーインタビューやカスタマージャーニーマップといった定性調査・分析の手法を身につけました。 TECH::CAMPに通ってRuby on Railsを学び、小さな修正であれば、自分でプルリクエストを出せるようになりました。 一方で、LPやバナー作成等のビジュアルデザイン案件に関わることは少なく、そちらに関してはあまりスキルを伸ばすことができませんでした。 そんな中で「本当にこれでいいのだろうか？」「もっと色々学ぶべきでは？」という思いに駆られることがありま

最近、UIデザインのために統計やSQLを勉強する必要性を感じてきました。 今働いている事業会社のデザイナーに転職して、もうすぐ1年が経とうとしています。 そこで、一定の規模を持ったWebサービスの改善に携わってきて、気が付いたことがあります。 それは「良し悪しに関係なく、既にリリースしてしまったものを根本的に変えるのは難しい」ということです。 どう見ても邪魔なバナーについて 極端な話をすると「どう見てもユーザーにとって邪魔なバナー」なども例外ではありません。 例えば、ユーザーが現在行なっている操作と全く関係のない文脈で、突然モーダルウィンドウで表示されるバナーがあったとします。 そのバナーは全てのユーザーに、しかも上記のように目立つ形で表示されるわけですから、一定数のコンバージョンには寄与するでしょう。（もちろんパフォーマンスは悪いと思いますが） しかし、そのバナーはどう見ても邪魔なバナー

突然ですが、あなたの好きなUIデザインツールは何ですか？ わたしは、ここ２年ほど変わらずSketchを愛用し続けています。 先月のAdobe MAXでは、Adobe XDもついに「CC」が付いて正式リリースされました。 デザインとプロトタイピングが１つのアプリケーション上で完結するという利便性から、SketchからAdobe XDへ乗り換えたという人も少なくないかもしれませんね。 しかし、Sketchの強みは１つのアプリケーション上で完結するものではなく、周辺ツールやプラグインを組み合わせて使える拡張性にあるのではないでしょうか。 そこで今回は、Sketchと合わせて使うのにオススメなツールを４つほどご紹介したいと思います。 もしSketch単体でしか使用したことがないという方は、ぜひこれらのツールも試していただき、Sketchエコシステムの快適さを知っていただきたいと思います。 1. Z

最近わたしの中で、空前のしろくま本ブームが到来しています。 しろくま本というのは「情報アーキテクチャ」という書籍の愛称なのですが、この本がとにかく面白い。 Webサービスやアプリ開発に携わる方であれば、ナビゲーションやラベリングの設計に悩んだことが一度はあるはずです。 しかし、しろくま本では、こうした抽象度の高い問題を解決するためのフレームワークや設計手法が豊富に解説されているのです。 …と、ここまでしろくま本の宣伝のような形になってしまいましたが、そもそも「情報アーキテクチャ」が何なのか、いまいちピンときていない方も多いのではないでしょうか。 というわけで、今回は情報アーキテクチャとは何なのか。その役割や仕事について、わたしなりに解説してみたいと思います。 情報アーキテクチャの役割とは？ まず、情報アーキテクチャの役割について。 それは、一言で表すならば「ユーザーの快適な情報探索行動を設

突然ですが、あなたはUIデザイナーと聞いてどんな仕事をしているイメージがありますか？ Web業界の中でのUIデザイナーといえば、主に画面内のビジュアルを作る人というイメージが強いかもしれません。 しかし、実はビジュアル設計と同じくらいUIデザイナーが大切にしていることが１つあります。 それは「言葉選び」です。 一見するとUIで「言葉選び」と言われてもピンと来ないかもしれませんが、実はUIデザインを行う上で、言葉は大きな要素として関係しています。 例えば、次のような文言についてデザイナーは考える必要があるのです。 ボタンの文言 ナビゲーションの文言 アラートの文言 エラーの文言 これらの言葉選びは、簡単なように見えて実は難しいのです。 誤った言葉選びをしてしまうと、ユーザーを誤解させてしまったり、ストレスを与えてサービスから離脱させてしまうきっかけになってしまいます。 そこで今回は、わたしが

こんにちは。デザイナーのtamuです。 突然ですが、UIデザインをイチから勉強するにはどうすればよいと思いますか？ サービス開発の現場でも「UIデザイン」という言葉が使われるようになって、早くも５年以上は経ったでしょうか。 しかし多くの現場では、未だに「UIデザイン＝画面のビジュアルを作ること」と、表面的な理解しかされていません。 また企業の採用においても、IT企業を中心にUIデザイナーの求人数は右肩上がりで増え続けていますが、フタを開けてみれば仕事内容は従来と同じ。 実質的には、ただのWebサイト制作だったり…。 このように、UIデザインという言葉がただのバズワードとして認識されている場合も少なくありません。 そこで今回は、現役デザイナーのわたしが考えた、UIデザインの勉強方法についてお伝えしたいと思います。 「UIデザインに興味はあるけど、何から手を付けていいのか分からない！」という方

こんにちは、Webデザイナーのtamu（@tamusan100）です。 最近、引っ越しに向けて本棚の整理をしていたら「この本は本当に役に立ったな…」と思ったり、逆に「なんでこんな本を買ったんだろう？」とその場で懐かしんだりと、すっかり作業の手が止まってしまいました。 そんな時間を過ごしていたら、「もし今の自分が、新卒のときの自分に本を贈れるのなら、どんな本を贈るだろう」と思い、それをまとめたくて今回筆を取ってみました。 ということで今回は、「デザイナーの私が新卒の自分に贈りたい10冊の本」というタイトルで、本のおすすめをさせていただきたいと思います！ ２月に入り、ちょうど就・転職の時期ということもでもあるので、興味のある方はぜひ読んでみていただけたらと思います。 デザイナーの私が新卒の自分に贈りたい10冊の本 １．史上最高のセミナー ２．外資系コンサルが教える読書を仕事につなげる技術 ３．

TechCrunchで紹介されていた、AIを活用したロゴデザインサービスがとても面白かったのでご紹介したいと思います。 上記の記事で紹介されている「Logojoy」というWebサービスは、AIを活用したロゴデザインのサービスです。 ロゴにしたいタイトルと簡単なコピー。それに、マークとなるモチーフを選択するだけで、質の高いロゴデザインをいくつも提示してくれます。 おそらく、この記事を読んだデザイナーの中には「商売あがったりだ」と考える人もいれば「これは役に立ちそうだ」と考える人もいるでしょう。 わたしは、実際にこうしたAIを活用したデザインサービスが活用されていくことで、むしろデザイナーの生産性はさらに向上すると考えています。 今回は、その理由を通して「デザイナーがAIサービスと上手に付き合っていく方法」についてお話したいと思います。 一見、質の高いロゴが作れるけれど…? ところで、冒頭で紹

Webデザインを学ぼうとした時、PhotoshopやHTMLなどの「デザインの手段」についてのカリキュラムは豊富ですが、「デザインの思考」について学べる方法が少ないことに気が付きます。 デザインは本来、意匠計画・設計という意味なので、「作る」ことと同じくらい、「考える」ことも重要であり、その２つの力を備えて初めて一人前のデザイナーと言えるのではないでしょうか。 PhotoshopやHTMLといった技術そのものは、あくまでオペレーション（作業）の問題なので、デザインの勉強とは言えません。 それらの技術を極めても、AdobeオペレーターやHTMLコーダーになることはできますが、デザイナーとしての能力を身につけることはできないと考えます。 では、一人前のデザイナーとは何かと考えたときに、その例えとして最もイメージしやすいのがベテランの大工さんです。 大工さんが極めているのはノミやカンナだけではな

組織の中で働いているデザイナーの中には、「将来は独立してフリーランスとしてデザイナーをやりたい」と思っている人も多いことでしょう。 実際に、そのような理由で独立するデザイナーは毎年多く誕生しています。 彼らは、もし独立すれば、会社のしがらみに囚われず、上司に口出しされることもなく、自由に働けると信じていました。 しかし、残酷なことに、彼らのほとんどが自由になれません。 それどころか、反対にどんどん忙しく追い込まれてしまうのです。 なぜ、このようなことになってしまうのでしょうか？ デザイナーが独立しても自由になれない理由 独立してフリーランスになるデザイナーのほとんどが自由になれない理由とは、何なのでしょうか。 それは、彼らが経営やマーケティングについて無知なまま、サラリーマン時代の仕事の延長で独立・起業してしまっているからなのです。 言い方を変えれば、彼らはデザインのプロかもしれませんが、

最近になって、やっと『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える３つの本格レイアウト』に取り組み始めました。 HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 作者: 吉田真麻 出版社/メーカー: 翔泳社 発売日: 2015/11/03 メディア: 大型本 この商品を含むブログを見る わたしは、ここ１年間ほど仕事でほとんどコーディングをしていませんでした。 …ということに気がついたのが最近のことで、「そろそろリハビリしないとな」と思って選んだ本がこちらだったのです。 どうしてこの本を選んだのかというと、以下のような理由からでした。 今時のHTML/CSSコーディングが学べる サンプルサイトが洗練されている 適度なボ

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

わたしが仕事でデザインするとき、特に注意を払っていることがあります。 それは、『全ての「要素」に「筋」が通っているかどうか』ということで、言い換えれば、「コンセプトから逸れていないか」とも表現できます。 デザインにおいて、なぜコンセプトが重要になってくるのでしょうか。 戦略と戦術の話 デザインにおけるコンセプトは「戦略」だ もしコンセプトを無視するとどうなるか P.S. おすすめ記事セレクション 戦略と戦術の話 ここからが本題ですが、なぜ「コンセプトを体現できているか」が重要になるのでしょうか。 それは、経営の分野でよく使われる「戦略」と「戦術」の関係に当てはめると分かりやすいでしょう。 上のピラミッドは、会社経営を戦争で例える際によく用いられる図です。 戦略は資源配分を、戦術は資源活用、兵站は実行（オペレーション）を指します。 サラリーマン目線であれば、ピラミッドの下の方から見ていくのが

Adobeが、ついにUXデザインに特化したツール「Adobe XD」を公開しました。 下の動画を見てみてください。 Adobe XD (Preview): Quick Demo これまでのAdobeらしからぬ、大変シンプルなUIですね。 UIデザインのツールといえば… PrototypeモードはUIデザイナー待望の機能 Sketchの運命やいかに 当ブログのおすすめ記事 UIデザインのツールといえば… ところでUIデザインのツールといえば、ここ数年で「Sketch」がブームになっていますね。 最近はデザイナーの求人などを見ていても、東京のIT企業を中心に「Photoshop, Illustrator, Sketchを利用したUIデザインの実務経験を有すること」という表記を目にするようになりました。 Sketchは、確実にUIデザインのツールとして普及してきています。 そんな中で、Adobe

photo by CollegeDegrees360 よく「デザインに興味はあるけど、自分にはセンスが無いから無理」と仰られている方を見かけます。 そんな方は、ぜひデザインの構成要素を知ることからスタートされてはいかがでしょうか。 なぜセンスが無いから無理だと思い込んでしまうのか デザインをプログラミングに置き換えてみると… 構成要素が分かれば、道が拓ける デザインの構成要素を確認しよう まとめ レイアウト タイポグラフィ ユーザインタフェース 色彩設計 ツール なぜセンスが無いから無理だと思い込んでしまうのか デザインを学んだことが無い方にとって、デザインされたものは「１つのビジュアル」にしか見えません。 つまり、それがどんな原理で成り立っているのか、どんなプロセスで出来上がったものなのかが分からないのです。 だからこそ、「デザインはセンスだけでやるもの → 自分にはセンス無いからできな

去年の年度末頃に、「Figma」というコラボレーションツールを知りました。 GitHubのように、バージョン管理やデザインの同時編集が可能ということで、「デザイン版GitHubがついに出るか！？」とネットのニュースでも取り上げられていました。 ここ数年、デザインの方でもコラボレーションツールが続々と登場してきており、とても便利になっていっているのを感じますね。 Sketch周りは最近特に熱い InVision Zeplin 他職種とも連携を取りながらデザインすることが可能に 今後もデザインのコラボレーションツールに要注目！ BrushUp Sketch周りは最近特に熱い わたしは会社のデザインワークで「Sketch」を使用しているのですが、Sketchの場合「InVision」や「Zeplin」といったサービスをよく利用しています。 InVision 「InVision」はプロトタイピング

先日、何気なくスライドシェアを見ていたら「ほんとこれ！」なスライドを見つけました。 UIの話は会議室でするな from Shingo Katsushima 上記のスライドでは、会議は無駄が多い、UIの話は席でする、問題をみんなの見えるところで話す…など、UIデザインをしていく上で重要な点がまとめられています。 その中でも、身を持って「ほんとこれ！」と常々感じていたことがありますので、今回はそのことについて書きます。 言葉って意外と伝わらないもの わたしは現在、仕事で自社WebサービスのUIデザインをやっています。 Webサービスを開発していく上では、特にエンジニアやディレクターなど職種横断的なコミュニケーションが欠かせません。 なので、毎日のようにディレクターやエンジニアの方と議論をする場面があるのですが、プロジェクトが始まった当初はやり取りにとても苦労しました。 例えば、UIについて「

デザインの勉強は「目的」を中心に計画を立てよう デザインの勉強をしようと思ったら、まずは目的を決めることが大切です。 目的とは、「何をデザインしたいのか」という言葉に置き換えられます。 なぜ目的を定めなければならないのか。 ポスターが作りたいのならグラフィックデザインに、Webサイトが作りたいのならWebデザインに…という風に、それぞれに特化したカリキュラムを組み立てる必要があるからです。 なぜ「スキル」を中心に計画を立ててはいけないのか そして、ここでやってはいけないのが、「スキル」を軸にカリキュラムを決めてしまうことです。 そうしてしまうと、PhotoshopやIllustratorなどの「必要そうなツール」の学習から始めてしまいがちです。 しかし、ツールの使い方を覚えることはデザインの勉強の本質ではありません。 目的なくツールの使い方だけを網羅していったところで、「ツールの使い方は何

今、Unityが熱いですね！ Unityとはゲームエンジンの一種で、基本的に無料で使うことができます。 Unityを使えば、例えばこんなものができてしまうのです。 Unity 5 Lighting Demo: The Courtyard Unityは何でもできる！ Unityの利用シーンは、ゲーム開発だけに留まりません。 iOS/Androidのアプリ開発やインスタレーション、さらにオキュラスウィフト等のVRコンテンツの制作もできてしまいます。 そして、最近になってUIデザインの環境も整ってきました。 従来までは、Unityでナビゲーション等のUIを作成するためにはC#でスクリプトを記述しなければならず、コードが苦手なデザイナーにとっては敷居の高いものでした。 しかし、Unity 4.6からは、直感的にUIを作成できるシステムである、uGUI (ユーグイ/ユージーユーアイ)がついに搭載され

photo by Seth Capitulo 先日『フリーズする脳』というオーディオブックを聴いていました。 その中で、「若年性ボケになりやすい仕事環境」が紹介されていたのですが、見事に自分とあてはまっていたので驚きました。 しかし、わたしだけでなく、Webデザイナーなら同じように当てはまる人が多い内容でしたので、同業者の方のためにもご紹介しようと思います。 若年性ボケって具体的にどうなるの？ 「ボケ」と聞くと、老人になってからそうなるイメージがあると思います。 しかし、「ボケ」とは頭の使い方が偏ってくると起こる症状らしく、最近は「若年性ボケ」にかかる若者が増えてきているそうです。 原因としては、仕事でずっとPCを使っていたり、それ以外の時間でもスマホを眺めていたりと、ディスプレイをずっと見続ける環境ができたことにあるそうです。 ディスプレイばかり見ていると、脳の使い方としてはとても偏った