Web Designing Portal

Webクリエイターのための、
Webデザイン・Web情報のポータルサイト

Column
Clips: 57

デザイン

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング

Date : 2016.12.27

「Webでは文字詰めはできない」と諦めていませんか? 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つとされています。 そんな文字詰めですが、HTMLでも実はCSSのfont-feature-settingsプロパティーを指定するだけで自動カーニングができます。ほとんどのブラウザがサポートしており、実務でも十分使えるようになってきました。今回はそんなfont-feature-settingsプロパティーの魅力と使いどころをくまなく紹介します。

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング
open in a new window

CSSコピペで利用!話題のボタンデザイン用スニペット、サンプル30個まとめ

Date : 2016.11.01

CSSをコピペしてウェブ制作に活用できる、ボタン用スニペットサンプルを、WEBデザイナーのためのコードコミュニティサイト、Codepenよりピックアップしてまとめています。 その場でコードを確認、編集することができるので、幅広いデザインプロジェクトに応用でき、アニメーションをうまく活かした新しいスタイルを、今後のウェブサイト制作に活用してみてはいかがでしょう。

CSSコピペで利用!話題のボタンデザイン用スニペット、サンプル30個まとめ
open in a new window

おすすめのGoogle Web Fonts 25選

Category : デザイン

Date : 2016.10.25

Google Fontsは、何百ものWebフォントを無料で提供しているサービスです。最近では日本のサイトでもチラホラWeb フォントを使ったサイトが増えてきました。画像を切らなくてもいいので運用が楽だったり、SEO的にも効果的なので、みなさんのなかでも使ってみたいと思っている人も多いのではないでしょうか?

おすすめのGoogle Web Fonts 25選
open in a new window

配色を考えるときに便利なオンラインツール10個集めてみました

Category : デザイン

Date : 2016.10.24

デザイン作成時に役立つ、カラーパレットを作成するツールが集められています。便利な配色ツールを紹介していきたいと思います。

配色を考えるときに便利なオンラインツール10個集めてみました
open in a new window

【2016年】ディレクター必見!スマホ用グローバルナビゲーションのトレンド8選

Date : 2016.10.20

なんとなくハンバーガーかドロワーの2択が多いですが、スマホサイトで見られるグローバルメニューのインターフェイスは、次の8つが挙げられます。それぞれのメリットやデメリットで用途が分かれますので、サイトの特色に合ったグローバルメニューを検討する材料にしてみてはいかがでしょうか。

【2016年】ディレクター必見!スマホ用グローバルナビゲーションのトレンド8選
open in a new window

アイデアがガンガン降り注ぐ、Webデザインの参考になるギャラリー集

Category : デザイン

Date : 2016.10.18

ありきたりのWebデザインギャラリーではなく、グリッド線が入っているもの、料金表専門、インフォグラフィックスやグリッド・404・サイドバーなど、少し掘り下げたようなWebデザインギャラリーをまとめました。暇な時に見ているとインスピレーションが湧くはずです。パーツごとに分類されています。

アイデアがガンガン降り注ぐ、Webデザインの参考になるギャラリー集
open in a new window

ファーストビューの動きが面白いWebサイト20

Category : デザイン

Date : 2016.10.18

近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。中でもWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介されています。

ファーストビューの動きが面白いWebサイト20
open in a new window

スクロールした時に面白いエフェクトを出すためのアイデアまとめ

Category : デザイン

Date : 2016.10.18

スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などがまとめられています。製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。

スクロールした時に面白いエフェクトを出すためのアイデアまとめ
open in a new window

脱ビットマップ!SVG画像について今一度おさらいしてみる

Category : デザイン

Date : 2016.10.18

高解像度ディスプレイが当たり前の存在となり、スクリーンサイズの多様化が進むなかで、SVG画像やウェブフォントを活用するサイトがかなり増えたように感じます。「SVGってよく耳にはするけど実際はどうなんだろう?」と思われる方の為に、今一度SVG画像についておさらいしているページです。

脱ビットマップ!SVG画像について今一度おさらいしてみる
open in a new window

MdN11月号で「絶対フォント感」特集再び!

Category : デザイン

Date : 2016.10.18

「MdN2015年7月号」で大好評を博した、「絶対フォント感を身につける。」特集。10月6日(木)発売の「MdN2016年11月号」にて、前回より内容をパワーアップした「絶対フォント感を身につける。2」が特集されています。

MdN11月号で「絶対フォント感」特集再び!
open in a new window

【商用可】国が用意した、日本観光促進のためのハイクオリティのフリー素材「PHOTO METI」

Category : デザイン

Date : 2016.10.18

制作する上で、購入することも多い写真素材。魅力を伝えるためには非常に重要な要素の一つですが、今回紹介するのは、国が用意した、日本観光促進のためのハイクオリティのフリー素材「PHOTO METI」です。

【商用可】国が用意した、日本観光促進のためのハイクオリティのフリー素材「PHOTO METI」
open in a new window

もはや芸術!SVGアニメーションの巧みな活用方法20選

Category : デザイン

Date : 2016.10.18

なんだか最近 ハイセンスな web サイトで見かけることが増えてきた「SVG アニメーション」。動画や GIF、CSS では表現できないような "動き" を軽やかに演出しています。そこで今回は SVG アニメーションを使っているサイトや参考になるソースをピックアップしてご紹介していきたいと思います。

もはや芸術!SVGアニメーションの巧みな活用方法20選
open in a new window

2016年のwebデザインはwebフォントに注目!

Category : デザイン

Date : 2016.10.18

Webフォントを使うと、今までデザイン上でタイトルなど装飾文字を使っていた部分をテキストで表現することができるようになります。と、これだけだとなんてことはないように思いますが、画像文字だった部分をテキストで表現できるようになることにメリットがあります。

2016年のwebデザインはwebフォントに注目!
open in a new window

週1で作字。作字 a day

Category : デザイン

Date : 2016.10.18

作字 a dayは、7名のデザイナーさんが曜日毎に担当者し、投稿する作字の取り組みです。面白くアイデアも素晴らしいものを日々見ることができます。

週1で作字。作字 a day
open in a new window

当コンテンツは、ウェブにおける公共的な技術の向上を目的とし、著作権法第32条で定められた通り、一般に公表された著作物を出所を明示して引用しています。掲載に関するお問い合わせはこちらにご連絡ください。

Category

Page top