Posts Tagged ‘デザイナー’

ホワイトスペースを考慮して読みやすい文字組みを

2012-04-25

読みやすい文字組みにはルールがある

皆さんこんにちわ。

今回は印刷物をデザインする際に文字を読みやすくするための簡単な法則をお話しますね。

プロのデザイナーなら当たり前のようにやっていることかもしれませんが、文字組みの際にホワイトスペースを意識するということです。

ホワイトスペースとは文字を黒と考えた時の白い部分、つまり余白のことです。
この余白の取り方によっては、文字がとても読みにくくなってしまうことがあるのです。

下の文字組みを見て読みにくいと感じませんか?
行間が狭い文字組の図

では下図の文字組みはどうでしょうか?
先ほどより読みやすいと感じるのではないでしょうか?
字間より行間が広い図

実はホワイトスペースには下のようなルールがあります。

 字間 < 行間 < 段間

文字と文字の間の余白は、行と行の間の余白よりも狭くなくてはいけません。
また行と行の間の余白は、段組の段と段の間の余白よりも狭くなければならないのです。

読みやすい行間・段間の図

こうしたルールをきちんと守ることによって、読みやすい文字組みになるのです。

読みやすい文字組み


デザイナーなら知っておきたい 無料フォントダウンロードサイト
【まとめ】無料のデザイン・イラスト素材サイト

デザイナーなら知っておきたい デザイン黄金比

2012-03-28

黄金比をデザインに取り入れる方法

皆さんこんにちわ。

今回はデザインする時に参考にしたい黄金比についてお話しますね。
黄金比とは人が安定感や調和を感じ、最も美しいと思う比率です。
1 : (1+√5)÷2 という比率で約 1 : 1.618になります。

この黄金比はピラミッドなど古代の建築物や絵画の多くにも使われ、アップル社のロゴや製品、またキャノンのデジカメのデザインにも使われているようです。
美しいと評されている多くのものの中にこの比率が使われています。

またこの比率は美しいだけでなく機能や効率の点でも非常に優れています。
円周360°を 1 : (1+√5)÷2に分けると約137.5°という角度になり、これは黄金角と呼ばれています。
この黄金角は多くの植物が新たに成長する方向の角度です。

花びらが1つ前に生成された角度を基準にこの角度の方向に成長すると以前に生成されたどの花びらとも異なる方向に成長することができます。
花びらの生成が何回繰り返され、何周したとしても決して以前の花びらと同じ方向になることはないのです。
バラの花びらを観察するなら、納得して頂けるのではないでしょうか。

またこの比率は次の数列とも関連があります。
1,1,2,3,5,8,13,21,34 と来たら次にはどんな数が続くと思いますか?
次は55です。そしてその次は89。この数列にどんなルールがあるかお分かりになったでしょうか。
次に来る数は前の2つの数を合計したものになっていて、この数列はフィボナッチ数列と呼ばれています。
このフィボナッチ数列の隣り合った数の比は数列が進むにつれ、だんだんと黄金比に近づいていくのです。
1÷1=1 2÷1=2 3÷2=1.5 5÷3=1.6666 8÷5=1.6 13÷8=1.625 21÷13=1.61538…

さらに興味深いのは多くの花の花びらの枚数がこのフィボナッチ数列の数であるということです。
紫つゆくさ3 桜5 コスモス8 マリーゴールド13 マーガレット21などがその例です。

以下は黄金比とフィボナッチ数列を説明する「Nature by Numbers」という動画です。


Nature by Numbers

自然界のいたるところに存在し、人間が最も美しいと感じるこの黄金比をあなたのデザインにも取り入れてみるのはいかがでしょうか。

黄金比をデザインに利用する方法を解説したサイトを幾つかご紹介したいと思います。

webデザイン講座 おしゃれチップス

黄金比と白銀比をデザインに活用する方法が記述されています。

webデザイン講座 おしゃれチップス 黄金比と白銀比を活用しよう

 

