スマホアプリのUIを研究したいときに便利なフリーSketchファイルを紹介します。
空間の扱いなど、勉強になるところがきっとあるはず。

Read More

PhotoshopとIllustratorとSketchが最近のウェブデザインツールとして上がってますね。
お客様のニーズに合わせて、いつもはデザインしないアプリをベースアプリとして
デザインを要求されることもあるかとおもいます。
今回は、「だいたい同じことができる、でも得意不得意はあるかも」といったことをアプリをまたいで考えてみました。

Read More

ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。

Read More

デザインの本質とはちょっと違うのですが、ウェブデザイナーに必要な技術のひとつ、広告などに使う「目立つ・理解されやすいウェブデザイン」の手法をまとめてみました。
メリハリをつけて、目に留めてもらえるようなデザインを目指しましょう！

（すみません、タイトルふざけました、中身はいつもどおりマジメです。）

Read More

photoshopのアートボード機能を使えば、
sketchみたいにカンプを複数並べてデザインができます。
レスポンシブデザインはもちろんですが、PC/スマホサイトの各カンプをデザインしたり複数サイズのバナーパターンを同時に編集したりと結構使えたので、ご紹介。

※アートボード機能は、Adobe Photoshop CC 2015 から利用できます。

Read More

レスポンシブでぐりぐり動かしたいときに、ブラウザの最小幅って実はすごく大事で。最小幅がスマホ幅より広いと（というか、0 > スマホ最小幅 > ブラウザの最小幅になったとき）、納品前に二度手間になることも・・！
もちろん各幅をエミュレーターで確認するのも大事なのですが、中間の動きも見られるのがレスポンシブなのですよね。調べたところブラウザのバージョンによってサイズが前後してるみたいですので、現時点で私の環境で主要ブラウザの状況を調べました。

Read More

タイル状に要素を並べるので有名なのは、「Masonry」が有名ですが、もっと手軽に、軽くしたい！って時は Freetile.js がよさげです。

Read More

Emmet（旧 zen coding）を、できるだけ覚えずに入門するための、考え方を紹介します。
zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で
なんで面倒と思ったかというと、速さに気を取られて一文で（何行ものHTMLを一発で＝爆速を再現するため）長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。

そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。

Read More

「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。
モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。

Read More

神棚って、なんか切り込みづらいトピックスなんですが。そんな切り込みづらいものにデザインプロダクトで切り込んでいる前衛的な方々がいらっしゃるようです。

今はパワースポット目的で神社を訪れてお札をもらって扱いに困っているひとや、厄除けのお参りでおみやげに持たせてもらうパターンで神棚に興味を持つ人もおおいとかそうでないとか・・。
ひとの暮らしに寄り添うという意味では、そういうモノに対してデザイナーが動くことは当たり前なのかも。そんな気軽な気持ちで紹介してみます。

※あくまで日本の「文化」としての「神棚」として扱っています。いろんな宗教とか考え方に触れる気はないです。

Read More