2010年5月 | 沖縄のWebデザイナーChopstickBrunch

ふと立ち読みしたインテリア関連のムック本で、安い家具でかっこいい部屋を作る！的なコーナーの見出しです。

で、紹介されている家具は、デザインされていないどころか、とてもシンプルでバランスのとれたデザインのチェストだったりソファーだったり、センターテーブルだったりでした。

ああ、真四角だったり真ん丸だったりすると、「デザインされていない」という事になってしまうのか。
何色も色を使ったり、ウネウネとしたフォルムだったり、柄が入っていたりすると、「デザインされたもの」なのか。
では、ソフトバンクのロゴはデザインされていないのか。

だいぶ前ですが、Webサイトのタイトルロゴタイプを作って提出したときに、「え、ただの文字じゃないか、なんかこうもっとこう、デザイン性が欲しい」と言われたことがあります。
最終的にOKが出たのは、サンセリフ体の細いフォントと、太いフォントを組み合わせたものでした。

デザイン性ってなんなんでしょう。

このロゴタイプも、クライアントが世間からどういうイメージを持たれたいのか、どう表現すれば最適なのかを考えて考えた末に、フォントを選び、ちょっとだけ太らせて、最適な余白を取ってバランスを取って配置したものだったんです。

何がいけなかったんだろうか。ずぅーっと疑問だったんです。

それで、4月にＴポイントMESH応援プロジェクトを制作したときに、CCC様からTポイントのロゴマークの使用規定書（Tポイントのロゴは佐藤可士和さん作）をお借りしたんですが、フォントの指定だとか余白の指定、同時に使用する表現の指定なんかが細かく書かれていて、ブランドイメージにブレが無いように考慮されている事を感じました。

今考えると、あのときのロゴタイプはちょっと浅はかだったなぁと思うわけです。

文字間隔の取り方とか、もっと詰めて考えて提案していたら、一発OKが出ていたんじゃないかと思えて仕方ありません。（まぁ、ロゴデザインの料金は入っていなかったのでそこまで時間取れませんでしたが…）

ちなみにそのロゴタイプ、いまもWebサイトでも、TVCMで使われてます。感慨深いなぁ。。。

うちは残念ながら使っていないのですが、BiNDというホームページ制作用ソフトを作っているデジタルステージの平野さんという方の講演を聴いたことがあります。

その中で印象的だったのが、「Webはどうして編集会議しないですか？」でした。

www.digitalstage.jp/bind/notes/column01.html

こんな会議で進行している案件、けっこうありませんか？

たしかに、デザイン、コーディングにかかる時間は膨大ですし、それぞれが専門職なので目の前にある仕事に集中するのは当たり前なんですが、何か大事なことを忘れてないですか？

逆に、当たり前の事を忘れていませんか？

沖縄県内のお客様と初めてお会いするときに、名刺の住所を見て「えっ、中城！？」と、驚かれることがよくあります。

Web制作会社（うちは個人事務所ですが）は、やっぱり那覇や浦添というのがメインストリームなんですね。

とはいえ、ウチの場合は遠隔地からのご依頼がほとんどなので、実はそんなに都会にある必要もないんですね。
すばやく東京に行く必要なんてまずありませんし、東京・大阪からのご依頼だと、街中で仕事するメリットはあまり無いです。従業員が多い会社でしたら、人の出入りも多いでしょうし、ランチ難民問題なんかもあるので、街中のほうが良いはず。クリエイティブな感性を刺激するところも多いですからね。

さて、前置きが長くてすいません。

Chopstickは、沖縄県中頭郡中城村というところにあります。西原町・宜野湾市・北中城村にかこまれた、東海岸の村です。人口約1万3千人ののどかなトコロです。高台から国道329号線に下る坂の途中にあります。ので、海が一望できます。

シゴトバからの眺めはこんな感じで、津堅島と久高島が見えます。

このブログ経由だと思うんですが、Chopstickのお問い合わせフォームから、Webデザイナー志望の方から応募があります。

おかげさまで、たくさんのお仕事をさせていただいて忙しい身ですから、猫の手も借りたいくらいで、実際にたまに妹（学生）の手を借りたりもします。とはいえ、うちはまだ個人事務所で、社会保険も雇用保険も労災もありませんから、就職するには不適だと思います。誰かを本気で雇って養うほどの規模ではありませんので。

ですが、Webデザイナー志望の方々は応援したいと思っているので、ポートフォリオなどを見せていただいたら、ものすごい辛口な批評をしたりしてます。むしろ、やる気を削いでいないか心配になります。