coliss

矩形・マージン・パーツに黄金比を活用する方法が説明されています。

coliss 黄金比をサイトのデザインに取り入れる簡単な3つの方法

 

[Z]ZAPAブロ~グ2.0

1ヶ所の幅を指定すると、残りの幅を全て自動で計算してくれるツールです。

[Z]ZAPAブロ~グ2.0 Webデザイン黄金比計算ツール

 

Design Develop

黄金比をWEBデザインで簡単に利用できるWEBツール「Golden Ratio Calculator」の利用方法を説明しています。

Design Develop 黄金比でWEBデザイン「Golden Ratio Calculator」

 

Re:Creator’s Kansai

黄金比の利用方法を載せている色々なサイトを紹介しています。

Re:Creator’s Kansai Webデザインに黄金比を取り入れよう

 


デザイナーなら知っておきたい 無料フォントダウンロードサイト
【まとめ】無料のデザイン・イラスト素材サイト

デザイナーなら知っておきたい 無料で使えるカラーツール

2012-03-21

デザインの配色に迷ったら参考にできるサイト

皆さんこんにちわ。

今回は無料で使えるカラーツールについてお話しますね。
ご存知の通り色が与える印象はとても強いものです。
人を元気づけたり活動的にならせたりする色もあれば、気持ちを落ち着かせ冷静な気持ちにさせる色もあります。
私たちは知らず知らずのうちに目にするものの色から少なからず影響を受けているものですね。

ではこれをデザインする側の観点から考えてみましょう。
人にはそれぞれ好みの色があるものですが、プロのデザイナーなら自分の好みを優先させるよりも制作物の目的の達成に最も適した色選びをするはずです。
配色は見る人に特定のメッセージを伝え、時には人を何らかの行動へと促すこともあるからです。
では今制作しようとしている物を主に利用する性別や年代の人はどんな色を好むのでしょうか?
また扱っている企業を適切に表現するのはどんな配色でしょうか?

こうした色選びを自分で考えながら行うこともできますが、以下のサイトを参考にしてみるのはいかがでしょうか?

kuler

kulerサイトの図

kuler

 

Color Scheme Designer

類似色や補色の組み合わせの配色を表示してくれます。

Color Scheme Designerサイトの図

Color Scheme Designer

 

COLOR SCHEMER ONLINE

クリックした色に合った配色を表示してくれます。

color schemer onlineサイトの図

COLOR SCHEMER ONLINE

 

I Like Your Colors

URLを入力するとそのサイトで利用している色を抽出してくれます。

I Like Your Colorsサイトの図

I Like Your Colors

 

webセーフカラー配色辞典

各テーマごとに配色を表示してくれます。

配色辞典サイトの図

webセーフカラー配色辞典

 

Mariのいろえんぴつ

ホームページの配色やトーン別の配色を表示してくれます。

Mariのいろえんぴつサイトの図

Mariのいろえんぴつ


デザイナーなら知っておきたい 無料フォントダウンロードサイト
【まとめ】無料のデザイン・イラスト素材サイト

【まとめ】有料のデザイン・イラスト素材サイト

2011-10-24

皆さんこんにちは。
今日は有料のデザイン・イラスト素材サイトについて紹介します。
前回無料のデザイン・イラスト素材サイトを紹介しましたが、今日は「有料版」を紹介します。

有料ということもあり種類の多さはもちろん、色々な場面で使用可能となります。
無料と同じくサイトにより利用規約はありますが、無料よりも使える幅は確実に広がると思います。

オススメ有料デザイン・イラスト素材サイト

