■
お久しぶりです！！
しばらくブログを書いてませんでしたね。
ネタ切れですw
久々にネタが入ったので更新してみますね～。
先日、某企業からの宿題で出されたデザインについて話をしてみようと思います。
青山にある雑貨SHOP maturite(マチュリテ)
こちらのショップさんのデザインリニューアルが課題でした。
以下の3ページと提案書でクライアントを説得するものを作れとのことです。
結果的にお祈りが来てしまったので、みなさんの参考になはならないかもしれませんが、一応晒しておきます。
トップページ
http://tokyo-d-plex.com/~mayukofujisawa/maturite/index.html
カテゴリーページ
http://tokyo-d-plex.com/~mayukofujisawa/maturite/category/index.html
ステーショナリーページ
http://tokyo-d-plex.com/~mayukofujisawa/maturite/stationary/index.html#drop
以上の3ページがを1週間でやるという課題だったのですが、アホみたいに予定を詰めまくっていた私…地獄でしたw
とりあえず、このデザインの解説から！
ベースはモノトーン。店舗を見学に伺った際、北欧高級雑貨を多く取扱うとのことだったので、イングリッシュガーデンをイメージして、全体のイメージを作りました。
作り始めてから一番悩んだのが、ナビゲーションの間隔と大きさ。大きいと高級感を損なうし、アイコンと文字の間隔を空け過ぎてしまってもリンクと認識され辛いのではないか？吟味した上で、この間隔と大きさにしました。
全体幅に関しては、コンテンツの少なさとリニューアル前のページ幅が980pxにしていたことを踏まえて980pxで作成したのですが、これが後々失敗したなぁと思っています。
下層ページに行くとテキストが見えずらいし、どうしても古臭い感じが否めない。
レスポンシブの流れで100％幅が過去のものになっているとはいえ、980pxはやりすぎでした。
また、初めての体験となった提案書に戸惑いました。
デザイン自体は空き時間を使い、4~5H程度で完成していたのですが、提案書となるとどっから手をつけていいか全然わからず、結果的に納得のいくものが提出できなかったと反省しています。
ん～、こんなとこでしょうか？
さっそくレイアウト崩れを見つけてしまったので、これから修正に取り掛かります。
ご視聴ありがとうございました！
バナー作成について(photoshop使用)
WEBデザイナーがまず最初に任されるであろう仕事、バナー作成について
書いてみようと思います。
慣れがものをいう作業だと思いますが、下記の手順は私のやり方なので
参考程度になさってください。
★手順
①サイズを決める
②文言を決める
③ノートに下書き(おもにレイアウトを決める)
④配色を決める
⑤使うフォント＆大きさを決める
⑥素材(写真、イラストなど)を集める
⑦組立＆調整
こんな感じでしょうか？
現場では①、②は指定があることが多いと思うので割愛します。
ディレクターおよびライターさんのお仕事だと思いますので、
最初はスルーして大丈夫でしょう。
本題のデザインの部分を以下で書きます。
----------------------------------
③イラストが書けなくても、どこに何を配置するのかの図で構いません。
文字やイメージなんかをコメント書きで補足しましょう！
最初からデザインソフトを立ち上げてどうにかしようとする人がいますが、
頭の中で構成がしっかりと出来ていないうちは遠回りです。
似たようなテーマのバナーなどの検索をかけてみると雰囲気がつかみやすいです。
④～⑥
こちらは順不動で時と場合によって変わってきます。
ページのレイアウトに大きく左右される部分だと思いますので、
ページのデザインをよく観察して、
「何のフォントが使われているのか」
「使用しようとしている素材がページの雰囲気と合っているのか」
「目立たせる為に補色を使うのか or 馴染ませるために同系色でまとめるのか」
自問自答しながら行いましょう。
-------------------------------
「デザインは連想ゲーム」
私の持論ですが、素材を集める際には、テーマから連想されたものを組み合わせて
配置していくとうまくいくことが多々あります。
EX.春のキャンペーンバナー
春→桜→散る→池→カエル→泳ぐ
デザイン出来ましたよね？
イラストが描けなくてもいいのです。フリー素材を拾ってきて組立れば。
描画モードとか透明度、効果を弄ることでPhotoshopがなんとかしてくれますw
一番時間を掛けた方がいいプロセスではないでしょうか？バナーの出来はここで
決まってくると思っています。
⑦
④～⑥で考えた構成を形にする時ですね。
一番言いたい文言を大きく太字で、補足を小さく英語なんかで書いてもいいと思います。
整列を掛けながら配置していきましょう。
最後に。
出来上がったバナーはページデザインに当てはめて検証してみるといいと思います。
しっくりくることもありますし、何か違う！！違和感を覚えることもあるでしょう。
違和感を覚えた場合は、配色を変えてみるのが一番手っ取り早い気がしますw
グダグダですが、みなさんよいバナーライフを！！
CSS3の便利なツールについて
こんばんわ！
今回はCSS3の便利なツールについてかきます。
① CSS3のシュミレーションツール
http://www.css3maker.com/text-shadow.html
② CSS3グラデーションのみ作成
http://www.colorzilla.com/gradient-editor/
----------------------------------------------------------------
シュミレーションツールに関しては、ある程度プロパティの機能を理解して
上で使った方が、より便利に使えるサイトです。
特にanimationとtransitionに関して！
いずれのサイトも英語で書かれていますがプロパティ名が解れば、使うことができる
と思いますので、ぜひやってみてください！
---------------------------------------------------------------------
グラデーション作成ツールはすごく便利なので重宝しています。
画像でナビゲーションを作っていた時と比べて切り出しの労力もなくなるし、
ファイルも軽くなる。修正簡単。わんだほー！！！
操作が簡単で直観的にグラデーションが作れるとこもいいですね。
-----------------------------------------------------------------
筆者はシュミレーターであれこれ作ってソース書き出し→コピペが定番パターンとして定着中です。CSS3はブラウザによってコードを何種類も書かなくてはいけないので、この手のツールがあれば、時間をかけずに思い通りのコードをかけることも大きな魅力だと思います。
早いとこコードの統一がされて欲しいものですねー
スマホサイト 容量問題について
こんにちは！厳しい寒さは昨日で終わりのようですね！
みなさまいかがお過ごしでしょうか？
前回に引き続きのスマホネタ。容量問題についてまとめたいと思います。
****************************************************
目次
1.ファイルの容量を減らすためにすべきこと
2.利用すると便利！サービス各種
3.ファイルサイズの規約について
************************************************************
1.ファイルの容量を減らすためにすべきこと
スマホサイトはなんといっても軽さと情報凝縮が大切！
そんなわけで以下のポイントを押さえて作ってみましょう
①ファイルをなるべく少なくする。
CSS,jsなどはリセット、スタイルなどを同じファイルに！
②改行や空白なども容量にカウントされてしまうため削る。
jqueryなどを使うとどうしてもファイルが増え、容量増加の原因となってしまいます。ファイルをそれぞれまとめることで、コンパクトにしましょう。
*********************************************************
2.利用すると便利！サービス各種
CSS Minifyというサービスを使う。
http://cssminifier.com/
日本語訳版
http://translate.google.co.jp/translate?hl=ja&sl=en&u=http://cssminifier.com/&prev=/search%3Fq%3DCSS%2BMinify%26client%3Dfirefox-a%26hs%3Dj5Y%26rls%3Dorg.mozilla:ja:official%26hl%3Dja
④JSはこれ
http://jscompress.com/
※必ずバックアップを！！
⑤img圧縮はこちら(jpgやgifもOK)
http://www.punypng.com/signup
HTML以外すべてのファイルが圧縮できるのですね！少しでのファイルを小さくするために大事なことです。
********************************************
3.ファイルサイズの規約について
●画像データは2メガピクセル以内
JPEGデータのピクセルサイズは32メガピクセル以内
●アニメーションGIFのデコードサイズは2MB以内
●Canvas要素は2MB以内
●input type="file"によるファイルアップロードは原則不可
●HTML CSS Javascript ストリーミングファイルは10MB以内
●javascriptの実行時間は10秒以内
●Javaアプレット・Flashは使えない
PCとの大きな違いはFlashが使用できなくなったことでしょう。
CSS3にはanimationやtransitionなどのプロパティが登場し、JSと組み合わせることで、Flashに近い動作も可能となってきました。
今日は以上となります。御精読ありがとうございました。
スマホサイトの要点
自分のメモとして残していきます。
スマホサイトを作ることになったため、独自で調べながら気になったことを書いていきます。
スマホサイトを作るために必要なものたち
1.viewportとinitial-scale,user-scalable
表記例
<meta name="viewport" content="width=device-width,
initial-scale=1.0,user-scalable=yes" />
viewportは画面のサイズに合わせてコンテンツを設定してくれます。
特別な設定が必要なければdevice-widthと設定しましょう！
initial-scaleとは初期時に表示するスケールを設定する。という意味。
通常は1.0でOK！
user-scalableとはユーザーによるピンチイン・ピンチアウト操作を許すかどうかを
指定する。yesで許可。noで非許可。
このほかにも必要とあらば入れるものはあるようなのですが、最初に作る段階では、
ひとまずこれでOKかと。
2.CSS3のメディアクエリー
表記例
@media only screen and (max-width:480px)and (min-width: 300px){
}
メディアクエリーとは、そもそもCSS2の時からあったMedia Typeの拡張だそうです。
CSS3になったMedia Queryはデバイスの仕様に応じて、スタイルシートの振り分け
指定できるようになりました。
表示例はwidthが300px～480pxの時に発動するスタイルシート。
これも書き方はいろいろあるようです。
アイコンの配置なんかの時に必要ですね。スマホの縦向きは2×3。横向きは3×2でアイコン
を置きたいとき、メディアクエリーを使わず、パーセンテージ指定で置いただけでは配置
がおかしくなってしまう。
そんなとき？のメディアクエリー！！
/*****************/
スマホについてはまだいろいろ書かなきゃいけないことがあるのですが、
また次回にします。
