UIにも必要な錯視への考慮、デザイナーが行う視覚調整｜Goodpatch Blog グッドパッチブログ
視覚調整は、人間の脳に対して視覚的なアプローチをとることが多いデザイナーにとって大切なスキルです。 今回は、UIデザイナーが行う視覚調整の主な例を紹介していきます。 視覚調整とは 視覚調整とは、人間の錯視（目の錯覚）を考慮したデザインの調整のことを指します。 身近な企業ロゴに施されていることも多く、Googleのロゴでも取り入れられています。（以下の画像は、Googleのロゴを考察したツイート↓） Is this a joke, Google? pic.twitter.com/qrL8U2Vrhw — Give Me Internet (@GiveMeInternet) 2017年9月25日 この考察内容を見ても、調整前と調整後の違いはかなり微量であるように思えます。本当にここまで細かい調整が行われているのかと疑ってしまいたくなりますが、実際にこのような微妙なデザインの調整はUIデザインに
デザイナーなら気にしておきたい余白のこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おつかれさまです。デザイナーのみやです。 みなさまは余白についてどの程度気にしていますか？ 限られたスペースに情報を盛り込む紙のデザインに比べて、余白を大きく置くというアプローチができるのはWebデザインの特徴かと思います。 余白の扱いというのは難しく経験が必要なものだと思っていますが、意識するかしないかでもアプローチは変わってくるものです。 今回はデザインをする上で、気にしている余白の使い方について、僕なりの方法をお話していきます。 余白の考え方 余白はデザインをする上で重要な要素の一つです。 「余白を埋める」という言葉はありますが、ただできてしまった余白というのは「空間」になってしまっていることが多いです。上手なデザインを見ていると、だいたいの場合、余白は「置かれている」ものであって、意味があってそこに存在しています。ドーナッツの穴の話みたいな哲学的なこと言っていますが、余白を上手に使
Illustratorを使ったロゴ作成テクニック！クオリティアップの一手間を解説
こんにちは、Webデザイナーのゆうこです。ふだんの業務でロゴ制作を担当させていただくことがよくあります。 ロゴ制作って楽しいですよね。自分が作ったロゴが会社やお店で使われているのを見ると、嬉しくてわくわくします。 今回はロゴ制作の過程と、デザイナー初心者の方でもすぐに使える、Illustratorでのロゴデザインの小ワザをいくつかご紹介したいと思います。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。デジLIGでは、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と、手厚すぎる就職支援が特徴！ぜひ一度詳細をチェックしてみてください 👉「デジタルハリウッドSTUDIO by LIG」詳細へ 👉スクールの概要が詳しく分かる資料のご請求はこちら！ 💡ロゴ制作会社お
画像の余白を自然に埋めるならPhotoshopの「コンテンツに応じて拡大・縮小」機能がめっちゃ便利。
覚えとくと便利シリーズ。 本日も“monograph”をお読みいただきありがとうございます。 PITE.（@infoNumber333)です。 最近WEARを初めて少しずつコーディネートを上げ始めたのですが、まだ写真を撮るのに慣れてなく現像してから失敗したなということがしばしば。 例えばこれなんですけど、カメラの縦横比とWEARの画像フォーマットが違うことに気づいてなくて、アップロードする時に左右に白い余白が入ってしまうということが起きてしまいました。その辺も考慮して多少引き目で撮った方が良かったんですね。勉強になりました。 まぁもう一回撮り直せよって話なんですが外は暑いし面倒なのでパソコンの力を使ってどうにか縦横比をいい感じに調整しましたというのが今回の話です。 同じようなお悩みを抱えている方は是非ご参考にして下さい。 今回は画像加工の定番Photoshopを使っていきます。Photos
デザインカンプから学ぶWebデザイン ｜ 枚方のホームページ制作｜和風デザイン専門店ひだちデザイン
Webデザイナーで入社したのにコーダーになってしまったWebデザイナーで採用されたのにコーダーのポディションに配置されることはしばしばあります。 特に未経験だったり、日の浅いデザイナーに多いです。 Webデザインの知識を一日も早く吸収してWebデザイナーとして一人前になりたい！そう思われることだと思います。 しかし！熟練のデザイナーさんのつくるデザインカンプに毎日触れるコーダーからもWEBデザインの知識を得ることは沢山あります。 コーダーだった私がWebデザイナーに転身した経験を踏まえてデザインカンプからWebデザインの知識を蓄える方法を書いていきます。 デザインの意図深く考えるコーディングする際にこのデザインはどういう意図でデザインされているかを深く考える事が重要です。 配色、隙間、配置、大きさ、線の太さなど・・・ これらの全ては、コーディングする際には全て確認していることかと思いますの
Webデザインで文字組みを考えるときに押さえたい5つのポイント | 東京上野のWeb制作会社LIG
おつかれさまです。デザイナーのみやです。 文字組みって大変ですよね。。 特に日本語は漢字・ひらがな・カタカナ・英字・数字・記号が組み合わさる非常にややこしい言語なので、テキストをそのまま打ち込んだだけではバランスが悪く、見た目が美しくありません。 狭いところもあれば広いところもあります。 こんなとき、どんな工夫をすればよいのでしょうか？ Webデザインにおける文字組み そもそもWebで文字組みって必要なの？ と思う方もいるかもですが、SVGなどの技術の発達によって画像文字を使用する場面もかなり増えてきました。 ブランディングにおいてもコピーライティングが占める役割は大きいため、フォント選びや文字のバランスは重要です。 たとえば漢字だけを組み合わせてできた熟語の場合は、文字自体の持っている幅が一定のためカーニングは必要ない場合が多いです。しかし、そんな熟語だけで構成するシチュエーションもほぼ
余白を制するものはデザインを制する。ホワイトスペースとの上手な付き合い方。｜YWCD
こんにちは、YWCDシモナガです。 今回はデザインするにあたって非常に大きな存在の「余白」について語っていきますよ。 余白って聞くと「スカスカしそう」だとか「スペースが無駄」とかよく思われ、ついつい余計な画像や文字等を入れて埋められてしまいがちですが、 実はそんなことはない！ と私は言いたい！ デザインする上で、余白を素材の一つとして取り入れることで紙面が見やすくなる＝余白がデザインになるんです。 今日は、そんな余白のお話。 目次 余白ってなに? 余白の効果とは?! ① 情報の干渉緩和 ② 情報の区分け ③ 視線誘導 ④ 紙面を印象づける まとめ 1.余白ってなに? さて、根本的なところからですか、余白って名前に「余る」という字が入っているからといって 余計なものと思ってたりしませんか？ ちなみにデザイン業界では「ホワイトスペース」って言ったりもします。 コトバンクによると、 引用元：コト
CSSで「余白」を制してデザイナーに好かれよう - Qiita
余白を制する者はデザインを制する らしい。 いろいろとデザインの記事を読んでみても、やはり余白は大事と書かれています。 「余白 デザイン」でググってみても、記事がわんさか出てくるので、やはりデザインにおいて余白は大事みたいですね。 Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 こちらはLIGの記事です。 これはデザイナー側が歩み寄ろうねという内容の話ですが、フロントエンド側も歩み寄ってもいいはずです。 最近はデザイナーがSketchでデザインし、フロントエンドがZeplinを見ながら実装するというのが主流になりつつあると思いますが、 それでも、デザインを学んできていないのにいきなり余白を気にしろと言われてもなかなか難しいですよね。 印刷物でしたら、デザイナーが作ったものがそのまま印刷されて配布されたり掲示されたりするので良いのですが、Webやアプリだとなかなかそ
デザイナーの考える「余白」とは何か書き下してみる - Qiita
直近だと…（2022/01/13追記） あれから4年近く経ち、私も転職したことで、デザイナーではなくなりました…。 この記事がたまに見られてるっぽいので、一応アップデートしておきます。 現代だと、gap という、まさしくこの記事の意図を表現するプロパティが出来たため、そちらを使うことを推奨します。 この記事の内容で書かれていた方は、コード内を margin-top で検索すれば、置き換えはそんなに難しくないのではないかと思います。 この記事は... 「CSSで「余白」を制してデザイナーに好かれよう」というとても素晴らしい，本当に有難い記事が上がっていたのを見て，じゃあデザイナー(主語がでかい)は余白をどう考えているのかを，CSSを書いている一デザイナーの身から書き下してみよう、というものです． 「余白」の意味の書き下しと『marginは下ではなく「上」で取る！』ことが多い理由の分析 「余白
【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーがロゴマークを作る時・使う時に知っておくべき「ロゴマニュアル」 | Swings