Posts Tagged ‘デザイナー’
ホワイトスペースを考慮して読みやすい文字組みを
読みやすい文字組みにはルールがある
皆さんこんにちわ。
今回は印刷物をデザインする際に文字を読みやすくするための簡単な法則をお話しますね。
プロのデザイナーなら当たり前のようにやっていることかもしれませんが、文字組みの際にホワイトスペースを意識するということです。
ホワイトスペースとは文字を黒と考えた時の白い部分、つまり余白のことです。
この余白の取り方によっては、文字がとても読みにくくなってしまうことがあるのです。
下の文字組みを見て読みにくいと感じませんか？
では下図の文字組みはどうでしょうか？
先ほどより読みやすいと感じるのではないでしょうか？
実はホワイトスペースには下のようなルールがあります。
字間 ＜ 行間 ＜ 段間
文字と文字の間の余白は、行と行の間の余白よりも狭くなくてはいけません。
また行と行の間の余白は、段組の段と段の間の余白よりも狭くなければならないのです。
こうしたルールをきちんと守ることによって、読みやすい文字組みになるのです。
デザイナーなら知っておきたい デザイン黄金比
黄金比をデザインに取り入れる方法
皆さんこんにちわ。
今回はデザインする時に参考にしたい黄金比についてお話しますね。
黄金比とは人が安定感や調和を感じ、最も美しいと思う比率です。
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」という動画です。
自然界のいたるところに存在し、人間が最も美しいと感じるこの黄金比をあなたのデザインにも取り入れてみるのはいかがでしょうか。
黄金比をデザインに利用する方法を解説したサイトを幾つかご紹介したいと思います。
webデザイン講座 おしゃれチップス
黄金比と白銀比をデザインに活用する方法が記述されています。
webデザイン講座 おしゃれチップス 黄金比と白銀比を活用しよう
coliss
矩形・マージン・パーツに黄金比を活用する方法が説明されています。
coliss 黄金比をサイトのデザインに取り入れる簡単な３つの方法
[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デザインに黄金比を取り入れよう
デザイナーなら知っておきたい 無料で使えるカラーツール
デザインの配色に迷ったら参考にできるサイト
皆さんこんにちわ。
今回は無料で使えるカラーツールについてお話しますね。
ご存知の通り色が与える印象はとても強いものです。
人を元気づけたり活動的にならせたりする色もあれば、気持ちを落ち着かせ冷静な気持ちにさせる色もあります。
私たちは知らず知らずのうちに目にするものの色から少なからず影響を受けているものですね。
ではこれをデザインする側の観点から考えてみましょう。
人にはそれぞれ好みの色があるものですが、プロのデザイナーなら自分の好みを優先させるよりも制作物の目的の達成に最も適した色選びをするはずです。
配色は見る人に特定のメッセージを伝え、時には人を何らかの行動へと促すこともあるからです。
では今制作しようとしている物を主に利用する性別や年代の人はどんな色を好むのでしょうか？
また扱っている企業を適切に表現するのはどんな配色でしょうか？
こうした色選びを自分で考えながら行うこともできますが、以下のサイトを参考にしてみるのはいかがでしょうか？
kuler
Color Scheme Designer
類似色や補色の組み合わせの配色を表示してくれます。
COLOR SCHEMER ONLINE
クリックした色に合った配色を表示してくれます。
I Like Your Colors
URLを入力するとそのサイトで利用している色を抽出してくれます。
webセーフカラー配色辞典
各テーマごとに配色を表示してくれます。
Mariのいろえんぴつ
ホームページの配色やトーン別の配色を表示してくれます。
【まとめ】有料のデザイン・イラスト素材サイト
皆さんこんにちは。
今日は有料のデザイン・イラスト素材サイトについて紹介します。
前回無料のデザイン・イラスト素材サイトを紹介しましたが、今日は「有料版」を紹介します。
有料ということもあり種類の多さはもちろん、色々な場面で使用可能となります。
無料と同じくサイトにより利用規約はありますが、無料よりも使える幅は確実に広がると思います。
オススメ有料デザイン・イラスト素材サイト
| 名前 | 特徴 |
|---|---|
| YOURSTOCK | 写真の金額がサイズにより異なり、定額プランも有。写真ダウンロードの際には要無料会員登録。 |
| アフロ | 膨大な数の写真がある。また読売新聞の写真も取り扱っている。要無料会員登録。 |
| 素材事典 | CD-ROMにより素材を購入し利用する。また、素材辞典シリーズのうち高解像度データの要望が高いタイトルから厳選しより大きいサイズが利用できる素材辞典[R(アール)]シリーズというものがある。 |
| フォトライブラリー | 日本最大級の投稿型ストックフォト（写真販売）サイト。個人でも写真を公開・販売が出来る（ただし審査がある） |
| amanaimages | 広告に使えるイメージ写真やＴＶ、ニュース写真が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万点以上掲載されている。 |
いかがでしょうか？
一枚づつ購入できるサイトもあればまとめて購入できるサイトもありますので皆様の用途に適した素材をダウンロードしてくださいね＾＾
【まとめ】無料のデザイン・イラスト素材サイト
皆さんこんにちは。
今日は無料のデザイン・イラスト素材サイトについて紹介します。
サイトを作る際に「可愛いアイコンやおしゃれな写真が欲しい・・でも自分では作成することができないし・・」とお悩みになることはありませんか？
そんな悩みを解決してくれるのが今回紹介するデザイン・イラストのフリー素材です。
しかしフリーだからといって好き勝手に使って良い訳ではありません。
必ず素材をお借りする前にチェックしなければならないのが「利用規約」です。
サイトによってイラストの加工の不可・直リンク禁止・商用利用について・・・などといった注意事項が異なります。
この利用規約は年月が経つと変化するサイトもありますので、必ず「利用規約」をチェックした後に利用して下さいね。
オススメ無料デザイン・イラスト素材サイト
| 名前 | 特徴 |
|---|---|
| 写真素材 足成 | 和の写真素材サイト。様々なアマチュアカメラマンが撮影した写真が素材として使用可能。 |
| デザイン素材.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拡張機能
その前にまずFirefoxのインストール方法を説明しますね。
Firefoxのインストール方法
無料ダウンロードのリンクをクリック。
まず製品情報ページへ行き、無料ダウンロードのリンクをクリックします。
ダウンロードページ http://mozilla.jp/firefox/
ファイルのダウンロード
「ファイルのダウンロード」のダイアログが表示されますので「実行」を選択しダウンロードを開始します。
ダウンロード完了後に自動的にインストールが開始されます。
なお「セキュリティの警告」ダイアログが表示された場合は、発行元が「Mozilla Corporation」であることを確認し、「実行する」を選択してください。
セットアップを開始します。
「Mozilla 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をまだ使ったことのない方は是非ダウンロードして使ってみてくださいね＾＾
【まとめ】デザイナーにとって必要なサイト
皆さんこんにちは。今日はデザインをする上で欠かせないサイトを紹介します。
プロの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執事は全てのデザイナーを応援しています。
