【トレンド分析】最近のアイコンのデザインが似通ってきている問題 デザイン会社 ビートラックス: ブログ
最近のスタートアップにおけるロゴトレンドでは、そのスタイルに多くの類似性があることがわかった。その中でも、特にスマホ向けのアプリの影響でアイコンの存在がそのブランドを強く印象づける役割を果たしている。 【トレンド分析】最近のロゴデザインが似通ってきている問題 – 第2弾 多くのアイコンがどんどんカラフルに限られたスペースに複数のアイコンが並ぶスマホのホーム画面で存在感を出すためなのか、最近のアイコンはどんどんカラフルになってきている。これは、画面の解像度が上がってきている恩恵でもあるが、どんどん没個性にもつながっている。 カラフルアイコンの代表的なのがインスタグラム。インスタは2016年にそれまでのカメラ風のアイコンから、思い切ってカラフルなグラデーションを取り入れたアイコンにリデザインを行った。 Googleサービスの見分けをつけるのが難易度高めカラフルなカラースキームの代表といえばGo
無料で使えるSF風にデザインされたウェブフレームワーク「Arwes」
「Arwes」はSF風のアニメーションやサウンドエフェクトを使ってウェブコンテンツを無料で作成できるオープンソースフレームワークです。コンセプトは「先進的な宇宙技術とエイリアン」というArwesは、試用版やサンプルのウェブサイトも公開されています。 GitHub - arwes/arwes: Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps https://github.com/arwes/arwes Arwesの試用版は以下のURLから実際に使ってみることができます。 Arwes - Sci-Fi UI Framework https://arwes.dev/ 試用版のウェブサイト自体もArwesを使って作られており、SFっぽい雰囲気。「Play」をクリックすれば試用版のエディタ
おすすめフォント
ポスターやスライド、その他の資料を作るときのおすすめのフォントをまとめておきます。書体の選び方や使い方の項目で解説したように、重要なのは、可読性、視認性、判読性を意識しながらの「TPOに合わせたフォント選び」です。すでに説明した通り、｢短文か長文か？｣、｢読みにくいフォントではないか？｣、｢太字・斜体に対応しているか？｣ユニバーサルデザインか（＝判読性が高いか）？ということに着目しておすすめフォントを紹介します。これまで触れてきませんでしたが、フォントを選ぶときには汎用性・互換性にも注意しなければなりません。 最後にPowerPointにおけるフォント関連の便利なテクニックをいくつか紹介しますので、ぜひ参考にしてみてください。 ゴシック体（和文書体） Winならメイリオ/游ゴシック、Macならヒラギノ角ゴシックも プレゼン用のスライドや学会発表のポスターなどでは、視認性の高いゴシック体を使
最近のWebを象徴するカード型コンポーネントをデザインする時のポイントまとめ
ここ1, 2年で、カードのコンポーネントを採用しているWebサイトは非常に増えました。レスポンシブとも相性がよく、情報を分かりやすく整理でき、テキストや画像だけでなく、動画などのマルチメディアも要素として配置することができます。 プロのデザイナーが実践している、カードをデザインする時のポイントを紹介します。 Design Better Cards by Andrew Coyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カードのコンポーネントとは カードの形 カードの構成要素 カードをデザインする時の5つのポイント カードをデザインする時に参考になるリソース カードのコンポーネントとは カードは、より詳細な情報への入り口として機能するユーザーインターフェイスのコンポーネントです。さまざまな情報を管理することができ、ユーザー
レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか？
レスポンシブWebデザインで使うメディアクエリーを進歩させ、要素ごとに条件を設定できる「エレメントクエリー」。どこがどう便利なのか？ 専用ライブラリー「EQCSS」による使い方を紹介します。 CSSのメディアクエリー（Media Query）を使い、画面幅に基づいて要素の表示方法を変える方法はもうおなじみでしょう。エレメントクエリー（Element Query）はメディアクエリーと似ているものの、なんとビューポートではなくWebページ上の個々の要素にレスポンシブな条件を適用します。条件とは、たとえば、要素の幅、含まれる文字数、ユーザーのスクロール状況などで、要素に異なるスタイルルールを適用できるのです。 エレメントクエリーが必要とされる理由 最初に述べたように、エレメントクエリーはビューポートの幅と高さだけでなく、たくさんのプロパティに基づいて要素をスタイリングするのに役立ちます。ほかにも
【2016年版】これだけ読めば大丈夫！デザインの基礎が学べる厳選15記事
「ちょっとしたデザインは自社で対応している」という企業も珍しくなく、本業ではない方が兼業でデザイン作業を任されているケースも少なくありません。 しかし、「本格的にデザインに関する知識・技術」を学んできていないこともあり、制作するものに自信をもてなかったり、そもそも学ぶにしても「どこから勉強したらいいかわからない」という方も多いのではないでしょうか。 デザインは「才能」「センス」というイメージを持ってしまいがちですが、実際にはルールや原則があり、理解すれば誰でも基本に則ったデザインワークをこなすことができます。 そこで今回は、初心者にもぜひオススメしたい『デザインの基礎が学べる記事』をまとめてご紹介します。 デザインの基礎 1.【追記あり】【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう http://wp-e.org/2014/03/09/995/ これからデザイ
UXの信号色「赤・オレンジ・緑」はどのように使うべきか？
Ben氏はProcess Street社で、ライターとして活動しています。戦略構築と、悪いgifファイル、リサーチなどに精力を注いでいます。網を破れなかったり、アバランチェを閲覧したりする時は、彼をツイッターで見つけて下さい。 色彩理論がUXにおいて重要な役割を果たすことは、説明するまでもありません。CTAの色による強調からテキストの可読性をあげる効果まで、コンテクストにあった色の選択については最大限考慮する必要があります。適切に配色をすることによって、ユーザーからの反応を上手く引き出し、あなたの製品のユーザー体験を最大限ポジティブなものにすることを期待できます。 UXにおける信号色：赤・オレンジ・緑 おそらく最も重要な色彩は、赤・オレンジ・緑なのではないでしょうか。この3色は、「UXにおける信号色」と言えます。これは、一般的な組み合わせの中で最も使いやすい色彩だからという理由ではなく（実
CSSだけでwebページをバウンド表示させる方法 | q-Az
CSS だけで web ページをバウンドをしているように表示させてみます。現在このページでもバウンド表示を実装しているのでビヨンビヨンとバウンドしながら表示されたと思います。 web ページ全体をするというと若干好みが分かれそうな表示ですが、全体ではなく一部の要素だったりマウスがホバーした要素だけなどであれば、デザインによっては効果的なものになるかもしれません。 webページ全体をCSSだけでバウンドさせるCSS の animaion と transform の scale 値を使います。scale で拡大率を指定しています。 body { animation: bound 2.2s ease-in-out; transform-origin: 50% 50vh; } @keyframes bound { 0% {transform: scale(0.1)} 12.5% {transfor
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタマイズ
美しいボタンで、シェアしてもらおう。 FacebookやTwitterなどのSNSボタンは、各サービスごとに公式のものが用意されている。 発信した情報を拡散するためには今や欠かせない存在。でもこの公式ボタンたちは、ページ表示する度に「毎回」正確なシェア数を探しに行っている。毎秒のように、世界中を飛び回って。いやまったく、ご苦労さんと言いたい。ところが、だ。 君らのおかげで、ページ表示が格段に遅くなる。5個も6個もあるとなおさらだ。訪問者に対する、私たちのオモテナシの心をどーしてくれるんだい？心を込めて仕上げたコンテンツだ。作品だ。目もくれずに去ってしまうじゃあないか。 よーしついでに言ってしまおう。デザインも野暮ったい。統一感もない。色も形もだ。目もチカチカする。いやホント申し訳ないんだがホントのことなんだからしょーがない。 だから、サイトデザインにビシッ！と合わせて、スムーズにページ表示
【UIデザイン編】ベーシックなhoverデザインを10個まとめたよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのトミーです。 「WEBデザインをはじめよう」今回のテーマはUIデザインです。 Webサイトを構成するさまざなUIパーツについて、デザインを始める前に頭に入れておきたい基本的なポイントをご紹介していきます。今回のテーマは「ホバー(hover)」です。 3〜4年前のサイトでは、現在のコンバージョンボタンのように、グラデーションでhoverして反転するような表現が多かったと思います。しかし、インタラクションを多く含む要素が多くなってきたことや、デザイン性、操作性を考え、様々な表現を見かけるようになりました。css3以降、コードで表現できる幅が広がりサイトにも動きが出てきています。今回は、ベーシックなものをおさらいしてみます。 参考サイトでは、上手に表現しているサイトをご紹介します。 1. Reverse LIGのpagetopなんかもこれですね。最もbasicなスタイルで
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
Web担当者なら押さえておきたい！2016年主流のWebデザイン5選
Web業界において”トレンドが移り変わるタイミングは、突如として訪れます。 その一例がスマートフォンの普及です。 これまでのWebデザインといえばPCデバイスに合わせて制作することが主でしたが、次第にスマホ最適化が叫ばれ、その流れで一気にトレンドとなったのが「レスポンシブデザイン」でした。 もちろん、新しいトレンドが起こるタイミングが突然訪れるというのは今後も変わりません。 常に新しいトレンドを把握し、対応できる状態になっているべきです。 今回は、2016年に広まったWebデザインをピックアップしました。 新しいデザイン手法の出現には、ターニングポイントが存在するものです。 ぜひ、今後のデザイン制作にお役立てください。 2016年にWebデザインで押さえておきたいトレンド 1.パララックスデザイン パララックスの教科書のようなサイトです。気持ち良くスクロールを誘導してくれます。 http:
Webデザインの没個性化と認知容易性 | ベイジの社長ブログ
Webサイトのデザインは紙のデザインと異なり、技術的な制約が強く、特に最近は様々な環境（デバイス、ブラウザ、画面サイズ、屋内・屋外など）での閲覧に対応できることを求められます。そのため、戦略から要件、コンテンツ、機能と論理的にデザインを決めていくと、どこかで見たことあるような没個性なデザインになりやすいものです。（注：ここでいうデザインは視覚的なデザインを指します） マルチデバイス、マルチブラウザが進み、レスポンシブWebも選択肢の一つとして一般化した昨今では、Webデザインの没個性化はますます進んだ印象があります。例えば、Googleが公開しているマテリアルデザインのガイドラインを見ても、デザインのパターン化と属人性排除の思想を如実に感じることができます。また、データドリヴンなサイト改善を積極的に行っていくと、「デザインの個性」と成果に大した因果関係がないことを痛感します。 没個性なデザ
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
コンバージョン率を劇的にアップさせるための30の心理作戦
By Tim Franklin Photography マーケットリサーチアナリストとして働き、SEOやPPCのスペシャリストであり、かつ心理学をたしなんでいるというニック・コレンダさんが、心理学の視点から導き出した「コンバージョン率を劇的にアップさせるための30の心理作戦」を公開しています。「フムフム、なるほど」というものから、「恐ろしあ……」となる戦略まであり、広告運用やSEOの知識がない人もサービスを使うユーザーとして知っておくべき内容になっています。 Conversion Optimization: An Enormous List of Psychological Tactics http://www.nickkolenda.com/conversion-optimization-psychology/ 30の戦略を見る準備として、運営しているサービスをCTA別に分けてじょうご状
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ためしがき
エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
エステ・サロンなどの女性向けサービスのおすすめ配色の見本（第1回） | 業種別ホームページカラーガイド（全12回）
ページネーションのベストプラクティス | POSTD