Webデザインで「やるべきこと」と「やってはいけないこと」
１.どんなデバイスでも同様の体験を提供する サイトの訪問者は、さまざまな種類のデバイスを使ってサイトにアクセスしています。デスクトップかもしれませんし、ラップトップやタブレット、携帯電話、音楽プレイヤー、または腕時計を使っているかもしれません。 UXデザインにおいて重要なのは、訪問者がどのようにサイトを閲覧しても、デバイスの種類に関わらず同様の経験を提供しなければならないことです。 ※編集部より：一部、誤訳がありましたので修正しました（11/10 11:00） ２. 使いやすくわかりやすいナビゲーションをデザインする ナビゲーションはユーザビリティにおける要です。どんなに良いWebサイトを作ったとしても、ユーザーがサイト内で上手く操作できないならば意味がないということを覚えておいてください。そのため、サイトのナビゲーションは以下の項目に従うべきなのです。 シンプル：どんなサイトであっても最
レスポンシブWebデザインのための２つのCSSテンプレート
最近では、Webデザイナーとして仕事をしていく上でレスポンシブ対応は必須のスキルになってきています。 スマホの普及率も高まっているので、今後も必要とされるスキルでしょう。 もちろんですが、レスポンシブ対応がきちっとできるだけで仕事の単価も上がります。 CSSのテンプレートを知る Webデザインの勉強を始めたばかりの時は、レスポンシブというと何か魔法のように聞こえることもあることでしょう。 とにかく耳にする機会は多いし、できたほうがいいという気はするんだけど、なかなか手をつけられない。 難しそうというイメージがかなりあるんですね。 ただ、実はレスポンシブ対応とはいってもCSSのメディアクエリというものを使って、1つのページについて3ページ分のCSSを書いているみたいなものなのです。 つまり、CSSが普通に書けるようになってしまえばレスポンシブだろうとあまり関係ないわけです。 簡単にメディアク
Webデザインを変えるとしても、以前のものをすぐには捨てないで
サイトの既存のデザインをいくつかのライバルサイトと一緒にテストすることで、新しいデザインに向けての有意義な洞察が得られる。競合調査によってユーザブルでない新機能の開発を避けられるのだ。 Redesigning Your Website? Don’t Ditch Your Old Design So Soon by Hoa Loranger on December 7, 2014 日本語版2015年1月19日公開 サイトのデザイン変更の準備はできている では、どこから始めればいいだろうか。プロジェクトが最初からうまくいくように手助けしてくれるUXの活動にはいろいろなものがある。その1つがユーザビリティの競合テストだ。すなわち、現在のデザインをいくつかのライバルサイトと一緒に、ユーザビリティについて調査するというものである。コンピュータに飛びついて、すぐにでもデザインを始めたいという気持ちは抑
マテリアルデザインのガイドラインが最高に実践的だった
「2014年にグッときたコレ」がテーマになる Fenrir Advent Calendar 2014 の24日目です。 マテリアルデザイン デザイナーの大西です。マテリアルデザインそのものへの記事は既に多くの方々が取り組まれているので、少し目先を変えてガイドラインについてです。 このガイドラインが最高に実践的でグッときました。 UI・UXについてのガイドラインは面白くて勉強にもなるのですが、理解して実践するところにまで到達するのには中々のエネルギーを使いませんか？ マテリアルデザインは英語のドキュメントなので最初は尻込みしましたが、読み進めるうちに内容の充実っぷりに引き込まれました。ここまで親切なガイドラインは珍しいと思います。和訳も欲しいところですが、用例として画像がたくさん挙げられているので翻訳サイトを使えば充分理解できると思います。 豊富なテンプレートと素材 750種類以上のアイコン
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
優れたWebサービスを作るために知っておきたい、UIを構成する5つの基礎的な要素 | Tokyo Otaku Mode Blog
悩み多きディレクターの皆様。 こんにちは。Tokyo Otaku Mode （以下TOM）ディレクターの青芝です。 Webサービスを考えるうえで、誰もが一度は頭を悩ませる UI （User Interface）。 User Interface（ユーザーインターフェイス）とは、ユーザーがWebサービスを利用するうえで直接操作する画面のことを指しますが、ひと言で「UI」と言っても、そこには文字や画像の見せ方、マウスのクリックや指のタッチに反応したときの動き、画面全体のレイアウトなど、さまざまな構成要素がかかわってきます。 それら一つひとつの性格や特徴を考慮し、しっかりと設計しておかなければ、使いやすいWebサービスを作ることはできません。今回は、WebサービスのUIを考える際に知っていると役立つ知識のなかから、基礎的な５つの要素を紹介していきます。 正しい文章構造について 人の感情を動かす色に
ユーザーの心に響くWebデザイン 5つのテクニックとそれぞれの実例 - digihows.com
参照：Leo Chuối ユーザー目線のデザインてどんなものだろう、と考えていた所、海外のWebデザイン研究サイト"onextrapixel.com"から面白い記事を見つけましたので、以下に翻訳してご紹介します。 （参照：Why Designers Should Design to Incite Emotions） ユーザーの心に響くウェブデザインとは ユーザーをひきつけるウェブサイト 感情を動かす・心に響くデザインの実現は、Webサイトの訪問者に格別なユーザーエクスペリエンスをもたらす最もパワフルな方法です。数年前までは、Webデザイナー達が気を払うべきは幾分か基礎的な事で済みました。例えばデザインをスタンダードなWebサイトに寄せて行くとか、明快なナビゲーションを付けるとか、適切なレイアウトやフォントを選択するといったことです。 広がるWebデザイナーの役割 しかし、現在ではWebデザ
１年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 - LITERALLY
Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。 今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの１年間に実行した8のステップ（デザインの勉強4＋Webデザインの勉強4）をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。 いちおう自己紹介を簡単に 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン（グラフィック・デザイン）
イケてるUIのデザインパターンを集めたサイト「Design Patterns on CodePen」 | ライフハッカー・ジャパン
「Design Patterns on CodePen」はイケてるUIのデザインパターンを集めたサイトです。CodePenというHTML、CSS、JavaScriptのコードを共有することができるサイトがあります。その中から、特に優れたUIを集めたのがこのサイトになります。その場で実行され、動作の確認もできますし便利ですね。 以下に使ってみた様子を載せておきます。まずDesign Patterns on CodePenへアクセスしましょう。「ボタン」「メールフォーム」「ページング」「タブ」などのUIパーツごとにカテゴライズされています。 詳細はこのように表示されます。コードが上部にあり、下部にそれを実行した結果が表示されます。コードを書き換えるとリアルタイムで結果も変わるので便利ですね。気に入ったUIを見つけたら、その作り方を参考にしてみましょう。ぜひUIを考える際にもご活用ください。 D
【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。
【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。2014.10.13 WEBデザイナーは技術はもちろん、手持ちのリソース（情報など）が多いほど有益なデザインを完成させることができます。 しかし海外の素材サイトは、ウイルスリスクの懸念や利用規約も英語で理解できなかったり曖昧だったりでちょっと怖いイメージがあります。特に商用で利用したい場合にはしっかりと利用規約を確認することができる日本で運営しているサイトのが安心ですね。 ここでは本当に使えるWEBデザイナーご用達の商用フリーの素材サイトをまとめました、デザイナーに限らず趣味でサイトを運用している方にも保存版の8サイトをご紹介します。 PAKUTASO5000枚近く（2015/10時点）の写真素材を保有するパクタソは管理者の方が手間を惜しまず写真を1枚1枚選別し、さらにノイズ処理や補正、トリミングなどを行
クソエンジニアが最速でそれなりのWebデザインをできるようになる方法 - UIU
趣味などでWebサービスを作るときにもっとも悩ましいことのひとつがデザインだと思う。外観は重要な要素だとは理解しているし興味も一応あるけれど、実践に乏しいからどうしていいのかわからない。かといって、タダで頼めるような都合のいいデザイナーはいない。結局めんどうになって、Twitter Bootstrapで体裁だけでっち上げた妙にオタク臭いデザインになってしまう。僕もかつてはデザインを気にも留めないクソエンジニアだったけど、必要に迫られて勉強したらそれなりに手を動かせるようになったのでその方法を紹介する。僕が今年入社したスタートアップにはデザイナーがおらず、新機能を作るときなど仕方なくデザインをこなす必要があった。結果的に、仕方ないなりにPhotoshopを使ってプロトタイプを作りHTML/CSSコーディングするくらいはできるようになった。ここに書くのは仕方なくそれなりのWebデザインをする方
切れないハサミと使えないWebデザイン | ベイジの社長ブログ
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方
一年くらい前は、フラットはただのトレンドでしょ、と言われることもありましたが、この一年で日本でも多くのWebサイトで採用されており、一過性のものではなくなりました。これから制作されるサイトの多くでフラットが採用され、またどんどん進化していくことと思います。 そんなフラットの見た目的な美しさだけでなく、実際に改善された事例を元にした効果な使い方を紹介します。 How Flat Design Increases Conversion Rates 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。� 海外のブロガーから日本の他ブログでの無断転載や無断翻訳を聞くのでご注意ください。削除依頼しても無視っていうからひどい。 ミニマリズムがコンバージョンレートを261%増やした例 コンテンツファーストとモバイルファースト ボタンのデザインを変えたらコン
まさに今、読むべき一冊「現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3」 / Maka-Veli .com
友人が本を共著で書いたというので購入。 予想以上に面白かったのでご紹介です。買って良かった！ 内容はというと、 例えばこのように最近のトレンドについて具体的なことが書かれていたり 役立つツール集のページがあったり 参考になるサイトや書籍のまとめがあったり プロトタイピングツールの紹介がまとめられていたり 具体的に導入方法も紹介されていたり 総ページ数160ページでびっしり盛りだくさん書かれているので読んだ後に色んな知識が得られるのはもちろんなのですが、Amazonレビューにもあるように著名な方々が書かれてる事もあって、デザインに対するさまざまな視点だったり考え方だったりを汲み取って読んでいくのが非常に楽しめる一冊でした。 友人から一言。 @maka_velicom この度は、ご紹介いただきありがとうございます。感想としては、今回は突然執筆のお話をいただきバタバタで終わり
Webデザイナーが捗る！知識を増やす最近のトレンドまとめ
作成：2014/09/29 更新：2014/11/01 Webデザイン > Webデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみたいものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 配色 １．ネオンカラー ２．washed out ３．グラデーション ４．マテリアルデザイン 模様 ５．ジオメトリー 背景 ６．背景色を時間の経過で変化させる ７．スクロールで背景固定、コンテンツだけ動かす 一部に動きをつける ８．シネマグラフ ９．線画 (SVG) １０．グリッチ UI・他 １１．ゴーストボタン １２．プレースホルダー １３．ローディングエフェクト １４．pushState １５．ドロアー レイアウト １６．タイルレイアウ
日本の伝統色が一目で分かり三原色・カラーコードも調べられる「NIPPON COLORS」
紅・山吹色・橙など日本古来の色の名称は実際にどんな色なのかイメージしづらいときがあるもので、そんな時に色を調べるのにもってこいなのが、様々な「日本の色」を知ることをできるサイト「NIPPON COLORS」です。 NIPPON COLORS - 日本の伝統色 http://nipponcolors.com/ NIPPON COLORSのトップページはこんな感じ。最初の画面は「櫨染(はじぞめ)」に設定されています。 知りたい色にカーソルを合わせてクリックすればOK。今回は撫子(なでしこ)をクリック。 クリックすると全画面が撫子色に変化。 撫子色の部分を良く見ると、カラーコードの番号も書かれています。撫子であれば「DC9FB4」。 色の三原色の配合も画面に表示されており、撫子色はC(シアン)が2、M(マゼンタ)が43、Y(イエロー)が3の配合。絵の具を混ぜて色を作ったりするときなどに参考になり
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
