Web Designの最近のブログ記事

nanotyでは、デザインのテンプレートを簡単に量産できるようにしています。

これがベストかどうかはわかりませんが、デザインに関連するヘッダや各ボックス用のイメージを全て一つの画像に集約し、この画像一枚を変えるだけでもデザインの変更が可能になるように設計しています。

基本デザインがこれ

このデザインに関わる画像は下記の一枚だけ

このようなテンプレート用の画像一枚を差し替えるだけで、こんなデザインに変更が可能

スタイルシートの構成はこんな感じ。

・ベース用CSSファイル（共通）
・テンプレート別CSSファイル

基本的なスタイルを定義したベース用のCSSファイルとテンプレート別のCSSファイルの2つが用意されています。

特にCSSの変更が無ければテンプレート用のCSSには何も定義しません。
微調整したい場合のみ、該当箇所のスタイルの定義を行います。

テンプレート用のCSSが後に読み込む順番となっており、必要な箇所だけ定義を上書きする形で個別に微調整したレイアウトが可能となっています。

これにより、特別な技術やノウハウが無くても容易にテンプレートのデザインが可能です。

現在は、運営スタッフしか変更できませんが、もっと簡単にした上でユーザーが自由にデザインできるようにしていきたい。

昨日から、nanotyのテンプレートを増やしていますので、nanotyでSNSを作成された方はテンプレートをお試し下さい。

最近、仕事でスタイルシートを利用するので、自身のサイトである「JAB-NETWORK」をCSS化させてみた。

トップページだけだが、これまでのTABLEレイアウトと寸分変わらず再現できたと思う。
これで、HTMLファイルの容量も半減でき、ソースもかなりSEOに対応できたのではないか。

自分がWebデザインをはじめたのは96年頃。当時のサイトはどれもデザインとは程遠いレベルの物が多く、そんな中でTABLEを駆使しそれまで培ったグラフィックデザインと同等の表現を目指していた。

しばらくするとスタイルシートも目にするようになったが、その時点ではまったく拒否していた。業界的にもスタイルシートはまだまだという認識であったが、昨年辺りからこの認識も大きく変わってきた。

自分が大きく意識を変えるきっかけになったのは、ヤスヒサさんの著書「スタイルシート スタイルブック」からである。

スタイルシート スタイルブック

posted with amazlet at 05.08.05

有坂 陽子 長谷川 恭久
翔泳社 (2004/02/11)
売り上げランキング: 11,440

おすすめ度の平均:

気をつけて！
はじめてCSSに触れたとき・・・
デザイン分野のコンピュータ書籍

Amazon.co.jp で詳細を見る

ヤスヒサさんとは実際に何度かお話させて頂いたが、やはりすごい方である。その後出版された「進歩し続けるWebデザイナーの考え方―Web designer 2.0」もビシビシ伝わってきた。

進歩し続けるWebデザイナーの考え方―Web designer 2.0

posted with amazlet at 05.08.05

長谷川 恭久
ソシム (2005/02)
売り上げランキング: 36,615

おすすめ度の平均:

むしろWebディレクターやWebプロデューサーの方に読んでいただきたい
WEBデザイナーとは。
Webデザイナーとして生き残るための素養

Amazon.co.jp で詳細を見る

そんな感じで昨年末あたりから本格的にCSSに取り組んできており、ようやく自身のサイトにも手を付けた訳である。

と言ってもトップページだけだが．．．

それにしてもCSSはちょっとした記述の違いで思いもつかない動きをするのでなかなか手ごわい。ブラウザによってもまちまちなので奥が深い。

まだまだ不十分な記述が多いので、ぼちぼち手を加えていきますかね。

ITmediaニュース：「Googleサジェスト」日本語版が公開に

「Googleサジェスト」日本語版が公開された。

さっそく日本語で試してみると...

「あ」をいれた途端に「あびる優」が一番上に！？

suggestが公開された時によくこの順位付けがどうなっているのか話題になっていたが、旬？な話題が反映されているのだろうか？

「Web Designer 2.0 - 進歩し続けるWebデザイナーの考え方」という「COULD」のヤスヒサさんが書いた本を購入。

ヤスヒサさんとは何度がお会いした事もあり、デザインに関するこだわりなどを聞いたことがあったので、非常に楽しみな本である。

まだ最初の数ページだけしか読んでいないがかなり期待感あり。

今夜中に読みきってしまおう。

Webデザイナーは必読！！

Ask.jp正式サービス開始。検索結果を保存できる「My Ask」など追加

Ask.jpがいよいよ正式にサービスを開始しました。

検索結果をリスト化してストックできる「MyAsk」など重宝しそうな機能もあるようです。

-------------------------------------------------------
MyAskを使えば、保存しておいた検索結果のなかから、いつもでも好きなときに必要な情報を取り出すことができます。
例えば・・・
・フォルダでの管理
・コメントをつけて保存する
・メールで友達にお知らせする
・保存結果を一括印刷
など、使いやすい機能がそろっています。
-------------------------------------------------------

