デザインという単語は主にかっこいいものをセンスで作ると認識されがちです。 ですが、デザインは本来「設計する」と訳され、意図を伝わりやすくするために情報構成を考えることを指します。中にはセンスや感覚でこなせる人もいますが、法則さえ抑えればある程度のデザインなら誰でも理解し実践できます。 今日は自分にはデザインセンスがない、と落ち込んでいる方に、この記事では役立つ10サイトを厳選して紹介します。 デザインの原則・理論 １.  デザイナーに言われた「非デザイナーが気をつけるべきデザインの「４原則」 ハズさないデザインの4原則（近接・整列・反復・コントラスト）が分かりやすく解説されています。実際に具体例を比較しているので感覚的にも理解することができます。 ２.  感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 デザインの前提・デザインの要素・ゲシュタルト原則・デザインの原則の4つの

なんとなくゆる〜い感じに仕上げたい、脱力感がほしい、そんなときにお役立ちの商用可能なゆるふわな日本語フォント10選をご紹介します。 まじぱねぇ ゆるさでは、No.１かもしれません。すこし丸字気味のギャル文字風手書きフォントです。文字が入れ替わっているのが特徴で、たとえば「ね」→「Ne」、「し」→「U」、「ん」→「ω」のようになっています。ひらがな、カタカナ、英数字が入っています。 モフ字 名前のとおり、モフモフとした曲線のみでつくられたフォントです。半角英数・半角カナ・ひらがな・カタカナ・アルファベット・ギリシャ文字・ロシア文字・ 第一水準漢字が収録されています。 ふんわりラウンド 名前のとおり、ふんわり、ふっくら膨らんだようなフォントです。ひらがな、カタカナ、数字、アルファベット、記号の一部が入っています。ゆる~くやさしい雰囲気を出したい時などに使えそうですね。 にくまるフォント まんま

Webでもアプリでも、フラットデザイン素材の需要は高まっています。無料・有料問わず、そういったグラフィックを取り扱うストックサイトなども増えてきていますが、今回は一味変わったストックサービスをご紹介します。 素材をカスタマイズして購入できる素材サイト、illustrio illustrioはフラットデザインのアイコンやイラストなどを揃えた非デザイナー向けの素材提供サービスです。 illustrioの面白いところは配色や、素材内の数値や文言をオンライン上でカスタマイズして購入できる点です。 通常であれば素材を買ってIllustratorなどでベクターをいじって調整する手間が要らないという点で、非デザイナーやそういったアプリを導入していない人には便利なサービスとなっています。 さっそく素材をダウンロードするまでのステップを見てみましょう。 illustrioの使い方 illustrioを開いて

新しいアプリを企画したり、開発・デザインをするとき、多くの方が競合調査をすると思います。 多くの場合、同じカテゴリに属するアプリやユーザー層が似ているアプリを片っ端からダウンロードすることが多いと思いますが、この方法だと純粋に「アプリ」を研究するあまり「ユーザー」という観点が抜け落ちてしまうことも少なくはありません。 競合調査で大事なのは自分の将来のアプリのユーザーを知ることです。とくにヒットアプリを調査する最大の理由は、そのアプリが多くのユーザーにとっての「あたりまえ」になっているからです。後発のアプリとしては既存の文脈に沿うことでより本質的な新しい価値にフォーカスすることができます。 今回はアプリの競合調査で、少し違った視点をもたらしてくれるWebサービスをいくつかご紹介したいと思います。 ユーザーのホーム画面を知る #Homescreenはホーム画面を共有するサービスです。 ホーム画

UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 アプリデザイナーはどういったことを考えてUIを考えるべきでしょうか？　デザイナーならカッコいい、おしゃれなUIをビシっと作りたいところですが、それだけではアプリは使ってもらえません。 アプリのUIデザインを考えるとき、我々は往々にしてビジュアルを中心としたレイアウトやディテールのデザインに走りがちです。ところが、UIを決める要素は画面の中の要素だけではありません。デバイスのスペックや仕様、他のヒットアプリのトレンドやカルチャーなど、ユーザーの置かれている状況によっても変わってきます。 スマホの時代になって「UI/UX」という言葉が普及してきたのも、こういった画面外の要素もデザインに関

