デザインの最近のブログ記事

2008.08.19

iPhoneのホーム画面ブックマーク

CocoaNote本家にiPhone用のブックマークアイコンを作成してみました.
photo.jpg

【右下のココア色のアイコンがCocoaNoteのブックマークアイコン】


iPhoneは閲覧する頻度が高いサイトにアクセスしやすくするために,ブラウザのブックマークとは別にホーム画面にもブックマークすることができます.ホーム画面のブックマークアイコンをタッチするだけでそのサイトに飛べるというわけです.
通常はサイトのスクリーンショットが自動的にブックマークアイコンになりますが,以下のタグを<head>タグ内に埋め込むことでブックマークアイコンを自由に設定出来ます.


<link rel="apple-touch-icon" href="画像のパス">
※"<"と">"は全角になっております.ご注意ください.


画像の大きさは57ピクセル四方です.
iPhoneでCocoaNote本家にアクセスする方はゼロだと思いますが,今後iPhone用の壁紙の配布ページを作る可能性もありますので一応作成しました^^;

2008.04.19

MacBook Airを2週間使ってみた

その薄さで話題となったMacBook Airをおよそ2週間大学院で使ってみたので,その感想を綴ります.

R1002325.jpg
[ 念願のMacBook Airをついに購入 ]

まずなんといってもこの薄さは驚きで,A4雑誌と遜色なく,カバンにスッと出し入れできます.重量も1.3kgと軽量で,今まで使用してきたPowerBook G4(重量:2.5kg)と比べると,移動時の足の負担が激減しました.
気になる強度も,アルミニウム合金と端部のなだらかな美しい曲面によってかなり丈夫.日本製のWindowsノートのようなゴテゴテしたプラスチックの筐体と比べると,工業デザインのセンスが段違いです.

R1002327.jpg
[ この薄さと軽さ,デザインはまさに絶品 ]

また,私が通っている大学院は無線LAN環境が充実しているので,研究室でも講義室でも食堂でも,いつでもどこでもネットワークに接続できます.講義と講義の間のわずかな時間でも,急ぎの連絡メールを送信できるので非常に便利です.


さて,さらに続々と書き綴りたいのですが,明後日にテストが控えているので今日はここまで.次回はCore2Duo(1.6GHz)の実力やMacOS 10.5の感想も交えたいと思います.それでは.

2008.01.22

おもてなしの程度

R0010865.jpg 本家では,GRで撮影した写真や,PhotoShop等で作成したホームページ素材を配布しています.
ようはホームページ作成の支援をしよう,というわけですが,最近ではおもてなしをもう少し進めて,テンプレート,いわば半完成のホームページを作成して配布しようと画策しています.もちろん無料(CSSやHTMLに著作権を主張するのは難しいし,本家の配布物は著作権を放棄しているのに近い状態ですので).

ただ,テンプレートを作成していると,自分のサイトに使いたくなってくるのが困りものです^^;

2008.01.15

ブログデザインについてあねこね

capt-cocoanote.jpg なんとか本家のページをブログシステムで構築できたので,これからだんだんとコンテンツを増やして行く予定です.
一方,当ブログでは引き続き私事をちくちくと綴って行きますが.1エントリーにつき写真1枚以上はこなしたいと考えてます.やはり画が一枚あったほうが内容を伝えやすいと思います.

あと,最近になってブログのデザインがあまりにブログらしすぎるなぁ,と感じ始めました^^;
真ん中にエントリーが数珠つなぎになっていて,サイドバーはカテゴリーやアーカイブのリンク,ウィジェットが並んでいるという基本パターンに則したデザインにしましたが,やはり星の数ほどあるブログのなかで一目置いてもらうには,なにか付加価値が必要だと思います.
もちろん中身(エントリーの内容のおもしろさなど)が一番大事ですが,外観に違いがあると印象を与える強さが変わると思います.
ただ心配なのは,基本パターンから離れすぎると訪問者がブログだと思わなかったり,ページ遷移の勝手が違って混乱してしまうのではないか,ということです.

Movable Typeは3つまでブログを作成出来るので,テストページをこしらえていろいろ実験してみます.

2008.01.03

趣味とおもてなしの狭間で

