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

Browse By

Tag Archives: WebDesign

[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で作られたものを持ってきてるので、ソースコードの閲覧とかしやすいです。チェックが入る瞬間や、トグルが移動する際のアニメーションに凝った作例が多い印象。フォーム装飾って面倒なのがちょっとアレだしナニではあるんですが。

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

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

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

[Cheat Sheet] Bootstrap 4 CheatSheet – Bootstrap 4のチートシート

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

Bootstrap 4のチートシート。v4ってまだAlpha版なんだけど、わりともう実用段階ではありますよね。仕事ではまだv3系使ってはいるけど、ヘルプとか探すとv4のものが上位ヒットしたりし「あー違うんだよ3のヘルプを探してんだよ」みたいな事がよくあります。
というわけでこちらのチートシートですが、カテゴリごとに分けて紹介されており、詳細に行くとコードとリザルトが分かりやすく見れるようになっています。個別にヘルプ探さなくても、このページさえ開いてれば結構色々解決できそうです。v4使ったコーディングのお供に良さそう。

[Freebie] Must-Have Sketch Templates for New UX Designers – UXデザイナーのためのSketchテンプレート

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

UXデザイナーのためのSketchテンプレートのまとめ記事。グリッドレイアウト素材、画面遷移のパーツが用意されたもの、アイコン、ワイヤーフレーム素材、iOSやAndroid、FacebookなどのUIモックアップ、カラーパレットなどのSketchファイルが紹介されています。Webディレクター、UXデザイナー、UIデザイナーといった職種の人にオススメ。

[CSS] Trendy CSS Text Shadows – CSSで描く、クールなテキストシャドウ作例

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

CSSのtext-shadowのクールな作例。それぞれ使われているフォントや色指定についても紹介されており、「View CSS」をクリックするとCSSの確認もできます。フラットデザインが流行った後によく使われた、斜め方向にブラーなしの作例が多いです。Webでテキスト使ったちょっと印象的なタイポ組みたい時なんかの参考になりそうです。

[Web Design] CSS & JS Sliders From CodePen – CodePenからスライダーを紹介したまとめ記事

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

CodePenにあるCSS & JSスライダーを紹介したまとめ記事。稼働するものをEmbedしてるのでちょっと重いですが、各作例右上にある「CodePen」ロゴをクリックすると単独で表示する事ができます。様々な手法のスライダーが多数紹介されているので、スライダー選びの時に役立ちそう。