マテリアルデザインとは|始め方とフレームワーク10選｜フリエン
（画像：Google Design） “マテリアルデザイン”とは、2014年にGoogleが提唱した、UI/UXを軸とした概念です。単純にデザインを指すだけでなく、開発技術や設計、アイディアや試みなどを総合してマテリアルデザインと称します。 Googleがマテリアルデザインのガイドラインを発表して以降、Googleが開発するandroidを中心に様々なマテリアルデザインが生み出され、目にすることも多くなってきました。しかし、この“マテリアルデザイン”を明確に説明できる人は少ないです。 “マテリアルデザイン”は、ユーザを第一に考えた、参考になる概念を数多く提唱しています。今回は、マテリアルデザインとは何なのか、その特徴と他のデザインとの違い、便利なフレームワークを紹介します。
高級感あるWebサイトをデザインするときに参考になるサイトと、7つのコツまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まきこです。好きなハロプロの秋曲は「ハピネス～幸福歓迎！」です！ さて今回は、「Webサイトの高級感ってどうやったら表現できるの？」という課題について考えてみます。デザイナーとして仕事をする上で、「もっと高級感がほしい」というオーダーは多いんです。そんなときでも迷わず解決に向かってひた走れたら、デザイナーとしても高級になれるはず！ ということで、わたしが個人的に「高級感がある」と感じたサイトを、その高級感を醸成している理由ごとにご紹介していきます。 1. クオリティーの高い写真 オークヴィレッジ木造建築研究所 https://www.oakv.co.jp/kenchiku/ 木造建築を専門とする建築事務所のサイトです。まるで写真に使われている家で暮らしているかのような気持ちになる、臨場感あふれる写真がトップページに大きく使われています。 Equipos de Aire Acon
2016年に注目したい、グラフィックデザインのトレンド9個まとめ
デザイントレンドとは、あらゆる文化やメディア、過去と現在、テクノロジー、ファッションなど、さまざまな分野から影響を受けています。つねに移り変わっていくもので、正確にいつ終わるとは決めにくいものです。 アメリカ・グラフィック・アート協会（The American Institute for Graphic Arts : AIGA）のMedeleine Morleyは、以下のように述べています。 トレンドは毎年出現して、煙のように消えてしまうわけではありません。その代わりに少しずつ人気が出始め、時間がたつと気づかれないまま立ち消えてしまいます。 今回紹介するデザイントレンドは、2015年の終わりごろから、魔法のように急に出てきたわけではありません。トレンドがピークに達するまでには時間が必要で、ここ数年でいくつものトレンドを見てきています。 トレンドをあまり意識しないデザイナーも、働いている分野
【実例付きで詳細解説】アフォーダンスをあなたはきちんと理解してる？ - プログラミングとデザイン、スタートアップの話
あらゆるデザイナーのバイブル『誰のためのデザイン』で紹介された「アフォーダンス」という言葉は、今や多くのデザイナーが日常的に使い、意識するキーフレーズとなっている。しかし、その使われ方が著者ノーマンの意図したものと違う形で広まってしまっているということで、彼は『誰のためのデザイン』の改訂版で、アフォーダンスに加えて「シグニファイア」という新たな言葉を定義し、その違いを説明している。 人間中心デザイン 発見可能性 アフォーダンスとシグニファイアとの違い デザイン関連で最近見つけた良書 人間中心デザイン 著者ノーマンの基礎哲学は人間中心デザインだ。 人間中心デザインでは、まず人間のニーズ、能力、行動を取り上げ、それからそのニーズ、能力、行動に合わせてデザインする。良いデザインは心理学とテクノロジーを理解する所からはじまる。良いデザインとはコミュニケーションを要するのである。 対象物とそれを扱う
2017年要注目！2016年に人気となったWebデザイントレンド6個まとめ
Webデザインの世界は、幅広いSVGのサポートやCSSでできる新しいことも増えるなど、今後ますますエキサイティングなものとなるでしょう。2016年のデザイントレンドを振り返りながら、今年のデザイン動向と2017年に向けた新しいデザインアイデアをまとめてご紹介します。 コンテンツ目次 1. 高解像度のビジュアル 2. インタラクティブ・ナビメニュー 3. スプリットスクリーン・レイアウト 4. レトロスタイル 5. より複雑なレイアウト 6. アニメーション&マイクロインタクラション 7. 2017年に期待できるものとは 高解像度のビジュアル 英: High-Definition Visuals ヒーローイメージやフルスクリーンを利用したトレンドは、ビデオ動画や高画質なイメージ写真などさまざまな要素と組み合わせることで、今後もまだまだ続くでしょう。もはや鮮やかな写真イメージはポートフォリオサ
2017年の流行を先読み！ウェブデザインを考える際に気に留めておきたい7つのトレンド - Brian'z Imagination
世界の変化は、とても早い。中国はあっという間に日本のGDPを抜かしてしまったし、ついこの間決まったような東京オリンピックもあと4年で始まってしまう。 そしてウェブデザインに関しても、例外ではない。ぼくはウェブデザインの勉強をして12年になるけれど、昔はTABLEレイアウトという、今考えると全くイケていない方法でデザインが行われていた。けれども今は、さまざまなテクノロジーの登場で、イケてるサイトを素早く作ることができるようになった。 今回は、ぼくがウェブデザインをするときに参考にしているトレンドを、イケてるウェブサイトとともにまとめてみようと思う。古風であまりオシャレでないウェブサイトは、完全に除いている。 1. ストーリーテリング UX(ユーザーエクスペリエンス)を最大化する、ということはウェブ業界では久しく言われてきたことだ。単にクールなだけでなく、ブラウジングする際に読み手にどんな体験
黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
黄金比や黄金螺旋を使い、Webサイト、雑誌や同人誌の表紙、フライヤーなどのレイアウト、コンテンツの配置、余白のとり方、写真の構図、オブジェクトの形のデザインにうまく取り入れるデザインテクニックを紹介します。 以前に1,000ブクマ越えの「黄金比をサイトのデザインに取り入れる簡単な３つの方法」を記事にしましたが、黄金比の取り入れ方もいろいろ進化しています！ What Is The Golden Ratio? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 黄金比（Golden Ratio）とは 1. 黄金比をレイアウトに使う 2. 黄金比をスペースに使う 3. 黄金比をコンテンツに使う 4. 黄金比を写真の構図に使う 5. 黄金比を形に使う エジプトのピラミッド、ダヴィンチのモナリザ、これらとTwitterやペプシのロゴとの共通点は何で
「BMWのドア音」に学ぶ、完璧なUXデザインのためのマイクロインタラクション
神は細部に宿る－－。たとえばBMWの「完璧なドア音」が究極のUXを生み出すように、 Webデザインではマイクロインタラクションが大切なのです。 BMWのような自動車会社がサウンドエンジニアのエリートチームを雇っていることは、驚くべきことではありません。なぜなら自動車は大きな音を出すものだからです。しかし、彼らがクルマの出す音を小さくすることよりも「チューニング」することに時間をかけていることは驚くべきことです。 たとえば、「クルマのドアを閉める音」は単にクルマを密閉する際の副次的な音ですが、作り手は「完璧なドアを閉める音」を生み出すためには努力を惜しみません。彼らは正しい「音」をつくるために材料、フィルター、空洞を調節します。同様に、ワイパー、窓のモーター、座席の調節などが、すべて美しい音を奏でるようになっています。 以上のことからデザイナーは、なにを学べば良いのでしょうか。それはUXです
色覚シミュレーションツールについて – NPO法人 カラーユニバーサルデザイン機構 CUDO
コンピュータ技術の利用によりP型やD型、T型色覚の人の「見分けにくい色」を知ることができるようになりました。カラーユニバーサルデザイン機構ではこのツールを「色覚シミュレーションツール」と呼んでいます。 本来、人は自分以外の人が色をどのように感じているのか体験することはできません。色覚シミュレーションツールにおいても、P型やD型、T型色覚の人の色の見え方そのものは体験できませんが、「色の見分けにくさ」を体験することができ、大変役立ちます。 ＊フォトショップやイラストレーターでは、色覚シミュレーションツールのことを「校正ツール」と呼びます。 ＊色覚シミュレーションツールによって表現される色が異なる場合がありますが、「色の見分けにくさ」は正しく再現されています。 抑えておこう！色覚シミュレーションツールの「色」の表し方 色覚シミュレーションツールを使う前に、知っておいていただきたいのは「色」の表
ゴールデンボンバーがWikipediaをパクったことのすごさを詳しく解説しよう - デスモスチルスの白昼夢
ゴールデンボンバーの公式サイトが完全にWikipediaのパクリとして話題になっている。 本人たちは笑わせようとしてるだけかもしれないが、私は大いに感心してしまった。 Webでアーティストのことを調べる時、私は公式サイトではなく、Wikipediaを見ることの方が圧倒的に多い。Wikipediaの方が見やすいし、満足いく量の情報が得られるからだ。 多くの公式サイトは、文字は小さく、情報量は極めて少ない。プロフィールもメディア向けの無機質なものだ。時には最新アルバムの世界観に合わせて派手な演出が施されていることもあるが、単に使いにくくなってるだけで、満足いく情報が得られることはない。 アーティストのことが知りたくなったのに、彼らの音楽的なルーツも、初めて買ったCDも、他のミュージシャンとの繋がりも、人と成りも、生まれ育った環境も、好きな食べ物も、好きなファッションも、公式サイトは教えてくれな
UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
フォント選びや配色に関して友人と話したらわりと目からウロコだった話 - Yukihy Life
だいぶブログもカスタマイズして、ほぼもういじるところが無いような感じになってきてしまったのですが、数日前にフォントを変更してみたんです。 そしたら美大に通っている友人から軽いバッシングを受けて、フォントについていろいろと教えてもらったので共有したいと思います。 フォント 自分がここまでしてきたカスタマイズって、デザインと言うよりかは機能を追加するような感じなんですよね。 例えばフォトショとかイラレとか触ったこともないですし、ヘッダーの背景は青いまんまですし。 そこで気分を変えるために、ブログタイトルの「Yukihy Life」のフォントを「Google Fonts」で変えてみたんですよ。 とにかく特徴のあるタイトルにしたかったんです！ デフォルトはこんな感じなのを Googleフォントでこんな風にしてみました。 どうです？ フォントのイメージも、どことなくアドベンチャー感が出て、男らしさと
Private Presentation
Private content!This content has been marked as private by the uploader.
ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか | fladdict
ペーパープロトタイピング講座シリーズ。第1回は導入編。 第1回はの導入編。ペーパー・プロトタイピングとは何なのか、何故必要なのか。そして導入することで、どんな利点があるのかを説明する。 ペーパー・プロトタイピングって何？ ペーパー・プロトタイピングとは、紙で実際にアプリやサイトを「実装する」ことである。 通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。UIや手触りが重要なモバイル系のアプリにおいて、これは致命的な問題になる。ペーパープロトタイピングはこの問題を低コストで解決する。 紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽く
【絶対に知っておかなきゃいけない】紙媒体とWEBデザインにおけるデザイン作法の違いについて #デザイン#web
バイラルメディアはクソだ、とか否定してるけど、あなたには絶対に運営できないと思うよ ここ最近、バイラルメディアに関する議論やヘイト記事をよく目にします。 twitterでお世 記事を読む XAMPPインストール時にapacheが起動しないときは・・・ PHP & MySQLをローカルでテストするときによく使うXAMPPですが、apacheを起 記事を読む 3.ConoHaVPSで複数ドメインを割り当てるためにVirtual Hostsを設定する 次に、ConoHa VPSに複数のドメインを割り当てる際のVirtual Hostsの設定を 記事を読む ロリポップサーバーでCGIなどが動かなくなった場合の対処法 今回のロリポップのwordpressへの大規模ハッキングをうけて、ロリポップ側でいろいろ対応が始まっ 記事を読む EC-CUBEのデータベース接続先を開発環境と本番環境で自動で
リニューアルしたからって良くなるわけじゃない
先週のMOVIDA SCHOOLはネコメシのディレクター兼UXデザイナーの山本郁也さんでした。 山本さんは個人でZaim、クラウドワークス、Lang-8、ソーシャルランチ、gifteeなどのスタートアップのUXのサポートを行なっている他、人間中心設計推進機構やヒューマンインターフェース学会でアカデミックな活動も行っています。 （スタートアップとのかかわりについてはMOVIDA SCHOOLでの講義の次の日にこんな想いをエントリしていました。） 山本さんにはユーザー視点でのUXデザインについて話していただきました。 Fact or Truth?マーケティングの世界で古くからある言葉に「顧客はドリルが欲しいわけではなく、ドリルであけることのできる穴が欲しいのだ」というものがある。 実際には人それぞれ、その時々で変わると思う。 ひょっとしたら、ドリルを持っていたいだけの人がいるかも知れないし、た
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーインターフェイスのデザインのヒント - Apple Developer
カラーホイール | カラースキーム - Adobe Color CC
http://handywebdesign.net/2013/12/slide-share-about-color/
