« 2008年7月 | メイン | 2008年10月 »

2008年8月 アーカイブ

2008年8月14日

Web:Libertasデザイン変更に伴って雑感

僕自身のサイトをリニューアルしました。現段階('08.08.06)ではblog以外ですが、間違いなく完成するところまで来たので、備忘録、雑感などを書き留めます。

Libertasデザイン2
トップページの全体。白と余白を大事にするように気を使いました。そしてこれに絡めた話題。Webページのデザインってどうしたら出来るのか、クリエイティブな発想はどこから来るのか。今の自分のレベルで感じていた事はこんなこと。

Libertasとしての悩み

同人サイトとしての問題

僕のサイトはとりあえず同人サイト。同人サイトってことは、絵とかがあるわけです。色々な絵を描くはずですが、やっぱり健全な同人はエロがあって肌色があるわけです。そこで衝突が起きたのは、僕のサイトは大気を表現したデザインにしたかったこと。大気といえば空やら雲ですね。ってことはブルーです。しかしどうにも同人サイトにブルーは大敵だと思いました。

技術がないために写真加工は使えません。そのため、ブルーは直接色としてどこかに使用されます。考えたら、色の効果として冷静、鎮静効果があるために、エロにブルーを使うと、たぶん冷めます。冷静になってしまってエキサイトしてもらうことが出来なくなる。それじゃあ問題ありです。で考えた結果、大気の表現は止めよう、となりました。それに代わるレッドなら、たぶんエロい効果があるはずです。ほんのり温度を感じる、きっとエロい。エロいことはいいことだ。以上のことが同人サイトを作る際に感じたこと。

背景が白いことは面白みがないのか

同人サイトはどこ行っても白ばっかり。先に取り上げた問題に気がつく前は、こちらもどうしたらいいか悩みました。青がいいんだ、という思いは理詰めで行かないと納得してくれません。

結論を言うと、背景が白い方が汎用性が高い。当たり前の話ですけど、体感するのにこれだけかかるとは、素直じゃないです。

僕のサイトは、同人サイト兼blogサイト兼......と、何をしだすかわかりません。先ほどの問題のように、コンテンツカラーが反発する可能性もあります。不適合なコンテンツは別サイトを作ればいいのですが、そうも言ってられない大人の事情があります。無彩色の黒でも代替が可能ですが、黒い背景は目を疲れさせるWebコンテンツとしての問題が付きまといます。やっぱり白いほうがいいようです。もちろん文字とのコントラストを考えた上での話。

Portfolioサイトでは、白以外のあるカラーで統一して作成している場合が多くありますが、それも単品物のサイトだからでしょう。少なくとも今の僕の技量では、色を使うことは出来ません。白も白なりに難しいのですが。

製作最中の悩み

デザインに泣く

僕はデザインについて一般以上の知識を持ち合わせていませんが、今回の件を踏まえてデザインは気が狂うほど難しいと実感しました。それではデザインとは何か。Wikipediaを参照すると以下のようにあります。

デザインの語源はデッサン(dessin)と同じく、"計画を記号に表す"という意味のラテン語designareである。つまりデザインとは、ある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。

これを踏まえて、普段なんらかの創作をしているときにデザインをしているのか、といわれると非常に怪しいですね。『ある問題を解決するために思考・概念の組み立てを行う』、これはどう読んでもアタマを使う話です。思いつきではなく、目的へ向けた明確な思考プロセスがないと土台が弱い。ましてや専門の教育も受けていないので、今回は前回の色彩論の付け焼刃知識をベースに、数多のWebページを教科書として読み解いていきました。色彩論、個人的には十分に役に立ちました。

結果、文章レイアウトのパターンは以前から知っていたのですが、Webデザイン的にするべからず、と(暗に指摘しているように思えた)パターン、配色が見えてきました。この事はもう少し積み立てて確固としたものにして情報量を増すまで、言及は避けようと思っていますが、文章にしなければ理解しにくいことだと思えるので、いずれ挑戦してみたいです。

製作時間に泣く

納得の行くサイトを作るのに今回費やした時間は、直接的には7日間です。この期間はサイト作りと逃避のブラウジング以外何もしていませんでした。i Know!が遅れたりランニングにいけなかったりと、個人的には最低の期間。中のあたりは意識飛んでました。気がついたら完成、気がついたら2度目の月曜日。

しかし間接的には2年です。サイト製作を勉強したのが3年前、実際にサイトを構えようとCSSで本格的に組みだしたのが2年前。そしてサーバをレンタルしたのが1年半前。LibertasはTopデザインを2度過去に変えていますが、確かに実力が上がっていくのがわかりました。お絵かきみたいだ。

素人の考えですが、やはり勉強をしても頭でっかちなだけで、折角だから勉強ついでに、と実装したいことが目的にそぐわなくともやってみたくなります。あるところでは極端にユーザビリティを重視してみたり、はたまたモダンブラウザのみのレイアウトで構成したり。これらは一旦吐き出してしまわないと、どうにも我慢が出来ないもので、若気の至りと考えればいいのでしょうか、それを乗り越え、今回のデザインに到達できたわけです。その甲斐あって、考えがぐっと深まりました。それだけでもよかったのかもしれないです。

製作期間を支えてくれた音楽はこちらの二つ。アーティストBT含むTrance徐々に明るくなるHouse、どちらもニコニコ動画です。精神的にかなり助けになり、感謝も含めてBTのアルバム、ESCMを購入しました。そしてデザイン名を、ある音楽にちなんで『Fleming August』としました。二つ含めて個人的な感想はProgressiveですね。成長を予感させる音楽はいい。

その他製作期間中に思っていたこと等

すごいなと感じた大学生のサイト

二人しか捕捉していませんが、一人はfamiさんのサイトMOGSTYLE。こちらのデザインになったのはfamiさんが20になられた時のはずですが、しっかりとした作りでこれぞxhtml+CSS!といえるサイトをはじめて感じさせてくれました。これを二十歳で作るって......すげえぞ。最近は更新されていないのが残念です。

もう一人は『の』さん(かっこ付けでないと読み飛ばしてしまう)のサイトVERSION510。こちらも二十歳のときに作られたサイトのはずです。落ち着いた配色と、方向性のぶれないコンテンツは、『の』さんの人格を感じます。これを二十歳で作るって......すげえぞ。最近はVERSION510を離れ、別サイトの運営をはじめられているようです。そちらもコーディングが確りしていて、大人の作りでカッコイイ。

お二人ともアマチュアです。(前略)すげえぞ。こうやって並べるって事は、やはり意識しているからなのですが、依然雲の上。画像加工を含めて、レベルアップしていきたいです。Webデザインを意識して製作し、3年であのレベルに到達できるケースを何例か見ました。たぶん3年やれば到達できるんです、きっと。それに期待しながらアンテナを伸ばし続け、来年の冬には、僕ももう少しクールになりたいです。

2008年8月17日

iKnowブログパーツ、xtmlに準拠したobject要素への書き換え

iKnowいいよiKnow。iKnowとは英語の勉強が無料で出来るWebサービス。今回はXHTML 1.0 Transitionalに対応させつつ、IE6.0やモダンブラウザでも動作するiKnowブログパーツへの変更方法です。

iframeやembedをobjectへ変更する方法は、過去記事のNike+、xhtmlに対応したobject要素への書き換えアマゾンアソシエイト、<iframe>を<object>にStickam、<embed>を<object>にでも解説しています。

実用範囲についての注意

方法は以下に示しますが、その前に注意書きを何点か。

  • XHTML 1.0 Transitionalについてのみの解説(Strictでも動くかも
  • ブログパーツの表示形式が異なるときはwidthやheightに注意
  • &の文字を文字実態参照(&amp;)、もしくは数値文字参照(&#38;)に置き換えること
  • CSSを切ると表示されないようです。執筆時点では原因はわかりません。

実際の表示

今回はJavaScript無しの表示形式に対応しています。

テンプレートと使用方法

テンプレートは以下の通り。3種類とも共通部分が多くあります。

<object data="http://www.iknow.co.jp/widgets/iknow_public_badge.swf"<!--iknow,dectation,brainspeedそれぞれ合わせてください-->
	type="application/x-shockwave-flash" width="150" height="40" id="iknow_badge">
<param name="movie" value="http://www.iknow.co.jp/widgets/iknow_public_badge.swf" />
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="always" />
<param name="FlashVars" value="FlashVarsのvalue値。&を&#38;に変更" />
</object>

使用する際には前述した"&"を書き換える注意事項を踏まえたうえで、表示されているurlに同じものを記述してください。ここには表示形式に関する情報が入ります。

注意で示した点。CSSを切ると表示されないのは何故なのかわかりません。失念しているだけのようにも思えますが、注意してください。

最後に、iKnowをこの記事で興味をもたれた方、既にお使いになられている方、よかったら先ほどの表示例から飛んで、フレンド登録してくださいー。それぞれの目的のために共闘しませんか、と宣伝しておきます。

About 2008年8月

2008年8月にブログ「Libertas」に投稿されたすべてのエントリーです。過去のものから新しいものへ順番に並んでいます。

前のアーカイブは2008年7月です。

次のアーカイブは2008年10月です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Creative Commons License
このブログは、次のライセンスで保護されています。 クリエイティブ・コモンズ・ライセンス.
body>