名前 特徴
YOURSTOCK 写真の金額がサイズにより異なり、定額プランも有。写真ダウンロードの際には要無料会員登録。
アフロ 膨大な数の写真がある。また読売新聞の写真も取り扱っている。要無料会員登録。
素材事典 CD-ROMにより素材を購入し利用する。また、素材辞典シリーズのうち高解像度データの要望が高いタイトルから厳選しより大きいサイズが利用できる素材辞典[R(アール)]シリーズというものがある。
フォトライブラリー 日本最大級の投稿型ストックフォト(写真販売)サイト。個人でも写真を公開・販売が出来る(ただし審査がある)
amanaimages 広告に使えるイメージ写真やTV、ニュース写真が800万点以上素材として用意されている。3Dモデリング素材もある。(要3DCGソフト)要会員登録。
paylessimages 料金の支払いが使い放題の「定額制サービス」か1点ずつ買える「プリペイド方式」とわかれている。要会員登録。
背景専門店みにくる ゲームやコミックの背景素材を著作権フリーで販売している。日常屋外や、学校といった様々な背景がある。
デジタルトーンスタジオ 漫画・イラスト・デザインなどに使用可能なデジタルトーンを販売している。他にもゲームや動画に使えるロイヤリティーフリー音楽素材の販売も行っている。要無料会員登録。
イラスト素材.com 全て500円で購入可能。7個以上お買い上げで金額が10%オフされる。また、データ形式を選んで購入することができる。(AI、EPS、JPEG、PNG)
For DESIGN シルエット素材やグラフィックス、フォトと多種多彩の素材が販売されている。フォーマットもAI、EPS、JPEG、PNGと用意されている。
Photooo 1点380円から購入できる。写真やイラストのほかにベクターでも購入が可能。
iStockphoto 購入する際はサイト特有のクレジットを購入しないと画像を買うことができない。写真やイラストのほかにオーディオやビデオも用意されている。要無料会員登録。
デジケット・コム 背景から立ち絵までゲーム作成に必要な素材が多彩に販売されている。会員登録をしなくても購入可能。
ビジンソザイ 女性ストックフォト限定の有料素材サイト。美容シーンに特化している。要無料会員登録。
PIXTA 素材を買うことはもちろん売ることも可能。要無料会員登録。 クリエイター数は89,000人以上。素材点数は194万点以上掲載されている。

いかがでしょうか?
一枚づつ購入できるサイトもあればまとめて購入できるサイトもありますので皆様の用途に適した素材をダウンロードしてくださいね^^

【まとめ】無料のデザイン・イラスト素材サイト

2011-10-18

皆さんこんにちは。

今日は無料のデザイン・イラスト素材サイトについて紹介します。
サイトを作る際に「可愛いアイコンやおしゃれな写真が欲しい・・でも自分では作成することができないし・・」とお悩みになることはありませんか?
そんな悩みを解決してくれるのが今回紹介するデザイン・イラストのフリー素材です。

しかしフリーだからといって好き勝手に使って良い訳ではありません。
必ず素材をお借りする前にチェックしなければならないのが「利用規約」です。
サイトによってイラストの加工の不可・直リンク禁止・商用利用について・・・などといった注意事項が異なります。
この利用規約は年月が経つと変化するサイトもありますので、必ず「利用規約」をチェックした後に利用して下さいね。

オススメ無料デザイン・イラスト素材サイト

