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

Browse By

All posts by Quattro

[Wallpaper] iPhone X wallpaper – iPhone Xの内部構造壁紙

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

毎度分解でおなじみiFixitが、早速iPhone Xの内部構造壁紙を配布してます。ディスプレイの裏側に配置されている部品を撮影したもので、これを使えば奥が透けて見えるような感じになります。iPhone X、ベゼルが薄くなったせいで、以前のモデルと比べてよりスケルトンっぽく見えますな。ちなみに通常撮影のものと併せて、X線撮影したものも一緒に配布されてます。ちなみにわたくしiPhone 7 Plusを初日に買ったので、今年は見送りました。来年X2とか出たら買おうと思ってます。

[Web Design] Responsive Screenshots – PCやスマホ、タブレットでのスクリーンショットをまとめて撮ってくれるサイト

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

PCやスマホ、タブレットなどでWebサイトを見た時の様子を、スクリーンショットとしてまとめて保存してくれるサイト。iMac 27inch, Macbook Pro 15inch, iPad, iPhone Xの4デバイスでの見え方の確認が行えます。iPhone Xというのが新しい感じです。WindowsとかAndroid環境はアレですかね、完全無視な感じですかね。サイト作った時の簡易確認に便利ではあるけど、エミュレーション環境に日本語フォントが入ってないようで、2バイト文字は化けちゃいます。ちょっとした確認程度になら使えそうです。

[Web Design] Button Design Over the Years – ボタンデザイントレンドの変遷

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

2009年から現在に至るまでの、ボタンデザイントレンドの移り変わりを描いた記事。2009年というのはDribbbleができた年らしく、この記事内で引用されているデザイン作例もDribbbleからのもののようです。スキューモーフィックデザイン全盛の時期から始まり、2013年に一気に押し寄せたフラットデザインの波に飲まれ、その後従来の凹凸表現に代わり新たにボタンである事をユーザーに知らせる役割を担う事となった角丸ボタンの時代が来て現在に至る、というまるでひとつの王朝が勃興しそして沈んでいく様子を見るかのような壮大な歴史を見る事ができます。そこそこ年齢のいってる中年デザイナーにとってはなかなか興味深い内容かと思います。たかがボタン、されどボタン。ボタンデザインにはデザイントレンドの様々な要素がギュっと詰まっているのであります。多分。

[CSS] CSS Checkbox Styles From CodePen – チェックボックス装飾の作例まとめ

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

CSSで行うチェックボックス装飾の作例をまとめた記事。どの作例もCodepenで作られたものを持ってきてるので、ソースコードの閲覧とかしやすいです。チェックが入る瞬間や、トグルが移動する際のアニメーションに凝った作例が多い印象。フォーム装飾って面倒なのがちょっとアレだしナニではあるんですが。

[Misc] Product Graveyard – ITプロダクトの墓場

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

IT系プロダクトの墓場です。この業界の宿命なのか、一足踏み入れればそこには累々と屍が転がっております。個人的に特に印象的なのがFireworksVineApertureあたり。Apertureなんかは「え? なくなるの? マジで!?」だったけど、Fireworksの場合は「もっと早くなくなりゃ良かったのに」といった感じで、製品ごとに思いもそれぞれといった感じです。で、これ読んでて思い出したのがICQ。なんでリストにないんだろ、って思ったらまだちゃんと生きてました。生きてた事に逆にビックリですわ。

[Freebie] Sketch for Designers – Sketch用リソースを紹介するサイト

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

Sketchに関するリソースを紹介するサイト。プラグインやアイコン素材、モックアップなどのデザイン素材を随時紹介しているようです。自分まだメインのデザインツールはPhotoshopなんですが、最近ちょいちょいSketchでデザイン素材提供される機会が増えてきて、WebとかMobile Appのデザインツールとしては、すっかり主役が変わったんだなーという印象があります。Sketchはこの手のリソースが多い点もイイですよね。

[Logo] WorldVectorLogo – 企業やブランドロゴのベクターデータアーカイブ

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

企業や企業ブランドのロゴデータを、ベクター形式で配布しているサイト。各ロゴデータはSVG形式で用意されています。Web系企業だけでなく広く様々なジャンルの企業ロゴが用意されていて、またそれぞれの深掘り感もスゴいです。例えばAppleで検索すると、懐かしい6色リンゴから最近の単色ロゴだけでなく、Apple PayやApple Watch, さらにはThink differentキャンペーンのロゴまで用意されてます。あとはLatest DownloadsやMost Downloadedといった条件抽出もできます。メジャーな企業に関するロゴデータならだいたい揃うんじゃないかという印象。ちょっと大きめの仕事する時のデザインカンプ制作なんかに役立ちそうです。

[Sketch] Wireframe Prototyping System – プロトタイピングに便利なSketch用テンプレート

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

プロトタイピングに便利なSketch用テンプレートファイル。PC用とMobile用があり、またダーク系・ライト系合わせて4種類のテーマが同梱されています。まとめて全部ダウンロードする事ができ、$0で指定すれば無料で手に入れる事ができます。ワイヤーフレーム描く時に使えそうです。WebディレクターやIAやってる人などに是非。