株式会社デジタルクエスト 新規事業立ち上げ/プロデューサー 社内アプリのUI/UXを監修、時には動画や音楽も制作。 UXと聞くと難しいイメージがつきもの、専門的な記事を読んだり話を聞いたりすると尚更です。きっちりやろうと思うと体系化されたフローを踏襲するのが一番ですが、UXに対して理解のある企業もまだ少なく、小規模であればあるほど時間も含めた力を入れることは難しいのが現実です。 「うちの規模だとUXについて考えるのはちょっと厳しいかもな…。」 調べれば調べるほどそんなことを思いがちですが、時間を割けなくても少しの意識やプロダクトとの向き合い方で成果物は変わってきます。先日リリースした動画アプリ「Charlie」を例に交えつつ、実体験からUXとの向き合い方について整理してみました。 Charlieとは？ ４つの動画が集まると一つになる、新感覚コミュニケーションアプリです。お題や場所からユーザ

2016年6月20日にAdobe初のプロトタイピングおよびデザインツールであるAdobe Experience Design（以下 Adobe XD）に待望の日本語UIが登場しました。同年3月の登場以来、リピートグリッドで繰り返し要素が簡単に作れることと、大量のアートボードを扱っても不便を感じない軽快な動作で一部の話題になっていましたが、UIやドキュメントが日本語化されて今こそ試してみようという方も多いのではないでしょうか？ 今回は、リピートグリッドをもっと便利にする「テキストファイルをドラッグ」機能を紹介します。 リピートグリッドは選択した要素をまとめて繰り返し表示させる機能で、横方向にも縦方向にも自由に数を増やすことができます。Finderから画像を選択してドラッグすれば画像がそこのフィットした大きさで挿入されますし、テキストは自由に手で書き換えることができます。人気のあるカード型レイ

クールで重厚感のあるイメージを出したい際に、金属系の素材は背景にはもちろんのこと、テクスチャーとして貼るのにもうってつけです。 そこで、今日はそんな金属系無料パターン素材を１０選ご紹介します。 6 Free Tileable Treadplate Patterns ６種類もの金属パターンを収めたコレクション。個人・商用共に無料で使用いただけますが www.freepsdfiles.netへのリンクバックが求められます。 Brushed Metallic Background 美しく磨き上げた金属をイメージさせるテクスチャー。クレジット表記（Designed by Kjpargeter - Freepik.com）のみで個人・商用共に無料で使用いただけます。 Metallic Gid Background スピーカの金属カバーをイメージさせるようなイメージ。クレジット表記（Designed

この記事では、デザイナーやクリエイターの美しいUIのポートフォリオサイトを10サイト紹介します。ユニークで美しいポートフォリオサイトは、UIデザインに詰まった時や自分のポートフォリオサイトを作る時の参考になります。 １. Jason Benjaminさん モーション・ビジュアルデザイナーのJason Benjaminさんのポートフォリオサイトです。EvernoteのUIデザイナーもされていたとのことですが、サイトの方も直感的に過去の作品を閲覧することができます。 ２. Adrian Zumbrunnenさん GoogleのUX/UIデザイナーであるAdrian Zumbrunnenさんの個人サイトです。今流行りのチャットボットのような対話型UIで、一言ずつ表示される吹き出しはあたかも本人に話しかけられているようなデザインになっています。システム的に導入するには敷居が高そうなものの、対話型と

