Review (レビュー)の最近のブログ記事

53

WindowsとMacのファイルパスを一瞬で変換してくれるWebサービス | Pathcon

http://bootgraph.com/pathcon/

共通のファイルサーバーでWindowsユーザーとMacユーザーが一緒に作業をしているときに、必ずおこる問題が、ファイルパスの違いがあります。

通常、Windowsユーザー同士であれば、もらったファイルパスを検索エリアにコピペをすれば、直接アクセスできますが、Macユーザーからもらったパスからはアクセスが出来ないため、ファイルを辿っていかないといけません。

変換する方法は、ググるといろいろ出てきますが、アプリケーションをダウンロードする必要があったり、わざわざ/(スラッシュ)を\(バックスラッシュ)に毎回変換するなど、時間も手間もかかります。

そこで登場したのが、WindowsとMacのファイルパスを一瞬で変換してくれるWebサービス | Pathconです。


使用方法
  1. MacかWindowsのテキストエリアに変換したいファイルパスをコピペするだけです。
img_131126_sub.png


50

Google Web Designer ベータ版リリース、グラフィックツールとしての可能性

http://www.google.com/webdesigner/index.html

2013年10月1日にGoogle Web Designerというサービスのベータ版がリリースされました。

概要
  • Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーション。
  • HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザインが作成できる。
  • デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。
  • コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。
最終的には、HTML5、CSS3、JavaScriptで出力できるようですが、軽く作成してみた結果はpositionを多用していて、PhotoshopやFireworksでHTML書き出しした時と同じような状態だったので、もし使用するのであれば、現時点ではiframeで読み込む広告バナーの作成レベルという印象でした。
では、グラフィックソフトとしては、どこまでデザインが出来るのか?

現時点で備わっているグラフィック機能
  • ペン ツール
  • テキスト ツール
  • シェイプ ツール
  • アニメーション ツール
  • コンポーネント ツール
  • 3D ツール
  • イベントツール
が備わっていてますが、レイヤー機能やスポイト機能などは無く、書き出し/保存もhtmlになってしまうので、PhotoshopやIllustratorの代替ツールとしては正直まだ無理かと。

GoogleアプリをPhotoshop/Illustratorの代替ツールにするなら
WebサイトのデザインをGoogleアプリで行うのであれば、図形描画(Drawing)ツールの方がまだ使えると思います。
図形描画ツール(Drawing)
(※個人的にはハッカソン的な開発を行うときは、Drawingでメンバーと画面共有しながらWireFrameとラフデザインを一気にこのツール上で行ってしまいます。)

やはり、Photoshop CCやIllustrator CCほどのグラフィックツールの代替ツールの登場はまだまだ先になりそうですが、Google Web Designerの登場によりGoogleがパワフルなグラフィックツールを開発する可能性が非常に大きくなったのは確実だと思いました。


Google Web Designerヘルプ(日本語版)

40

スターバックス ヴィア[VIA]

[レビュー]Starbucks Coffee Japan - スターバックス コーヒー ジャパン

http://www.starbucks.co.jp/

全ページがクリスマス仕様になっています。
うっすらと背景に使っているテクスチャがオシャレ。
サイト全体できちんとトーンが保たれていて、クリスマス期間だけというのがもったいないですね。


38

37

36

[レビュー]David Maupilé

http://www.davidmaupile.com/
折り畳んだ様な3D表現がいい。ポートフォリオを作るならこういうイメージもありですね。

35

34

[レビュー]1000このはんこ|フェリシモ

http://www.felissimo.info/contents/html/

ウィンドウ内全体がマウスポインタに設定されている「はんこ」のキャンバスなっているのはおもしろい。

29

THE GOLDWAGON JOURNEY

http://jp.nescafe.com/goldblend/
フッターの小さなバナーから見れます。
コンテンツ内容はいわゆる心理テストですが、コマ撮りジオラマの配色が多彩なので派手に見える、
良い企画のコンテンツですね。

27

Francfranc STYLE

http://www.francfranc.com/jp/ffstyle/

スッキリと情報が整理され、シンプルなインターフェイスですが、
使用している写真のコントラスト・彩度が強いため、映えて見える良い例。

Francfranc STYLEのみで無く、サイト全体でグラデーションが使われておらず、過剰な立体感、光沢が目立つ最近のWebデザインの中で、このくらいスッキリしている方が、落ち着いて見え、ゆったりと読める。

横6列(1列:145px)のグリッドシステムで設計されており、グローバルメニューの各幅を気にしながら、下に読み進めて行くと、グリッドが見えます。MENBERページを見ても、破綻することなく良い例だと思います。
前回の記事でブロックマンの書籍「Grid systems in graphic design」を取り上げましたが、グリッドシステムを味方につける事は、かなり力強い事だと思っている自分はグリッドシステムについて日々勉強中です。

書体は、タイトルや見出しでBaskervilleを使用しており、シンプルなインターフェイスの中で、一定の優雅さを醸し出している。

