3月, 2012年

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

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のいろえんぴつ


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

デザイナーなら知っておきたい 無料アイコンダウンロードサイト

2012-03-14

WEBで使うアイコン素材を無料でダウンロードできる

皆さんこんにちわ。

今回は無料で利用可能なアイコン素材をダウンロードできるサイトをご紹介しますね。

皆さんもご存じの通りアイコンを使うと見出しにデザイン性を加えることができますね。さらにアイコンの絵柄は見ただけで利用者に特定の意味を伝えることもできます。
そんな便利なアイコンですが、自分でいちから作ると結構手間がかかるものです。

以下のサイトからダウンロードして使ってみるのはいかがでしょうか?
各サイトによって利用方法や注意点が異なりますのでそれらを参照の上、ご利用下さい。

デザイン素材.com

WEBに使えるアイコンがたくさん揃っています。
しかも商用利用も可能で、加工も自由です。

デザイン素材.comサイトの図

デザイン素材.com

 

Icon Toucan

使いたいアイコンを右の「DROP HERE」ボタン上にドラックし、Downloadボタンをクリックすることで簡単にダウンロードできます。

Icon Toucanサイトの図

Icon Toucan

 

0円のweb素材屋さん

プロのwebデザイナーによって作られているアイコン、ボタン、背景、バナーなどが豊富に用意されています。ビジネス向けの商用にも利用できます。

0円のweb素材屋さんサイトの図

0円のweb素材屋さん

 

FIND ICONS

キーワードを入力するだけで、種類豊富なアイコンを検索することができるサイトです。

FIND ICONSサイトの図

FIND ICONS


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

ニコニコ動画とYouTubeのアカウント作成

2012-03-07

ニコニコ動画の新規アカウント登録とYouTubeのアカウントについて

皆さんこんにちわ。

今回は、ニコニコ動画の基本的な機能を利用するために必要な、無料アカウントの登録方法と「YouTube」のアカウントについてご説明します。

ニコニコ動画アカウント新規登録

ニコニコ動画を利用するためにはまず会員登録が必要になります。
会員の種類には有料の「プレミアム会員」と無料の「一般会員」があります。
プレミアム会員はニコニコ動画の提供する様々な特典を受けることができます。(月額525円)
一方、一般会員はニコニコ動画の基本的なサービスを受けることができ、無料です。

今回は一般会員としてアカウントを作成する方法を解説します。

まず、以下のサイトにアクセスします。
ニコニコ動画(原宿)

「ニコニコ動画アカウント登録」をクリックします。

ニコニコ動画ページの図
 
「ニコニコ動画アカウント新規登録」画面で「一般会員登録(無料)へ」をクリックします。
ニコニコ動画アカウント新規登録画面
 
登録するメールアドレスを入力し「次の画面に進む」をクリックします。
STEP1 メールアドレスの入力画面
 
登録したメールアドレスにニコニコ動画からのメールが送られます。
STEP2
 
「ニコニコ動画登録案内」メールを開いて確認します。
「下記のURLにアクセスして、登録をお願いします。」と表示されますので、下のURLをクリックします。

ニコニコ動画登録案内メール
 
プロフィールの登録画面が表示されますので、プロフィールを入力し、「次の画面に進む」をクリックします。
プロフィールの登録画面
 
「アカウント登録が完了しました!」の画面が表示されたら、登録の完了です。
ニコニコ動画 アカウントの登録の完了を知らせる画面

YouTubeのアカウント作成

YouTubeのサイトでアカウントを作成しようとするとGoogleのアカウント登録画面にジャンプします。

つまりGoogleでアカウント登録しておけばYouTubeも利用することができます。

Googleでのアカウント登録の方法については
第6回 Googleでの新規アカウント作成をご覧下さい。


第4回 Twitterでの新規アカウント作成
パソコンユーザーに必要不可欠な「アカウント」

無料で配信できるインターネット動画共有サービス

2012-03-02

スマートフォンを使って動画のライブ配信ができる

皆さんこんにちわ。

今回は、インターネット上で、誰でも手軽にライブ映像の視聴、配信が出来る「Ustrem」と、「YouTube」への連携。また「ニコニコ動画」など他の動画サイトへアップロードする方法をご紹介します。

 

Ustremのホームの画像

 

Ustremとは

「Ustrem」とは、誰でも簡単に無料で生中継が出来る動画共有サービスです。
見る側はインターネットにつながったパソコンがあればOK。
Twitterでのツイートも可能なため、放送側、また視聴者同士が相互にリアルタイムにやり取りをすることができます。
放送側に必要なものは基本的にはカメラとPC、マイク、ネット回線のみ。
さらに、スマートフォンがあればそれらを1台でこなすことが出来ます。

Ustremの特徴

動画の放送、視聴が無料で可能。
視聴だけならアカウントの登録も不要。
放送時間制限なし。
同時視聴者数制限なし。
Twitter(ツイッター)との連動可能。ライブを見ながらリアルタイムにツイートできる。
フェイスブックとの連動も可能。
配信した動画の録画保存可能。
チャット参加機能で相互に交流。(UstreamもしくはTwitterアカウント必要)

スマートフォンアプリ「Ustream」とは

スマートフォンで動画を生中継するために必要なのが、Ustremから公式に発表されている無料アプリ「Ustream」です。
このアプリをインストールすればスマートフォンからの動画視聴はもちろん、番組作成、スマートフォンカメラを使ったライブ配信、録画&アップロードなど、様々なことがスマートフォン一台で可能になります。
視聴する動画はアプリ画面下部の「おすすめ」や「カテゴリー」、「検索」から探すことができますよ。