かわいらしいイメージやあたたかい雰囲気を出したいときに、ゴシックや明朝フォントだとしっくりこない場合があります。そんなときには丸文字のフォントを当てはめてみるとしっくりくるかもしれません。 今回は商用可能なものに絞って、丸文字のフリーフォントを１０点ご紹介します。 瀬戸フォント JIS第四水準までの漢字や難しい漢字も収録されているので、他のフォントで漢字で見つからなくて困ったという時は、こちらのフォントで試してみてください。Unicodeを使った顔文字もだいたいが表示可能です。 丸文字「ニコモジ＋（プラス）」フォント ニコニコ動画で使われているフォントをイメージしてつくられたフォントです。ひらがな・カタカナ・英数字のみオリジナルで、それ以外の文字グリフ（漢字など）には源柔ゴシックが利用されています。 じゆうちょうフォント Version 2.07 太めのサインペンで書いたようなゴシック体の

複数の機器をBluetoothでつなぎ操作できるドイツ製の新感覚インターフェース「NUIMO」。去年Kickstarterで発表された新感覚のリモコンデバイスですが、主にスマートホーム内での連携ができることで注目されました。 このNUIMOですが、IoT界隈のスマートデバイスのみならず、PCのインターフェースとしての利用も考慮されており、数々のデザインツールとの連携を発表しています。 NUIMOとは？ NUIMOは様々なスマートホームデバイスとBluetoothで連携し、音楽や照明、室内温度などを直感的に操作できるワイヤレスコントローラーです。 ドイツのSenicというベンチャーが開発している当プロダクトは、昨年Kickstarterに登場し、早々に目標金額の55,000ユーロに到達し、最終的には170,000ユーロを調達した人気プロジェクトです。 NUIMOで操作できる主な動作は以下の４

プレゼン資料やブログ記事、印刷物などのデザイン案件などでフリー素材を探していて、いまいち気に入ったものが見つからず、やっと見つかったと思ったらクレジット表記など面倒なルールがあった、そんなことはありませんか？　そんなときにぜひ見てみていただきたい、著作権表示が必要ないCC0（パブリックドメイン）のフリー写真素材サイト10選をご紹介します。 StokPic おしゃれな高画質画像がArchitecture、Fashion、Food&Drink、Landscapes、Lifestyleなど16のカテゴリーに分けて公開されています。また、メールアドレスを登録しておくと２週間ごとにフリー写真素材10点がメールで送られてきます。 StockSnap 美しい高品質画像が毎週大量に追加されているフォトストックサイトです。キーワード検索の他、Trending、Views、Downloads、Favorite

アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい

UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 プロトタイピングはWebやアプリのデザイナーの間ではもはや無視できない工程となってきており、最近ではAdobeなどの参戦も騒がれたように、世界中で多くのツールが日々生まれています。 プロトタイピングと一言で言っても様々な開発段階や目的によって細かい用途や使用感は変わってきます。多くのツールの中でもどれが優れている、というよりも自分の用途にマッチングして、使いやすいものを選ぶのが大事です。 ということで、今回は国内ではまだあまり紹介されていないMockplusというツールをご紹介します。 Mockplusとは MockplusはJongde Softwareが提供するラピッドプロトタイ

Ning T.は、コンテンツエディター、人類学者、デザイナー、技術とUXオタクです。ブルースとWes Andersonの映画が好きです。 モバイルアプリのデザイナーがiOS用のデザインを好む傾向があることは広く知られています。しかしながらAndroid用デバイスがスマホ市場を席巻したのは、特にハイエンドのiPhoneと比べた時に価格帯が低かったからです。Androidデバイスが世界中で広まったことで、アプリデザイナーはAndroidを無視できなくなったのです。 たしかに、Androidは必ずしも素晴らしいデザインの典型ではありませんでした。 Google Playのアプリ審査は寛大すぎて、UXデザインのかけらもないようなアプリに溢れかえっていたのです。とはいえ、AndroidのIce Cream Sandwich（バージョン名）の時代は終わったことを忘れないでください。Material D