24

文字講座 (単行本)

「文字にまつわる」知識を学ぶ - 文字講座

「デザインとしての文字」と「知識としても文字」の双方をバランスよく、
著名な方々が語っている一冊です。これから文字に関して知識を得たい初学者には入りやすい内容だと思います。

デザインを行う過程で文字を扱わない事は、ほぼ無いでしょう。
また、同じくデザインを行わない方でも、メールやブログ等が日々の生活に浸透している現代で、タイポグラフィの作り手(送り手)として、文字に関わっていない方は皆無と言えるでしょう。

しかし、文字にまつわる知識を学習する場は、ほとんど設けられていません。
ローマン・アルファベットで言えば、
大文字(ABC)と小文字(abc)は元々、別の時代に生まれている。
では、大文字と小文字が一つの文字体系になったのはいつなのか?
また、現在、サンセリフ体は視認性以外になぜここまで普及したのか?

PCとアプリケーションの進化によって、プロとアマの境界線がにじんで見えてしまいそうな、
今だからこそ、プロとしての付加価値の一つとして、文字にまつわる知識を得なければいけないのだと思います。

ひとまず、ローマン・アルファベットの流れを得たい方は、

第二講 木村雅彦「ローマ大文字の礎 ーートラヤヌス帝の碑文が語る」
    ↓
第四講 杉下城司「サンセリフ体活字の潮流ーー誘目性から可読性へ。産業革命からモダニズムへ。」
    ↓
第七講 河野三男「石彫り職人の活字 ギル・サン書体」

の三講を連続して読むのが良いと思います。


第六講の服部一成さんの内容は、
http://www.kobegakkou-blog.com/blog/2007/05/post-4917.htmlに縮小版で、
ほぼ同じ内容で載っています。

「ただ一度のものが僕は好きだ」
あらゆる情景が思い浮かぶ、素晴らしいコピーだと思います。
画像は小さいですが、カラーなので、参考までに。


『文字講座』目次

第一講 浅葉克己「世界をめぐる文字の旅 ーー愛ある文字・トンパ」

第二講 木村雅彦「ローマ大文字の礎 ーートラヤヌス帝の碑文が語る」

第三講 葛西薫 「字・言葉・文・絵」

第四講 杉下城司「サンセリフ体活字の潮流ーー誘目性から可読性へ。産業革命からモダニズムへ。」

第五講 鈴木功 「タイプデザイナーという仕事」

第六講 服部一成「私のデザインと文字」

第七講 河野三男「石彫り職人の活字 ギル・サン書体」

第八講 永原康史「日本語のデザイン、その後 ーー日本語組版の応用と展開」

第九講 春田ゆかり「書から活字へ ーー書家・池原香穉を追って」

第十講 中島英樹「タイポ・グラフィックス ーーデザインとの関わり」

第十一講 山本太郎「書体開発の現場 ーーアドビシステムズのデジタルフォント」

第十二講 白井敬尚「活字とグリッド・システム ーーブック・フォーマットの形成」

第十三講 佐藤可士和「The Power of Artdirection」

*ブックデザイン:有山達也

*構成・まとめ:雪 朱里


共通体験型アプローチ:SONY Handycam 「Cam with me」

Cam with me(カム ウィズ ミー)|デジタルビデオカメラ Handycam "ハンディカム" | ソニー
http://www.sony.jp/products/Consumer/handycam/camwithme/

「感動した」「泣いた」など、非常に肯定的な捉え方をされたり、
「で、結局ソニーのハンディーカム買うの?買わないだろ。」などの否定的な捉え方をされていたり、
賛否両論ながらも、今年早くも話題になっているサイトです。

ざっくりサイトの説明をすると、
子供(女の子)が産まれてから結婚式までを一つのストーリーとして、その節目ごとに、
記録していく事で、ビデオカメラの良さ、ハンディカムの良さを訴求するサイトです。

「感動した」「泣いた」などの意見がある様に、このサイトのユーザーへのアプローチはとして、
共通体験アプローチ型であると考えられます。

共通体験アプローチ型のメリットは、同じ体験をしたユーザーには非常に効果が高く、訴求性が高い。
デメリットは、逆で共通体験をしていないユーザーにとっては「で?」で終わる可能性が高いです。
解りやすい例としては、テレビの「はじめてのおつかい」です。
(あの番組は親だけでなくとも、自分の小さい頃と合い重なったりして、
幅広い層に共通体験として映ります)

そのため、賛否両論が別れる記事があがっているのも、一つ説明が付くのかと。


逆に共通体験型アプローチを提案する制作サイドから考えた時に、大事なポイントは、
自分自身が共通体験をしてきているか?があります。

社会人の評価ポイントとして能力や技術レベルが大事だと捉えられますが、
人生経験もとても大事なポイントなんですよね。

正直、自分は未婚なので、このハンディカムのアプローチが提案出来たかと考えると、
その発想は出来なかったと思いました。

20