それでちょっと感じたんですが、Webデザイン初心者の方って、グラデーションとドロップシャドウがどうも派手なんですね。

全体的なレイアウトなんかはセオリー通りやっていて、色の選び方もまともというか素敵だったりするんですが、そのあたりは書籍だとか、スクールだとかで教えてもらえるんだと思います。

たとえば、サイトの上部にあるメニューなんか、こういう感じが多いです。

ちなみにPhotoshopで作りました。

これちょっとまぶしくないですか？何を表現しているのかも不明確ですし、平面に対する文字のZ軸がよくわかりません。手前に浮いてて、光は左上から差してるんでしょうか。それもかなり強い光が。

という風に見えてしまいます。

カッコイイとかダサイとか、そういう次元ではなくて、どうも不自然なんですね。

実際にデザインするときは、もっとちゃんと凝りますけど、同じ色を使って普通に作るとこんな感じ。

文字の位置も、フォントも一緒です。文字を読みやすくするために、ちょっとだけシャドウつけています。質感を出す意味で、すこーしだけ斜めのパターンも入ってます。
我ながら地味で普通ですけど、こういうデザインが普通のサイトでは求められるのかと思います。堅い系の職種のサイトですね。

Webデザイン初心者の方は、もうちょっと全体に地味にしてみましょう。一度グラデーションとシャドウを一切使わないデザインとかやってみるといいかもしれないです。

というわけで求職中の方、ポートフォリオをお見せいただけたら、指導まではいかないかもしれませんが、ツッコミはいっぱい入れますので、試しに送ってみてくださいませ。

お仕事に結びつくかはわかりませんが、趣味の範囲でお答えします。

デザイン関連の本は、スタッフに読んでもらったり、自分でも勉強するために結構色々買ってます。

洋書の図録だったり、小難しい系の本も多いんですが、この3行レシピシリーズは手軽で面白いです。

それほど高度な事が書いてあるわけでは無いし、そのまま仕事に使えるかと言えばなかなか難しいものもありますが、なにか新しい感じのデザインアイデアが求められたときに、インスピレーションをもらう為にパラパラと読んだりすると良かったりします。アマゾンウィジェットでご覧ください。

オススメは地図の本。グラフィックデザイン向けな内容ですが、Webでもオシャレに地図をデザインすると、お店のブランド力向上になったりしますもんね。

デザインに限らず、引き出しは多いほうが良いですから、普段から雑多に雑誌や書籍に目を通すようにしていますが、最近は新都心（おもろまち）のTSUTATAに併設されてるカフェに行く事が多いです。www.tsutaya-ns.jp/

ここ、なにげに無線LANが使えるうえ、売り物の本を持ち込んで読むのもOKなんですね。それほど豊富というわけではありませんが、デザインやWeb関連の書籍のコーナーもあるので、Amazonで買おうかどうしようか迷って、ココにあったら一度じっくり目を通しています。

一度読んだら終わりの本も面白いですけど、デザイン関連の本て繰り返し使うものですから、こういう選び方ができるのは良いですね。

ワークライフバランスってなに？

という勢いで、明け方まで仕事をしていたわけですが、すっかり夕飯を食べるのを忘れていたことを思い出して、冷蔵庫を開けたら、こんなゆで卵が入ってました。

だ、脱力…。

とってもよく勘違いされていることが、Webサイト（ホームページ）は広告という考え方。「ホームページを作ったからお客さんが増えるはず。」という勘違い、してませんか？

広告代理店に発注してホームページを作る場合も多いので、勘違いして当然といえば当然なんですが、Webサイトは「告知」or「情報提供」の場であって、広告では無いんです。

そもそも広告というのは、不特定多数にむけて商品・サービスを知らしめるものなので、自然と目に入ってくるものを差すんです。たとえばテレビだとかラジオだとか雑誌だとか、街頭の看板（デジタルサイネージ含む）だとか。ネットユーザーがホームページを閲覧する行為は、情報を得るor楽しむor購買する事がメインであって、不特定多数のユーザーが自然と集まってくるわけで は無いんですね。

Web上での広告は、たとえばバナーや検索連動型の広告（いわゆるPPC）です。Webサイト（ホームページ）やブログそのものは広告として機能しません。

ということは、他の媒体で使っているコンテンツをそのままWebサイトに流用することは、全然意味が無いという事になります。ユーザーの「知りたい」「楽しみたい」という意図を汲んで、売り上げに繋がるような情報を提供したり、告知したりすることが大事なんです。もちろん、他の媒体に出している広告とビジュアルイメージを合わせることは、ブランド力向上に繋がります。