この記事では、商用利用ができる日本語の明朝フォントフリーフォントを10個厳選して紹介します。様々な場面であなたのデザインのサポートをしてくれる便利なフォントばかりです。 １. うつくし明朝フォント 流れるような字体の美しいフォントです。ひらがな、カタカナがオリジナルのもので、漢字はIPAex明朝フォントを使用しています。軽やか・滑らかな印象が作りやすいフォントです。 ２. IPAex 明朝フォント IPA（独立行政法人 情報処理推進機構）が配布しているフォントです。文章中のひらがな・カタカナ・漢字は固定幅に、アルファベットは変動幅で表示されるようになっており、このフォント１つで整った日本語の文章を表現することができます。 ３. はんなり明朝 「り」の文字が特徴的なフォントです。こちらは、ひらがな、カタカナのみのフォントで、漢字・記号・英数字はIPA明朝フォントを使用しています。やわらかい雰

Web広告やサイトデザインでも積極的に動画を取り入れるケースが増えてきました。簡単な日常シーンなら簡単に調達できますが、シーンによっては個人で準備するのは時間＆予算的に厳しい場合があります。 ここでは、その中でもとくに簡単に撮影できないようなスケールの大きい「美しい自然」にテーマを絞り、ちょっとしたプロモーション動画などビジネスシーンでも活用できそうな高品質の動画が揃っている無料動画素材サイトをご紹介します。 Mazwai とにかく美しい、ハイクオリティの動画素材が揃っています。トップページでは動画が１つずつ、全画面で縦に並べられていますが、右上のボタンでサムネイル表示に切り替えることができます。 videvo 動画やモーショングラフィックを無料で配布しているサイトです。Natureカテゴリーだけで1,000以上の動画が登録されていて、新着順や人気順で表示を変えることができるほか、キーワー

「今度のプレゼン、資料づくりは君に任せたから！」、上司から突然そう言われて困っているプレゼン初心者のあなたも、数はこなしているもののイマイチ自分のプレゼンに自信が持てないというプレゼン中級者のあなたも、これさえ見れば安心のプレゼン資料の作り方が学べる良質な記事＆スライド10選をご紹介します。 プレゼンのやり方やスタイルは人によって様々です。色々な人のスタイルを見ることで、自分なりのまとめ方を探っていきましょう。 プレゼンテーションの基本・コツ All Aboutのプレゼンテーション・企画力ガイド、野村 尚義によるプレゼンテーションの基本に関する記事です。そもそも論からはじまり、プレゼンの目的や構成で気をつけるべき点などについて、プレゼン初心者向けに詳しく解説されています。 Vol.1 プレゼンテーションの基本を学ぼう 起業に関するあらゆる情報がまとめられたサイト「DREAM GATE」では

この記事では、日本語が使用できるWebフォントを10個厳選して紹介しています。有料・無料のどちらも紹介しています。英語のWebフォントと比較して、日本語のものは文字数の多さからまだまだ使用に課題が残りますが、サブセット化等をしてWebページの表現を広げることが可能です。 無料のWebフォント ※すぐに利用できるWebフォントにはHTML・CSS内で使用するコードも一緒に記載しています。 １. Noto Sans JP CSS内、@importで読み込む場合

日本の大学在学中、サンフランシスコでソフトウェアエンジニアになると決める。英語は話せず、プログラミング経験ゼロ、数学は中学レベルのど文系だったが卒業後、渡米。サンフランシスコにあるスタートアップでエンジニア修行中。 去年公開されたSlackボットのみならず、この２カ月ほどでFacebook, LINE, Telegram, Kikなど主要チャットサービスが続々とBotが開発できる環境を公開し話題を呼んでいます。Telegramはボット開発を促進するべくTelegramのボットを開発した開発者に最低でも25,000ドルを贈呈するというキャンペーンを始めたことで話題になりました。 そんな中一番注目を集めたのは公開前から騒がれていたFacebook Messenger Botでした。 参考：Facebookの「Messenger Bot Store」が、App Store以来の大革命となるかもし