ブロック要素を垂直方向にセンタリングするのってアレですよね、メンドくさいですよね。たまにそうレイアウトしなきゃいけない時があるんだけど、「あれどうやるんだっけ・・・？」とか思って毎回ググってます。今回もそんな感じでググってたところ、すごいシンプルな方法を見つけたので備忘録として載っけておきます。センタリングしたいブロック要素にCSS3行書くだけなのでサクっと使えます。ただし親要素にheight指定が必要という点は、他の手法と変わらないので多少の注意は必要です。
クールなモバイルAppのUI作例を、動画で紹介するサイト。iOSやAndroidアプリ、またMac用アプリなどのデザイン作例を、動きも含めて見る事ができます。ただしトップの一覧画面からアニメーション全開なので結構重いです。アニメーションも含めたUIデザインをする際のネタ調になりそうなサイト。紹介作例もかなり多いです。
CC0（著作権放棄、パブリックドメイン）の写真素材を集めたサイト。フォトストックサイトってたくさんあるけど、CC0に限定したもの最近ちょいちょい増えてきましたね。自由に使えてライセンスの表記も必要ないので、使い勝手が良いです。キーワード検索以外にも、タグクラウドや色指定で探す事もできます。
Sketchに関するリソースの紹介サイト。ギャラリー形式でズラーっと紹介されており、各詳細ページからソース元に行く事ができます。UIキットやアイコン、Webやモックアップなど、各リソースごとにタグ付けされて管理されているので、目的の素材を探すのも簡単です。Sketchに限定しているという点がとってもナイスです。
WebやUIデザインでよく行うダミーデータを、簡単に生成してくれるプラグイン。SketchとPhotoshop用の2種類が用意されています。動画見ると分かるんですが、ダミーのユーザープロフィールなどを自動で生成して、かつそれを挿入までしてくれるようです。入力する項目の内容も細かくカスタマイズできるようで、これで無料ってのはスゴいなと思いました。ユーザーアカウントの存在するモバイルAppなんかのデザインに使えそうです。
FlexboxベースのCSSフレームワークだそうです。CSSフレームワークってだいたいFloat使ったグリッドレイアウトのものが多いけど、最近じゃレイアウト組む手法も徐々にFlexboxになりつつあるので、慣れた人には便利そうです。実際Flexboxでレイアウト組むの楽ですからね。レスポンシブレイアウトや、フルスクリーン、垂直軸のセンタリング、ボタンやフォームパーツなども揃っているようです。
数年ぶりにテーマを変更しました。今までもちょこちょこ画像変えたり、Divの幅変更したりとかはしてましたが、テーマごと変更するのは多分4,5年ぶりな気がします。その4,5年の間にWebのデザイントレンドも色々と変わり、いつの間にかとってもレガシーなブログになってしまってました。というわけで「これじゃいかん」系のアレで頑張ってリニューアルしたわけです。旧記事についてはレイアウト崩れるものもあるけど、徐々に直していこうと思ってます。
ちなみに今回ベースにしたのはJustwriteというテーマ。これ汎用的で使いやすかったです。
あと今回レスポンシブレイアウトにしてるんだけど、iPadに最適化してます。ポートフォリオだとシングルカラム、ランドスケープだと2カラムになります。iPad Proだと多分どっちも2カラム。けどポートフォリオのレイアウトまだちょっと崩れてます。その内直します。はー、数年ぶりに大仕事したって感じ。
Webデザインの進化を時間軸で見る事のできるサイト。実際に存在するサイトではなく、NASAをテーマにしたサイトを1つ用意して、要素を変えずに「この時期だったらこんなデザインだったよね」的な感じで制作した作品です。ページ下部に出るスライダーを左右に動かす事で時間軸を変える事ができます。早い時期からネットしてた人ほど懐かしめると思います。自分の場合は98年あたりからやってたので、その時期のデザインを見ると「あーこんなん作ってたわｗ」とか思いました。2010年を過ぎたあたりから一気にモダンになってくる様子がなかなか興味深いです。こうして見るとWebのデザインって時間を重ねるごとに洗練されてはいるんだけど、どんどんシステム化してテンプレートの出番も多くなり、なんだか昔のほうが楽しかったなぁ・・・とも思います。まぁ昔は遊びで作ってたのに対して、今じゃ仕事になっちゃったからかもしれませんが。
