月別アーカイブ: 2015年5月

jQueryについて

jquey

 jQueryとは2006年ごろから配布され始めたウェブブラウザ用のJavaScriptコードを容易に記述できるようにするために設計された軽量なJavaScriptライブラリのことです。jQUeryの登場により今までは実装するのに長いJavaScriptの命令文が必要だったアニメーションが数行の記述で実装できるようになりました。

 代表的なjQueryとしては
・アコーディオンパネル
・ドロワーメニュー
・スライドショー
・ページトップ

などがよく使われています。これらは実装するのも比較的簡単な記述でできるものですし、初心者でも扱いやすいものではないかと思われます。

 スマートフォンサイトでもjQueryを使っているサイトが多いので、この機会にjQueryについていろいろ調べてみて実装してみてはいかがでしょうか?

リセットCSS

 サイトを制作する上で必ず行うのが各ブラウザでのチェック。しかし、各ブラウザごとにデフォルトで指定されたCSSがあるため、デフォルトで指定されたCSSをリセットする必要があります。そこで使うのがリセットCSSになります。

 今回は自分がよく使うリセットCSSのテンプレートを載せておきます。
[css]
/*———————————-
reset
———————————-*/

html, body, div, span, applet, object, iframe,
blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*——————————–*/

body {
margin: 0;
padding: 0;
font-size: 15px;
-webkit-text-size-adjust: none;
font-family: Arial, Roboto, “Droid Sans”, “メイリオ”, Meiryo,“ヒラギノ角ゴ ProN W3″, “Hiragino Kaku Gothic ProN”, sans-serif;
border: 0;
word-break: break-all;
}
[/css]

 また、リセットCSSを指定するとデフォルトで入ってしまっているhタグのmarginがなくなるので、レイアウトを組む上で便利になります!

 今回紹介したCSSはあくまで一例ですので、どのようなリセットCSSがあるか検索して使ってみましょう!

トゥイーン

フラッシュのアニメーションには「キーフレームアニメーション」と「トゥイーンアニメーション」の二種類がある。
特徴をつかんでより効果的なアニメーションを選択していきましょう。

■キーフレームアニメーション
基本的にはパラパラ漫画と同様にタイムライン上にいくつものフレームを設置し、連続して再生させることでアニメーションとして動かすことが可能です。

■トゥイーン
トゥイーンには4種類あります。
【モーショントゥイーン】
基本となる絵を設置することで、フラッシュ内で中間を自動的に生成してくれます。例えば、絵のサイズをモーショントゥイーンの末尾で大きくした場合、元の絵からだんだんと大きくなるアニメーションが生成っされます。モーショントゥイーンでは移動、サイズ変更、変形、回転、色の変化、透明度の変化、その他フィルタなどの特殊効果を生成することができます。

【クラシックトゥイーン】
このトゥイーンはバージョンの変更に伴ってオプション機能として設けられたトゥイーンです。主な違いとしてはキーフレーム毎にオブジェクトの新しいインスタンスを持つ必要がある点です。

【シェイプトゥイーン】
言葉通り、シェイプにのみ適応されたトゥイーンであり、シェイプ作成された絵であれば、形が変わっていてもその中間を生成することが可能となります。

【インバースキネマティック】
ボーンツールというツールを使い、図形内に間接を持たせる事ができ、その可動範囲に合わせて自由に動かすことができます。
間接ごとに絵を分解し、再構築するとキャラクターを動かすことが可能なのでとても便利な機能となっております。

タイムライン

04-1

フラッシュに入って新しい概念の機能といえばやはりタイムラインです。アニメ―ションはタイムラインが存在することで動画として機能し、その時間軸ごとにフレームを挿入しドキュメント内を編集することで絵を動かす事が可能になるということです。
では、タイムラインの使い方解説していきます。

【タイムライン】
04-2

これが実際にフレームをおいていくタイムラインということになります。フレームを入れ、選択した状態でドキュメント内に絵を描画していくことによってその時間軸にそのフレームを表示することが出来ます。

【フレームの挿入】

04-3

