デザイン: 2009年5月アーカイブ

フロントエンド・エンジニア

(2009年5月31日 20:36)

現場から

最近、ようやくいろいろな所でフロントエンド・エンジニアという言葉を耳にするようになってきた。

webに携わっている人なら、あまりよく知らなくとも一度ぐらいは聞いた事はあると思う。

今まではWebの制作の職種名は「Webデザイナー」や「コーダー」という名前でした。

でも、Webサイト構築が以前にもましてより巨大化、複雑化していくにつれて、その作業内容も大きく変わってきているのが実情。

ビジュアルを担当する文字通りの「デザイナー」や、そのデザインに沿ってCSSの設計を行う「フロントエンド・エンジニア」、その設計にしたがってマークアップを行う「マークアップ・エンジニア」などは、Webサイト構築におけるそれぞれの作業を担当する職種名。

それぞれがが深い知識や経験が必要だと思うし、これらを「Webデザイナー」の一言で表現するにはもう難しいのかとも思う。

HTMLやCSS、JavaScriptを「きれい」に書けるという技術は、なかなか見えにくいけれども、きっととても重要だし、今後も業界自体その傾向は強くなるんじゃないかな？

海外では日本ではまだあまり聞かない、「情報アーキテクト」という職種もしっかりと確立されてるそうな。（情報アーキテクチャを考えて決める人）

Helvetica & Arial

(2009年5月18日 23:26)

現場から

欧文フォントの王様は、おそらく全員『Helvetica』って言うと思う。

な、ぐらい歴史と実績を持つ欧文フォント。

と、windowsユーザーにはおなじみに『Arial』

比べるとこんな感じ。

両フォントとも非常に似ていて、片方が片方の代用として使われることもよくあります。

ちなみに念の為、読みは『ヘルヴェチカ』。『ヴェ』です。

一方、『アリアル』という人もいれば『アライアル』という人もいる感じだそうな・・・

看板やそれこそ探せばそこらじゅうで目にするHelvetica

欧文フォントに悩んだときは使ってみてはどうですか？

Opera実験

(2009年5月16日 16:12)

現場から

最近Operaをインストールしてみたのですが、
これが意外に快適と判明。
かなりストレスのないブラウジング可能でした。

IE中心のこの時代、IE用に作られたサイト達が、
Operaで問題なく表示できるのか早速試してみました。

そこで1つ判ったのが、
「lightboxのレイアウトが正しく表示されない場面がある」
ということ。

Lightbox2.0Demo_thumb.jpg

しかしこれはIEでもFOXでも起こりうる問題。
そう捉えれば、大きな問題ではないのかも。

しかしOperaのシェアは現在ほとんどないのが現状で。
優秀な（だと思う）ブラウザが、これほどまでに普及していないのは、
悲しいやらもったいないやらで。

今後のOperaの動向、気にしたいです。

Web Do's and Don'ts

(2009年5月16日 00:39)

現場から

Web デザインにおいてすべきこと、すべきでないことをまとめたページを見つけました。

でも英語です。

ですがわかりやすいように Do's and Don'ts が左右に並べられていますので

なんとかわかるかも。

デザインには絶対はないので人によってはそれは違うというのもあるかと思いますが

参考程度に眺めてみるのも面白いかもしれません。

参考リンクもあるのでよくわからないときは原文を見るのもいいかもしれません。

中々親切設計です。

が、英語です。

http://webdosanddonts.com/

リンクカラー設定の防忘録

(2009年5月15日 22:15)

現場から

今さらですが、いつも使うくせにいつも忘れてしまうリンクカラー複数設定。

毎回毎回、『あれ、なんだっけ？』と言って調べているので、ここら辺で残す事に。

以下がHTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>リンクカラー</title>
<meta http-equiv="Content-Style-Type" content="text/css">

ここがリンクカラーのスタイル

</head>
<body>
<a class="red" href="top.html">赤文字リンク</a>
<a class="yellow" href="home.html">黄文字リンク</a>
<a class="green" href="nikki.html">緑文字リンク</a>
</body>
</html>

こう書くと

こう表示される。

要はクラスでカラー設定を増殖させて、実際のリンクにクラス属性を付与。

非常に簡単なんだけど、なぜかいつも忘れてしまう。

でもこれで大丈夫。

web制作に便利なFireFox拡張シリーズ　2

(2009年5月14日 23:30)

現場から

入れとくと何かと便利なFireFoxの拡張。

制作の現場ではかなり、重宝されます。

今回はこちら。

『MeasureIt 0.3.8』

簡単に言うと、ブラウザー上で動く定規です。

バナーを作るときや、メインのイメージを考える時に

近いイメージを測ってみたりします。

そんなに多様する事はないですが、

あった時とても便利。

使い方もいたってシンプル。

ワンクリックで、画面固定で定規発動。

是非。

色、色々。

(2009年5月13日 23:50)

現場から

ＷＥＢデザインに限らず、様々な物作りにかかわってくる要素。

色。

日々悩まされています・・・

色相環みながらイメージに合う色を・・・と考えるのですが

全体をみると中々うまくいかないものです。

単色では安っぽいものになってしまうので

濃淡のある色使いをしたいのですが・・・日々勉強です。

カラーチャート.png

同じ同系色で明度や色相を変えて複数使い分けるだけでも

かなりまとまったイメージには仕上がります。

ポイントで相対色なども使いって行くとメリハリもでて

見やすいものが出来上がると思います。

縦横比

(2009年5月 9日 23:56)

現場から

デザイン関係の話でしばしば登場するワード、

「黄金比」・「白銀比」について。

まず「黄金比」。
古来より最も美しい縦横比だといわれています。
モナリザやオードリー・ヘップバーンが美しいのは、この比率が1：1.618、
つまり黄金比だからとも言われているそうで。
自然界においてもオウムガイの殻の螺旋（らせん）形状が黄金比の代表としてよく出ます。

次に「白銀比」。
これは日本に古来から伝わる比率だそうで。
正確には1：1.4142だそうです。
古来より均整の取れた美しい比率だといわれ、
仏像の顔や、法隆寺の五重塔を上からみた形状など、
日本の建築や彫刻、生け花などに用いられてきた比率で、
大和比（あるいは、日本の黄金比）ともいわれます。

webの世界でもよく多用されているこれらの比率ですが、
黄金比を自動計算してくれる便利ツールなども最近発見。

http://zapanet.info/blog/item/1298

...意外と便利ですね、これ。

いつも思いますが、72dpiの世界、奥深いです。

検索連動型広告のクリック経験は約7割

(2009年5月 4日 14:41)

現場から

このレポートは、インターネットコムと goo リサーチが行った調査だそうです。

調査対象は全国10代～50代以上のインターネットユーザー1,071人。男女比は男性52.9％、女性47.1％。年齢別は10代16.1％、20代18.3％、30代21.6％、40代16.3％、50代以上27.7％。

回答者全員に対して「検索サイトで検索結果の右側や上部に表示されている広告リンクをクリックしたことがありますか」との質問に対して、「ある」との回答は69.5％（744人）と7割程度いるそうです。

広告だとわかっていても自分の気になるものが目に入ったらクリックしてしまいますよね。

次に検索連動型広告のクリック経験がある744人に「検索連動型広告をどの程度、目にしますか」との質問を行った結果ですが、「検索のたびにほぼ必ず」との回答は16.3％（121人）。「よく見る」40.2％（299人）との合計は56.5％と半数を超えていて、「めったに見ない」との回答は5.8％（43人）だそうです。

研究された視覚効果の高い広告を良く見かけます。
人にクリックしていただけるようなものを作れるように
日々研究です。