スマートフォンなどPC以外から閲覧する方向けに、レスポンシブ対応のWebデザインをすることが増えてきました。
デザインをする前に参考にさせていただいた、素敵なサイトのブックマークがたまってきたので、今回ご紹介いたします。
手描き風のイラストや色使いが、あたたかいイメージ。
スマートフォン用レイアウトでは、イラストなど表示を簡略化してはありますが、大きく配置したロゴとイラストで、決してさみしい感じに見せていません。
投稿者: sakai
お正月特設サイトのまとめ
2015年になって、早一ヶ月…
年々時が過ぎるのが早くなっている気がします。
2月になってしまう前に、ご紹介!
年始のご挨拶や初売りの告知、などなど
素敵なデザインのお正月限定Webサイトを集めてみました。
※ご紹介したサイトは、非公開になっている場合があります。ご了承ください。
朱色×白×黒の組み合わせがカッコいい!
なんともいえない羊はもちろん、うしろに並ぶイラストもクオリティ高！
スマートフォンをお持ちの方は、360°年賀状でもほっこりしてみてはいかがでしょうか。
やわらかいカラーが差し込まれていて、
お正月テイストだけど、かわいらしい雰囲気。
ありそうでなかなか見ない、畳の背景が新鮮です。
メインイメージのアニメーションも楽しい
羊をクリック!容赦なく毛を刈ってしまいましょう。
ヘッダーだけに注目しがちですが、よく見るとページ丸ごと羊使用に切り替わってます。
いかがでしたでしょうか。
同じテーマ･配色でも、それぞれのページの特色が出ていて面白いですね。
段組み設定を使った、ワイヤーフレームの作成
いよいよ今年も残すところ、あと一週間！
一年あっというまでした。
今回は、Illustratorの「段組み機能」を使用した、ワイヤーフレームの作り方です。
サイトデザインをする前に、ページのレイアウトの目安として作るワイヤーフレーム。
以前の記事でもふれましたが、CSSniteで「段組み設定」を使った、ワイヤーフレームの作り方を紹介されていました。
それを参考に、940グリッドシステムに沿ったワイヤーフレームを実際に作ってみました。
1、長方形ツール
長方形ツールで、幅940pxの長方形を作成します。
（高さは任意ですが、キリよくできる1500pxで作りました）
2、段組み設定でパスを分割
オブジェクトメニュー＞パス＞段組み設定を選択します。
今回は1カラム60pxとしたいので、
下図のように設定しました。
すると、このように60px角のカラムに分割されます。
あとで変更するときのために、これをまるまる別レイヤーにコピーしておきます。
3、カラムを結合させる
任意のカラムを複数選択し、オブジェクトメニュー＞パス＞段組み設定を選択します。
列数・行数ともに「1」にすると、カラムが結合されます。
あとは、写真や文章のダミーを作り込んで完成です。
有料ですがwireMagicがダミー画像の作成に便利だそうです。
カラムを選択して、ダウンロードしたグラフィックスタイルを適用するだけなので、さらにお手軽にできますね！
段組み設定を使うと、マージンやカラムのサイズを計算せずに、感覚的にワイヤーフレームを作ることができます。
別レイヤーに保存していた、分割前のカラムを使えば、あとからの修正もカンタン。
ワイヤーフレーム作りが、ちょっと面倒だなと感じている方はぜひお試しください。
新潟グラム x CSS Nite「Webで使うIllustrator」に参加してきました
先日11月6日に、新潟グラム x CSS Niteに参加してきました。
テーマは「Webで使うIllustrator」
「WebデザインといえばまずはPhotoshop!」って入口からきて、今までPhotoshopメインでデザインしてきました。
が、もとはIllustratorを使う方が多かった自分（パスいじっているのが好き…）。
できたら、IllustratorでもWebデザインするのに、もっと活用できたらいいなってことで、今回初めて参加してみました。
気になったこと・使っていきたい機能などを、忘れない内にメモします。
新潟グラム／CSS Niteについて
【新潟グラムとは】
新潟でデザイン業務に関わる方に向けたセミナーを主催されています。
【CSS Niteとは】
株式会社スイッチの鷹野雅弘さんが主催するセミナー。CSSに限らずweb制作に関する知識を発信するセミナーです。
今回は鷹野さんが講師もされていました。
Web制作の動向
いままでビットマップベースで行っていたパーツの作成を
SVGやWebフォント、アイコンフォントなどのベクター表現や、CSS3を活用することで
マルチデバイスに対応したWebデザインをしていく。
↓
ベクター表現が得意なIllustratorでWeb制作
Illustratorの便利な機能
時間をかけずに、編集しやすいデータをつくれるIllustratorの機能をいくつか紹介されてましたので、その中でも特に気になったものをいくつかピックアップしました。
1 ライブカラーで再配色
ハーモニーカラーをリンク。あとはホイールをぐるぐるまわすだけで簡単にカラーバリエーションができます。
別々に配色する必要のあった「塗り」と「線」も、これで一度に変更が可能に!
配色に悩んでいるときも、これで気軽に別の雰囲気の色が試せますね。
2 文字タッチツール
文字のアウトライン化をすることなく、一文字単位で文字の移動･回転ができます。
今まで文字パレットの数値でいじっていたのを、感覚的にできるのでいいですね!
しかも下位バージョンでデータを開くこともできるそう。
でも残念ながら、こちらはCCのみ対応の機能となっています。
3 段組み設定を使ったgrid対応のワイヤーフレーム作成
段組み設定でグリッド分割し、さらにその分割したオブジェクトを段組み設定で結合。
結合したオブジェクトに、ダミーの画像やテキストをアピアランスで適応
…と、ものの数分でサクサクとワイヤーフレームができあがっていく様は圧巻でした…!
段組み設定にこんな使い方があったんだなーと、一番印象に残った項目でした。
6 Layer Exporterや画像アセット（Photoshop）を使ったPNG/SVG/JPEGの書き出し
スライスを使用せず、レイヤーやフォルダ単位で画像を書き出すことができます。
しかも、レイヤー名（フォルダ名）を対応する名前に変えると、それにあわせた形式や解像度で書き出してくれるそうです!
面倒だったスライス作業がなくなると、相当な時間短縮になるのではないでしょうか。
しかしこちら、CCから対応の機能です…。本当に残念です…。
参加してみての雑感
・Illustratorのこと以外にも、「Webデザイン」制作の動向も知れて、大変ためになりました。
・鷹野さんのスライドの構成・デザインもわかりやすく、かつ遊びがあって素敵でした。
・視点誘導に使用されていたスポットライト機能(Mouseposéというそうです)も、わかりやすかったです。
Mouseposé
人前でデモしたりするときにやっておくといいこと（Mac OS編） – DTP Transit（Mac OS X, セミナー, イベント, 展示会, プレゼンテーション, ユーティリティ）
・CCの機能っていろいろあるんだなーと、新機能を試すのが今から楽しみです。
・使い慣れているつもりになっているソフトでも、知らない機能･活用方法がたくさん。まだまだ勉強しないとですね。
・次回開催されるときには、またぜひとも参加したいです。