フレームを挿入するには、フレームを挿入したいタイムライン上の時間軸を右クリックし、フレームの種類を選択することで行えます。ドラッグで選択すればその範囲で選択したフレームをまとめて作成することも可能です。

【フレームの削除】

04-4

フレームの挿入と同様、すでに存在するフレームを選択し、右クリックでフレームを削除をクリックします。

【レイヤー】

04-5

これがレイヤーです。これにはひとつひとつ重なったレイヤーそれぞれにタイムラインが存在します。これによって動画上でもレイヤーによる重ね順等の設定が可能になるわけです。もちろん表示・非表示やロックも可能なので、イラストレターやフォトショップ同様にしようしますが、タイムライン上のフレームの位置を確認することを忘れないでください。

図形の描画

まずフラッシュを使い始めてひっかかりやすいのが、図形の描画機能です。
フラッシュの描画機能はイラストレーターやフォトショップとは違ったシステムで行われております。

まずは楕円ツールで簡単に図形を描画していきます。

02-1

線と塗りを設定し、描画しました。
では次にこの図形を移動してみます。

02-2

このように線と塗り分裂した状態で移動されてしまいました。
これがフラッシュで図形を描画するときの特徴となります。
イラストレーターやフォトショップのように線と塗りが一つのオブジェクトとならず、独立したオブジェクトとして成立します。

今度は描画した図形を選択し、削除してみましょう。

02-3

このように後ろにあった線まで削除されてしまいました。
フラッシュの選択範囲は図形に依存せず、ドキュメントに依存します。
もし、図形の線と塗りを分割せずに移動する場合は、線を含めたすべてのオブジェクトをしっかり選択するか、もしくは楕円形ツールを選択した際に現れるツールバーの下にある「オブジェクトの描画」をクリックした状態で移動します。

02-4

Flashとは

01-1

WEB上で再生できる動画アニメーションを作成するツールです。
WEBページで動きのあるものはJavaSqriptなどがありますが、
flashでは、アニメーション向きのコードActionSqriptが使用でき、
また別個で感覚的な操作でアニメーションを作ることが可能となっております。

ActionSqriptとは、adobe flashで使用できるプログラミング言語で、
アニメーション作成に特化したスクリプトとなっております。
コードで動いているため、幅広い機能を用いる事ができ、
アニメーションを作成しやすいコードとなっております。

もちろんフラッシュでは感覚的に(グラフィックを移動させる等)で
作成できます。基本的なグラフィックの描画にタイムラインがつくイメージです。

現在ではhtml・cssがどんどん進化していき、簡単なアニメーションにだったら、
それで事が足り初めてしまったため、衰退してきていますが、
それでもWEB制作の案件でflashは現役で存在しております。

Photoshopサイトデザイン発表③

■H・Nさん
もう少し説明が欲しいです。どんな企業でどんな客層でどんな戦略で販売している企業なのかがつかめていないとコンテンツの量、コンテンツの位置に理由がなくなってしまいます。
デザインとしては画像一つ一つは上手く合成できています。色々考えて作ってあるのだろうと感じ、そういうところにいい部分を見出せますね。テーマ自体がなかなか難しいもので、手法としてはお菓子じゃないかと騙す戦法もありますが、下手をすると騙しすぎると購入し、お客さんの手元に届く場合もあるので、注意しましょう。

■K・Mさん
企業研究がとても細かくされており、お客へ伝えるべき情報の整理が十分にされています。それに反映されたページになっていますし、綺麗にまとまっています。もう少し明るいイメージの海を使ってもよかったと思います。なんとなくエモーショナルな雰囲気があり、暗いイメージがついてしまいます。
メインコンテンツに見出しがあるととてもいいです、中のコンテンツがなんなのかは中の文章を読めばわかりますが、一目でわかるようになります。

