MoxbitMoxbitMoxbitとはお知らせお問い合わせキャラクター紹介WindowsやMac、iPhoneなどのガジェットからライフハックまで、幅広いジャンルを扱っているブログです。例も見させていただきました。白の部分(背景)がこんなに薄くても、結構変わるものなんですね・・・。Webデザインをするにあたって、まずはじめに“カラースキーム”という基本配色を決めておくと良いでしょう。minijumboと申します。自分のブログのことでアドバイスいただけたらと思いコメントさせていただきました。コメントWebデザインWebデザインで気をつけていること、使っている技法をまとめました。気をつけていることと言えば...忘れがちな“取り消し線は非推奨タグ”、だとか“floatの回り込み解除の確認”とかですか?ジャガアポーそうですね、今回は技術ではなく外観をテーマにしています。3原色の使用は控える皆さんご存じの通り、3原色は“赤”、“青”、“黄”の3色を表します。僕がカラー指定で気をつけていることは、3原色を使用しないことです。CSSやHTMLでカラー指定する場合は16進数で指定します。3原色である#ff0000#00ff00#0000ffを使わないということです。言ってしまえば#00ffffや#ffff00などの“fと0のみで表される色”は使いません。当サイトでも青色や赤色を使用していますが、青色といっても水色に近い青、赤色といってもオレンジに近い色を使用しています。背景が白や黒の場合、明るい色を使用すると美しく見えます。ここでの“明るい色”は白や黄色のことではなく、先述した“赤色ならオレンジに近い色に”や“青色なら水色に近い青色に”ということです。ジャガアポー3原色を使った配色(上)と、明るい色を使用した配色(下)です。明るい色を使うと美しい配色になりますが、3原色を使用したときと比べて強調が弱くなることに注意してください。全体の配色と考えて文字の配色を行ってください。変化が大きいグラデーションは使わない初心者がよく使っているように思えます。僕は変化が大きいグラデーションは使わないようにしています。理由はいくつかありますがそのうちの1つとして“変化が大きいグラデーションを背景にした場合、前面のカラーと合わなくなる場合がある”からです。変化が大きいグラデーション背景(左)と、変化が小さいグラデーション背景(右)です。同じ色系統ではない、異なる色(赤から青など)のグラデーションも控えた方が良さそうですね。ジャガアポーそうですね。「他色系統へのグラデーションは美しくない」と一概には言えませんが、参考画像の左側のようなグラデーションは美しいとは言えません。適切な強さの光彩やシャドーを使う文字に立体感を与える場合、“シャドー”という効果を使います。文字を輝かせたい場合は“光彩”という効果を与えます。どちらとも適切な加減で使えば美しいデザインになりますが、強すぎると気持ち悪いデザインになってしまいます。強すぎる光彩(上)と、適度な強さの光彩(下)です。縁は濃く、内枠は明るく文字に縁をつける技法は多くの方が行いますが、これも縁の太さや色に気をつけるように心がけています。私は縁だけでなく、内枠も加えるようにしています。グラデーション効果が与えられている文字や画像に縁をつける場合、縁の色は必ずグラデーションの最も濃い部分を使用するか、それよりも濃い色を使用しています。“白から灰色のグラデーション”の縁の色は濃い灰色にします。内枠を加える場合、内枠の色は白色に透明度を与えたものを使用するようにしています。効果を与えたテキストと図形です。図形のズームにも注目してください。グレアやストライプの効果を上手く使う表現技法の1つである、『グレア』や『ストライプ』の効果を上手く使うようにしましょう。使いすぎには注意です。横幅が長いボタンのグレア効果は“スクエアグレア”を、横幅が短いボタンは“サークルグレア”の効果を与えると良いでしょう。ストライプは不透明の白色を使用することをオススメします。ここら辺は場合によって配色が異なってくるので、自分で満足のいく配色を見つけましょう。ジャガアポースクエアグレア(左)と、サークルグレア(右)です。使用しすぎるとしつこくなるため注意が必要です。この記事で紹介したモノ-あとがきパイナポーいやー、いかがでしたかっ!?たかがWebデザイン、されどWebデザイン...。奥深しWebデザイン!ジャガアポーえーっと...って、前回の記事と同じような展開じゃないかっ!そろそろキャラクターの性格を決めた方が良いのでは...?パイナポーキャラクターねぇ...。“ドジっ子キャラ”で良いんじゃないですか!?みんなから愛されるキャラクターみたいな(笑)ジャガアポーえぇぇぇぇ...っ!!...まぁ、そのうち否が応でもキャラクターの性格が決まってくるでしょう。「この記事に登場するパイナポーくんの性格と、来年のパイナポーくんの性格が違う...」なんていう事態になるかもしれませんね(笑)それでは今回はこの辺で!記事は執筆時の情報に基づいており、現在では異なる場合があります。表情6コメントを投稿した際には、コメントガイドラインに同意したものとみなされます。minijumboと申します。自分のブログのことでアドバイスいただけたらと思いコメントさせていただきました。今ブログのデザインで薄い青をベースにしているのですが、出先で撮った写真などを載せると、画像によっては「薄い青」にマッチしなくて記事全体に違和感が出ます。いって画像の色合いをすべて青にするわけにもいきませんし・・・。16:36どもども、はじめまして。Webデザインをするにあたって、まずはじめに“カラースキーム”という基本配色を決めておくと良いでしょう。当サイトのカラースキームは“濃い水色”、“黒色”、“橙色”、“濃い黄緑色”の4つとなっています。カラースキームは3〜5色程度がベストではないでしょうか。minijumboさんは薄い青色をベースとしているようですが、白色と薄い青色だけではシンプルというよりも地味で、印象が薄いサイトになってしまいます。カラースキームを決めるだけでも統一感がでてきて、見やすいサイトになります!薄い青色の使用を前提とした場合、ちょっとクールに決めたければ無彩色の黒色を、優しい印象を与えたければ暖色系の橙色をカラースキームに加えてみてはいかがでしょうか。ちなみにですが、画像の背景に“付箋のような画像”を設定しておくと、画像を貼った時にあたかも写真をペタッと貼りつけたような感じを出すことができます。この“付箋のような画像”の付箋の色を白色にしておけば、サイトのカラースキームが何色であっても、画像をサイトの雰囲気になじませることができます。20:04とっても詳しい回答ありがとうございます!例も見させていただきました。白の部分(背景)がこんなに薄くても、結構変わるものなんですね・・・。いままでブログのデザインはテンプレをちょちょっといじくるだけで済ませていました(ちなみに前回は黒青でした)。新年になっていざ新しく作ってみようと思ったものの、難しいです。「カラースキーム」なんて知らなかったし(^-^;ちゃんと構想を練ってから、自分好みのものが作れるように頑張ってみます!今日このサイトを発見して、デザインも内容もすごく気に入りました(上からですみません)。楽しい記事とアドバイスありがとうございました。遊びに来ます(^o^)/コメントを投稿した際には、コメントガイドラインに同意したものとみなされます。表情1ニックネームコメントを投稿した際には、コメントガイドラインに同意したものとみなされます。OX.当サイトは『Retinaディスプレイ』に対応しています。