最近メルカリとDMMのファイトがスタートして盛り上がっている即時キャッシュ化サービスですが、元祖のCASHというアプリのUIデザインがめちゃくちゃ良くできてる。ちなみにiOSアプリしか見てないけど、iOSアプリを作ってる人はとりあえずダウンロードしてみる価値あると思う。 世の中にはいろんなiOSアプリがあるんだけど、UIデザインがこれすごいわと思うものってやっぱり英語のものが多かったんだけど、日本人としては日本語メインのアプリでよく考えられているものが一番参考になるんですよね。なんといってもテキストはUIで一番多く使われている部分だし。 アプリって基本的に何度も考えて考えないとゴッチャゴッチャとボタンが増えていって、結果的になんだかスッキリしない使いづらいアプリが出来上がるんだけど、CASHのアプリはすごく良くできてる。なんというか、無駄を削ぎ落としている。 まず、デザインの色の使い分けが

はじめに教授からのWhy? Why? Why?と立て続けに押し寄せる「どういったロジックを元に〜をデザインしたのか？」という質問の嵐に対して、学生達がBecause, Because, Becauseと素早く理論を構成して「何故なら〜だからです」というロジックを組み立て続ける。 そんな米国大学で展開されるデザイン講義を目の辺りにしてきた僕は、「デザインとはこんなにも理論的なプロセスだったのか」という率直な実感を持っています。 デザインと聞くと生まれ持った才能を存分に発揮してクリエイティブに様々なものを生み出していくというイメージをお持ちの方も多いかも知れませんが、これは全くの誤解であると言えます。 本来、デザインプロセスとは問題解決を前提としているため、地味な作業の連続であり、非常に理論的なプロセスで構成されています。 僕は日本で5年間、米国で3年間デザインの教育を受けましたが、実感として

キャラクターデザインの傾向と、それらが影響し合うことで生まれる流行り廃りのトレンドは、いかにして出来上がるのでしょうか？それを見取るひとつの叩き台になりそうなのは、あのラブライブのキャラクターデザインの変化の過程です。 ラブライブの初期から現在までのキャラデザインの大きな変化の歴史は、そのままプロジェクトが拡大するにあたって、ここ５年くらいでウケている様々な傾向のキャラデザインのトレンドやクラスタを横断していった歴史と思われます。その横断はそのままキャラクターデザインの様々な傾向や、トレンドの変化を表しているとも思います。 前にやった映像・演出デザインの８つくらいの傾向のメモを補填する形の、今回は雌のキャラデザイン中心のデザイン傾向の実験メモです。暫定７つです。本当はもっと細かく傾向ありますが、とりあえずわかったふりしやすくいきましょう。 R１８含むギャルゲー界隈・トホホフェテッシュ&キッ

最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ（英: Diffuse Shadow）と呼ばれる新しいグラフィックトレンドで、2016年に入って多く見かけるようになっています。 今回は、この拡散型シャドウの基本的な使い方や、PhotoshopやHTML/CSSなどによるさまざまなデザイン方法を、参考にしたいUIデザインと一緒に見ていきましょう。 拡散型ドロップシャドウって何？ 英語でもきちんとした名前はまだ決まっていないようですが、この拡散型シャドウ（英: Diffuse Shadow）と呼ばれるこのテクニックは、通常のドロップシャドウに比べ、奥行き感をより表現できます。フラットデザインから派生したスタイルのひとつとも言え、今のデザイントレンドを反映しています。 Image Source: VOID Conf

実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f

Thousands of UI/UX resources from great and resourceful designers around the world Sharing and building on each other's work is the ultimate form of learning and retaining knowledge. Since 2012, we're curating some of the best resources to help you design, prototype, and collaborate better and faster. UI Kits Apps Icons Illustrations Wireframes Ideas Web iOS Material Data Forms Mockups Real Annota

