Web制作に役立つ情報一覧

失敗しない美しいUIにする配色の選びかた【実践編】

2024/08/23(Fri) 09:06

これまでに以下のように鮮やかな色の配色ツールを使ったことはあるでしょうか？ベースとなる色を選び、「補色」や「類似色」などいくつかの配色オプションを調整すると、ホームページを構築するために使用すべき５つの色見本が表示されるというものです。

https://photoshopvip.net/160306#google_vignette

フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更

2024/08/21(Wed) 08:54

CSSはどんどん便利になっていますね！これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/css-tips-for-textarea.html#google_vignette

オンページSEOとは？運営者が制御できるサイト内部の最適化

2024/08/20(Tue) 08:56

オンページSEOとは、ウェブサイトの内部をユーザーと検索エンジンに最適化する施策です。ユーザーと検索エンジンの両方に対してわかりやすい構造を提供することのほか、ユーザーの検索意図を的確に満たすコンテンツを作成し管理するコンテンツSEOと、技術的な側面を最適化しサイトを検索エンジンに正しく理解・取得させるテクニカルSEOが含まれます。

https://www.bodhi.co.jp/on-page-seo

テクニカルSEOとは？ウェブサイトの技術的な側面の最適化施策

2024/08/19(Mon) 09:20

テクニカルSEOとは、検索エンジンがウェブサイトの内容を確実かつ効率的に取得できるように、また内容を理解しやすくなるように、ウェブサイトの技術的な側面を最適化することをいいます。ウェブサイトの構造やコンテンツを理解しやすくし、正しくクロールやインデックスすることを助けます。

https://www.bodhi.co.jp/technical-seo

CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました

2024/08/09(Fri) 08:59

CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。@propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/next-gen-css-variables-property.html#google_vignette

失敗しない配色えらび、現役デザイナー厳選おすすめカラーパレット30選【プロクリエイト】

2024/08/08(Thu) 08:54

「色が決まらずいつも時間がかかる」「まとまりのある色合いが決まらない」デザインのときによく耳にするのが、「配色に悩んでしまう」問題でしょう。もちろん配色ツールも役立ちますが、特にiPadなどで手描きスケッチするときは、24色入りの色鉛筆や絵の具セットのように色を選びたいのが本音。このリストでは、まとまりのあるデザインをつくる美しい配色カラーパレットをまとめてご紹介します。

https://photoshopvip.net/159756

日本の夏、かわいいイラストおすすめ素材40選【Adobe Stock編】

2024/08/06(Tue) 09:01

「日本の夏っぽいイラストが欲しいんだけど…」そんなお願いをされたとき、すぐに候補をリストアップできるオススメのかわいい夏イラスト素材を集めました。

https://photoshopvip.net/159757

HTMLとCSSでつくる！リンクテキストのホバー時アニメーション11選

2024/08/02(Fri) 08:51

今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。

https://ics.media/entry/240801/

ピクセルフォント・ビットマップ・電卓数字の日本語フリーフォント 総まとめ

2024/08/02(Fri) 08:50

ゲームや電光掲示板などで見かけるビットマップやドットの懐かしいフォント、デジタル時計や電卓などで見かける７セグメントや14セグメントのフォントなど、ピクセルフォントの日本語フリーフォントを紹介します。ゲームやアプリをはじめ、動画やWebデザインなどでも幅広く利用できる日本語のフリーフォントです！

https://coliss.com/articles/freebies/pixel-japanese-free-fonts.html

FigmaがAIでさらに進化！ Web制作はもはや完全自動化目前？ 「Config APAC 2024」現地レポ

2024/08/01(Thu) 09:04

Figmaが2024年7月、シンガポールでアジアで初となるデザインカンファレンス「Config APAC」を開催。AIを活用した新機能と新しいUIが公表されたイベントの模様を、現地からレポート。

https://webtan.impress.co.jp/e/2024/07/29/47425