分かるとWebデザインがもっと楽しくなる！考えてデザインする力が身につくオススメの書
何も考えずにPhotoshopやIllustratorを立ち上げ、デザイン作業に入ってしまうのは悪いクセ。 ユーザーをワクワクさせるデザインとはなにか？ この情報を分かりやすく伝えるデザインとはなにか？ クライアントの要望に応えるデザインとはなにか？ 考えてデザインする力が身につくオススメの本を紹介します。 グリッドや角丸を使う時もなんとなくではなく、その目的や効果的な使い方などしっかり身につけておきたいですね。 本書はコミュニケーションを軸に「人のことを考えたWebデザイン」ついて学び、Webデザインの思考のプロセスを身につけることができます。現役のデザイナーやディレクターの方には是非、手にとってほしい本です。 他のデザイン本とはかなり一線を画す内容となっています。 内容は大きく分けて、2つ。 1-3章はクライアントやチーム内でのコミュニケーション、4章からはユーザーとのコミュニケーショ
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
最近も相変わらず、レスポンシブWebデザインのお仕事が多いです。 最近は、PhotoshopやFireworksを使わない、デザイニングインザブラウザ（ブラウザ・イン・デザインともいいます）という手法でお仕事しています。 レスポンシブWebデザインのお仕事では、Photoshopでカンプを作る、いままでのワークフローに限界がきています。 なぜならば、Photoshopで対応する場合、マルチデバイスに対応たワークフローに対応するのが非常に困難だからです。 いまは過渡期であり、いろいろな人が、「新しいワークフロー」に向けて模索しています。 あの？Adobe社も、Adobe Edge Reflowなど、新しいワークフローのためのツールを開発してきています。 はじめて、デザイニングインザブラウザという言葉を聞いたのは、斉藤さん[誰]のインブラウザ デザイン | CSS Radar | Mini B
スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
ロゴデザインを学ぼうと思って読んだ本に「プロとしての生き方」を教わった話 | Webデザインのタネ
Webデザインは他の媒体デザインからも学べることが多々ありますね。今回は僕が実際に「ロゴデザイン・ラブ」という本を読んで、これだけは押さえておきたいなと感じたポイントを紹介します。 デザインの感想のもらい方を工夫する 著者は作ったロゴをお客さんに確認する際には「これでいかがでしょう」といった聞き方をせずに、ひとつ踏み込んでデザインをプレゼンしているようです。 デザインをプレゼンする際に事前にヒアリングしたことから背景をまとめ、新しいロゴでどこを目指すのか、デザインがもたらす実質的な利益についてもう一度復習します。そしてデザインを見せたあと、感想の話し方にも指示を出しています。 では、感想を聞かせてください。このデザインはすでに私たちの間で合意済みの戦略に沿ってると思いますか？ただし、問題がある場合に、解決策を結論づけて指示することはお控えください。それはあなた方から支払われる報酬の中で私た
切れないハサミと使えないWebデザイン | ベイジの社長ブログ
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
デザインは理屈で学べる！ エンジニア向けデザインメンター業が求められる理由について聞いた | HRナビ by リクルート
アイデアは面白いのに、どうもダサかったり、UIがわかりにくかったりするWebサービスに出会ったことはないだろうか。 それはもしかすると、デザインを知らないエンジニアが、ふわっとした感覚と印象で作っているからなのかもしれない。そんなエンジニアでも、デザインのセンスを身につけることはできるのだろうか？ プログラマー向けにデザインを教える“デザインメンター”赤塚妙子さんに話を聞いた。 プログラミングを学んだデザイナーが始めた“デザインメンター業“ 今年の1月から“デザインメンター業”を始めたフリーランス デザイナーの赤塚妙子さん。美大を卒業後、デザイン事務所に就職。その後、Webの世界へ足を踏み入れ、今ではRuby on Railsの開発に参加するまでになった。 「自分がプログラミングを覚える中で、デザイナーとプログラマーが歩み寄る感じが面白くって。デザイナーがプログラミングを覚えることはあるけ
カスタマージャーニーマップが使える理由と注意点 : could
デザインに使えるマーケティングツール カスタマージャーニーマップ（Customer Journey Map, CJM）は、顧客がどのように製品やサービスと関わるかを視覚化することによって、課題を共有することができるツール。デザインプロセスの一部として採用されるようになりましたが、マーケティングでは顧客との接点を俯瞰して見ることができるということで 5, 6 年前くらいから注目を集めています。（外来語をそのままカタカナ表記にしたくなかったということで「体験のマッピング」と名付けて以前から実践しています。） オンラインでもオフラインでも顧客との接点は劇的に増えました。しかし、接点が増えたことにより利用者行動の多様化が進んだだけでなく、接点になる場所・媒体の浮き沈みも激しくなりました。また、企業やブランドに関わる利用者の心理や行動も変化してきているので「A と B と C でコンテンツやサービス
飲食店のホームページは、格好良さよりも、ユーザーニーズとUXを重視すべし | 初代編集長ブログ―安田英久
今日は、飲食店のホームページはどうあるべきかについて。お店の雰囲気に合ったステキなデザインのホームページも良いのですが、サイトを訪れる人が求めている地図や営業時間といった情報を探しにくいサイトは、UX的に問題ありだと思うんですよ。 ようやく週末に余裕ができたので、ちょっと前に話題になっていた飲食店を訪れました。ところが、お店のことを調べようとホームページをチェックしたところ、こんな風なストレスを感じました。 ナビゲーションが全部英語で「ABOUT」とか「MENU」とか書かれていて、そのリンクをクリックした先で得られるものが、一瞬ではピンとこない。 地図や住所がどこに書かれているのかわからない。探してみたところ、ナビゲーション内の「SHOP DATA」をクリックした先にあった（でもなぜかサイトフッターのリンクは「店舗情報」となっている）。 店への行き方を調べるためにGoogleマップを使おう
【バナーデザインの教科書】訴求したいイメージ別｜王道デザイン8選！ | LISKUL
「どうすればこの商材の魅力を最大限に伝えるバナーができるの？」 このような悩みを持つデザイナーさんはたくさんいらっしゃると思います。 よくある「バナーデザインまとめ」のようなサイトを閲覧してもイメージ別のデザイン（配色やフォント）の特徴が見えず、毎回まとめサイトを参考にしていると作業がなかなか進まず、イライラすることもあるでしょう。 そんな方のために今回は訴求したいイメージ別のバナーデザインの特徴をお教えます。 「安心感や信頼感」「誠実さ」「かわいい」「お得感」「先進性」など訴求したいイメージごとに最適なフォントや配色、その他の特徴をまとめて紹介していますので、ご自身が制作したいバナーのイメージに合わせてご覧下さい。 コンバージョンする！高品質なバナー作成方法 【はじめに】デザインイメージ図今回は日本カラーデザイン研究所の配色イメージスケール図をベースとしてイメージ別のバナーデザインをまと
参考にしたいCSSでできるテーブルデザイン10選
こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんですよね・・。 Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。 こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co.uk/csstablegallery/tables/42.php 黒を基調に、リンクに青色を使っているテーブルです。 英語だからいいのかもしれないのですがスタイリッシュなテーブルです。 Casablanca http://icant.co.uk/csstablegallery/tables/71.php グレーと赤を使ったテーブル。色
「紙っぽいデザイン」の特徴を盗め！イベントポスター事例から学ぶ、紙っぽいデザインの特徴 | デザイン | ブログ | 東京のWeb制作会社・ホームページ制作｜QUOITWORKS Inc.（株式会社クオートワークス）
クオートワークスのブログ 東京のWeb制作会社 株式会社クオートワークスのブログです。ここではWeb制作におけるノウハウやナレッジ、ビジネスに関する覚書などまとめて発信しております。 quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね！みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙（ポスター、雑誌）のような完成図をイメージされることが多いのではないのでしょ
将来のWebサイトにおけるデザイン制作について割りとそこそこまじめに考えてみた。 – yutarofuji
こちらの記事”How to get started with next-generation website prototyping“を読んで次世代のWeb制作とはなんだろうと考えてみた。 次世代のWebサイトプロトタイピングとは 先ほど記事で紹介している内容としては、従来型のグラフィックツールを使ってゴリゴリとデザインを作成していくようなフローではなく、よりグラフィカルなアプリケーションを使って直感的にWebサイトやアプリを制作していくという事が書かれている。この記事では主に以下6つのアプリケーションが紹介されている。 Origami MAX Vuo Briefs Framer.js RealTime Studio どのアプリもグラフィカルなUIを備えていて直感的にパーツを組み合ることができるノード形式になっていて、まるでパズルを組み上げていくかのようにWebサイトやアプリを制作すること
なぜ多くのECサイトはデザインに失敗するのか 発注してはNGなWebデザイナー2つのタイプ
ECサイトデザインにお悩みの皆さん、その理由解明します モールに出店し、オリジナル商品を販売しているお店の皆さまにお伺いします。Webデザイナーに商品ページを外注したら、キレイだけどイマイチだったことはありませんか？ 社内で元Webデザイナーを抱えているけど、どうも売り上げに繋がってないと感じていませんか？ そう、優れたWebデザイナーが、良いECデザイナーになるというわけではないのです。 私もWebデザイナーからECデザイナーに転向した1人です。一般的なWebデザインと、ECデザインは、似て異なるもの。「商品を売る」ことに特化し、スピードを重視するECの世界は、知らないことが多々あるのはもちろん、常識を覆されたことも数知れず。当初は、かなりカルチャーショックを受けたものです。 同じように、ECでうまくいかないWebデザイナーも多く見てきました。「WebデザイナーがECデザイナーになると失
シングルカラムから始める情報設計
横並びは複雑化の第一歩 Webサイトの設計をする際、必ずといっていいほど縦にコンテンツを並べて構成を考えるようにしています。どのような人が、何を求めて Web サイトに訪れているのかというシナリオを基に構成を考えていくわけです。詳細なレイアウトを考えるのではなく、情報の流れが適切であるかどうかを判断するための工程にしています。 パソコン向けの Web サイトデザインの悪い癖のひとつに、「同じくらい重要だったら、横に並べる」というのがあります。広いスペースがあったパソコンが主流の時代ならではのアプローチですが、今は状況が大きく異なります。配信者側にとっての『重要』を出すことは間違っていません。しかし、あれこれ重要だからという理由で隣り合わせにしてしまうと、様々なデメリットが生まれます。 訪問者に迷いが生じる 直接関係のないコンテンツが横に並ぶことで視点の動きが多くなる可能性があります。また、
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
6月25日（水）、竹橋マイナビルームにてマイナビ様が主催する「Creator’s Career Lounge（以下、CCL） vol.6」が開催され、FICCから戸塚、福岡、冨田、STANDARD社から鈴木 健一氏が登壇しました。「Webデザイントレンドの潮流」をテーマに、これまでのWebデザインが歩んだ歴史と背景、そして現在Webの現場で活躍するWebデザイン技法についての講演のスライドです。 ・FICCは一緒に働きたい人を募集しています。 【詳しくは】 http://www.ficc.jp/recruit/ ・STANDARDは、スマートフォンアプリやWebサイト Webサービス等のUIデザインに特化したプロダクションです。 人の役に立つアプリやサービス制作に携わりたい人を募集します。 【詳しくは】 http://www.standardinc.jp ・Web業界で活躍したい人のための
![[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法](https://cdn-ak-scissors.b.st-hatena.com/image/square/553b114c1d27ed1c0846b1a36a93b06d4bfd371f/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fcclslide20140708-140717040232-phpapp01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
広告用バナー、こうやって考えてつくってリサイズしてます（実演付） ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
こんにちは、デザイナーのかわさきです。 マウントレーニア（カフェラッテ）の美味しい季節になってきました（個人的に）。ちなみに「コーヒー豆2倍」が売りのダブルシリーズはレッドブル並みに目が覚めるので、眠たい時におすすめです。 さて本題です。 マグネッツでは普段お仕事にて広告用のバナーもよくご依頼いただき、制作しているのですが、今回は受注からデザイン制作・サイズパターン制作までの流れを、実例をつくりながら解説してみようと思います。 目次 まずは着手前に確認！ 出稿先を確認 バナーの必要サイズ・規定を確認 誘導先のページを確認 納期の確認 バナーに掲載する情報やデザインテイストを確認 では、架空のバナーで実演してみます 前提条件を改めて確認 それでは、早速作っていきます！ リサイズしていきます 終わりに まずは着手前に確認！ 出稿先を確認 掲載する媒体やメディア（PC向け/スマーホフォン向けなど
英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | 初代編集長ブログ―安田英久
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス（GDS）」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府（gov.uk）のサイトには、「デザイン原則（Design Principles）」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
株式会社ガイアックスの公式サイト › ガイアックスオフィシャルサイト
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