■Y・Hさん
実際のカフェを想定?したページなので、やはりそういった部分を考慮しているとコンテンツのまとまりがあります。コンセプトやイベント・ターゲット・戦略がしっかり考えられていてとてもユーザーインターフェースが良く分かりやすいサイトになっていると思います。
アイキャッチが変わる部分についてもレイヤーを使い表現していてわかりやすいです。メニューも一項目のみ色を変えてマウスホバーも意識しているのでよかったです。
文字の間隔や余白の取り方に注意してあげるともっと良いデザインになると思うので、フォトショップの操作含めて頑張ってみましょう。

■A・Yさん
カフェのサイトとして、女性に対象のカフェのデザインでした。しっかりターゲットをつかむための工夫が考えられています。なにより出している商品の画像が入っているので、甘いものが好きな人にはたまらないサイトです。ただ写真の色合いが少々黄色っぽいので、もう少し白を意識して補正をかけましょう。サイドバーにメニューがあるよりも上にいれてあげた方がいいかもしれません。ヘッダーが少々さみしい気がします。

photoshopサイトデザイン発表②

■N・Aさん
デザインは結婚式をテーマにした女性らしいデザインになっており、ユーザーインターフェースをしっかり意識されていることが伺えます。合成がとても自然で華やかなイメージと清楚感があり、まさにブライダル系のページとしてふさわしいと感じます。
コンテンツ量も十分にあり、その内容も充実しています。ただ言葉だけでは伝わりにくい部分もあるため、工夫した方が伝わると思います。
もう少し聞く人たちへアイコンタクトをしてあげた方が説得力を与えられます。

■K・Sさん
コンテンツ内容が詳細に収集されていますし、他ページの研究されているのがとてもよいと思います。自身が興味あるジャンルだとしてもあの時間でここまでの情報を用意し、デザインしたのはすばらしいです。オリンピックのイメージというのが日本では露骨な日本を結構嫌がります。もう少しシンプル且つスタイリッシュなものであると人気が出ると思います。少々文字が多いかもしれません。下層ページ数を増やして情報を分散させましょう。

■W・Kさん
オープンオフィスパワーポイントを使用した発表で理解、やはり、こういったスライドショーの方が理解しやすいと感じます。自分持ち込み以外のパソコンを使用して発表する場合、事前にどういった発表方法にしたいのか、その設定をしてもいいのかを考えて確認をとるといいとおもいます。リンクする部分を分割して説明すると分かりやすいですね。
全体は綺麗にまとまっています。一つ一つのデザインも良く考えてありますので、問題ないと思います。もう少しデザインとしての見やすさという部分をこだわってあげるといいと思います。

■T・Kさん
意味合いを持たせるのは会社としてのイメージを図るために必要な情報なのでいいと思います。グラデーションは全体のイメージを良くみせる効果がありますが、現在では少々安っぽいイメージを与えてしまう場合があります。各種検索のようなフラットなデザインにしてあげると良いと思います。お知らせニュースが同じコンテンツにみえてしまうので、片方にサムネイルをつけてあげるといいとおもいます。画像合成がプレゼントを持ったアメフト選手が町を駆け抜けるものですが、とてもユニークで良かったと思います。

■N・Aさん
ワイヤーフレームが少々ずれている部分が見受けられました。最終的なページは綺麗に仕上がってますが、大前提がずれると後々色々並行してずれるので注意しましょう。
デザインまるパクリと話していましたが、コンテンツ毎に別のサイトから奪ってあげればそれはオリジナルになりますので、参考サイトをもっと見てみましょう。全体的なデザインですが、まとまっていてかなり綺麗ですし、なによりグラデーションの使い方がとてもうまいです。シンプルなページで今時の人気のあるデザインでした。

Photoshopサイトデザイン発表①

■R・Hさん
サイトマップがシンプルで分かりやすいし、コンテンツ量も充実しています。ちゃんとアイコンタクトを行っているのが良いです。ワインのカテゴリーの分け方を考えるとためになっていいと思います(大体企業側で決まってますのでどちらでもかまいません)
見る人の目線の動かしかたを考えてあげるともっといいかもしれません。感覚も綺麗ですし、まとまりがあり、一目でワインの会社だと判断できるので素晴らしいです。画像合成のレベルがかなり高いので、あとは見出しテキストデザインと通常テキストのデザインを意識してやりましょう。レイアウトが綺麗だが、バナーにちょっとこだわった方がいいと思います。

