デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 | WebNAUT by Beeworks
デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。 しかしWebサイトは「見るだけ」ではなく「使うもの」ですので、実際には様々な「動き」や「状態」が存在します。 そんな動きや状態については都度デザイナーとエンジニアが一緒に検討していくのが理想ではあるのですが、それが難しいケースもあるでしょう。 そんな時には事細かにデザイナーに確認したりデザインデータを要求するのではなく、ある程度はエンジニアが意図を汲み取って実装することが必要ではないでしょうか。 今回はそんな「デザインに鋭いフロントエンドエンジニア」になるために、実装機会の多い「ホバーアニメーション」を例にしてフロントエンドエンジニアがどのように実装を決めていけばよいのかを考えてみたいと思
Webデザイナーがコンポーネント指向な実装をはじめるなら、まずはRiotから入ってみるといいかもしれない｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは。ほそだです。 以前、このブログでReactについて書いてから早一年あまり。まわりを見渡せば、ReactはもはやかつてのjQueryのように当たり前の存在になっていて、時の流れの早さを感じます。 とはいえ、僕はエンジニアではなくデザイナーなので、従来のようなデザイナーだけで完結する規模感のWeb実装も相変わらず行います。その際、せっかくReactを通して培ったコンポーネント指向な実装をもうちょっとカジュアルにやれないかなと思い、この半年ほどRiotを使ってみました。 ということで、今回は主にデザイナー向けにRiotについて解説します。 Riotとは コンポーネント指向でビューを作っていく、だいぶReactっぽいライブラリです。 Riot.js — Simple and elegant component-based UI library 国内だと2016年春くらいに若干ブレイクの
フラットデザインのためのベストプラクティス
フラットデザインは、シンプリシティ（単純化、簡素化）の考えにそったミニマリズムにもとづく、洗練されたデザインと考えられているでしょう。しかし、フラットデザインにおけるシンプリシティの実現は簡単ではありません。きれいにまとまったビジュアルと機能的なデザインを創り出すことを考慮し、すべての要素を同じ目的のためにデザインしなければなりません。 ユーザーのためになるフラットデザインの活用方法には、どのようなものがあるか見ていきましょう。 見えないデザイン 不要なスタイリングを取り除きましょう ユーザーが気付かないような、「見えないデザイン」を実践するのは良いことです。なぜなら、ユーザーが毎回デザインに気を取られていては、「体験への没入」の妨げになってしまうからです。ゴールは、特定のアクションやメッセージを、ユーザーに素早く簡単に理解してもらうことのはずです。必要な機能を明らかにするために、デザイン
プロのWebデザイナーが使用している人気のツール、フォント、ワークフローなどのまとめ -Web Design Trend Report
プロのWebデザイナー、デベロッパーが実際に作業しているファイルを元に、Webデザインのトレンドをツール、カラー、フォント、エフェクト、ワークフローの観点から調査したレポートを紹介します。 安定して人気のあるトレンド、変化しているトレンドをチェックできます。 2016 Web Design Trend Report デザイナーとデベロッパーのコラボツール「Avocode」で利用された1,127,302のPSDとSketchファイルに基づき、2016年のデータとしてまとめたものです。 レポート公開にあたり、私もほんの少しだけ協力しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザイナーが使用しているツール デザインのコンポーネント化 ファイルのリビジョン ファイルの容量 Webデザインでもっとも人気が高いフリー
40 Pop-Up Design Examples For Web Design | Naldz Graphics
Pop-up/overlay box messages or modal windows are usually used to promote products and services to visitors. Obviously, no one loves to be disturbed by a pop-up window while browsing, but it’s possible to at least minimize the nuisance with good design. Though its presence in a website is debated for user experience, it can draw more conversion when used right. Here you’ll get to see some of the be
Webサイトのコンテンツに動画を有効的に活用しよう
Webサイトのコンテンツに動画を有効的に活用しよう Web動画は以前はPCからの視聴がほとんどでしたが、モバイル回線の高速化や、スマートフォンやタブレットの普及により様々なデバイスから動画を視聴する機会が増えました。 そこで今回は動画コンテンツの効果について見ていきたいと思います。 投稿日2017年02月15日 更新日2017年02月16日 静止画にはない動画の優位性 動画は写真や文字と比較すると、動きというビジュアルの他に、音の情報も発信することができ、その情報量は文字や静止画と比べると5,000倍とも言われています。 そのため、短時間で多くの情報を伝えるることができ、人を惹きつけたり、印象に残るサイトを作成することができます。 動画が適したコンテンツ 動画は静止画と比べ情報量が多いということはわかりましたが、やみくもに動画を作っても撮影や編集の時間だけが無駄に掛かってしまい、良い結果を
Webデザイナーを目指す初心者さんが知っておきたい専門用語
2014年11月5日 Web関連記事 WebデザイナーとしてWeb業界で活躍したいという初心者さんが、最初につまづきやすいのが、その専門用語の多さ。Webデザインの入門書をパラパラッとめくってみても、見慣れない単語に圧倒されてしまう人も多いのではないでしょうか？そこで今回はWebデザイナーなら知っておきたい単語をいくつかまとめてみました。Webデザインのお勉強中に「これなんだ？」という単語に出くわした時に参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 あ行 か行 さ行 た行 は行 ま行 や行 ら行 わ行 あ行 アクセシビリティ Webアクセシビリティとも呼ばれます。アクセスのしやすさを表し、実生活上ではバリアフリーとも知られています。Webのアクセシビリティにおいては、音声によってWebページを読み上げたり、動画に字幕をつけるなどの工夫をして、身体の不自由な方でも
これでもう悩まない！2017年のデザイントレンド完全ガイド
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？
なんとなく白にしてない？Webサイトの背景色の引き出しを増やす、9つの具体例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まきこです。 アンジュルムの佐々木莉佳子ちゃんがとてもかわいいので、毎日がだいたい楽しいです！ さて、みなさんは、サイトの背景色ってどれくらい気にしていますか？ わたしは、なんとなく白を選んで置きにいってしまうことが多いんですよね……。でも、もっと幅広い表現のために、背景色の使い方の引き出しを広げたいなーと最近は考えています。そこで今回は、背景色の使い方が印象的なサイトを、使い方ごとに分類してご紹介します！ 強めの色を大胆に使う 1. heyblend http://www.heyblend.com/ アメリカのクリエイティブ集団のサイト。 背景色に赤を大胆に取りいれていて、かっこいいですよね！ 赤といっても少し白が混ざったような色で、大人っぽいスタイリッシュな雰囲気にまとまっています。下層ページも潔く赤いんですが、写真とぶつかることなく、うるさくないのにしっかり個性的。こうい
2016年、デザインやアイデアが素晴らしかったWebサイトのまとめ -Website of the Year 2016
世界中の現役クリエイターを審査員に迎え、デザインやアイデアが素晴らしいWebサイトを選出するCSS Design Awards主催の「Website of the Year 2016」が発表されました。毎年楽しみにしている人も多いと思います。 「Website of the Year」のファイナリストに選出されたWebサイトを紹介します。 Website of the Year 2016 デザインがすごいだけでなく、操作やUIにもアイデアが満載のサイトばかりでした。 Chromeで見ることをお勧めします、音がでるサイトがけっこう多いです。 サイトとの出会いを楽しんでいただくため、説明は一切無しにしました。先入観無しでお楽しみください。
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
パッケージデザインと上手に調和したイケてるウェブサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのみやです。 製品のパッケージデザインは購買意欲を刺激する重要な要素です。手に取ってもらうためのさまざまな工夫が凝らされていて、見ていて非常に楽しくなります。 今回はパッケージデザインを上手くサイトのデザインに落とし込んだウェブサイトをご紹介します。それぞれの製品がどんなコンセプトを持ってどんな表現を用いているか、意識しながら見ると面白いですよ。 ※デザインの参考に！パッケージデザインに関するその他記事はこちら 秋保ワイン RASIN DE AKIU http://akiuwine.jp/ 秋保の自然が映し出されたステンドグラスのようなキレイなパッケージデザインですね！ 実際の秋保ワインボトルのラベルを展開したようなデザインです。 画像の切り抜きや細かい部分にも三角の意匠が使用されていて、サイト全体として非常にまとまっています。 超特撰 白鶴 天空 袋吊り 純米大吟
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
海外のおしゃれなデザインを集めたギャラリーサイト７選
Webデザインを考える際に、デザイナーなら誰でもおしゃれなサイトに仕上げたいものです。ですが、具体的に「おしゃれなサイト」と一言で言っても、その感覚は千差万別です。 この記事では、デザインに行き詰まったときなどに眺めたい、おしゃれなサイトを集めたギャラリーサイトをご紹介します。様々なサイトを見ることで視野を広げ、引き出しを増やし、ご自分のデザインに活かしてみて下さい。 The Best Designs シンプルで洗練された、海外のギャラリーサイトです。サイトのファーストビューをキャプチャした画像が大きく、見やすくなっています。 また、画像をクリックすると詳細ページに遷移して、トップページ以外のデザインもじっくり見ることができます。気に入ったデザインを保存できるようSNSボタンが設置してあり、PinterestのPin itボタンなどでストックしていくと良いかもしれません。 Web Desi
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
UIデザインの歴史に学ぶシャドウと奥行きの使い方
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように
スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Global Architecture, Engineering and Consulting Firm
エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
http://www.paulbarre.co/