Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

デザイン

『Design-JP 第2回 勉強会 : インタラクション』に参加してきた

先週の5月10日(水)に、Design-JPという勉強会に参加してきました。 第2回目の開催ということでしたが、今回のテーマは「インタラクション」でした。 インタラクションというと、辞書的には「相互作用」という意味が書いてありますが、デザインの文脈にお…

デザイナーLT&交流会に行ってきた!(BASE×ノハナ×マネーフォワード×みんなのウェディング)

先日、渋谷で開催されたデザイナーLT&交流会に行ってきました。 マネーフォワード、nohana、BASE、みんなのウェディング…の4社から、それぞれのデザイナーさんが「サービスの成長」をテーマに登壇されるということで、とても豪華なラインナップでした。 実…

なぜ大規模Webサービスにはデザインガイドラインが必要なのか

あなたは、デザインガイドラインという言葉を聞いたことがありますか? デザインガイドラインとは、言葉の通り「どうやってデザインするかを判断するための指針」となるものです。 デザインガイドラインと聞いても、有名な広告会社やIT企業の話だと思われる…

初心者必見!現役デザイナーが教えるUIデザインの勉強方法

あなたは、UIデザインをイチから勉強するためにはどうすればいいと思いますか? Webサービスやアプリ開発の現場でも「UIデザイン」という言葉が使われるようになって、早くも5年以上は経ったでしょうか。 しかし、多くの現場では未だに「UIデザイン=画面の…

UXとは、どこからどこまでを指すのか。

あなたは、UXという言葉をどう捉えていますか? 最近、Webサービスやアプリ開発の現場でしきりに用いられている「UX」という言葉ですが、個人的にはとても幅を持った言葉として使われている印象を持っています。 例えば、企業によってはプロトタイピングやカ…

絵が苦手なデザイナーにもおすすめしたいボールペンイラスト

デザイナーというと、それだけで絵を描くことがうまいようなイメージを持たれがちですが、実際はちょっと違います。 ひとくちに「絵」といっても、色々と種類があります。 例えば、西洋絵画のような写実的な絵から、ゆるキャラのような平面的なキャラクター…

デザイナーがAIサービスと上手に付き合っていく方法

こんにちは、Webデザイナーのtamu(@tamusan100)です。 TechCrunchで紹介されていた、AIを活用したロゴデザインサービスがとても面白かったのでご紹介したいと思います。 上記の記事で紹介されている「Logojoy」というWebサービスは、AIを活用したロゴデザ…

デザイナーのわたしがオススメするWebライティング本3選

最近、Webライティングについて学ぶ機会が増えてきました。 仕事でメルマガを書いたり、ブログ記事を書くことが増えてきたからです。 しかし、「文章を書く」という行為は意外に難しいもの。 何を書くかは頭の中で決まっているのに、文章という型に当てはめ…

ベテランの大工さんに学ぶ、一人前のデザイナーの条件

Webデザインを学ぼうとした時、PhotoshopやHTMLなどの「デザインの手段」についてのカリキュラムは豊富ですが、「デザインの思考」について学べる方法が少ないことに気が付きます。 デザインは本来、意匠計画・設計という意味なので、「作る」ことと同じくら…

スキルアップ症候群のデザイナーこそ、もう一度「デザインの目的」を見直そう

Webサイトやアプリのデザインに携わってると、トレンドのあまりの移り変わりの速さに、「あれも勉強しなきゃ!これもやらなきゃ!」と強迫観念のように感じて、疲れてしまっている人は多いのではないでしょうか。 そんな努力家な「スキルアップ症候群」のデ…

たった1ヶ月でUIデザインが学べる!ついに専門オンライン講座が登場

プログラミング学習サービスで有名なTechAcademyから、「アプリUI/UXデザインコース」という新しいカリキュラムがリリースされました。 内容をざっと確認したところ、現在UIデザイナーをやっているわたしから見ても、かなり良い感じのカリキュラムになってい…

UXデザインで必ずしも「操作が簡単であること=善」ではない理由

Webサービスの開発において「操作は極力簡単でなければならない」と言われることは多いですよね。 とにかく、まずは会員になってもらえるよう、最低限の操作で済むようにUXを設計しようという事です。 これは一見するとユーザーに優しい仕様で好ましいように…

自分のデザインを説明するのが苦手なデザイナーにおすすめの本3選