作成：2015/12/7 更新：2016/06/29 Webデザイン > スマートフォンはOSの進化によって、次々と新しいUIがうまれています。提案の仕事が入ったときに焦らないように、普段から新しいデザインや動きをチェック。そして「自分には何ができて、何ができないか」把握しておきたいところ。今回は「スマホのUIをチェックするならこれ」と思うギャラリーをまとめておきます。 エンジニア速報は Twitter の@commteで配信しています。 CAPPTIVATE.co 静止画像のギャラリーが多い中、こちらのサイトはインタラクション・アニメーションを動画で見ることができます。比較的新しく美しいUIが多いので、要ブクマですね。 CAPPTIVATE.co | iOS UI Animations Mobile Patterns iPhoneアプリのUIデザイン集。左側のカテゴリにはカメラコントロー

弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。 今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。 フォント選び フォントの基本的な選び方 | Arch ▲フォントの系統から書体、ウェイトの選定方法まで、ユーザー

フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。

futatsumata studio 二俣スタジオ。プロダクト、家具のデザインを軸に行うデザインスタジオ。

この記事は2015年10月22日に公開された記事を再編集したものです。 デザイン作業に慣れてくると、どうしても自分の癖が出てしまい、似たようなデザインばかりになってしまいがちです。特にWebデザインのパーツは、毎回同じようなデザインを作ってしまうことも少なくありません。しかし、自分が持っているアイデアだけでは、なかなか新しいデザインは浮かんでこないものです。 そこでオススメしたいのがギャラリーサイトです。その中でもパーツごとに収集したギャラリーサイトは、デザインの「部分」だけでも参考にすることができるため非常に便利です。デザインアイデアが欲しい時こそ、多くのヒントが詰まっている素材サイトを活用しましょう。 今回は、Webデザインのパーツをまとめたギャラリーサイトを36個まとめてご紹介します。 ※サイトによっては素材やソースコードなどを配布・掲載しているものもあります。ご利用の際は、必ず利用

iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた

Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見ているだけでワクワクするクリエイティブな刺激をもらえます。

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

こちらサンフランシスコ・シリコンバレー地域では、エンジニアだけではなくデザイナーの需要が非常に高まっている。 WebやアプリのUIや、プロダクト全体のUX,、AI活用によるデザインなどなど。そして、グローバル規模でのブランディングに至るまで、ビジネスの様々な局面において、デザイン的考え方が重要とされてきているのが理由である。 そして、少し前までは、”デザイナー”と聞くと絵を描く仕事の延長線上にあると思われていたが実はその仕事にとって重要な内容として相手を理解するコミニュケーション能力と自身の問題解決策を説明するプレゼンテーションも含まれる。 次世代のデザイナーは、クリエイティブな考えに加えて、異なるバックグラウンドを持つ人々の考え方を理解する能力が必要とされる。 【改めて基本を解説】デザイナーの役割とその仕事内容とは 実は、日本国内でも非常に優秀なデザイナーは多く、細かな表現技法や、最新の

こんにちは。学生ライターの池澤章太です。 Webで記事を書くときや資料を作るときに、フリー写真素材をよく使うと思います。しかし、イメージに合う写真や素材を見つけるってなかなか大変です。場合によっては商用利用できるか調べるなければいけませんし。 そんなときに、商用利用ができて、無料で使える素材サイトがまとめてあると便利ですよね。 ちなみに動画素材については送別会、結婚式に！映像制作に使える無料動画素材サイトまとめをご覧ください。 今回は、23個ほど素材サイトをまとめました。この記事をブックマークしておけば素材に困ったときに役立つはず！ 【こちらもおすすめ】 無料で商用利用OKのサイト特集 商用利用できるフリー写真素材サイトまとめ23選 ここでひとつ注意を。「フリー」という単語は、なにかと誤解を招きやすいですが、著作権がフリーだったり、クレジット表記が不要だったりする意味ではありません。各素材

フォントフリーについて FONT FREE（フォントフリー）は、無料で使える日本語フリーフォント投稿サイトです。 漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、明朝やゴシック、手書きなどのカテゴリーから探すことができます。紹介ページリンクからダウンロードもすぐにできます。 あなたの欲しかったフォントが、すぐに見つかりますように。