10月9日に開催された「美しいウェブサイトの作り方」出版 &「Zenlogic with FONTPLUS」記念セミナーに参加してきました。

買いました！

「人を惹きつける 美しいウェブサイトの作り方 人に伝わるデザインと制作のレッスン」の出版記念でデザインの基礎的な話と、Webフォントを無料で試せる「Zenlogic with FONTPLUSキャンペーン」が開催中につきWebフォントの話もありました。

人を惹きつける 美しいウェブサイトの作り方 人に伝わるデザインと制作のレッスン

著者はデジハリに通っていた頃Webデザインについて教えていただいてた瀬口先生です。

Webデザイン初心者向けに書かれていて、7つの制作事例をもとにWebデザインについて勉強できます。

人を惹きつける 美しいウェブサイトの作り方 人に伝わるデザインと制作のレッスン

作例は全てPSDデータ、htmlデータ共に付録のCD収録されています。
それを元に作り替えたりして、商用利用OKだそうです。

太っ腹！

Zenlogic with FONTPLUSキャンペーン

Zenlogicはクラウド型ホスティングサービス。

ちょっとこの辺の知識に疎いんですが、クラウドみたいな難しい操作が不要で、レンタルサーバーと変わらないぐらい簡単なコントロールパネルがあるそうです。

それでいてクラウドみたいにディスク容量の拡張ができて、初期提供の100GBから最大2,000GBまで拡張可能。

そのZenlogicを契約すれば先着100名にFONTPLUSを無料で試せるキャンペーンが開かれています。

Zenlogic with FONTPLUS キャンペーン

一度だけFONTPLUS使ったことあるんですが、日本語のWebフォントが使えるのがすごく嬉しい。

キャンペーンではフォント数が制限されてしまいますが初期費用がかからないので、使ってみたいけどどうしようか迷ってた方にいい機会ですね。

太っ腹！

美しいウェブサイト制作 Tips＆テクニック

最初にWebデザインの基礎についての話。

スライドは写真撮っても、ネットで公開しても大丈夫とのことなので、一部載せてます。

美しいデザインとは

今はフロントエンドですが、Webデザイナーとして前の会社で働き始めた時「デザインは学問だから、勉強すればできるようになる」言われたことをよく覚えています。

Webデザイナーになる前は、デザインってカッコイイ見せ方を考えたり、かわいい装飾をしたり、何かこう表面上の見栄えをどうにかこうにかするものでセンスが必要と思っていました。

それも大事ではあると思うんですが、このセミナーでも言われていた通り美しいデザインとは「情報が整理されていて、視認性・可読性が高くユーザーフレンドリーな設計になっていること」です。

美しいデザインをするための基礎として、デザインの基本4原則が紹介されていました。

近接

関連するものは近づけて関連の薄いものは離す。

整列

配置は揃える。左揃え、中央揃え、右揃え。

反復

繰り返しは統一感をもたせる。

コントラスト

色の濃淡やフォントの種類や大小など要素の違うものは差をつけて明確にする。

これさえおさえておけば、デザイナーでなくても会社の資料作りの見栄えも変わってくるそうです。

視認性・可読性を高く

以前、会社でキャンペーンで一時的に使われるバナーを作っていて、完成したものをチェックしてもらう時、そのバナーをいきなり白黒にされて「えっ、何やってるんだろう？！」となりました。

白黒にしたところ、強調したいところの文字が見づらいことでNG…。
つまり視認性がダメということでした。

視認性とは、目で見たときの見やすさのことです。

白黒にしていると視認性が高いか低いかがよく分かります。

こちらが失敗例

カラーでは一見いいんじゃないかと思っても、白黒にするとタイトルが埋もれちゃってますね。。。

白黒にすると視認性が弱いことが分かります。

そして、こちらOK例

白黒にしてもしっかり文字が読めますね！！

さらに言うと、実際にバナーをサイトに埋め込んでみてサイト全体を白黒にすると、そのバナー自体がサイトに埋もれてないかも分かります。