図式としては、広告なりSEOなりでユーザーを集める→ホームページで情報を提供し告知する→クロージング→売り上げを上げる。という事になります。この2番目の「情報を提供し告知する」を怠っているサイトが結構多いんですよね。

TOPページに配置している要素が、そのあたりを顕著にあらわします。まるでCMのプロットみたいなTOPページだったりしている事がありますが、どんなに綺麗で凝ったデザインにしても、ユーザーに与えるのは印象だけであって、情報では無いですね。

告知する内容は、その商品のメリットであったり、強みであったりだけではなくて、ユーザーにとって有益な知識が必要です。不安を取り除くことも大事です。結局は、以前にポストした一番大事なのはサイトマップ、次がデザイン！に繋がってしまうんですが、根本的な部分で勘違いしたままだと、良いサイトは作れません。

こんな視点で自社サイトを見直してみてください。

・いきなり自社の歴史とか沿革とか語っていたりしませんか？

・イメージ写真とロマンチックなコピーがFlashでスライドしてませんか？

・最新情報が「ホームページをリニューアルしました。」で止まっていませんか？

・パンフレットやチラシのほうが情報量が多かったりしませんか？

・TOPページに外部サイトへのリンクが貼ってありませんか？

・シンプルが一番！と言って、下層ページに行かないと何の為のサイトなのか分からないことがありませんか？

最近、自社運営サイトのレンタルサーバをhetemlに乗り換えました。

CMSの検証とか色々やるので、データベースが沢山作れるのは良いですね。

さて、hetemlに限らず、SSHが使えるサーバにCMSをインストールする時の簡単な方法をご紹介します。

サーバエンジニアの方が見たら、「なにいってんの？」という感じかもしれませんが、たとえばMovableTypeなんかをインストールしようとすると、4000ファイルくらいアップロードしないといけません。

FCKEditorとか、TinyMCEなんかのプラグインもファイル数が多いので面倒なんですね。

STEP１

まず、CMS本体をダウンロードして解凍します。

必要なプラグインをpluginsフォルダやmt-staticフォルダに突っ込みます。

そして、全体をZIP形式で圧縮して、mt.zipとか分かりやすくリネームしてください。短いファイル名が吉

STEP2

サーバにアップロードします。FTPでいいんじゃないかと思います。

STEP3

SSHクライアントを起動します。ワタクシはTera Termが好みです。

hetemlの場合、コントロールパネルでSSHを有効にする必要があります。

アドレスは、ssh***.heteml.jp

パスワードは任意のもので、ポートは2222です。

STEP4

まず、該当するファイルの場所を確認

そうすると、webディレクトリ以下のディレクトリ名が一覧表示されるので、今回MTをインストールするディレクトリを確認しましょう。

仮に「chopstick」としますね。

そうすると、mt.zip というファイルが出てくるんじゃないかと。

STEP5

このファイルを解凍します。このコマンドも超簡単

そうすると、ズラーっと解凍されたファイル名が表示されます。これがやたらと気持ちいいんですよね。

終わったら、ログアウトします。

コマンドは

STEP6

FTPクライアントで、mtディレクトリにアクセスして、cgiという拡張子のファイルの属性を「705」に変更。

mt-config.originalというファイルは、「700」にします。

 STEP7

あとは、普通に/mt/ディレクトリにアクセスして、インストールウィザードに従ってください。

とまぁ、こんな感じです。

実は前職のとき、契約しているサーバのSSHアクセス権限はもらっていなかったんですね。

なので、MovableTypeをインストールするときは、お昼休み前にFTPをセットして、4000近いファイルをアップする仕掛けをして離席したりしてました（笑）

サーバエンジニアでは無いので、そんなにゴリゴリとSSHを触れる必要は無いと思いますけど、あのストレスから解放されたいという方は一度お試しあれ。

ところで、「サーバー」と「サーバ」ってどっちが正しいんでしたっけ？

コーダーは毎日使っていると言っても過言ではない、説明不要のAnother HTML-lint gatewayですが、
いちいちサイトを開いてURLをコピー＆ペーストするのが面倒じゃないですか？

既出かもしれませんが、便利なブックマークレットがあります。

コチラ↓

こちらをドラッグしてブックマークしてもOK→LINT

もう、手放せませぬ。

あ、クリックすると、このページをチェックすることになりますけど、点数は気にしないでください。（笑）

Chopstickは、基本的に95点以上でサイトを作ってますが、ブログは空白行とか「甘え」が出ちゃいますからね。