自分のデザインを人に説明することが苦手で、悩んでいるというデザイナーは多いのではないでしょうか。 しかし、苦手だからといってその機会を避けることは難しいものです。 デザイナーという職業であるかぎり、様々なステークホルダー(利害関係者)に対し…

Sketchユーザーは要注意!Macのストレージが極端に減っていたら「AutoSave」 を疑おう!

Sketchユーザーの皆さん、Macのストレージはしっかりと確保できていますか? もし、最近Macのストレージが極端に減ってきたな…と思ったら、要注意です。 もしかすると、Sketchが原因かもしれません。 まずはストレージを確認 Sketchで自動保存された過去のデ…

戦略家か作業者か…『UX戦略』が示す、デザイナーのこれからのキャリア

先月発売されたばかりのオライリーの新刊『UX戦略』を読んでいます。 この本の中では「MBAの教科書?」と思うくらい、経営やマーケティングについての話題が出てくることに驚きました。 これから、デザイナーもどんどん企業の戦略的なレイヤーを担うことが求…

製品ライフサイクルと、デザイナーが取るべきアプローチについて

経営やマーケティングの書籍で頻出するのが、「製品ライフサイクル理論」です。 製品ライフサイクル理論とは、プロダクト(製品)は、導入期→成長期→成熟期→衰退期という4つの段階を経るというもので、典型的な例では上記画像のようにS字型カーブを描くと言…

Dribbbleはデザインの参考にならない?コンセプトアートの盲点に注意しよう!

デザイナーならチェックしている人も多いであろう、Dribbble。 招待制のサービスなのでクオリティの高い作品が多く、そのため「デザイナーならDribbbleはチェックすべき!」という声もよく聞きます。 しかし、Dribbbleを見ても実務においては参考になるとは…

レスポンシブデザインはただの対処療法!?エコシステム全体でのUXを考えよう

最近の新しいWebサービスを見ていると、マルチプラットフォームが当たり前のようになってきましたよね。 それらのサービスは、Web版、iOS版、Android版…という風に、様々なOS・デバイスからアクセスできるようになっています。 このようなマルチプラットフォ…

Webデザインにおける「モックアップ」の役割の変化

わたしが現在行っているWEBアプリのUIデザインのプロジェクトに携わるようになって、かれこれ半年と数ヶ月ほど経過しました。 そのプロジェクトに関わっていて、常々「モックアップ」の役割が変化していることを実感しています。 モックアップとは? 制作現…

新人Webデザイナーにおすすめのデザイン書10選

はてブで新人エンジニア向けに技術書を紹介するエントリを見かけて、思わず「デザイナー版を書いてみたい!」と思ったので、書くことにしました笑 この春からデザイナーになられる方で、「勉強したいけど、どんな本を読めばいいの?」という方はぜひ参考にし…

組織によって変わる、デザイナーがコミュニケーションで気をつける事とは?

デザイナーといえば、職人気質で黙々と作業しているようなイメージをお持ちの方もいらっしゃるかもしれません。 しかし、実際には他の職種と同様に高度なコミュニケーション能力が求められます。 例えば、社外であれば顧客の要望を聞き出したり、社内であれ…

デザインにおいて、なぜコンセプトが重要なのか

わたしが仕事でデザインするとき、特に注意を払っていることがあります。 それは、『全ての「要素」に「筋」が通っているかどうか』ということで、言い換えれば、「コンセプトから逸れていないか」とも表現できます。 デザインにおいて、なぜコンセプトが重…

「作るだけ」のWeb制作会社は生き残れない。では、どうすればいいのか。

長谷川恭久さんのPodcast「Automagic」を聴いていたら、その中で話されていたとある内容が気になりました。 株式会社マジカルリミックスの赤間公太朗さんと対談されていた回で、気になった内容とは、「 Webサイト制作による価値の移り変わり」についての事で…

なぜシンプルなUIは良いとされるのか。ヒックの法則から考えるUIデザインの指針

「シンプルなUI」というワードを耳にする機会は多いですが、大抵の場合「シンプルであること」は肯定的なニュアンスで捉えられています。 なぜ、UIデザインにおいて「シンプル」は良いこととされているのでしょうか。 ヒックの法則について モバイルアプリは…

Sketchブームに終止符!?ついにAdobeがUXデザインツール「Adobe XD」を公開!

Adobeが、ついにUXデザインに特化したツール「Adobe XD」を公開しました。 下の動画を見てみてください。 Adobe XD (Preview): Quick Demo これまでのAdobeらしからぬ、大変シンプルなUIですね。 UIデザインのツールといえば… PrototypeモードはUIデザイナー…

