レイアウトデザインの視点を増やす 思考＆Tips｜ハラヒロシ / デザインスタジオ・エル
はじめにこのnoteは、私がTwitterで発信した「デザインの思考＆Tips」のなかから、レイアウトデザインに関する内容を編集してまとめたものです。普段のデザイン業務で私が意識している、webデザインを中心としたレイアウトの考え方やTipsを紹介します。 「レイアウト」といっても、ただ単にドキュメント上に要素を置くのは誰でもできます。どんな素材にするか、どんな動線にするかを考えて位置を決めていくのが「デザイン・レイアウト」。こちらがデザイナーの仕事ですね。デザイナーは、達成したい目的のために秩序を与えつつ工夫していくことが求められます。 では、配置するにあたってどのようなことを意識したり注意すればよいでしょうか。 川の流れのようにレイアウトするにあたっては、情報の優先順位を決めてそれをボリュームで割り当てるのが基本です。ただし、これだけだと単に積み重ねているだけで流れが悪いので、視線が滑
モバイルデザインのために再確認すべきヒューリスティック原則
Jordanはビジュアルコミュニケーションに注目し、戦略やサービスデザイン、UX/UIを担当するアメリカのデザイナーです。 Jacob Nielsen氏は多くのデザインパターンを収集し、人間とコンピューターのインタラクションにおけるユーザビリティの構築を指導していました。そして1994年には、それまで学んできたことをユーザビリティヒューリスティックに反映し、それを用いた評価の原則を集めて公開しました。それから25年が経ち、コンピューターがスマートフォンに変わった現在においても、Nielsen氏の唱えた原則はいまだ揺るぎません。 人間中心デザインによってユーザーの重要性に対する認識が高まり、それに応じてデザインプロセスも形を変えてきました。Nielsen氏の唱える原則はあらゆるスクリーンにおいても普遍的ですが、モバイルデバイスの人気が高まり続ける現在、強調すべきはモバイルインターフェイスです
デザイン提案に説得力を持たせる6つのステップ（スライド付き） | ベイジの社長ブログ
Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki Ikeda｜note
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
デザインに迷ったら見直したい、50個の秘訣テクニック完全ガイド
海外デザインブログCanva Design School Blogで公開された「50 Beautifully Illustrated Graphics with Tips to Make You A Better Designer」より許可をもらい、まとめて日本語抄訳しています。 デザイナーは、フォントや色使い、イメージ写真、グラフィックデザインを利用することで、ユーザーを惹きつけるストーリーを描きます。作家が物語を考えるときに、いくつかのコツやテクニックがあるように、デザイナーにもうまくメッセージを引き出す秘訣があります。 その方法は、文字テキストのサイズを調整したり、背景イメージ写真を暗くしメッセージを読みやすくするなど、単純なことばかりです。しかし、文章をリズミカルに分割するなど、ちょっとした違いが大きな変化を生むような専門的なテクニックは、劇的なデザインの改善にも役立ちます。 今回
フィールドデザイン｜長野のホームページ・映像制作のWEBデザイン会社
ABOUT 観光客まで、つくります。 わたし達の暮らす「地域」には、 それぞれにたくさんの魅力があります。 その地域に暮らす人にとって「そこにあるもの」は、 その場所を訪れる人にとって「新たな感動」です。 フィールドデザインのテーマは「観光」。 地域の方々と共に感じ、語り、 伝えることがわたし達のミッションです。 WEB（ホームページ）制作・映像制作・写真撮影・ グラフィックデザイン・ツアープランニングなどを通じ、 その場所の魅力を最大限に引き出すことで、 まだ訪れたことのない人の感動を創出します。 旅から帰ってきた人が「行ってよかった」と、 温かい気持ちになってもらえる様に、 「地域」というフィールドをデザインします。 MORE GRAPHIC DESIGN チラシ、パンフレット、フライヤーなど商品の顔となる印刷物全般のデザインをご提案いたします。課題を抽出し、伝えたい情報をデザインで
Shneiderman氏の「インターフェイスデザインの８つの黄金律」とは
生産的でストレスのない、優れたUIをデザインしたいなら、Ben Shneiderman氏の「インターフェイスデザインの８つの黄金律」に従いましょう。Apple、Google、Microsoftは、Shneiderman氏のルールに沿った製品によって、大成功を収めた企業なのです。 Shneiderman氏の黄金律は、上記のような巨大企業が作成したさまざまなUIのガイドラインに見られます。これらの企業が生み出した人気の高いインターフェイスには、これらのルールがさらにわかりやすく実装されています。この記事では、８つの黄金律についてまとめ、インターフェイスを改善する方法を説明します。 Ben Shneiderman氏（1947年８月21日生まれ）は、アメリカのコンピュータ科学者、メリーランド大学 Human-Computer Interaction Lab.の教授です。彼の功績は、Don Norm
ユーザーが理解しやすいアイコンにするための６つのルール
人間とコンピュータとのやり取りにおいて、アイコンはテキストにはない長所がいくつかあります。 シンプルで分かりやすくフレンドリー。長い文章と置き換えることができる。 画面の中で場所を取らず、特に小さいスクリーンほど使い勝手がよい。 視覚的に楽しみがあり、デザインの芸術性を高めることができる。 一番重要なポイントとして、ほとんどのアプリがアイコンを用いており、ユーザーにとって親近感のあるデザインパターンである。 これらの潜在的な長所がある一方で、アイコンはその潜在的な短所を考慮せずにデザインされると、ユーサビリティ面での問題を引き起こします。 この記事では、UIの点からアイコンに関連した多くの問題を要約して解説し、これらの問題に対する対処法を述べていきたいと思います。 １．アイコンは意味を伝えるもの 理解しにくいアイコンが、伝えるべき機能を分かりにくくしてしまうことがあります。アイコンは意味を
わたしのデザインセオリー（写真マスク編） - デザイナーのイラストノート
この記事は「Webデザインセオリー Advent Calendar 2015」の11日目の記事です。@striveさんの「Webデザインの価値と効率を上げるため意識していること Webデザインセオリー Advent Calendar 2015」というとても戦略的でいい記事から一点、小手先の話ですみません・・・！ デザインに写真を使うときにわたしがよくしていること 「デザインセオリー」というと「これをやればデザインはOK！」みたいに聞こえますが、もちろんそんなことはなく、自分が画像をトリミングしたりマスクするとき、イメージや印象を伝えるために、どんな手法をよく使うかということを実例を交えながらご紹介します。 グラデーションマスクにこだわってみる メインイメージなどで、写真の上にメッセージを重ねるのはよくある手法ですね。例えばこの緑をバックにした女性の写真を使用して、上に文字を重ねましょう。
Webにも紙にも使える、囲み枠デザインの基本テクニック
2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20％オフ！」「期間限定！」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時
2015年Web・デザイン界隈で浸透しつつあるデザイントレンド15選
ホームページのデザインはある程度形式化されている部分もありますが、そんな中でもトレンドの変化があります。 特に近年では、スマートフォンが普及したことによりマルチデバイスに配慮する形でデザイントレンドも変わってきました。 その時代に最適なデザインを知っておくことで、ユーザーにとって使いやすく、見た目も優れたものを作ることが可能です。 デザインの機会がある方は、常に最新のトレンドを理解しておきましょう。 今回は、Web・デザイン界隈で特に浸透しつつあるデザイントレンドをまとめでご紹介します。 2015年話題のデザイントレンドまとめ 1.パララックス・デザイン ※このWebサイトは現在公開されていません 複数のイメージ画像、パーツを速度や方向を変えて動かすことで、奥行き感を表現するエフェクトです。 別名「視差効果」ともいい、こちらも2013年頃からパララックスデザインを取り入れたホームページを目
Kitasenju Design / 北千住デザイン
Experimentation and implementation of visual expression on interactive media. インタラクティブメディア上で視覚表現の実験と実装。
6万円分くらいデザイン集買ったら、デザイナー仕事がめっちゃ増えた話 | ベーコンさんの世界ブログ
2018-06-24追記 フリーランスのデザイナーのぼくにとっての「人生に影響を与えた1冊(今週のお題)は」「金額の高い仕事をもらうために、デザイナーがやるべきこと」（お客さんを納得させる方法）を教えてくれた本です。 簡単に本を紹介のあと、この本に関するぼくのストーリーを書きました。（ちょっと長いけど） 要約すると、お客さんを納得させる方法(そして給料を給料を上げる方法)がポイントだったなぁ。という話です。 ちょうど値上げを考えていた頃に、この本に出会った フリーのデザイナーを10年やっていますが、値上げは難しいものです。 値上げを考えていたちょうどその頃に、その本に出会いました。 もちろん、この本だけではないけれど、大幅に状況が変わったのは事実です、ちなみにこれは去年の話。 その本は、ただの1流デザイン作品集。でもそれを買ったら仕事の単価が上がった 自分に投資すると返ってくる。そんな言葉
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webデザイナーのためのギャラリー・サイトリンク集 / 1GUU
TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ
赤系のイタリアの伝統色【色見本】
日本デザインセンター | Nippon Design Center, Inc.
マテリアルカラー
[[title]]
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
