あなたのWebデザインをレベルアップさせる書籍【厳選17冊】 - paiza times
Photo by Marcy Leigh こんにちは。谷口です。 現在、Webデザイナーとして働いている皆様はどんな書籍を読んでいますか？ 最近は、基礎的なデザインの勉強をしてきた方だけでなく、もともとITエンジニアとしてWebサービスの開発をする中で、Webデザインもすることになったという方も多くいらっしゃるかと思います。 今回は、Webデザインの仕事をしている方々が、デザインをするに当たってジャンルごとに役立つ書籍を17冊ご紹介いたします。 目次 ・IA、UI、UX ・レイアウト ・配色 ・HTML/CSS ・CMS組込み ・デザイン技法 ■IA、UI、UX ◆1.IAシンキング Web制作者・担当者のためのIA思考術 IAシンキング Web制作者・担当者のためのIA思考術 作者: 坂本貴史,宮崎綾子,長谷川恭久出版社/メーカー: ワークスコーポレーション発売日: 2011/03/29
【まとめ】デザインが素敵！使い易さに特化してる！的なWebサイト１０選 - Love＆Peace
はじめに 私が直感で”素敵だなぁ”と思ったWebサイトをご紹介します。日々様々な情報を得る為にホームページを見に行く訳ですが、その中でも見た目のデザインや使いやすさに特化したWebページを自分なりにまとめてみました。 目次 はじめに 横浜中華街オフィシャルサイト 転職サイトGreen（グリーン） ワーナーミュージック・ジャパン 北欧、暮らしの道具箱 通販ベルメゾン ミニラボ（minilabo） 箱庭 haconiwa ドラおじさんの薬剤師・転職相談室 feve casa オンライン住宅雑誌 ZERO-CUBE MALIBU×カリフォルニア工務店のコラボハウス 写真・イラスト・動画などの素材屋「１２３R」 さいごに 横浜中華街オフィシャルサイト www.chinatown.or.jp 横浜中華街で「美味しい飲食店はないかなー？」と探していた時に出会ったのがこちらのWebサイトです。全体の雰囲
『「AWA」のデザインはどのようにして作られたのか。』
こんにちは。 AWAでアートディレクション／デザイン／ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは？ AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初
シンプルの心理学 ― 心地良いデザインのために | POSTD
私たちの誰もが理解する”シンプル”という概念の正体を突き止めることは、難しそうに見えますが、実はそうでもありません。 私たちが製品やWebサイトをシンプルと感じるかどうかの背景には、”見れば分かる”ということだけではなく、単なる直観的な反応にとどまらない何かがあります。 Steve Jobs は次のように述べています。 シンプルであることは、複雑であることより難しい場合がある。物事をシンプルにするためには、思考を整理して懸命に考えなくてはならない。しかし、努力する価値はある。ひとたび達成すれば、山をも動かすことができるのだから。 シンプルにものを作ることにそんなに力があるのであれば、なぜ私たちはそうできないのでしょうか。 なぜシンプルであることは、こうも複雑なのでしょうか。 人生における多くの事柄と同じように、シンプルさには表面的に見えている以上の何かがあります。ここでは、私たちの脳が新し
illustratorでUIデザイン：設定編 - Two hats
Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。 Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。 ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。 今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のill
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
グッドデザイン賞を獲得した7つのサイトから学ぶ、ウェブデザインの12のテクニック | LISKUL
photo by Robert S. Donovanウェブデザインを担当していると、星の数ほどある他のサイトたちに自社のサイトが埋もれてしまわないか、心配になりますよね。 そこで、ユーザーに評判のよいサイトを作るために、プロデザイナーたちから優秀だと認められたサイトデザインを参考にしてみるのはいかがでしょうか？ この記事では、2013～2011年の3年間にグッドデザイン賞に選ばれたウェブサイト7つから、自社サイトに活かしたい12個のデザインテクニックをまとめて紹介いたします。 受賞作品を参考に、ヒットするウェブサイトを作りましょう！ 参考：BtoB製造業のWebサイト参考事例9選と、ホームページ作成の3つのポイント グッドデザイン賞とは？1957年に創設された日本で唯一の総合的なデザイン賞で、毎年企業やデザイナーから40,000件以上の応募があり、よいデザインを示す賞として広く親しまれてい
見ないと損する便利なデザイナー向けWebサービス13選 | SONICMOOV LAB
こんにちは。 緑のにおいが気持ち良い季節になってきましたね。3月4月は花粉で涙をボロボロ流しながら生活していたのですが、やっと思う存分散歩ができそうです。 さっそくですが、デザイナー・クリエイターのみなさんは、自分の作品やスキルをアピールするために普段どのようなツールを使っているでしょうか？ 現在さまざまなWebサービスが出ており、うまく利用できれば活動や交流の幅が広がるはず！ そう思って今回はクリエイター向けのサービスをいくつかまとめました。 目次 UIアニメーションのヒントに ちょっとしたアニメーションを作るときに参考にしています。動きを眺めるだけでも面白く、インスピレーションがわきます。 CAPPTIVATE.co iPhoneアプリのUIアニメーションをカテゴリ別に紹介しています。マウスオンでアニメーションが確認でき、アプリのデザインやUIアニメーションなど、アプリ開発に大変役立ち
モバイルサイトのナビゲーションメニューは画面下に置くべき
2014年2月19日 スマートフォン, ユーザビリティ スマートフォンを使ってWebサイトを閲覧する人、どんどん増えてきています。モバイルブラウザーのシェアを見ても、そのユーザー数は無視できないものとなっています。サイトによってはデスクトップで閲覧する層より多いところもあるかもしれませんね。私がWebサイトの制作依頼を受けた際、モバイル対応は必須としてきましたが、モバイルユーザビリティについて再考してみたので、今回はナビゲーションメニューについて簡単に記事にしてみます。 ↑私が10年以上利用している会計ソフト！ よく見かけるWebサイトのナビゲーションメニュー 人気Webサイトギャラリー「The Best Designs」に掲載されている多くのWebサイトはメニューアイコンをロゴとともに画面上部に掲載しているのをよく見かけます。よく見かけるからと言ってこの場所に設置するのが本当に使いやすい
レスポンシブWebデザインで成功するUI／UXのポイント5つ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。 UI／UXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。 テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心に
奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ
【追記】Twitterで教えてもらったのですが、13行が改善されて3行になってました。ご対応頂いた市役所のご担当者様、富士通のご担当者様、お疲れ様でした。今後とも、よろしくお願いいたします。【追記終わり】 住民票を郵送で取り寄せようと思って市役所のサイトを見たんですよ。今まで何回も見てるし別に普通のクソみたいな使いづらい行政サイトだなって相変わらず思ってたんです。でもね、あれ、これはおかしいなって、思ったんです。なんかね、変だな～って。それがね、この画像なんですよ。 委任状 – 奈良市 すっごいパンくずなんですよ…パンくず食い過ぎてお腹いっぱい。マジで。 僕らの業界ってまぁどの業界でもそうだけど仕事の流儀とか、そういうのあるじゃないですか。使いやすいサイトを作りたい人、ある程度ユーザビリティを犠牲にするけどかっこいいサイトを作る人、でもこれ酷いでしょ。誰もパンくず13段にしろなんて望んでな
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
新着記事
iOS7でAppleが目指したのは「UIデザインの常識」の再発明である