クリエイターを対象にWeb制作関連やフリーランスの働き方など、私が気になったことはTwitterの投票機能を利用してアンケートを実施しております。今回その結果をまとめて紹介しますので参考にしてみてください。

Webデザインをインスピレーションを刺激したい時に参考にしているギャラリーサイトを11個紹介します。クライアントとの打ち合わせ時も実際のサイトを見ながら担当者とイメージを共有できるので便利に利用できると思います。ぜひ参考にしてみてください。

私のTwitterアカウントでは、サイト制作の現場で使えるTipsやアイデアを発信しています。2021年3月の間で人気があったツイートをまとめてみました。ブクマに埋もれてしまって探すのが大変という方はこちらからチェックしてみてください。

Webデザインを学び始めた初学者の方や制作現場の本棚に置いておき、何度も読み返したいおすすめの本を7冊紹介します。やさしく基礎だけを教えるという内容ではなく、Webデザインの学び始めから現場まで長く参考にできる本を集めました。まだチェックしていないものがありましたらぜひ手にとってみてください。

CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。

いざという時に必要な写真やイラスト、アイコン素材。汎用性が高く使いやすい無料の素材配布サイトを集めてみました。ブログなど個人運用のサイトは無料のもので済ませておきたいもの。ぜひ一通り確認してみてください。

よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。

フェードインアニメーションをCSSのみで実装する方法です。アニメーションを発火させるタイミングの調整ができないので、ヘッダーやメインビジュアルといったファーストビューに使える方法になります。

ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。

ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。

Webサイトに動画を設置する機会は多くなり、メインビジュアルの背景でループさせているサイトをよく見かけます。その際高画質で見せたいところなのですが、モバイルを考慮するとどうしてもサイズを小さくしないといけなくなり画質が悪くなります。その時にドットフィルターをかけると画質の粗さを目立たなくなるのでよく実装しています。今回はCSSのみでドットフィルターを実装する方法を紹介します。

文章はwrapの中におさめつつ、写真だけ画面横サイズいっぱいに広げたい時のCSSテクニックを紹介します。テキスト用のwrapと写真用のwrapの２つを用意しなくても、同じ親要素内にまとめても写真だけサイズを変更できるので便利。写真を印象的に表現したいページに使えます。