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

Browse By

Category Archives: Web Design

[Web Template] Beetle – Responsive HTML Template – レスポンシブレイアウト&パララックススクロールなHTML5テンプレート

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

レスポンシブ・レイアウトで、かつパララックス・スクロールにも対応したHTML5テンプレート。需要の多いこの2つに対応しているってのはなかなかナイスです。静的なHTMLテンプレートは無料で、Wordpressテーマとなっているものは48ドル(今現在)で販売されています。またマップのパーソナライズや、グリッドレイアウト、カルーセル(イメージスライダー)にも対応しているので、モダンなコンテンツ表示手法にはひと通り対応しているという印象。なかなかイイんじゃないでしょうかこれ。

[Javascript] boyega – サイトにストームトルーパーを追加できるJS

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

サイトに時限式のストームトルーパーを仕込めるJS。あ、これ真面目な記事じゃないですネタ記事ですw Star Wars Episode 7のトレーラーを観ていない人、そもそもスターウォーズに興味が無い人にとっては少しもオモしろくないのでスルーしてください。ちなみにこちらのページに動作デモがあります。表示されたら、フォースの力を信じて忍耐を持って少し待ちましょう。トレーラーとほぼ同じ間で彼が出てきますから。ちなみに導入方法は簡単で、JSリンクの1行をサイトに追記するだけ。簡単ですね。ところで彼、誰なんでしょうね? ジャンゴ・フェットとは俳優が違うし、クローン元が別人なのかな。フォースと共にあらんことを。

[Web Design] Marketing Design Search Engine | Crayon – ウェブサイトを場面で抽出できるデザインギャラリー

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

トップページやランディングページ、プライシングページなど、Webサイトを場面ごとに抽出して閲覧する事のできるデザインギャラリー。複数のサイトのデザイン作例を任意の場面で横断して閲覧する事ができるので、例えば「LPのレイアウトを複数例見たい」という時なんかに便利です。またそうしたページタイプだけではなく、サイト運営者の業種、CMSの種類、トラフィックの大小などの属性で表示内容を細かく選べる点がナイスです。CMSの種類で選べるってのが特に便利だなと。デザインのネタ調に使えそうです。

[Web Design] 35+ Awesome Image Hover Effect With Pure CSS3 – Part 1 – ホバーエフェクトのクールな作例

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

CSS3を使ったマウスホバーエフェクトの作例をまとめた記事。アニメーションを使ったものや、キャプションの凝った見せ方などが多数紹介されています。ちなみにこの記事はPart1で、Part2はこちらにあります。サムネールのマウスホバーエフェクトのネタ調としてナイスなまとめ。

[SNS] Always Up-to-Date Guide to Social Media Image Sizes – 各種SNSの画像サイズまとめ

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

様々なSNS内で使われる画像サイズをまとめた記事。紹介されているのはTwitter、Facebook、Google+、Pinterest、LinkedIn、Youtube、Instagram、Tumblr。いわゆるメジャーどころのSNSがおさえられてます。ヘッダーイメージのサイズだけでなく、SNSの各パーツごとに使われる画像のサイズを細かく解説してくれてます。この手の仕様ってコロコロ変わるので(特にFacebookお前だ)、常に最新の情報をおさえておきたいところです。

[CSS3] SpinKit – 画像を使わないCSSスピナー

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

画像を使わずにCSSだけで描画されるローディングスピナー。全部で8個用意されていて、左右のスクロール(十字キー使えます)で見る事ができます。各ページ内から「Source」ボタンを押す事でCSSコードが表示されるので、コピペするだけで使えます。ローディングアニメーションをサクっと導入したい時に使えそうです。アニメーションもクール。

[Javascript] Full Screen Vertical Scroller – CSS3とjQueryで動くフルスクリーンスクローラー

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

CSS3とjQueryを使って作る、フルスクリーンのスクローラー。ウィンドウをスクロールしようとすると、ブラウザウィンドウの縦幅単位でスクロールするアレです。最近じゃAppleなんかも製品ページとかでよく使ってますね。ページ右端には各ページへのダイレクトリンクも用意されており、各ページにはアンカーで飛べる仕組みになっているので、固定リンクも可能。ソースコードはGithubから一式ダウンロードできるようです。全画面背景画像とか、パララックススクロールあたりと組み合わせるのも良いですな。

[Web Design] AppCSS – モバイルアプリのプロモサイトだけのデザインギャラリー

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

MobileAppのプロモサイトだけを集めたデザインギャラリー。様々なアプリの紹介サイトが集められてます。内容が内容だけにどのサムネールを見てもまず目につく位置にあいぽんがあります。まぁ自然とそういう見せ方になりますよね。また横幅100%、ホワイトスペース、ミニマル、ハンバーガーアイコン、カラフル、モノクロ、イラストという感じでタグ付けによってカテゴリ分けされているので、特定のデザイン手法だけに絞って閲覧する事もできます。アプリの見せ方を考察する際に使えそうです。