カテゴリー : デザイン

WEBデザイン レイアウトの時に便利なサイトたち

黄金比

黄金比レイアウト「golden_ratio」

黄金比「golden_ratio」


golden ratio

黄金比とは、最も美しいとされる比「1:(1+√5)/2」のこと。
近似値は1:1.618。約5:8になります。
「Golden Ratio Calculator」は黄金比をWEBデザインで簡単に利用できるWEBツールです。
ただ、数値を入力するだけで、黄金比の計算してくれます。

ちなみに、名刺は黄金比です。

余談ですが、黄金比はジョジョ好きならご存じのスティールボールランの鉄球や爪弾をアワーアップさせたヤツです。(めちゃくちゃ余談…)

グリッドレイアウト

グリッドレイアウト「grid calculator」

グリッドレイアウト「grid calculator」


grid calculator

グリッドレイアウト「grid system」

グリッドレイアウト「grid system」


Variable Grid System

グリッドレイアウトとは簡単にいうと、いろいろと種類がありますが、グリッド分けして、写真やイラスト、テキストエリアなどのパーツを整理して美しく見せるレイアウトの方法です。
かっちりと融通のきかないものも、可変的なものもあります。
最近は可変グリッドのスクリプトなんてのもよく目にしますね。

上記サイトは、基本となるグリッド分けを行うときに便利なサイトです。

白銀比

白銀比レイアウト「レイアウトの小技」

白銀比レイアウト「レイアウトの小技」


レイアウトの小技

白銀比とは1:1.414の比率のこと。
日本では白銀比が古くから使われています。
法隆寺や四天王寺や、生け花の美のバランスにも採用されていたりします。
身近なものではA3、A4の用紙の縦横の比率です。
A3を半分に折ってみるとA4の大きさになります。
WEBデザイン 制作に役立つ無料サービス・ツールまとめ


いろいろなレイアウトの比率だったり方法があります。
どんなデザインにするのか、
迷った時やバランスがどうしても悪いといったときに使ってみてはどうでしょうか?
どれも実績があり認知されているものなので、WEBのデザイン案を捻りだせなくなったら頼ってみるのも手です。
説明するときは説得力もあるし良いかも!?

WEBデザイン レイアウトの時に便利なサイトたちでした。

日本地図素材EPS(商用利用OK)

DTPやWeb制作で日本地図が必要になることもありますよね。
フリーのベクターデータ(EPS形式)で配布しているサイトがあるのでご紹介。
商用OK。

スタンダードな日本地図、世界地図
白地図、世界地図、日本地図が無料
左側の「無料サービス」内に色々なパターンの地図データがあるので、日本地図以外にもみてみると良いかも。

日本地図素材 白地図 EPS

ちょっと変わった日本地図。
一風変わった日本地図のEPS素材
数パターンあって、面白い地図です。

日本地図 eps

日本地図 eps


タイトルでEPSいってて
PSD・PNGデータですが、
日本地図 イラスト

日本地図 イラスト PSD PNG

日本地図 イラスト PSD PNG

人口集中地区とか交通網とかのデータ入り地図
みんなの地球地図プロジェクト
※商用利用もできますが、条件があるので確認してからご利用ください。

オンライン画像編集フリーアプリ「pixlr」

pixlrは、AdobeのPhotoshopのように高度な画像編集ができるオンラインアプリケーション(無料)。

pixlr

pixlr web site

ローカル内の画像を開いてみたところです。
pixlr 画像を開く

使い方は、Photoshopとほぼ同じなので、使い慣れている人はいきなり普通に使えてしまうと思う。ショートカットもほぼ同じです。
画面構成もほとんど変わらないので、使ってもあまり違和感がないです。

画像の保存形式は、JPEG、PNG、PXD。
ローカルに保存できる。
PXDは、Pixlr専用ファイルで、途中の編集画像ファイルを保存しておける。
PhotoShopでいうPSDのような感じです。

もし、出先で画像編集が必要になって、Photoshopがインストールされていないといった場合でも、オンラインPCがあればなんとか切り抜けることができるのではないでしょうか!

YouTubeで「Pixlr」と検索するとPixlrのチュートリアル動画がいろいろ出てきますよ。

肌をキレイにする方法

Photoshopの購入を検討している方も、pixlrで画像編集の勉強ができると思いますよ。

pixlr

WEBデザイン参考サイト集まとめ

WEB制作する上で、デザインは重要です。
サイトの機能面と見た目など、さまざまな要素を考慮してデザインします。
そこで、「ほかのサイトってどんな感じにしてるんだろう?」と、検索することも多いですよね。

そこで、WEBデザイン参考のリンク集サイトをまとめてみました。


デザインリンクデータベース
カラー、コンテンツ内容、テイスト、その他でカテゴリ分けされている。
全体的に数が紹介サイト数が多い。

WEBデザイン見本帳
印象、色、ジャンルでカテゴリ分けされている。全体的に見やすい。

FLOWERS
イラストレーター、フォトグラファー、デザイナー、グッドデザイン(現在中身なし)でカテゴリ分けされている。(更新されてない。けど、きれいなサイトがある。)

WEB de DB
業種別、ベースカラーでカテゴリ分けされている。

クリエイティブなWebデザインリンク集 -[ウェブアートノックARTNOC]
業種、カラー、レイアウトでカテゴリ分けされている。

いけてるサイト WEBデザイン
業種別でカテゴリ分けされている。

テンプレートモンスター
WEBデザインのテンプレート集。海外のデザインが多いので、国内サイトとはまた違った刺激に!(WEBデザインのリンク集とは違うけど。)

ベクトル画像編集ソフトウェア「Inkscape」使えるフリーソフト

Inkscape(インクスケープ)

Inkscape(インクスケープ)スクリーンショット

Inkscape(インクスケープ)はオープンソースで開発されているベクトル画像編集ソフトウェア(ドローソフト)。
かなり使えるフリーソフト!かなり高機能です。
アドビ社のイラストレーターは高くて買えない!って人もまずInkscapeで練習するのも良いのではないでしょうか。
対応OSはWindows、MacOS、Linux。

ダウンロードは以下から
Inkscape公式サイト

Inkscape(インクスケープ)の基礎講座してるサイトもありました。
インクスケープの使い方・基礎講座

このサイト運営している方の作品もあります。
フリーソフトなのにすごい!
チュートリアルもありますので参考に!
Google Chrome Logo グーグル・クローム
Inkscape Drawing : インクスケープでQuick Time ロゴを描く