「センスが無くても配色ができる!」系の記事を鵜呑みにしてはいけない

photo by J.Gabás Esteban 最近、ノンデザイナ向けの配色理論についての記事をよく目にします。 内容はどれも素晴らしいのですが、「センスが無くても簡単に配色できる!」「ノンデザイナーでもかっこいい配色ができる5つのコツ」といった煽り気味なタイト…

快適なUIが保っている4つの秩序とは?

仕事でWebアプリケーションのUIに携わる中で、気づいたことがあります。 それは、快適なUIでは「4つの秩序が保たれている」ということです。 これは、わたし自身が普段の業務の中で実感したことや、本で読んだことなど、様々な体験から得た教訓です。 今回…

あなたがデザインできないのは、「構成要素」を知らないから

photo by CollegeDegrees360 よく「デザインに興味はあるけど、自分にはセンスが無いから無理」と仰られている方を見かけます。 そんな方は、ぜひデザインの構成要素を知ることからスタートされてはいかがでしょうか。 なぜセンスが無いから無理だと思い込ん…

【デザイナー版GitHubも登場!?】進化するデザイナーのワークフロー

去年の年度末頃に、「Figma」というコラボレーションツールを知りました。 GitHubのように、バージョン管理やデザインの同時編集が可能ということで、「デザイン版GitHubがついに出るか!?」とネットのニュースでも取り上げられていました。 ここ数年、デザ…

流行の変化が激しいWebデザイナーこそ「デザイン史」を学ぼう

デザインの歴史も「流れ」を掴むことが重要 先日購入した『絵ときデザイン史』が素晴らしかったので、紹介したい。 この本は、デザインの歴史を「流れ」で掴むのに大変優れた本だ。 絵ときデザイン史〈歴史が苦手な人、食わず嫌いの人も、これなら覚えられる…

福沢諭吉に学ぶ、「プロ」のデザイナーとして本当に大切にすべきこと

20代のわたしが聴いても新鮮だった「学問のすゝめ」 最近、福沢諭吉の「学問のすゝめ」をオーディオブックで聴きました。 いつかは読んでみたいとは思っていたのですが、オーディオブックで現代語訳版があるということに最近気づき、すぐさま購入しました。 …

落語家に学ぶ、レイアウトデザインの原則

photo by vera46 プロの落語家は「沈黙(間)」を演出する プロの落語家さんは、わざと話の中に「間」を設けるのだそうです。 なぜかというと、「間」を設けることで、お客さんは話の内容について想像する時間ができます。 そうして想像力をかきたてることで…

UIデザイナーのためのIoT基礎知識

photo by ForbesOste どこかぼんやりとしているIoTという言葉 近年、IoTという単語がよく聞かれるようになりました。 何となく「モノのインターネット」という意味だということは知っているけれど、正直ぼんやりとしか分かっていない…という方も多いのではな…

UIの議論は、必ず画面を見て絵を描きながらしよう!

事件は現場で起こっているんだ…! UIの話は会議室でするな 先日、何気なくスライドシェアを見ていたら「ほんとこれ!」なスライドを見つけました。 UIの話は会議室でするな from Shingo Katsushima 上記のスライドでは、会議は無駄が多い、UIの話は席です…

デザインの勉強は、「スキル」ではなく「目的」から考えよう

デザインの勉強は「目的」を中心に計画を立てよう デザインの勉強をしようと思ったら、まずは目的を決めることが大切です。 目的とは、「何をデザインしたいのか」という言葉に置き換えられます。 なぜ目的を定めなければならないのか。 ポスターが作りたい…

Sketchって流行ってるけど、正直どうなの?

最近、Sketchを使うデザイナーが増えてきているようですね。 とはいっても、まだそれほどメジャーではないので、使ったことがないという方も多いと思います。 そんな方のために、こんな人は乗り換えてもいいかもね!というパターンをまとめてみました。 こん…

UIデザインにおけるドラッグ&ドロップの正しい使い方とは?

Weeblyというサービスをご存知でしょうか。 Weeblyは、Webサイトを簡単に作成できるサービスで、サイトを構築するための様々な要素をドラッグ&ドロップで配置していくことができます。 今回は、そのWeeblyを題材に、『UIデザインにおけるドラッグ&ドロップ…

小さい時に書道を習っていた人は、グラフィックデザイナーに向いている!?

