Adobeショック

Creative Cloud

5月6日のAdobeの各種の発表は制作業界にとって大きな衝撃となりました。
かく言う弊社も年明けにCS6にアップデートしたばかりだったので、この発表は個人的に大きな衝撃でした。

パッケージ販売終了へ

まさか、まさかのこの発表。
Adobeさん、かっ飛ばしすぎじゃない?

» グッドバイ、Creative Suite―Adobe、定期課金によるクラウド・モデルに全面移行、CS6は当面販売を続けるものの新規開発は中止

Adobeサイドとしては割れ物も排除できるし、Adobeのツールを一気に普及できるしでメリットは多いのでしょうけど、それでもこの決定は思い切ったなーと思います。
制作サイドとしては、この

この変革でイノベーションが加速され、新機能をいち早くユーザーに届けられるようになる

の部分がどの程度改善されるのかが気になるところ。
正直、今のAdobe製品は毎回バージョンアップするほどの魅力がないと思うのですよね…。
そして、なぜライセンスパックのほうが高いのだ…!

ちなみに単品のサブスクリプションもちゃんと生き残っているようですが、値段からするとあまり意味がないですよね。Web系とは言え「Photoshop」「Illustrator」「Dreamweaver」「Acrobat」くらいは普通に使いますし。

Fireworks終了へ

社内でFireworks移行論が出ていたところでこの発表。

» Adobe、Web画像ツール「Fireworks」終了へ

Photoshopと機能がかぶりまくっていただけにこの判断はわからなくもないですが、それであればFireworksの良さもPhotoshopへ持ってきて欲しいところです。
いや、意外と統合先はMUSEとか?

今後の話

Fireworksの開発終了やMUSE辺りの動きを見ていると、Adobeは恐らくよりモダンな開発環境の構築を目指しているのでしょう。
そのため、長谷川さんの言うように、じゃあPhotoshopであれば安泰か?と言われれば違うと思います。

» Fireworks後のツールとワークフロー

参考

» 新しいCreative Cloudの料金体制など色々。
グループ版のメリットのなさについては同感。
月額で2,000円高いメリットがまったくない。

続きを読む

ソースコードを書かない未来

何年か前からこうしたソースコードを生成するサービスが出ていましたが、また新しくSaaSのサービスが出てきたようです。
Creative Cloudと一緒に発表されたMuseなど、段々とブラッシュアップされていってそう遠くない未来にマークアップを記述することは相当少なくなるのかもしれませんね。

Webydo

まだアメリカでのサービスインがされたばかりのようなので日本ではフォントの問題などもあるし、もう少し先の話かもしれません。
しかし、ビデオで見る限りではMuseと似た感じに見えますね。
» Webサイトのデザインを各Webページのコード(HTML, CSS, JS)に変換するWebydoが合衆国デビュー | TechCrunch Japan

Adobe Muse

Adobeはデスクトップアプリケーションで同じようなプロダクトを提供しています。
» コード記述不要のWebサイトデザイン | Adobe

こちらは使い慣れたAdobeのUIに近いし、僕ら制作サイドからは馴染みやすそう。
ともあれすでに発売しているプロダクトだし、いい加減ちょっと触ってみないといけないですね。
大量のページを複製しないといけない大規模なサイトには向かないのかな?という印象がありますが、ワイヤーフレームというかモックアップというかプロトタイプというか、その辺りを作るには良さそうですしね。

どちらにしても

使える、使えないのポイントは

  • エレメントの使い回しのしやすさ
  • エレメントのカスタマイズのしやすさ
  • ソースコードの品質(=運用のしやすさ)
  • システムとの連携

になると思うので、今後はその辺りに重点を置きながら情報を追っていこうと思う。

続きを読む

links for 2013-05-01

気になる?気になる!みんなのスマホ事情 ― キャンパスナビスペシャルレポート!第3弾

大学の場合、ソフトバンクが強い。
これに付随してデバイスへの接触比率の調査結果ってどこかにないかな。
実は驚くほどPCへの比率が低いかも、と思っているんだけど。