名前 特徴
写真素材 足成 和の写真素材サイト。様々なアマチュアカメラマンが撮影した写真が素材として使用可能。
デザイン素材.com 素材を自由に加工でき、商用利用も可能。ただし素材として再配布する行為は禁止になっている。
0円のWEB素材屋
さん
プロのウェブデザイナーにより作られている素材サイト。加工や商用への利用も可能。ホームページやブログに素材に最適。
Image Life 個人・商用問わず無料で使用可能。直リンクは禁止なので要ダウンロード。JavaScript素材もある。
無料アイコン素材 サイトやチラシ作成の際に便利な素材を扱っているサイト。白黒でシンプルなアイコンがダウンロードできる。
Cool Liberty イラスト素材だけでなくWEBテンプレートやFLASH素材もダウンロードすることが可能。
1キロバイトの素材屋さん メジャーな無料イラスト素材サイト。タイトル通り、1KB以下のフリー素材を扱っている。
emStudio 配布されている素材の元になったIllustrator、Photoshopデータも無料配布している。
BB-WAVE ビジネスシーンで使用できる素材から地図のイラストといった一風変わった素材をダウンロードできる。ダウンロードするためには要無料会員登録が必要。
東京デート 商用、個人用、ホームページ用、各メディア、すべてに利用可能な東京専門の写真素材サイト。7000点以上掲載されている。
Free.Stocker 主にイタリアの写真を扱っているサイト。日めくり★イタリアというブログパーツも配布している。
PHOTO STOCKER 写真を扱っているフリー素材サイト。写真のジャンルごとにカテゴリーされている。商用の利用も可能。
modelpiece フリーの人物写真素材サイト。モデルごとに写真がわけられており、商用利用のサイトや広告に使用することも可能。
CG.フォト プロのグラフィックデザイナーがCG加工したデザイン画像作品が使用可能。カテゴリごとにわけられている。
PAKUTASO 高品質な素材サイト。「出来る限り高解像度の形式」の提供を心がけており、同系色だけを表示させる検索も可能。

いかがでしょうか?
フリーとは思えないほど素敵な素材ばかりですよね^^

次回は「有料のデザイン・イラスト素材サイト」を紹介いたします。

【まとめ】WEB制作に欠かせない?Firefox拡張機能

2011-10-07
皆さんこんにちは。今日はFirefox拡張機能について紹介します。

その前にまずFirefoxのインストール方法を説明しますね。

Firefoxのインストール方法

無料ダウンロードのリンクをクリック。

まず製品情報ページへ行き、無料ダウンロードのリンクをクリックします。

ダウンロードページ http://mozilla.jp/firefox/

Firefoxインストール

ファイルのダウンロード

「ファイルのダウンロード」のダイアログが表示されますので「実行」を選択しダウンロードを開始します。
ダウンロード完了後に自動的にインストールが開始されます。
なお「セキュリティの警告」ダイアログが表示された場合は、発行元が「Mozilla Corporation」であることを確認し、「実行する」を選択してください。

セットアップを開始します。

「Mozilla Firefox のセットアップ」の画面が表示されますので「次へ」をクリックします。

Firefoxインストール

「セットアップの種類」が表示されますので「標準インストール」を選択し「次へ」をクリックします。

Firefoxインストール

その後、インストールが始まります。「Mozilla Firefox のセットアップを完了します」画面が表示されたら「完了」をクリックします。

設定とデータのインポート

初めて起動する際に「設定移行ウィザード」が開き、「設定とデータのインポート」が表示されます。
インポートする対象のブラウザを選択し「次へ」をクリックします。データをインポートしない場合は「設定をインポートしない」を選択して下さい。
その後「ホームページの選択」が表示されます。「Firefox のスタートページ」 か、これまでと同じホームページ(Yahoo!・gooなど)設定を使用するかを選択し「次へ」をクリックします。
データが正常にインポートされると「インポート完了」が表示されます。この後 Firefox のウィンドウが自動的に開きます。
以上でインストールは完了です。

Firefox拡張機能

では早速本題に入ります。Firefoxには「拡張機能」という便利なものが有ります。
これはアドオンと言われ、Firefoxに便利な機能を追加できるといったものです。

そのアドオンの中でも今回はWEB制作に欠かせないものをまとめてみました!

WEB制作に欠かせないFirefox拡張機能まとめ

名前 特徴
ColorZilla Webページの様々な場所の色を簡単にチェックする事ができる。独特な色を見つけた場合、一瞬で調べることができるので時間がかからない。
Firebug CSSやHTML、JavaScriptの編集、表示といったことがリアルタイムに行えるツール。
Webアプリケーションの開発やWebデザインの調整に欠かせないツール。
IE View 見ているページ上で右クリックをすると Internet Explorer で開いてくれる。
MeasureIt Webページ上でサイズの計測が可能。
Opera View 見ているページ上で右クリックをするとOpera で開いてくれる。
Pearl Crescent Page Saver 簡単にスクリーンショットを画像として保存ができるアドオン。ページ全体や、表示されている一部分のみをキャプチャーすることが可能。PNGかJPG形式か選択できる。
Screen Grab こちらもスクリーンショットを画像として保存可能なアドオン。こちらはPNG形式のみの保存となる。
Web Developer ページを表示させながらのCSSの編集や、テーブルの枠やDIVタグの枠をページ上に色線で表示といったWEB制作には欠かせないアドオン。