photo by Cathy Cho デザイナーのまなてぃーさんが、手書きの筆文字を活かした素敵なロゴの作り方について解説されていました。 字が上手い方ってかっこいいですね! manaty-design.hatenablog.com ところで、書道というと、親が子どもに習い事としてやらせ…

あなたのデザインが後世の文化になるかもしれない…という話

photo by Drift Words わたしたちの周りには、アイコンが溢れている。 あなたのスマートフォンにはアイコンが沢山並んでいるし、普段はそのアイコンを意識することもなく自然に操作しているだろう。 「アイコンは、初めに比喩として作られる。しかし、長く人…

いまさらだけど、Webのイケてないところについて

Webは面倒くさくて、本当にイケてない。 わたしはWebデザイナーとして働いているので、Webについての色々な事を当たり前だと思い込んで何の疑問も抱きませんでした。 しかし、冷静に考えてみると、おかしいことだらけだと思います。 Webデザイナーは、デザイ…

Webデザイナーって、なんて狭い世界の中でデザインしてるんだろう

photo by merwing✿little dear 進化するインターネットを取り巻く環境 ウェアラブルやIoTなど、昨今の流れを見ていると、本当にすごい時代になっていってるなと感じます。 あらゆるものがネットに接続され、人間すら(まずはウェアラブルという形式をとって…

Webデザイナーがアルゴリズムに負ける日

Twitterを何気なく見ていたら、Webデザイナーの今後について、非常に興味深い内容を含んでいる記事が流れてきました。 Web界隈の方は、ぜひチェックされることをオススメします。 アルゴリズムがWebサイトを作る時代へ なーんだ、よくある「Web製作会社は今…

2015年で一番面白かった本『融けるデザイン』について紹介します。

『融けるデザイン』を読んだ。 この本の中では、「自己帰属感」というテーマを切り口にして、UIやUX、IoT(モノのインターネット)の本質について書かれている。 ただのスタイリングの話にとどまらない一冊 既存のUI・UX関連の書籍が、いわゆる見た目(スタ…

配色ツールに頼らず、しっかりとした色彩感覚を身につけよう

最近はネット上でも、便利な配色ツールが出てきています。 しかし、あなたがデザイナーを志すのであれば、ツールに頼らずとも美しい配色を再現できるよう、しっかりとした色彩感覚を身につけましょう。 「でも、ツールでちゃんと配色できるなら、それでいい…

良いデザインをするために改めて確認したい、制作プロセスの王道6ステップ

「デザインする」といっても、具体的にどう進めたらいいのか分からない… そう思ったことのある方は多いと思います。 他の仕事がそうであるように、デザインにも王道のプロセスというものがあります。 それが、以下の6ステップです。 1:問題定義 2:着想 …

配色理論を勉強してもデザインにうまく活かせない3つの理由

配色がぜんぜん上達しない!(泣)という方へ… 本やネットで配色理論について勉強しても、実際に仕事でデザインするときに覚えた知識をうまく活かせない… なぜ、このようなことが起こるのでしょうか。 結論から言ってしまえば、本などで解説されている基本的…

フラットデザインを、ただの一過性の流行だと思っていませんか?

フラットデザインってたまたま流行っただけ? フラットデザインというものが世の中に浸透してきて、随分と定着したような感じがしますね。 Web制作の場面でも、フラットデザインを取り入れたWebサイトが増えています。 しかし、「どうしてフラットデザインが…

「模写」ばかりやっていても、Webデザインは上達しない

photo by denn Webデザインのセンスを向上させるために「模写」をすると良い。 というのはよく聞く話ですよね。 わたしも、「模写」はWebに限らずデザインのセンスを上げるために有効だと考えています。 しかし、模写ばかりやっていても上達はしないのです。…

デザインのラフスケッチは「コピー用紙の裏」が一番捗る

photo by latrovadoradelossueños デザインのラフスケッチは「コピー用紙の裏」が一番捗るということを最近自覚した。 大学生の頃は当たり前のようにクロッキー帳を使っていた。 けれど、思い返せば当時も、無造作に考え事やアイデア出しをするときはコピー…

GmailのUIが優れているポイント

最近はLINEなどチャットアプリが普及して、ビジネス以外のプライベートではあまり利用しなくなった「メール」。 あなたは、どこのメーラーを使っていますか? Yahooメール?それともGmail? いっけん、メーラーというのはどれを使っても同じようなものと見え…