サイト構築 -制作

最近のWebを象徴するカード型コンポーネントをデザインする時のポイントまとめ

Post on:2017年3月24日

ここ1, 2年で、カードのコンポーネントを採用しているWebサイトは非常に増えました。レスポンシブとも相性がよく、情報を分かりやすく整理でき、テキストや画像だけでなく、動画などのマルチメディアも要素として配置することがで

...記事の続きを読む

簡単なのにかっこいい!ポートフォリオサイトが作成できる、HTMLベースのテンプレート -Dev Portfolio Template

Post on:2017年3月23日

自分の職歴や関わったプロジェクト、スキルなどをプレゼンするポートフォリオを0から作ろうとすると面倒かもしれません。ポートフォリオに必要なコンテンツをコンポーネント化し、追加や削除も簡単に行えるHTMLベースのテンプレート

...記事の続きを読む

より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix

Post on:2017年3月22日

先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。 まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています

...記事の続きを読む

1クリックでSVGのデバッグが可能!SVGのパスをアウトラインに変換、アンカーやポイントやハンドルを表示 -xvg

Post on:2017年3月15日

Webページで使用しているSVGのパスをアウトラインに変換し、アンカー、コントロールポイント、ハンドルを表示してデバッグができるChromeの拡張機能「xvg」を紹介します。

ブログのタイトルや見出しを効果的にする!キャッチコピーを書くための基礎テクニック

Post on:2017年3月10日

ブログやサイトのタイトル・見出しの文言は、非常に大切です。 ビジターはそこにある言葉を見て、興味を引かれれば、コンテンツを読んでみようという気になります。また、ソーシャルサービスでも記事のタイトルだけ掲載されることが多く

...記事の続きを読む

サイト構造や画面遷移を分かりやすく見せる、サイトマップ・フローチャートを作成する要素がすべて揃った無料素材 -UX Flow

Post on:2017年3月2日

Webサイトやスマホアプリのサイトマップ・フローチャートを簡単に作成できるSketch用の無料素材を紹介します。 ラインやアローをはじめ、アイコン、ラベル、パネルなど、サイトマップ・フローチャートを作成するための要素がす

...記事の続きを読む

プロペラがすごい!よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller

Post on:2017年2月28日

最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフ

...記事の続きを読む

サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて

Post on:2017年2月21日

ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは

...記事の続きを読む

Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ

Post on:2017年2月14日

スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しか

...記事の続きを読む

こんな無料素材があったとは!ページの背景いっぱいに表示するアニメーションの動画素材 -Vidlery

Post on:2017年1月31日

Webページの背景いっぱいにアニメーションの動画を配置できる、動画素材とコードを紹介します。動画素材は個人でも商用でも無料で利用できます。 動画の上にはオーバーレイで、さまざまなコンテンツを配置することも可能です。 Vi

...記事の続きを読む

 1 2 3 4 5 ... 41 42 Next

top of page

©2017 coliss