note
記事一覧
公開日順に、すべての記事を掲載しています。
-
発注・ディレクション
デザイン制作のイメージ共有で使うキーワード43個
ロゴやウェブページのデザインを検討する際、「どんな雰囲気にしたいのか」や「どんな印象を与えたいのか」を明確に言葉で示すのは、思った以上に難しいものです。依頼する側と制作する側が、頭の中にあるイメージを共通認識として持つた…
-
発注・ディレクション
ロゴ制作のときに聞きたいヒアリング項目
ロゴデザインを依頼する際に大切なのは、デザイナーにあなたの事業について情報を伝えること。そのために欠かせないのが「ヒアリング」です。
-
SEO・サイト運用
Webデザイナーが施す9つのSEO対策
フリーランスWebデザイナーである私が施しているSEO対策について紹介します。
-
デザイン・参考
デザインの参考になるギャラリーサイト
デザインの参考になるギャラリーサイト私が実際に活用しているデザインギャラリーサイトを厳選して8つご紹介します。
-
CSS・実装
見出しに使えるfit-contentを解説してみる
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。
-
発注・ディレクション
ロゴデザイン制作料金の違いについて
ロゴは、企業やブランドの顔となる重要な要素です。そのため、多くの方が慎重にデザインを選び、制作を依頼されています。
-
Web制作ツール
Web制作の現場で使える無料のWebサービス13選
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直…
-
Web制作ツール
配色ツール。配色難民のためのウェブツール8選
デザイン作成時に悩みがちな色選びを助けてくれる配色ツールを8つ紹介します。単なる色の組み合わせだけでなく、ウェブサイトやイラスト、モックアップなどのデザインにも適用して確認できるツールもあります。デザイナーに限らず、さま…
-
CSS・実装
CSSのみでカルーセルスライダーを実装する
画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。
-
CSS・実装
円グラフをCSSのみで表現する
円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。
-
CSS・実装
ページローディングのプログレスバーをCSSアニメーションで実装する
ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。
-
CSS・実装
ページ遷移時のフェードインアニメーションをCSSのみで実装する
ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。
-
CSS・実装
CSS見出しデザイン21選
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。
-
Web制作ツール
ダウンロードコンテンツ販売に便利！無料のBASE Apps 28選+1
BASEは、月額費用無料で、販売手数料のみで運営可能なネットショップ作成サービスです。コストをできる限り抑えたい、スモールスタートを目指すクリエイターに最適なサービスと言えます。
-
Web制作ツール
サイト制作で実際に使用している地味に便利なWebツールなど12個紹介してみる
最近のウェブサイト制作で実際に使用しているWebツールや情報記事などを12個紹介します。地味だけど便利に使えるものばかりなので、ぜひ参考にしてみてください。
-
発注・ディレクション
ウェブサイト制作において、私がいただいたら嬉しい資料とその作成方法
デザイナーがウェブサイト制作を進める上で、発注者＝クライアント様から共有される情報は非常に大切です。企業の基本情報だけでなく、各ページに掲載する文章や写真、イラストなど、質の高いコンテンツ情報が必要となります。
-
デザイン・参考
デザインとして動画を設置する際に気をつけている7つのポイント
Webサイト上にデザインとして動画を活用する例は多くなってきました。クライアントからメインビジュアルや主要セクションに動画の設置を希望されることが増えてきて、需要があることは実感しています。
-
Web制作ツール
非デザイナーやPhotoshopが無い人でも大丈夫！画像生成AIツールのClipdropが便利
-
発注・ディレクション
Webサイトを使いやすくするユーザビリティ11の施策
-
デザイン・参考
Figmaプラグイン17選。Webデザイナーが使い続けているプラグインを紹介
Figmaをデザイン作成のメインアプリに変えてから数ヶ月経過し、Figmaプラグインの見直しをおこないました。新たに発見したもの含め、私が使い続けているプラグインを17個紹介します。
-
デザイン・参考
ほどよい個性で見出しに使いたくなるGoogle Fonts 19選
Google
Fontsは、約1500種類のフォント（執筆時点）を提供しているWebサービスで、イメージに合ったフォントを見つけるためには、多くの時間が必要です。
-
デザイン・参考
【無料】現場で使えるアイコン・イラスト配布サイト8選
-
Web制作ツール
あなたのWeb制作をサポートしてくれるWebツール13選
Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツール…
-
Web制作ツール
Web制作に便利なChrome拡張機能20選
-
CSS・実装
コーディング後や納品時に確認する62のチェックリスト
Webデザイン制作中に使用している、コーディング後や納品時に確認すべき62項目のチェックリストを紹介します。
-
SEO・サイト運用
WordPressサイトのセキュリティ対策 – 最低限設定しておきたい5つ
WordPressで最低限おこなっておきたいセキュリティ対策について紹介します。難しい設定はなくWordPress初心者向きの内容です。ただ、かならず対応しておきたいものばかりなので、WordPress実装の際にチェック…
-
SEO・サイト運用
headに設定しておきたいHTMLメタデータやOGP、構造化データ
<head>内で最低限設定しておきたいHTMLタグを紹介します。
-
CSS・実装
スクロール時に背景色を変更 – Intersection Observer
スクロール後にイベントを実行させるIntersection
Observerを使用して、背景色やテキストカラーを変更させる方法の紹介です。
-
デザイン・参考
良質なWebデザインを集めているギャラリーサイト18+1選
-
CSS・実装
CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使え…
-
CSS・実装
現場で使えるFlexboxレイアウト12選
現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。