Webデザイナーなら押さえておきたい、今月の優れたWebデザイン(2013年4月)まとめ14個

Paper & Paint by Flügger、Coloured Lines辺りはとても素敵。

【保存版】必ずおさえておきたいユーザービリティー チェックリスト

デザインに関わる部分も多く端的によくまとまっているので、成果物のチェックによさそう。

WEBフォントサイトまとめ9選!とりあえず一度使ってみませんか?

最近、多言語対応のサイトが増えてきたのでWebフォントについてまとめてくれているこのエントリーはありがたい。

デコもじ

日本語、英語、中国語、韓国語に対応しているWebフォント。

続きを読む

ポメラニアン Markdownに目覚める

プレビュー

■Markdownって
Markdonwはプレーンテキストで記述できるマークアップ言語のひとつで、その特徴はとにかく動作・容量が軽いことにつきます。
HTMLも文書構造をマークアップするという点では同じですが、タグそのものを記述するのは結構面倒なので、日常で使用するのはなにかと大変。その点をクリアするために作られた言語だそうです。

仕組みとしては、

1. Markdownで決められた記述方法を用いてテキストを入力。
2. Webサービスやアプリケーションでレンダリング。
3. HTMLに変換される。

という流れになります。

» Markdown Live Preview

デモサイトを見てもらうと、なかなかカッコいいですよね。
プレーンテキストという扱いやすいデータを用いつつ、その弱点である「読みやすく装飾できない」ことをクリアできるなかなか画期的な方法だと僕は思います。

■ポメラとMarkdown
ポメラはテキストメモに特化したツールであり、入力できるのはプレーンテキストのみです。
ゆえに読みやすくするにはメルマガのようにテキストで装飾してやるしかなかったわけですが、このMarkdownを使えば簡単に読みやすくしてあげることができます。
もちろん、ポメラ上でレンダリングできるわけではないので、ポメラでだけで完結したいという人には向かないのでその場合はテキストでの装飾の方が向いていると言えます。

■EvernoteとMarkdown
Evernoteのアプリケーションは残念ながらMarkdownのレンダリングには対応していませんが、CSSスタイルのコピペには対応しているのでレンダリングされたMarkdownをペーストしてやることができます。

レンダリングになにを使うかによって流れが多少変わりますが僕の場合は

1. 議事録などをポメラでMarkdownに基づいて入力。
2. 入力したMarkdownを「Markdown Live Preview」でレンダリング。
3. レンダリングされたHTMLをコピー。
4. Evernoteへペースト。

という流れにしています。

■参考
» Markdown(Wiki)
» Markdownで文章を書こう!
» Markdown 記法のチートシート
» MarkDown#Editor

続きを読む

HTMLによる画像のリサイズ

ペンギン

最近ではレスポンシブデザインが当たり前になってきており、画像のサイズもパーセント指定をする機会も増えて来ました。
実務の上で当たり前のようにそういった指定をしていても、HTMLによる縮小は画質が悪くなるんじゃ?という昔ながらの思い込みもちょっと残ったりしていたので自分を安心させるためにも検証してみました。

■HTMLでの縮小と、Photoshopでの縮小の比較
比較

※クリックでオリジナルサイズの画像が見れます。
個人的にグリッドパターンでよく使う、幅440ピクセル、高さ220ピクセルの画像を起点に、左がHTMLで縮小したもの。右がPhotoshopで縮小、若干のシャープをかけたものです。
さすがにシャープをかけたぶん、Photoshopでリサイズをしたほうがエッジがシャープですが、思ったより大きな差がありません。(あくまで思ったよりですよ?)

わぷー

※クリックでオリジナルサイズの画像が見れます。
キャラクターはちょっとWordpressさんの公式サイトから拝借してます。
こちらも幅440ピクセル、高さ220ピクセルの画像を起点に、左がHTMLで縮小したもの。右がPhotoshopで縮小したものです。こちらはエッジがちょっとたってしまっていたのでシャープは使用してません。
比較してみて、この結果はちょっと意外でした。
印象としてはGifはそれほど縮小に強い印象がなく、もっとジャギーが出るかと思ったのですが、エッジの差異はあるものの十分実用レベルでした。