スマートフォンアプリ「Ustream」のアカウント取得方法

動画の視聴のみであればアカウントは必要はありませんが、配信をする場合には要求されます。

スマートフォンでApp Storeから「Ustream」のダウンロードをします。ダウンロードが済んだら、「Ustream」をタップして開きます。
表示された画面の右下、「その他」-「設定」をタップし「ログイン」という画面が出たら「Ustream」のタブをオンにします。

 

Ustremログイン画面

 

ログイン画面が表示されますので、左下の「アカウント作成」をタップし、必要な情報を入力し「作成」をタップ。

その際、Twitterアカウントをお持ちの場合は、同じユーザ名にすることをお勧めします。「Ustream」配信を知らせる手段として、Twitterを使用することが出来るためです。 (入力したユーザ名は、「Ustream」のPCサイトで変更可能です。)
Twitterで事前にライブの告知をしておくと、より多くの人が来てくれるかもしれませんよ。

「モバイル・ソフトウェア・ライセンス契約(参考訳)」が表示されます。
「承諾」をタップすると、アカウント作成完了です。

番組作成

動画の配信の前に、番組名を決めましょう。
最初の段階では、アカウント新規登録画面の“ユーザ名”で入力した文字列が「Usteream」のデフォルトの番組名となっています。
「その他」-「設定」-「デフォルトの番組」-「番組を作成」とタップし番組名を決めて「作成」をタップ。
新しく作成した番組タイトルをタップ。
これで、撮った映像がこの番組の中で配信されるようになります。

 

Ustremの番組作成画面

 

ライブ映像配信

「ホーム」画面上部の「ビデオカメラ」のマークをタップ。表示された項目の中から「ライブ配信」をタップします。すると撮影画面に変わります。

 

Ustremの撮影画面

 

画面右側の赤い丸のマークをタップすると撮影が開始。もう一度押すと終了です。
終了時に「タイトル」「説明」を入力できる画面が現れますので、入力して「完了」しましょう。
Twitterとの連携が設定されていると、ライブ中画面下部に中継を見ている方からのつぶやきが表示されます。

「録画」以外のマークは撮影中にしかタップできません。
共有:Twitterとの連携を設定している場合、ボタンを押したタイミングでTwitterへ”ライブ中継中”とつぶやかれます。
ミュート:マイクのON/OFFを切り替えます。
投票:視聴者が”はい”/”いいえ”で投票できるようになります。
停止:ライブ中継を終了します。終了後に中継した動画を保存するかどうかの確認があり、保存する場合、動画のタイトル入力とアップロード共有先の選択を行います。

なお、「ライブ映像」ではなく「iPhoneへ録画」を選ぶと「その他」-「自分の番組」-「録画」からローカルで保存した動画が見る事ができ、ここからアップロード可能です。リアルタイムでの配信が心配な方はこちらの方がいいかもしれませんね。

また、「自分の番組」-「アップロード済み」からは、過去にアップロードしたものを編集することが出来ます。
「タイトル」や「説明」の編集、動画の削除もここから行なうことが出来ます。

「Ustrem」と「YouTube」の連携

「Ustrem」に保存した映像をより多くの人に見てもらうために「YouTube」へアップロードすることができます。
この操作にはパソコンが必要になります。
まず、以下のサイトにアクセスします。
Ustream
ログインし、「マイページ」「ソーシャルネットワーク」と進むと、外部の様々なサイトとの連携管理画面が現れます。
(Twitterなどの連携もここから行ないます。)
下から2番目の「Youtube」の接続をクリックし、「Youtube」の「ID」と「パスワード」を入力。これで連動の下準備が出来ました。
今度は「ダッシュボード」「番組設定」「番組選択」「録画ビデオ」と進み、現れた画面「録画済みビデオ一覧」から「YouTube」にアップロードした映像を探します。
映像のすぐ下、「▼」のマークをクリックすると、「Youtubeで共有」というマークが出るので、それをクリック。
これで「Youtube」にアップロードされました。少し時間を置いてから、「Youtube」に見に行ってみましょう。

「Ustrem」から「ニコニコ動画へ」アップロード

今度は「Ustrem」と連携することの出来ない動画サイト「ニコニコ動画」へ、この動画を投稿してみましょう。

この操作にもパソコンが必要です。
まず、以下のサイトにアクセスします。
Ustream
ログインし、「ダッシュボード」「番組設定」「番組選択」「録画ビデオ」と進み、現れた画面「録画済みビデオ一覧」の各動画の下、「ダウンロード」をクリックします。

ダウンロードが完了したら、以下のサイトにアクセスします。
ニコニコ動画
ログインしたらサイト上部の黒帯から「動画を投稿」をクリック。
「動画の新規投稿」の画面が表示されますので、「ファイル指定」から、先ほど「Ustrem」でダウンロードした動画を指定します。
「動画の縦横比」は「自動認識」で大丈夫です。
必要であれば「完了通知」にクリックしましょう。
「本ページ記載内容および利用規約に同意し動画を投稿」をクリックで、アップロードが開始されます。

アップロードが完了すると、「タイトル」「説明」「タグ」の入力画面が表示されるので、入力し、「OK」を押します。
これでアップロード完了です。


第4回 Twitterでの新規アカウント作成
パソコンユーザーに必要不可欠な「アカウント」

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