webpage.jpg 本家のWebページのシステム構築が急ピッチです.
本家で活動するのは主に壁紙・素材の配布です.
趣味の写真と,ネット上で活動する人々へのおもてなし.この2つを両立出来るのは今のところこれしかありません.ただ,私の嗜好がおもてなしになるかどうかは,これからWebページを運営していって確認したいと思います.
先の予想はつきませんが,Webページやブログを通じて自分自身を表現し,訪問してくれた人にとって役に立つコンテンツを提供出来ればと思います.

さて,明日の夜に友人と飲み会があるのでWebページ製作を急がなくては.

2007.12.03

続・ianime.js + Movable Type

引き続きianimeについてのお話.
前回からちょこっといじって,今度はフェードイン・フェードアウトに加えて写真をゆっくりと移動させてみました(Recent Photos参照).
以下Movable Typeのテンプレートの記述.
<html>
<head>
<style>
.photo-ianime {
  width: 300px;
  position: absolute;
  left: 0px;
  top: 0px;
}
</style>

<script src="ianime/ianime024.js"></script>
<script src="ianime/ianime024ex.js"></script>
<script src="ianime/ibrowse010.js"></script>
<script type="text/javascript">
var anime = new iAnime();
function start()
{
  anime.addSequence([
    <MTAssets type="image" lastn="5">
    { id:'pic<$MTAssetID$>', effect:'fadeout' },
    </MTAssets>
    { id:'pic0', effect:'fadeout' },

    <MTAssets type="image" lastn="5">
      { id:'pic<$MTAssetID$>', x:-20 },
      { id:'pic<$MTAssetID$>', x:-35, effect:'fadein', duration:3000},
      { id:'pic<$MTAssetID$>', x:-45, duration:2000},
      [{ id:'pic<$MTAssetID$>', x:-55, effect:'fadeout', duration:2000}],
    </MTAssets>

    { id:'pic0', effect:'fadein', duration:3000 },
    { onComplete:start }
  ]);
}
</script>

</head>

<body onload="start()">

  <MTAssets type="image" lastn="5">
    <img id="pic<$MTAssetID$>" src="<$MTAssetURL$>" class="photo-ianime" />
  </MTAssets>
  <img class="photo-ianime" id="pic0" src="ianime/white.jpg" />

</body>
</html>

2007.12.02

ianime.js + Movable Type

昨日のエントリーで紹介したianimeの写真を,ブログ作成ツールMovable Typeのテンプレートを使って簡単に更新できるようにしました(サイドバーのRecent Photos).JavaScriptの実行部分やHTMLを書き直すことなく,Movable Typeのダッシュボードで写真をアップロード&再構築するだけで,最新の写真5枚を表示することができます.
仕組みは簡単で,MTAssetタグやlastnモディファイア,MTAssetIDタグを組み合わせてJavaScriptのidに連番を与えたり画像のリンク先を指定しているだけ.
…iPhoneもtouchも持ってないし,JavaScriptは初めてな私が出来るのはこの程度.

2007.11.29

難しい

前回のエントリーの続き.
シルエットだけで被写体を表現するのはやはり難しい.
動物などが被写体の場合は,それぞれの特徴があるし,仕草によって表現の幅が拡げやすい.
問題は静物の場合で,例えば閉じた本をシルエットにするとただの四角になってしまう.こういうときは本を開いた状態にするなど,工夫が必要.
なかなか難しい分野っぽいです.


写真:寮の階段の踊り場からパシャリ.
R0011852.jpg

2007.11.28

iPodのCM風なWebページ素材

 さて,ブログは作ったものの,本家となるWebページをどう活用するかが悩ましいところ.

 この2枚の影絵のように,撮った写真を素材用に加工して配布したりすれば,趣味とWebページを両立させることが出来そうな感じです.現段階で手軽にページ運営出来そうなのがこの構想です.

 さらに発展させて,影絵をアニメーションにして,音楽をつけて……なんてことが出来ちゃったりするとなかなか充実したコンテンツになりそう.というかiPodのCMの出来上がり.う〜ん.

2007.11.23

CSSとIE

IE5.xでは思ったようなデザインになるのに,6.xだと急に崩れてしまう…

W3CounterによるとIE6.xがブラウザシェアの4割らしいのでちゃんと対応しなければ…


〜追記〜
ブログのバナーの記述部分が上手くいってなかったけど,SEO的にあまり効果のないところなので画像で対応することにしました.