MacBookファミリーが登場しましたね。

img_081015.gif
今回もリークされまくりで、数日前から「ああ、こうなるのか」というのが確信的でしたね。

詳しい情報は、アップルのサイトで見れば充分かと。
http://www.apple.com/jp/macbook/
http://www.apple.com/jp/macbookpro/

iBook時代から、MacBook時代と大きく外装の変更は無かったですが、今回はiMacと同じくアルミになり、キーボード周りはMacBook Airと同じになりました。

あとトラックパッドが大きくなり、ガラス製になりました。これはちょっといいなあと。

さかのぼる事、2年前に買った黒MacBookですが、現在も順調で買い替えはしないです。。

※ちなみにWebデザインをするのに、スペック的にMacBookかMacBookProか、という疑問ですが、MacBookで充分過ぎるくらいです。(最安の白MacBookでも)
本気で作業するなら、モニタとキーボードとマウスを買って、デスクトップみたいに使うのがおすすめです。(モニタは20〜24インチワイドのノングレアがおすすめ。グレアは自分の背景が映り込むので。)
というか、本気で作業するならコスト的にもiMacが絶対にいいですw

お金が余っているならMacBookProで、MacBookAirは作業用にはおすすめしません。

17

JavaScript & DHTMLクックブック 第2版


img_080626.gif

JavaScript & DHTMLクックブック 第2版が出ましたね。
この本はJavaScript 第5版(サイ本)の実践編として使えます。サイ本にはサンプルコードが少ないので、あまり実践向きではないので。

ある程度(中級くらいかな)のレベルの方なら、逆引きとして使えると思います。XMLHttpRequestあたりのAjaxやDOMに関しての内容もあるので、現時点として全く問題ないです。

13

【レビュー】AIR DO 夏!カンゲキ!北海道!キャンペーン

img_080529.jpghttp://www.airdo.jp/information/kangeki/

純粋にキレイ。全体的に写真も文字組も色のトーンもFLASHの動きも、相互ぶつかる事無く、まとまりがあります。

自分は元々FLASHでwebに入ってきたのですが、FLASHの動きはこれくらいの軽さが好きです。あれもこれも動く様な派手な動き(papervision3Dとか)は、インパクトはあるのですが、もう一度見たいとは思えないので。

気になった点は2点で、ギャラリーページでのサムネイルメニューのカレント表示がもう少し目立ってもも良いかなと思いました。キーカラーの黄色で1pxくらいのワクを付けてあげるくらい。

もう一つは、HTMLとFLASHを行き来するのが、「アレ?」と思うユーザーがいるかなと。

でもFLASHもHTMLページもキレイなデザインで、素晴らしいサイトです。こういうサイトを見ると、やっぱりFLASHをもう一度やりたいなと刺激されます。

10

PicLens Firefox用プラグイン これはすごい。。

img_080422.jpg見ていて、滑らかで奥行き間のある動きに感動しました。
Yahoo Google flickr Picasa等、画像検索時にPicLensを起動すると、キャプチャの様になります。

操作していて「気持ちのイイ」「楽しい操作」って、こういうもの。

昔のiPodのCMを思い出しました。
http://web.archive.org/web/20070515132456/http://www.apple.com/jp/ipod/ads/1000songs/

詳しい説明は下記ページが解りやすいかと思います。
http://www.piclens.com/site/firefox/mac/
http://e0166.blog89.fc2.com/blog-entry-463.html

ダウンロード:MacOSXのみ
https://addons.mozilla.org/en-US/firefox/addon/5579

6

Go to China

img_080328.jpg
http://ringvemedia.com/home
とても良く出来たサイトです。。ホントひさしぶりに見ていて、ドキドキしました。。

何がすごいか。
  • まずはFLASHじゃないですよ。
  • 背景で使っている画像が重いので、Loadingを付けている。親切。
  • PHOTOのページで下のメニューが消え、x座標を取得し、左右のマウスの位置で前後の写真を表示させる。
  • 写真以外に画像を使用していない フォントはデバイスフォント(Macだからキレイに見えるのかも。。)
  • メニューがパンくずとしても機能している。
これを一人でマークアップ出来たら、一流のマークアップエンジニアでしょう。
CSSだけじゃなくて、JSも書けるマークアップエンジニアは引く手あまた。

5

Sony α: 「スペシャルサイト」

080319.jpg
http://www.sony.jp/products/Consumer/dslr/special/

ふんわりとしたアニメーションが、見ていて心地よいです。
全体的に○でまとめられていて、かわいらしい。
女性にもデジタル一眼を使ってもらおうという制作意図を感じました。
だから、ターゲットユーザーは「コンパクトデジカメを持っている女性」だと思います。

このサイトにキーワードをつけるなら、
「女性にもプロ並みの写真ライフを」
「思い出をもっと鮮明に」
とかですかねえ。

自分でここまでのFLASHが作れたら、イメージギャラリーのテンプレートを作るんだけどなあ。。