Webデザインマニュアル
色彩の知識や、基本的なフォントの持つ印象・便利なHTML+CSSなど、デザインにかかわることや、サイトの実制作にかかわることを紹介してます。
リストの横並び時に生まれる< li >の隙間を解決する5つの方法
ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。 個人的にメモしておいたものを、WEBにUPして管理...
デザインの必要性を考える【デザインとは】
以前、デザインの必要性が分からないというクライアント向けに作った簡単な資料をこのブログにUPしたんですが、読者の方から「よく分かりませんでした」とメールをいただいてしまいました。よく考えたら伝わらなくて当然だったかもしれません。このブログの読者はクリエイターが多いので、よく勉強されている人たちが見てくださっています。にも関わらすビジネスとして、仕事を請けるために作った資料を、そのまま掲載するなんて失礼でした。 そんなわけで、反省の意味もこめて、もう少し掘り下げてデザインの必要...
配色の基本。メイン・サブ・アクセントカラーを極める!
前回の[カラーデザインの基本。トーンを理解する!]と[カラーデザインの基本。色の三属性とは?]に引き続き、今回はメインカラー・サブカラー・アクセントカラーの基本ルールについて解説させていただきます。このメイン・サブ・アクセントカラーの基本ルール正しく理解すると、配色を考えるのが簡単になります。 頻繁に配色を悩む方や、デザインの途中で配色を変えてしまう方は、このメインカラー・サブカラー・アクセントカラーのルールを正しく理解できていない可能性があります。なので今回解説するこの記事...
新人デザイナーに教えたいWebデザインの基本原則【整列】
以前私は、デザインの勉強を一切したことの無いデザイナー志望の新入社員に、webデザインを教える教育係を任されたことがあります。 教育なんて簡単なんじゃないの?と安易に考えた私は、案の定痛い目を見たわけです。この日から1ヶ月間、私は毎日3時間残業する羽目になってしまいました。 人に教えるのは意外と難しく、何から教えたら良いのかすらわかりませんでした。ただやはり最初なんで基本が大事だろうと思い、先輩達のアドバイスを受けながら、【デザインの基本原則】を教えることになったわけです! ...
ブログを始めるに当たり、実際に導入したWPプラグイン 18選
かれこれ5年近くワードプレスを使用したWEB制作を行っていますが、昔から変わらずWPプラグインにはお世話になっています。 一からメールフォームを作るのは大変ですが(テストなどで時間がかかるので)、ワードプレスのプラグインを利用すれば、1分でメールフォームが導入できてしまいます。しかも無料で! そんなわけで、私は今でも多くのプラグインを利用させていただいているのですが、今回は、私が実際にこのブログで使っているお勧めしたい18個のWPプラグインを紹介したいと思います! 私が実際に...
カラーデザインの基本。トーンを理解する!
前回の[カラーデザインの基本。色の三属性とは?]に引き続き、カラーデザインの基礎を紹介したいと思います。今回は、色のトーンについて解説させていただきますが、まず『そもそもトーンとは何なのか』というところから話を進めさせていただきます。 クライアントに「トーンって何?」と聞かれて的確に答えられるデザイナーって結構少ないんです。あなたは答えられますか? なんとなく雰囲気はわかっていても、しっかり説明するのはなかなか難しいんです。私も昔は説明できないデザイナーの1人でした。では、早...
私が思うダメなWebデザイナーの特徴
今回は【私が思うダメなデザイナーの特徴】を紹介いたします。内容が内容だけに、反対意見も結構あると思います。また、一概には言えない所もあるので、正直書かなくても良いかなと思ったんですが、役に立つ事もあるかもしれないと思ったので、勝手ではありますが掲載させていただくことにしました。 新しい情報を取り入れようとしないデザイナー WEB業界に限らず、ビジネスの世界では情報が全てだといっても過言ではないくらい、情報は大切です。日々の情報収集がビジネスに役立つという場面は多々あります。な...
CSSだけで作るtableデザインテクニック
今回はCSSだけでデザインするtableのアイデアを2つ紹介したいと思います。 画像を作ったテーブルも多く見ますが、画像を使わずにも、なかなかカッコいいテーブルができますので、ぜひ参考にしてみてください。ここでは、線と塗りだけで表現するシンプルなテーブルを作ってみます。 7/22に第二段として[CSSだけで作るtableデザインテクニックVer.02(おまけ付き)]を公開しましたので、コチラもぜひ見てみてください! またテーブルはSEO的に良くないと考えている方がいましたら、...
カラーデザインの基本。色の三属性とは?
色の三属性とは、色相・明度・彩度の3つの事を言います。この3つの属性を正しく理解することがカラーデザインを極める第一歩となります。 色の三属性は本当に基本中の基本となる知識です。デザインに関わる人であれば、最低限知っていなければなりません。 色の三属性を理解しておかないと、色を使ったコミュニケーションを円滑に図ることが出来なくなります。例えば上司に「もっと暗いブルーで全体を落ち着いた印象にしてくれ」と頼まれても、あなたは上司のイメージしている色を再現出来ない可能性が高くなって...
ディーター・ラムスの「良いデザインの10原則」から学ぶ
以前、本屋さんでデザイン関係の本だったか、なんだったか忘れましたが、髭剃りメーカーで有名な「ブラウン」のデザイナーであるディーター・ラムスの「良いデザインの10の原則」という記事を読んだことがありました。今回はその記事がとても参考になったのでご紹介させていただきます。 内容は工業製品のデザインのための原則として挙げられたものなんですが、WEBデザインにも参考になる内容です。 うろ覚えでしたので、VITSOEというサイトに詳しい説明が載っていたので引用させていただきます。 「良...