ColumnClips: 57
デザイン
文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング
「Webでは文字詰めはできない」と諦めていませんか? 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つとされています。 そんな文字詰めですが、HTMLでも実はCSSのfont-feature-settingsプロパティーを指定するだけで自動カーニングができます。ほとんどのブラウザがサポートしており、実務でも十分使えるようになってきました。今回はそんなfont-feature-settingsプロパティーの魅力と使いどころをくまなく紹介します。
CSSコピペで利用!話題のボタンデザイン用スニペット、サンプル30個まとめ
CSSをコピペしてウェブ制作に活用できる、ボタン用スニペットサンプルを、WEBデザイナーのためのコードコミュニティサイト、Codepenよりピックアップしてまとめています。 その場でコードを確認、編集することができるので、幅広いデザインプロジェクトに応用でき、アニメーションをうまく活かした新しいスタイルを、今後のウェブサイト制作に活用してみてはいかがでしょう。
おすすめのGoogle Web Fonts 25選
Google Fontsは、何百ものWebフォントを無料で提供しているサービスです。最近では日本のサイトでもチラホラWeb フォントを使ったサイトが増えてきました。画像を切らなくてもいいので運用が楽だったり、SEO的にも効果的なので、みなさんのなかでも使ってみたいと思っている人も多いのではないでしょうか?
【2016年】ディレクター必見!スマホ用グローバルナビゲーションのトレンド8選
なんとなくハンバーガーかドロワーの2択が多いですが、スマホサイトで見られるグローバルメニューのインターフェイスは、次の8つが挙げられます。それぞれのメリットやデメリットで用途が分かれますので、サイトの特色に合ったグローバルメニューを検討する材料にしてみてはいかがでしょうか。
アイデアがガンガン降り注ぐ、Webデザインの参考になるギャラリー集
ありきたりのWebデザインギャラリーではなく、グリッド線が入っているもの、料金表専門、インフォグラフィックスやグリッド・404・サイドバーなど、少し掘り下げたようなWebデザインギャラリーをまとめました。暇な時に見ているとインスピレーションが湧くはずです。パーツごとに分類されています。
ファーストビューの動きが面白いWebサイト20
近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。中でもWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介されています。
スクロールした時に面白いエフェクトを出すためのアイデアまとめ
スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などがまとめられています。製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。
脱ビットマップ!SVG画像について今一度おさらいしてみる
高解像度ディスプレイが当たり前の存在となり、スクリーンサイズの多様化が進むなかで、SVG画像やウェブフォントを活用するサイトがかなり増えたように感じます。「SVGってよく耳にはするけど実際はどうなんだろう?」と思われる方の為に、今一度SVG画像についておさらいしているページです。
MdN11月号で「絶対フォント感」特集再び!
「MdN2015年7月号」で大好評を博した、「絶対フォント感を身につける。」特集。10月6日(木)発売の「MdN2016年11月号」にて、前回より内容をパワーアップした「絶対フォント感を身につける。2」が特集されています。
【商用可】国が用意した、日本観光促進のためのハイクオリティのフリー素材「PHOTO METI」
制作する上で、購入することも多い写真素材。魅力を伝えるためには非常に重要な要素の一つですが、今回紹介するのは、国が用意した、日本観光促進のためのハイクオリティのフリー素材「PHOTO METI」です。
もはや芸術!SVGアニメーションの巧みな活用方法20選
なんだか最近 ハイセンスな web サイトで見かけることが増えてきた「SVG アニメーション」。動画や GIF、CSS では表現できないような "動き" を軽やかに演出しています。そこで今回は SVG アニメーションを使っているサイトや参考になるソースをピックアップしてご紹介していきたいと思います。
2016年のwebデザインはwebフォントに注目!
Webフォントを使うと、今までデザイン上でタイトルなど装飾文字を使っていた部分をテキストで表現することができるようになります。と、これだけだとなんてことはないように思いますが、画像文字だった部分をテキストで表現できるようになることにメリットがあります。