links for 2013-09-02

» FooTable
以前もこの手のリンクをしましたが、こいつも便利。
折りたたまれるので情報が多いテーブルには持ってこい。

» これからのUIデザインのヒントになるDribbbleのアートワークのまとめ
Dribbbleからのまとめ。
インスピレーションが刺激されるクオリティの高いUIがまとめられてます。

» プロジェクトマネジメントなう\(^O^)/
プロジェクトマネジメントについて非常によくまとまっているエントリー。
PM志望ではないけど、試せるものは少しずつ取り込んで行こうと思う。

Responsivator
URLを入力すればメジャーなブレイクポイントでそれぞれを並べて表示してくれるWebサービス。
地味に便利。

続きを読む

links for 2013-07-29

» ワンクリックでプロ級の写真加工、無料Photoshopアクション素材25個まとめ
ミニチュア写真を作成できるイケテルアクションを探していた時に発見。
他にもなかなか良い感じのアクションがあります。

» 【厳選】日本の全iOSプログラマに捧ぐ!iPhoneアプリ制作に参考になりすぎるデザインリンク集15選
タイトルが内容そのままなので特に説明はなく。
参考に、刺激に。

» レスポンシブ対応も含め、Lightbox系(モーダルウインドウ)プラグイン25個の簡単な使い方とサンプルまとめました
モーダルウィンドウもいつの間にか随分増えておりますね。

続きを読む

links for 2013-07-10

» 最近覚えた便利すぎておしっこちびるかと思ったPhotoshopの小技/ショートカット11こ
SHIFTを押しながらのドラッグ・アンド・ドロップは知らなかった。
いつもは「レイヤーの複製」からやってたからちょっと速くなるかも。

» デザイナーの仕事を驚くほどラクにするPhotoshopアクション厳選18種【全て無料】
微妙なのも多いんですが、中には悪くない感じのものも。

続きを読む

links for 2013-05-29

» Strikingly – わずか数分でシンプルで美しいモバイルサイトを作成
レスポンシブウェブデザインに対応したサービス。
独自ドメインでの運用はできなさそうだけど、悪くない感じ。

» イメージスケールを使ってWebサイトの配色を論理的に決める方法
ロジカルに色を選択する方法。
「配色イメージワーク」も読まないと、パッとわかりにくい…。

» 爽やか配色のフラットデザイン無料UIデザインキットFlat UI Kit
最近は一つのトレンドができるとフレームワーク化するのがとても早い気がする。
マルチデバイスへの対応を気にデザインが理系化した影響だとは思う。(悪い意味ではないよ)

» Flat UI Colors
さっくりと参考にするには良い感じです。

続きを読む

links for 2013-05-07

デザイン

» 細部まで丁寧に作り込まれたフラットなデザインのアイコン素材 -Pixeden
ここまで来るとフラットデザインっていうよりイラストって感じに見えるけど良い感じです。

» 価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」
価格表はその見せ方に様々な工夫が凝らされているので、これはいいまとめ。

» ブランドイメージ大変革、『ヤンマー』は『フェラーリ』になれるか?
ブランディングのお話。
日本って製品はいいのにブランディングの不備のせいで売れていない、もったいないなーって思うものも多い気がする。

マークアップ

» 【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ
結構カスタムできるものですね。

» レスポンシブWebデザインでテーブルを使う時の小技
これは参考になる。
レスポンシブで問題になることの多いテーブルの対応方法が色々。

» レスポンシブWebデザインでよく使うpx→remのサイズ表
Wordpressのテーマで使われてる1.571428571remとか1.428571429remってなんだろう?って思ってたけど、これか。なるほど。

ワークフロー

» 柔軟なワークフロー
» カンプがなくなったときのデザイナーの役割
最近よく聞かれるキーワードです。
ちょっと加熱しすぎかな?と思うこともありますが、世界観をガツガツ作りこむタイプでないWebの場合には積極的に利用したいところ。
もう少し先を想像すると、フレームワークが洗練されていって手段が定番化することでいずれまたカンプに帰ってくる気はしたりしますが…。
ここはソフトウェアの進化次第でしょうね。

» レスポンシブWebデザインに関しての備忘録
内容が凄く多いので見るのは大変ですが、フレームワークを中心にまとめられてます。

続きを読む

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円高いメリットがまったくない。

続きを読む

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

続きを読む

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
上でも書いているフラットデザインに適したフラットなアイコン。
ライセンスは確認してないよ。

続きを読む