Internet Explorerを使用されている方が一般的には多いと思うのですが、上記のような便利なアドオンを無料で追加できるので、Firefoxをまだ使ったことのない方は是非ダウンロードして使ってみてくださいね^^

【まとめ】デザイナーにとって必要なサイト

2011-08-26

皆さんこんにちは。今日はデザインをする上で欠かせないサイトを紹介します。
プロのWEBデザイナーもデザイナーの卵でもサイトを作成するにあたり悩むことってありますよね?
そんな貴方の悩みが少しでも解消されればと思い、調べてまいりました!

デザイナーが知っておかないと損なツールまとめ

名前 用途 特徴
Online HTML Editor HTML リアルタイムでプレビューができるHTMLエディタ。
Dreamweaverやホームページビルダーいらずでプレビューできます。
Realtime HTML Editor HTML こちらもリアルタイムで表示が確認できるHTMLエディタ。
HTMLがブラウザ上でどのように表示されるかをすぐに確認できます。
Typetester フォント検索 オンラインで、セレクトボックスで確認しながらフォントの設定ができるサイト。
フォントを設定し、文字を入力するだけでフォントの文字体が一瞬で分かる。
Firebug コーディング コーダーにはもはや必須ツールとなっているサイト。リアルタイムにCSS、HTMLの表示を確認しながらコーディング作業が可能。また、JavaScriptのデバッグと分析もできる。
Urbanfonts フォント探し ジャンルがそれぞれ分けられており、8000以上のフォントがダウンロードできるサイト。
What the Font? フォント探し 「このフォントは何だろう?」や「このフォントのライセンスが知りたいけど・・・」といった困ったことに対応してくれるのが、このフォント調べサイト。画像ファイルをアップロードすることで、それに近いフォントを検索してくれる。
IconFinder アイコン探し 全部で69123個と多くのアイコンが登録されているサイト。多種多様なアイコンからお目当てのアイコンを探す事が可能。
Find Icons アイコン探し 現在、30万個以上ものアイコンから検索できるアイコンサイト。日本語での検索に対応している。検索結果の量・質ともに実用に役立つレベル。
Colourlovers カラーツール 最近のカラーのパターンやトレンドといったウェブデザインから使われているカラー構成をピックアップして紹介するカラーサイト。
kuler カラーツール 様々な色の組み合わせ、配色パターンをWebブラウザー上で作成して、保存・公開もできる、一風変わったサービス。
DeviantART インスピ
レーション
10年以上運営しているデザインのコミュニティサイト。様々な方の作品があるのでデザインする際の参考になる。
Ember インスピ
レーション
WEBデザインからグラフィックデザイン等について、インスピレーションを得たり共有することができるサイト。
Best Web Gallery ウェブ
デザイン
ギャラリー
海外のWEBサイトを多く掲載しているWebギャラリーサイト。
Cacoo ワイヤー
フレーム作成
ワイヤーフレームやネットワーク図が簡単に作成できるサイト。要無料アカウント登録。
Designers Toolbox ワイヤー
フレーム作成
バナー作成をする際に非常に便利なサイト。色んな形の素材をダウンロード可能。
FavIcon Generator 便利なジェネレーター ファビコンがウェブ上で簡単につくれるサイト。右側にあるカラーピッカーで色を選び、ドット状の升目になっているキャンパスに絵を描いた後にダウンロードして画像を保存するだけでOK。
pForm 便利なジェネレーター スタイリッシュなフォーム作成を簡単にできるHTMLフォームジェネレータ。
Browsershots ブラウザ ほぼブラウザ全てを網羅した、ブラウザでの表示確認サイト。ただし全種類のブラウザ画像を生成するようにしているするとかなり時間がかかる。
Spoon Browser Sandbox ブラウザ 上記に同じくブラウザ表示確認サイト。
Dropboxr ファイル管理 WEB上に自分専用のハードディスクを持つことのできるオンラインストレージサービス。
Google docs ファイル管理 リアルタイムでシェアできるオンラインドキュメント。カレンダーやプレゼンの資料も管理・共有できる。企業で利用しているところも多い。
Quickly Code チートシート 数多くのチートシートがアーカイブされているサイト。チートシートとはカンニングペーパーという意味を持つ。
DevCheatSheet チートシート 上記と同じくチートシートサイト。
W3counter 解析サイト 無料のウェブサイト解析サイト。サイトを利用するユーザーはどのような傾向か?なども調べられるのでマーケティングに利用するのに最適。
PHOTOX オンライン
イメージ
エディタ
オンライン上で画像の編集が出来るサイト。使い方がPhotoshopに似ている。
Are My Sites Up? その他 サイトがダウンがした時などに知らせてくれるサイト。

