Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[Sketch, Photoshop] Craft – ダミーデータ入力に便利なSketch, Photoshop用プラグイン

  • Pocket
  • このエントリーをはてなブックマークに追加

WebやUIデザインでよく行うダミーデータを、簡単に生成してくれるプラグイン。SketchとPhotoshop用の2種類が用意されています。動画見ると分かるんですが、ダミーのユーザープロフィールなどを自動で生成して、かつそれを挿入までしてくれるようです。入力する項目の内容も細かくカスタマイズできるようで、これで無料ってのはスゴいなと思いました。ユーザーアカウントの存在するモバイルAppなんかのデザインに使えそうです。

[CSS] Bulma: a modern CSS framework based on Flexbox – FlexboxベースのCSSフレームワーク

  • Pocket
  • このエントリーをはてなブックマークに追加

FlexboxベースのCSSフレームワークだそうです。CSSフレームワークってだいたいFloat使ったグリッドレイアウトのものが多いけど、最近じゃレイアウト組む手法も徐々にFlexboxになりつつあるので、慣れた人には便利そうです。実際Flexboxでレイアウト組むの楽ですからね。レスポンシブレイアウトや、フルスクリーン、垂直軸のセンタリング、ボタンやフォームパーツなども揃っているようです。

[Site Info] テーマを変更しました

  • Pocket
  • このエントリーをはてなブックマークに追加

数年ぶりにテーマを変更しました。今までもちょこちょこ画像変えたり、Divの幅変更したりとかはしてましたが、テーマごと変更するのは多分4,5年ぶりな気がします。その4,5年の間にWebのデザイントレンドも色々と変わり、いつの間にかとってもレガシーなブログになってしまってました。というわけで「これじゃいかん」系のアレで頑張ってリニューアルしたわけです。旧記事についてはレイアウト崩れるものもあるけど、徐々に直していこうと思ってます。
ちなみに今回ベースにしたのはJustwriteというテーマ。これ汎用的で使いやすかったです。
あと今回レスポンシブレイアウトにしてるんだけど、iPadに最適化してます。ポートフォリオだとシングルカラム、ランドスケープだと2カラムになります。iPad Proだと多分どっちも2カラム。けどポートフォリオのレイアウトまだちょっと崩れてます。その内直します。はー、数年ぶりに大仕事したって感じ。

[Misc] Evolution of Webdesign – ウェブデザイントレンドの移り変わりを時系列で見れるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webデザインの進化を時間軸で見る事のできるサイト。実際に存在するサイトではなく、NASAをテーマにしたサイトを1つ用意して、要素を変えずに「この時期だったらこんなデザインだったよね」的な感じで制作した作品です。ページ下部に出るスライダーを左右に動かす事で時間軸を変える事ができます。早い時期からネットしてた人ほど懐かしめると思います。自分の場合は98年あたりからやってたので、その時期のデザインを見ると「あーこんなん作ってたわw」とか思いました。2010年を過ぎたあたりから一気にモダンになってくる様子がなかなか興味深いです。こうして見るとWebのデザインって時間を重ねるごとに洗練されてはいるんだけど、どんどんシステム化してテンプレートの出番も多くなり、なんだか昔のほうが楽しかったなぁ・・・とも思います。まぁ昔は遊びで作ってたのに対して、今じゃ仕事になっちゃったからかもしれませんが。

[Design Gallery] Hey User – モバイルApp初回起動時のチュートリアルを、ビデオで紹介するギャラリーサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

モバイルアプリの多くが表示する、初回起動時のチュートリアル画面を動画で紹介するギャラリーサイト。アプリ導入の際に、ユーザーに対してどのように使えばイイのかを紹介する大事な機会なので、どのアプリも丁寧で凝った説明、演出をしています。またココの部分にコストかけてるなーという作例も多く見られます。この場面でヘマするとせっかくダウンロードしてくれたユーザーにそっぽ向かれちゃうので当然と言えば当然ですね。このサイトは動画で見れる点が特徴で、トランジションなども含めて他社製アプリの作例を研究できます。チュートリアル制作のネタ探しに使えそうです。

[Design Gallery] Inspiration UI – クールなWebデザイン作例のギャラリーサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

クールなWebデザイン作例のギャラリーサイト。スクリーンショットを使って紹介されており、一覧から直接対象のサイトに行く事もできます。各作例は場面ごとに整理されているので、「All Patterns」から特定の場面だけを抽出して閲覧する事もできます。コレ系のギャラリーサイトってモバイルUI系が多いけど、久しぶりにWeb系のものを見つけた気がします。サイトデザインのネタ調として使えそうです。

[Wallpaper] Golden Hour – 日没後数分のゴールデンアワーをテーマにした壁紙サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

ゴールデンアワー(日没後数分の時間帯を指すカメラ用語)をテーマにした壁紙配布サイト。撮影した場所と月ごとに1枚1枚丁寧に紹介されていて、それぞれPC用とモバイル用のサイズでダウンロードできます。PC用の方は横4000pxオーバーあり(ものによっては6000pxあります。多分トリミングしたものは少し小さいんだと思います)、Retina Macでも十分に使えるサイズです。美しい作品ばかりなので早速Macの壁紙として使わせてもらいます。ちなみにライセンスはCC 4.0なので個人利用として使いましょう。

[UI Design] UX Timeline, back to the past! – 各種WebサービスのUI変遷を見ることのできるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

様々なWebサービスが今のデザインに至るまでの変遷を、タイムライン形式で見ることのできるサイト。まだ新しいサイトのようで紹介例はそれほど多くないけど、メジャーどころだとVimeoやDropbox、Airbnb、Spotifyなど紹介されています。UXタイムラインとはあるけど、どちらかというとデザイン面にフォーカスされているので、UIデザインの変遷、つまりは試行錯誤のプロセスを見れるサイトと考えた方が良さそうです。サイトのデザインって使い勝手に直結しますからな。参考にしたいものです。