エンジニアでも知っておきたい実装時のデザインのこと - Qiita
DMM.com #2 Advent Calendar 2017 2日目です！ カレンダーのURLはコチラ DMM.com #1 Advent Calendar 2017 DMM.com #2 Advent Calendar 2017 オンラインサロンというサービスのエンジニアをやっている17新卒の高木です！ 学生時代に、Webデザインやメディア周りのフロントの実装をかじっていたり、 サービスのエンジニアとして、バックエンドのことだけでなく、フロントも書いているので、今までの業務で実際に出会ったこれ大丈夫かなみたいなことを同期との勉強会で発表したので、それを画像と文章にまとめてみました！ こんなふうに仕事を頼まれたら本当にすぐ実装に取りかかれる？ こんなWFを渡されて、実装の依頼をされたらすぐに実装できるか・・・！ 色々なとわからないことがありすぎる タイトル6文字以上になったらどうするんだ
トップページの終焉――ウェブサイトのパーソナライゼーション事例 | Moz - SEOとインバウンドマーケティングの実践情報
企業Webサイトのトップページを訪問者ごとにパーソナライズするのは、どうなのだろうか。Optimizelyのサイトでトップページをパーソナライズした事例から、その考え方やセグメントの分け方、クリエイティブ、そして成果を紹介する。 1998年、ジェフ・ベゾス氏はインターネットについてあるビジョンを抱いていた。同氏がアマゾンを設立してから4年が経った頃で、アマゾンは書籍や音楽の巨大オンライン市場として軌道に乗りつつあった。 その年に行われたワシントン・ポストとのインタビューで、ベゾス氏はウェブについて先見性のあるコメントをしている。同氏は次のように述べていた。 顧客が450万人いるなら、店舗が1つではだめだ。450万の店舗が必要だ。 それから19年たった2017年の今、私がアマゾンのトップページを訪問すると、その内容はかなりパーソナライズされている（2016年8月には、蛍光色に光るライトスティ
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 | HTML5でサイトをつくろう
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
コンテンツからみるWebアクセシビリティの課題と提案 : could
コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに
UXをみっちり基礎から教わることができた「モバイルUI/UXのキホン」って勉強会のレポート！
10/4に渋谷で開催された「モバイルUI/UXのキホン」 に参加しました。2011年からいろいろなテーマで開催されている歴史のある勉強会なのと、ディスカッションや意見交換を通じた双方向性を大切にしている、学びの多い勉強会でした！ 今回は勉強会の中で特に参考になった点を書いていきます！ 🍣 発表スライド発表の際に使われたスライドです。しっかりとした内容です！ 発表スライドは「prezi」というサービスを使っているそうです。動きのあるカッコイイデザイン！ 🎃 UI/UXは最近のバズWordデジタルガジェットでは特にいえることですが、市場が成熟してきて機能的な差別化が難しくなってくると、ユーザーの体験(UX)が重視されるようになってくるそうです。スマホアプリケーションは特にこういった要素が強く、ココ最近は『UI/UX』がバズWordになっているそうです。 🐹 UI/UX/IAの言葉の定義ま
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗ
http://oalp.org/doc/nilesen/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
タブレット向けサイトの文字サイズは16pxがいいとの調査結果……イマドキの文字サイズの話 | 初代編集長ブログ―安田英久
今日は、タブレット端末でユーザーが好むWebサイトの調査結果を紹介しながら、昨今のユーザーがWebサイトを見るのに使っているデバイスにどう対応するかを少しだけ考えてみます。 タブレット端末で使いやすいサイトとは？「タブレット端末でのサイトユーザビリティ調査」というレポートを、IMJさんが発表していました。 ・ IMJ調査レポート「タブレット端末でのサイトユーザビリティ調査」 → http://www.imjp.co.jp/press/release/20130515_000959.html （リリース） → http://www.imjp.co.jp/press/assets/201305/imj20130515.pdf （調査データPDF） ざっくりその内容をまとめると、こんな感じです。 7インチタブレットユーザーの最大34％はスマートフォンサイトを支持 （でも大半がPC向け表示を支持）
ウェブサイトのユーザビリティに関する最高の秘訣20か条 ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
昨日、ウェブサイトのリーダビリティに関する記事を配信しましたが、意外と好評でした。ということで、2匹目のドジョウを狙って今回はユーザビリティについての記事を紹介したいと思います m(__)m ウェブデザイナーにもSEO担当者にも、基本ながら一読の価値ある内容。 — SEO Japan ユーザビリティは、ウェブサイトにとってものすごく大切なことだ。訪問者が素早く簡単に楽しくウェブサイトにアクセスしてそれを使うことができなければ、ウェブサイトの外観がどんなに格好良くても、コンテンツがどんなに素晴らしくても関係ないのだ。訪問者の多くは、ただ諦めて他のどこかに行ってしまうだろう。 それでは、どうやってできる限り使い易いウェブサイトを作ればいいのだろうか？あなたはラッキーだ。だって、この記事ではあなたのウェブサイトのために20個のユーザビリティの秘訣を特集しているのだ。テクノロジーは常に変化するため
ポータルサイトのデザインをする時に意識したこと5つ - Design Color
もくじ グローバルメニューを埋れさせない 色を使いすぎない 余白を空けすぎない 囲み線を多用・強調しすぎない サムネイルに黄金比や白銀比を使ってみる 1.グローバルメニューを埋れさせない ポータルサイトは情報量がとても多いです。ユーザーを迷わせないためには、画面が遷移しても変わらずそこにいてくれる「グローバルナビゲーション」は頼りになる存在です。それが他の情報に埋れてしまってはもったいないですよね。なので、デザイン時にはまずこの子に注目してみました。 白抜きのメリット 色々なサイトを観察していると、ナビゲーションバーに白抜きを使っているサイトが多く見られました。 調べてみたところ、白抜きは小さな文字でもやや大きく見えるというメリットがあるとか。なぜなら、白は「膨張色」だからです。 膨張色とは明度が高いことから、他の色に比べて膨らんだり広がったり錯覚する色のことです。白や明度の高い暖色系が膨
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
これは要チェック！豊かなユーザエクスペリエンスを与えるナビゲーション集
ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。 ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が読んでおきたい、最近公開されたおすすめのスライド
CoolCoding.com is for sale | HugeDomains