Blog | ブログ

Webデザイン - Archive

2010.04.20 04:58

初HTML5

内在の風景 | Immanent Landscape という、今年と来年にオーストラリアと日本で行われるプロジェクトのWebサイトの制作をさせていただきました。

i-landscape.jpg

ロゴからサイトデザイン、コーディングまで一通り担当しました。
ロゴは、変わる可能性があるんですが、風景という今回のテーマに関連付けて、写真、映像、キャンバスなどのフレームをイメージする枠っぽいデザインにしました。シンプルに。四角の中が空白なのは、見る人がイメージするための余地。

制作期間が5日ないくらいだったんですが、ページも少なくひとまず公開というのが現状で、今後WPを入れてテキスト類を更新できるようにしていく予定です。

コーディングはちょうどいい機会だったので、初HTML5でチャレンジしてみました。HTML5追っかけていなかったので、本当にいい仕事をもらえてよかった。また、背景画像は最初Flashにするつもりだったけど、それはやめて、jQueryを入れて、ページの表示も同じくjQueryで、ふわっと出てくるようにいろいろ自分としては新しいことを入れていった制作になりました。

しかしまぁ、サイトデザイン自体はシンプルだけど、作家さんの作品が美しいので、サイト自体も随分綺麗に見えていいですね。

これくらいシンプルなサイトで、ちょっと更新ができるような仕様(WordPress)で、15万円くらいから制作可能なので、興味ある方、お気軽にご相談ください。→Contact
あまり制作費のこと書かないですが、たまには書いてみました。

2010.03.12 22:54

可変グリッド(リキッド)レイアウト

可変グリッド(リキッド)レイアウト、ちょっと気になってます。

ざっとご紹介。

liquid_02.jpg

liquid_01.jpg

liquid_03.jpg

liquid_04.jpg

...見づらいのではないか。
と、今は言いますが、こういうサイトがもっと多くなってきたら、意外と見慣れてきて順応するんじゃないかなぁとも思います。
もちろん、デザインとして情報に強弱があったほうが見やすくわかりやすいという原則はあるはずなので、文字のジャンプ率が低く、フォーマットが統一されているこれらのサイトは、すべての情報が並列に見えがちかなと感じます。

こういう場合は、「写真・枠の大きさ」「色」「表示位置が上なのか下なのか」あたりで、強弱・メリハリつけてく感じなんですかね。
色でのメリハリは出してるサイトはないように思います。日経と丸の内はグルーピングとして色使っているけど。

情報が古いor優先度が低い場合、文字色とか不透明度下げるとかも、意外とおもしろいのではないかと。
枠の形がきっちり決まってる分、それくらいのことやっても耐えられるような気がするんですよね。逆にそうしないと、メリハリつかないのではないかとも。でも、やってないのでわかりません。やってから言えよって自分でも思います。実装してるところがないってことは。割とイマイチなのかもな。。。

なんだかんだ言いましたけど、技術っぽいところや、絵・写真で見せるところが好きなので、自分のサイトのリニューアルの検討の際には一度試しそうな気はしてます。

実装はこれ使わせてもらうかな・・・。

可変グリッドレイアウトのjQueryプラグイン書いたよ

追記:
このデザインは漫画っぽくておもしろい。見やすさどうこうより、雰囲気があっていいなぁ。
liquid_05.jpg

あと、文字はほとんどなしにして、写真ギャラリーみたいなのは相性がよさそう。wordpressにテーマとしてあるみたいです。


2009.12.10 01:40

ブクマなどのアイコン作りました(商用可PSD付き)

icons.gif

仕事で少し作る必要があったので、この際いくつか作成しました。
「アメーバなう」はPC版まだないけど、いずれ使うかなーと思ってとりあえず。
もっと種類がそろってるのもあると思いますが、これでよければ使ってください。

内容は、9種類2サイズ(24pxと16px)gifファイル+PSDファイルです。
商用可(リンクや連絡不要)、再配布は不可でお願いします。

→→ DownLoad (68KB)

2009.10.18 00:54

フリーのイラスト素材


フリー(商用もOK)のイラスト素材みたいです。
イラストがすべて無料 「イラストAC」

ものによってはイラストは、それなりにダウンロードされてる様子。

作ったものを無料で商用利用され、登録するイラストレーターさんのメリットがやや薄いかなぁと思うものの、ここで仕事につながったりていうのもあるようなので、ありっちゃありか。
それでアドセンスで収益あげて・・・。事業としては勉強になるなぁ。

写真素材の足成ってのも、媒体資料見てたけど、伸び方がすげいなぁ。

2009.09.14 01:26

ダイナミックショートカット-photoshopのお作法-

dynamic-shortcut.gif

ダイナミックショートカットは、ポイントテキストまたは段落テキストの入力、またはテキストを選択したとき、テキスト内に挿入ポイントが表示されている場合に使用できるキーボードショートカットです。ダイナミックショートカットは、使用できるときに文字パネルメニューに表示されます。ダイナミックショートカットは、「太字」、「斜体」、「オールキャップス」、「スモールキャップス」、「上付き文字」、「下付き文字」、「下線」および「打ち消し線」などのテキストオプションに対して使用できます。

引用元:ダイナミックショートカットについて

これ結構便利。ショートカット類は覚えておいて損はないですね。
win CS3で確認済みです。

太字 : [Ctrl] + [Shift] + B
下線 : [Ctrl] + [Shift] + U

でも、よく使うのはせいぜい2つくらいかな。