以前作ったバナーはサイトの他の要素に負けてしまう視認性が低いバナーを作ってしまったせいか通常時より広告効果を下げてしまいました…。

視認性をおろそかにしてしまうと、せっかく作ったバナーの効果にも響いてしまいます。

デザイナーの方からするとこの白黒にしてみるのは当たり前かもしれないですが、Webデザイン初心者だった自分や普段デザインをしてない方にとっては、けっこう目から鱗な検証法だと思うので、資料やスライドを作る時にチェックしてみるといいと思います。

ちなみにサイトを白黒にするのはChromeとFirefoxの拡張機能で「unclrd」というものがあります。

unclrd

ツールバーに表示されたボタンをクリックするだけで、その場でカラーか白黒かを切り替えられるのですごく便利です。

ユーザーフレンドリー

そのナビゲーションはユーザーにとって使いやすいか？

そんなことを考えるのもデザインです。

例えばこちらの写真。

よくWebサイトを閲覧している人はこれを見ただけで「プラスボタンを押したらナビゲーションが開いて、プラスがマイナスボタンに変わり、マイナスボタンを押すと閉じる」と分かると思います。

でも、それが分からない人もいるかもしれません。

正解はないと思いますがサイトのターゲットや目的によって、それってユーザーにとって使いやすい？？と考える必要があります。

ナビゲーションに限らず、個々の要素の挙動、ページ遷移などなど。

デザイナーってアートっぽいと思いきや、けっこうロジカル。

これが前の会社で言われた「デザインは学問だから、勉強すればできるようになる」ということなんですねー。

他にもウェブサイト設計などいろいろ話されてましたが、美しいウェブサイトの作り方に書かれていると思うので、そちらをじっくり読むといいと思います（勝手に宣伝）。

Webフォントの基礎知識と導入について

Webフォントは、CSS3から策定されたWeb上からフォントを表示する技術です。

Webサイト上のフォントは特に何もしないと、PCに入っているシステムフォントを表示させるため、環境によって見え方が変わったりします。

Webフォントを使うと、Web上からフォントを指定するので、環境に振り回されず同一の表示にすることができます。

また、例えば特殊なフォントで見出しを作ったとすると画像で書き出してimgタグで埋め込んだりしますが、修正があった場合に面倒です。あと、画像だとちょっとギザギザしちゃったり。

Webフォントだとテキストなので修正も楽ですし、拡大しても綺麗。

海外サイトではWebフォントが当たり前になっているそうです。

FONTPLUS

FONTPLUSは、700書体以上のWebフォントが使えるWebフォントサービス。

契約して、Webフォントを利用するサイトのURLを登録して、scriptタグをhtmlに貼り付けるだけで簡単に使えます。

以前はフォントフルセットを毎回読み込んでいたので遅かったそうですが、今は必要なフォントだけ取ってくる仕組みになっているそうです。

JavaScriptが0.1秒ほどピコピコっと動いて必要なものだけとってきてくれます。

速度改善の比較動画が流されていましたが、今は全くストレスにならない速さです。
すぐに表示されていました。

これはこのフォントが使われています

セミナー後のトークセッションで出た話ですが、これにはこのフォントが使われていますというのが面白かったので紹介。

その前にこんなカタログもらいました。

いろんなフォントが紹介されてますが、見てるだけで楽しい！

中にはどこかで見たことあるようなフォントもいくつか。

くろかね

これどこかで見たことないですか？

くろかねはパズドラで使われています。

言われると分かる！笑

コメット

これはあの漫画を読んでる人は分かるかも…。

これは漫画・宇宙兄弟で使われているフォントです。

コミックレゲェ

お笑い番組好きな人は見たことあるかなー。

これはアメトークなどの番組で、ちょっと毒のある発言した時に使われているそうです。

モード明朝

これは分かる人少なそう。。

これはテレ東のワールドビジネスサテライトのテロップで使われているそうです。

証券会社で働いていた時よく見てたなー。

さいごに

久しぶりのデザインのセミナーでした。

フォントは詳しく勉強してこなかったので、これを機に勉強してみようかなー…。