検索エンジンも様々なサービス、形態が出てきています。検索のあらたな手法・方法、より趣向にそった結果の提供、知り得た情報のストック、他の人との情報共有などなど。

これまで想像もしなかったようなサービスも今年はいろいろと出てくるのでしょうね。

C O U L D：信頼性を得るには

Webサイトにとっての信頼性に関する調査データについて「COULD」にコメントされていました。

◇How Consumers and Experts Rate Credibility on the Web

100サイトを対象に信頼性という切り口で調査されており、結果はデザインが46.1%と二位の情報構造や整理28.5%を大きく上回る結果となった。

やはり最初の見た目の印象というのが信頼性において重要なポイントなのであろう。見た目が全てではないが、このサイトを見てみようと思わせるにはデザインは不可欠である。もちろん、コンテンツ及びサイトのユーザビリティー等様々な面でユーザーに支持されなければ継続的に見てはもらえない。

最初のインパクト、コンテンツ内容、使い勝手等バランスの取れたサイトを構築する事で本当の意味での信頼性のあるサイトとなるのだと思う。

はたして自分のデザインしたサイトがどこまで支持されているのか...

日々精進していくのみである。

Movable Type: Movable Type 3.1日本語版の提供を開始

ようやくMovable Type 3.1がリリースされました。
さっそくインストール。

その前に、昨日パッケージを購入しようとした際になぜかうまくいかない。まさかフィッシング？と思いつつサポートにメールしてみたら再度試してくださいとのこと。今日あらためて試してみたけど最初は昨日と同様にうまくいかず、何度か試してようやく購入ができました。

必要事項を記入し、カード情報まで入力して確認画面を通り最後の購入ボタンで最初の画面に戻ってしまう症状でしたので、ちょっと怖いですね。

接続のタイミングでたまたまそういう症状なのかもしれませんが、改善してもらいたいところです。（サポートの返信メールも機械的で冷たかったですし）

で、インストールは簡単でした。
アップグレードパッケージをダウンロードし、サーバーにアップして該当するアップグレード用のCGIを実行するだけです。（作業時間は10分程度でしょうかね）

とりあえず現状のコンテンツも問題ないようですので、今後は新機能を活用していきたいと思います。

試行錯誤しながらCSSデザインの基本を勉強中です。元々このサイト「News Clipping」は勤めている会社のCMS「簡単Web」でHTMLベースで作っていたのですが、それとほぼ同じレイアウトをMTとCSSで試してみました。

レイアウトをピクセル単位で設計しブロックをどのように積み上げるのか、まだまだ勝手が掴めません。
慣れればTABLEベースのレイアウトより詳細なデザインができそうですので、早く身に付けて「JAB-NET」への対応ができればと思います。

JAB-NETはベースが黒でオレンジ系の文字や画像が多い為、非常に目立ちやすく、よくユーザーから仕事中に見てるとバレやすいなどと言われます。（苦笑）
CSSで好みのカラーセットに切り替えなんてのもニーズがあるかもしれません。（よくポータルでやってますね）

最近、Movable Typeを使い出してからスタイルシートについての認識をきちんと見直さなければいけないと感じています。CSSが出始めた当初は、ブラウザーによる表示のバラつきが多く、仕事でサイト制作をする上ではまだまだ使える印象はありませんでした。使ってもフォントに関する一部の設定ぐらいがいい所で、レイアウトに関する部分はほぼ利用した経験がありません。ピクセル単位の詳細なレイアウトを行うのにはTABLEと透明GIFを多用し、表示上は思いの通りに表現できていました。

それから数年が経ち、Movable TypeでCSSを触り始めると、これまでの経験がトラウマのように邪魔をしてしまい、結局はTABLEでレイアウトを組んでしまっていましたが、各Blogポータルが提供しているデザインテンプレートの在り方を見ると、そろそろCSSでのレイアウトにも目を背くわけにはいかないようです。

そんな中、出会った一冊が「スタイルシート・スタイルブック」です。自分の経験と現在の思いが見事に重なる所が多く、また内容も違和感無く読むことができて、CSSデザインにトライする気持ちになりました。いろいろと実験を重ねながらCSS本来のメリットを活かしたサイト制作を進めていきたいと思います。

JAB-NETのMovableType化を進めてきましたが、コンテンツの一部がようやく完成しました。

「CATALOG FILE」

カテゴリの分け方やトップ、カテゴリトップ、個別等での表示をMovableTypeの仕様内でこれまでのページに合わせるのに少々手間取りましたが、何とか思い通りの形になったのではないでしょうか。
blogというよりはCMSとしての活用ですね。今後他のコンテンツもMovableType化を進め、縦軸横軸でサイトを横断しコンテンツに相乗効果がでるように仕掛けられたらと思っています。