Posts Tagged ‘WEB’
WEBデザイナーなら押さえておきたい基礎知識
WEBデザイナーなら押さえておきたい基礎知識
これからWEBの制作を始めるという方、WEB制作の基本は分かっていますか？
「ホームページはデザインがすべて」「多少コーディングが適当でも大丈夫」なんて思っていませんか？
ホームページには情報を適格に発信し、ターゲットとしているユーザーにその情報を届けましょう。
ユーザーが必要な情報にたどり着けなくてはそのホームページは実力を発揮しているとは言えません。
正しいWEB制作の基礎を身に付け、ターゲットユーザーまでアピールできるような有効なホームページを作りましょう。
見出しについて
もし、目次の内容と順番があっていない小説があったら読む気がおきませんよね？
WEBも同様に見出しを付け、順番通りに記載していく必要があります。
見出し（Heading）要素 h1
・ページ内にＨ１は一つだけ必ず指定
・Ｈ２の下の見出しはＨ３とし飛ばさずに指定
HTMLではh1～h6までの見出しが用意されています。
h1タグはホームページの一番最初に表示し、h2タグを大見出し、h3タグを中見出し、h4タグを小見出しといった具合に使用していきます。
情報収集
・このサイトを訪れる人はどんな情報を求めているか考える
・求めているものを提供できるようなページ作りをする
ホームページをなんとなく作っていってしまってはいけません。
このホームページを見るであろうターゲットユーザーのことを考えそのユーザーにとって魅力を感じるようなページ作りをしてください。
ページタイトル
・ページを客観的に評価する言葉
もし新商品を開発するとして、商品の売り上げにダイレクトに反映するものがあります。
それが「商品名」です。
覚えやすく、大衆受けがいい「商品名」がつけられればその新商品はヒット商品になるかもしれません。
ホームページも同様です。
コーディング順序
・まず構造の指定、その後にスタイルの指定
HTMLを正しく表記し、その後にスタイルシートで効果的なスタイルを指定し、魅力的なページに仕上げます。
リンクの貼り方
・ページとページをつなぐ
リンク切れなどがないように気を付けましょう。
もし新しいページを作ったとしてそこへのリンクが切れていたらそのページは誰も見ることができません。
ページを見やすくする
・改行を使う
・行間をあける 本文なら１．５ｅｍ程度
コンテンツ内の文章を読みやすい大きさ、行間を指定します。
初めての訪問者を引きつける
・内容を見るか、ページを去るかは平均3～5秒で判断される
・サイトの目的が一目で分かる紹介文
・サブページのタイトルは興味をひくものにする
・まめに更新されていることがすぐ分かる
ページを見てくれたユーザーが一瞬で「自分にとって有益かどうか」どうかわかるようにアピールをします。
もちろんページが去年の情報で止まっていたらユーザーは「このホームページは更新されていない、古い情報しか掲載されていない」となり、興味・信用を失ってしまいます。
再び見たいと思うページを作る（お気に入り、ブックマークに登録したい）
・見たいと思う情報がたくさんあり一度で見きれない
・得たい情報が追加される可能性がありそう
・まめに更新されている
・使いやすく見やすい
・他のページにはない独自性がある
リピーターになってくれるユーザーを増やすためには魅力的なページ作りが必要になってきます。
「オリジナリティがある」「便利である」といった情報を工夫して掲載しましょう。
キーワード
・出現頻度
・出現位置
・近接度
ホームページの本文中にターゲットユーザーが求めている「キーワード」を意識的に組み込みます。
あまり不自然にならによう、自然に組み込みましょう。
リンクポピュラリティー
検索エンジンにおいて人気のあるホームページほど上位に表示するようになっています。
ユーザーにとって「このページは重要だ」と思われるページ作りが必要になってきます。
対象となるキーワードの選定
・3個程度
・広範囲過ぎず、マニアック過ぎない
例えばレストランのホームページを作ったとします。
ですのでキーワードに「レストラン」と設定します。
しかし、「レストラン」だけではライバルが多すぎてせっかく作ったホームページを誰にも見てもらえません。
そこで「レストラン 地域名」とキーワードを設定します。
地域名を足すことで範囲がそのレストランのある地域だけの情報に絞り込めます。
また、「レストラン 地域名 和風」など料理のジャンル等を足すことによってより情報を絞り込むことができ、ユーザーがページを見てくれる可能性もぐっと上がります。
デザイナーなら知っておきたい デザイン黄金比
黄金比をデザインに取り入れる方法
皆さんこんにちわ。
今回はデザインする時に参考にしたい黄金比についてお話しますね。
黄金比とは人が安定感や調和を感じ、最も美しいと思う比率です。
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のいろえんぴつ
ホームページの配色やトーン別の配色を表示してくれます。
デザイナーなら知っておきたい 無料アイコンダウンロードサイト
WEBで使うアイコン素材を無料でダウンロードできる
皆さんこんにちわ。
今回は無料で利用可能なアイコン素材をダウンロードできるサイトをご紹介しますね。
皆さんもご存じの通りアイコンを使うと見出しにデザイン性を加えることができますね。さらにアイコンの絵柄は見ただけで利用者に特定の意味を伝えることもできます。
そんな便利なアイコンですが、自分でいちから作ると結構手間がかかるものです。
以下のサイトからダウンロードして使ってみるのはいかがでしょうか？
各サイトによって利用方法や注意点が異なりますのでそれらを参照の上、ご利用下さい。
デザイン素材.com
WEBに使えるアイコンがたくさん揃っています。
しかも商用利用も可能で、加工も自由です。
Icon Toucan
使いたいアイコンを右の「DROP HERE」ボタン上にドラックし、Downloadボタンをクリックすることで簡単にダウンロードできます。
0円のweb素材屋さん
プロのwebデザイナーによって作られているアイコン、ボタン、背景、バナーなどが豊富に用意されています。ビジネス向けの商用にも利用できます。
FIND ICONS
キーワードを入力するだけで、種類豊富なアイコンを検索することができるサイトです。
【まとめ】有料のデザイン・イラスト素材サイト
皆さんこんにちは。
今日は有料のデザイン・イラスト素材サイトについて紹介します。
前回無料のデザイン・イラスト素材サイトを紹介しましたが、今日は「有料版」を紹介します。
有料ということもあり種類の多さはもちろん、色々な場面で使用可能となります。
無料と同じくサイトにより利用規約はありますが、無料よりも使える幅は確実に広がると思います。
オススメ有料デザイン・イラスト素材サイト
| 名前 | 特徴 |
|---|---|
| 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デザイナーもデザイナーの卵でもサイトを作成するにあたり悩むことってありますよね？
そんな貴方の悩みが少しでも解消されればと思い、調べてまいりました！
デザイナーが知っておかないと損なツールまとめ
| 名前 | 用途 | 特徴 |
|---|---|---|
| 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執事は全てのデザイナーを応援しています。
最近のコメント