調べてみると見事に英語圏のサイトがばかりになってしまいましたが、デザイナーの方ならきっと使いこなせる・・はずです!
この中で特に面白いな~と感じたのがIconFinderです。
英語で検索すると膨大な数のアイコンが・・・見ているだけでも楽しめます^^

上記のサイトを駆使し、素敵なWEBデザインを!
HP執事は全てのデザイナーを応援しています。

【お知らせ】アドビCS5を最大70%オフで販売中!

2011-04-01

アドビCS5が最大70%オフ!27万円割引になるチャンス!

当社の教育部門山梨県デザインスクール ウェブデザインスタジオ山梨へご入学いただくと、最新版のアドビCS5が最大70%オフ(27万円割引)で標準価格よりダンゼン安くご購入いただけます。

WEBデザインまたはDTPデザインコースの基礎編・応用編・実戦編が対象講座となり、アカデミックパッケージの購入資格が認定されます。以下はご購入いただけるアドビシステムズ社の対象アプリケーションソフト。

  • Adobe Creative Suite 5 Master Collection
  • Adobe Creative Suite 5 Design Premium
  • Adobe Creative Suite 5 Design Standard
  • Adobe Creative Suite 5 Web Premium
  • Adobe Creative Suite 5 Production Premium
  • Adobe Photoshop、Illustrator、In Design、など各種単品パッケージ

 

例えば一番人気のパッケージ「Adobe CS5 Design Premium」または「Adobe CS5 Web Premium」をご購入&ご受講いただく場合

正規版価格 249,900 円が、受講と同時申し込みで 99,600 円!!!でご提供

なんと 150,300 円差!という驚きの低価格です。

 

それではデザイナー憧れの最高峰のパッケージ「Adobe CS5 Master Collection」をご購入&ご受講いただく場合

正規版価格 397,950 円が、受講と同時申し込みで 123,000 円!!!でご提供

なんと 274,950 円差!約70%割引となります!このお値段なら「Adobe CS5 Master Collection」にも手が届きますね。

 

つまり、アプリケーションソフト(正規版)の予算内で アプリケーションソフト(アカデミック版)+デザインの勉強(デザイン教室)が可能です。浮いたお金でスキルアップや資格取得しちゃいましょう♪っていうお話です。

お問い合わせ・ご購入の相談は、山梨県デザインスクール ウェブデザインスタジオ山梨へご連絡ください。

 

アドビCS5が最大70%オフ!27万円割引になるチャンス!

© 2009 山梨県パソコン入門書 ホームページ執事(無料のパソコンオンラインスクール) Theme by ホームページデザイナー Powered by VISUAL LITERACY