■総括
そういうわけで総括ですが、容量の部分がクリアになっていればメンテナンスの手間を考えるとリサイズによる対応は十分にありですね。
もっともスマートフォンのような3G回線をターゲットとするなら少し話は変わってきますので注意は必要です。

いや、やってみないとわからないものだねー…。

続きを読む

links for 2013-04-16

やっててよかったGunosy
ホントにこのサービスはいい記事を提供してくれる。

» UIだけでもデザインできる理由
タイトルは少々煽りすぎだけど、内容はとても納得できます。
UIというものについて表層的に考えている若いデザイナーにこそ読んでほしいエントリー。

» Modern UI のようなフラットデザインを目指して使いづらくなっている件について
メタイメージにおけるボタンは「リアル」の延長としての表現であるのに対し、フラットデザインは「リアル」とは分断されているため、押せるという感触を出すのにシンプルさ、ミニマルさを追求しなければならなリません。
この辺りがWebサイトへ応用する場合にサイトの質を選ぶ要因となります。
情報が多いサイトで無理に適用すればボタンそのものが情報に埋没してしまう危険性があるので注意が必要です。

» 基本だけど重要なWebコンテンツ掲載前後のチェックリスト#1:事前プラン&アウトリーチ、オンページSEO
» 基本だけど重要なWebコンテンツ掲載前後のチェックリスト#2:読みやすさ、コンバージョン、効果測定
こちらもよいまとめ。
あと1回連載があるようだけど、じっくり読みなおしたい。

» 15 Must-Have High Quality Free Flat Icon Sets
上でも書いているフラットデザインに適したフラットなアイコン。
ライセンスは確認してないよ。

続きを読む

タッチパネルのボタンのサイズ

タッチパネルによる操作はマウスに比べてずっとフィジカルで直感的なことが特徴ですが、逆にマウスに比べると操作の精度という点では劣ります。
では、どれくらいのサイズが丁度良いのか、という裏付けのためちょっと資料を漁ってみました。

» スマートフォンのボタンサイズ UI
このエントリーで書かれているよう、やはり見かけるのは44ピクセル、7mm x 7mmというサイズ。
エントリーの下部に各デバイスのガイドラインへのリンクもあります。

» iPhone の当たり判定を検証した
iPhoneのガイドラインが話の中心。
Appleは最低のボタンサイズを44ピクセルと規定しており、ブラウザはヒットエリアを補完しているという興味深い話が書かれています。

■その他
» OKボタンの位置はどこが適切?(タッチパネル編)
ちょっと趣旨は違うけど、OKボタンの位置に関する調査結果。
ユーザーは基本的に右側がOKと認識しやすいようで、これは多分、アプリケーションの画面遷移が基本的に右側へ進んでいるような設計になっているため?

続きを読む

利用シーンを生成してくれるジェネレータ

PlaceIt by Breezi
Webサイトやアプリなどの利用シーンを生成してくれるジェネレータがありました。
利用シーンはインドア、アウトドア。スマホ、タブレット、デスクトップ、ノートPCなど充実してます。
提案書やプレゼンなどで使えそう。

» PlaceIt by Breezi – Generate Product Screenshots in Realistic Environments

続きを読む

links for 2013-04-10

レスポンシブデザインのサンプルを集めてた過程のメモ。

■情報系
情報の多いコーポレートサイト。
IMJはデザインもキレイだし、スマートフォン、タブレット、PCと非常によくできてるサイトだと思います。

» 株式会社アイ・エム・ジェイ
» NTTデータ
» CREATIVE SURVEY|クリエイティブサーベイ
» レオパレス21

■グリッドパターン
ピンタレストのようなグリッドパターンを用いたサイト。
全体的にグラフィック重視な印象。

» G-SHOCK – CASIO
» NHKスタジオパーク
肌研(ハダラボ) | ロート製薬株式会社

■その他
ギミックやデザインが凝ってるなど。

» LADER
» 朝日新聞社 マウリッツハイス美術館展 オランダ・フランドル絵画の至宝
» KATOSHUN.com

続きを読む