■R・Aさん
アイコンタクトがしっかりできていて聞こうという気持ちが上がります。テーマが面白いですね。オーガニックとしてのページはすべてありきたりなので、味があってとてもいいデザインだと思います。季節の特集ページ・ランキングがあるのがいいです。ちゃんと考えて作っていくと必要なものがみえてきますね。
また、フッターが少々さみしいかもしれません。他のデザインが良い分、目立ってしまします。でもないよりは全体のニュアンスが伝わりやすいので素晴らしいと思います。

■K・Tさん
前提としてアートデザイナーのサイトとなると、かなりアーティスティックな部分になり、結構デザインを自らやられる方が多いので、結構ニッチなテーマと言えます。
やはり実際の企業サイトとは違った意味合いでのデザインとなるので注意しましょう。
全体のデザインがまとまっていてかなり良いと思います。アイディアがつまっていています。基本的にWEBサイトのデザインはボックスデザインとなるので、コーディングを考えると少々難易度が高めになります。

■R・Oさん
発表方法が実に良い点が多いです。最初に流れを説明すると根拠が明確で理解しやすく。取材結果まで想定するとコンテンツの整理した理由が明確です。目標を絞ることも重要ですね。サイトマップの充実もこの短期間で良くここまでできたなと感心します。
言葉だけでは伝わらない部分もあるので、少々間をおいて実際のページにマウスや手でどういうふうになるのかをしっかり明確に伝える事を意識しましょう。
レイアウトがしっかり構築しており、アイキャッチの使い方がテーマに沿っています。メニューが少々みづらいかもしれません。

■T・Nさん
調査の着眼点がとてもいいです。戦略が明確でそれがページに反映されています。
サイトマップもう少し見せてもいいと思います。最終的に予約ページに飛ぶリンクを作るアイディア見つけたのがすばらしい。すべてフリー素材とは思えないくらい良いと思います。アイキャッチだけ全画面幅にすることは言ってないのに採用しているのは、きっと色んなサイトをみて多いと感じたのだと思います。実際よくあります。未経験から着実に技術と知識を身につけており、がんばりがうかがえます。画像のアスペクト比が変わっている部分が気になります。ひとつひとつしっかり理由があり、すべて納得いく内容でした。

WEBサイトのデザイン作成の流れ

本日はWEBサイトのデザイン制作をする際、より実務的な流れを紹介します。
基本的に会社によって方法は様々ですが、今回はWEBデザイナーとWEBコーダーの仕事が分割されている場合の流れを紹介します。

■ワイヤーフレームの作成
まずはじめにコンテンツのレイアウト・位置を確定するため、ワイヤーフレームを作成します。手書きメモでも構いませんが、コーダーへの事前指示や他社サイト制作の際にこの時点で確認する場合、このようにワイヤーフレームを制作しておくとスムーズです。
社内であれば、手書きのものを見せても大丈夫かとは思いますが、社外の方に見せる場合はつくっておくべきでしょう。(あまりワイヤーフレームを見たがる企業はいませんが・・・)

■デザインの作成
ワイヤーフレームを軸にしてデザインを制作していきます。このときに画像にする部分とHTMLやCSSで記述する場所をメモでわけておきましょう。
画像素材もこの時点でサイズ等を決めておくとスムーズです。WEBはビジュアル的には大まかにコンテンツ(テキスト)と画像によって構成されているので、前述の二点をしっかり注意しましょう。

■スライス
全体のデザイン案ができ、最終確認(他社の場合はそのデータを送信して確認をとる)が終わったら先ほど考えておいた画像部分の割り振りの部分を個別に書き出していきます。書き出しに便利なのがスライスツールです。スライスツールでは一つのドキュメント内で選択した部分を個別のファイルとして書き出す事が可能です。最終的にHTMLでそのファイルを個別で読込、表示させます。

■WEBサイト構築
用意したデザインと素材を駆使してHTMLとCSSでWEBページを構築していきます。