iPhone DuoでWebサイト制作はどう変わる？折りたたみスマホのUI設計とCSS対応
CSS・実装
iPhone Duoの3つの画面幅（466px・626px・890px）と、折りたたみスマホの画面におけるウェブサイトのUI設計の考え方を解説します。既存サイトの検証ポイントから、折りたたみ端末ならではの新しい体験の作り方、将来的な実装方針までを紹介します。
Archive
記事一覧
Web制作後に90日間のレポートと改善を含める理由
発注・ディレクション
cortoのウェブサイト制作では、公開してから90日間のレポートと改善までを制作に含めています。ウェブサイトは制作完了後からがスタートだと考えているからです。公開したサイトの状況を30日ごとに確認し、必要な箇所へ手を入れるところまでをWeb制作の範囲にしました。
Webサイトの長文が読まれないときに見直す6つのこと
SEO・サイト運用
ウェブサイトの文章について、長文は読まれにくいという話をたまに見かけます。たしかに読み飛ばされることもありますが、私には読む長文と読まない長文があります。長さではなく興味です。
予算にあわせたWeb制作の提案スタイル
発注・ディレクション
Web制作費は、いただいた予算にあわせて提案する内容を決めています。私は予算で仕事を選びません。30万円でも150万円でも、事業の状況とフェーズから判断して、最善と思う内容を提案し制作させていただいております。
WordPressか静的サイトかの決め方
発注・ディレクション
WordPressか静的サイトかは、サイトの性能ではなく、誰がそのサイトを運用するかで決めています。AIエージェントでのWeb制作が本格化してから議論をよく見るようになりましたが、この判断軸はAIが出てくる前から16年変わっていません。
デザイン制作のイメージ共有で使うキーワード43個
発注・ディレクション
ロゴやウェブページのデザインを検討する際、「どんな雰囲気にしたいのか」や「どんな印象を与えたいのか」を明確に言葉で示すのは、思った以上に難しいものです。依頼する側と制作する側が、頭の中にあるイメージを共通認識として持つた…
ロゴ制作のときに聞きたいヒアリング項目
発注・ディレクション
ロゴデザインを依頼する際に大切なのは、デザイナーにあなたの事業について情報を伝えること。そのために欠かせないのが「ヒアリング」です。
Webデザイナーが施す9つのSEO対策
SEO・サイト運用
フリーランスWebデザイナーである私が施しているSEO対策について紹介します。
Webデザインギャラリーサイト26選｜デザイン制作の参考に使えるWebサイトまとめ
デザイン・参考
私が実際に活用しているWebデザインギャラリーサイトを厳選して26サイトご紹介します。デザイン制作の参考にも、クライアントとの打ち合わせにも使えるものを集めました。
見出しに使えるfit-contentを解説してみる
CSS・実装
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。
ロゴデザイン制作料金の違いについて
発注・ディレクション
ロゴは、企業やブランドの顔となる重要な要素です。そのため、多くの方が慎重にデザインを選び、制作を依頼されています。
Web制作の現場で使える無料のWebサービス13選
Web制作ツール
CSSコーディングに役立つサービスやウェブサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直…
配色ツール。配色難民のためのウェブツール8選
Web制作ツール
デザイン作成時に悩みがちな色選びを助けてくれる配色ツールを8つ紹介します。単なる色の組み合わせだけでなく、ウェブサイトやイラスト、モックアップなどのデザインにも適用して確認できるツールもあります。デザイナーに限らず、さま…
CSSのみでカルーセルスライダーを実装する
CSS・実装
画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。
円グラフをCSSのみで表現する
CSS・実装
円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。
ページローディングのプログレスバーをCSSアニメーションで実装する
CSS・実装
ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。
ページ遷移時のフェードインアニメーションをCSSのみで実装する
CSS・実装
ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。
CSS見出しデザイン21選
CSS・実装
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。
ダウンロードコンテンツ販売に便利！無料のBASE Apps 28選+1
Web制作ツール
BASEは、月額費用無料で、販売手数料のみで運営可能なネットショップ作成サービスです。コストをできる限り抑えたい、スモールスタートを目指すクリエイターに最適なサービスと言えます。
サイト制作で実際に使用している地味に便利なWebツールなど12個紹介してみる
Web制作ツール
最近のウェブサイト制作で実際に使用しているWebツールや情報記事などを12個紹介します。地味だけど便利に使えるものばかりなので、ぜひ参考にしてみてください。
いざという時に使える7つのHTML&CSS Tips集vol.2
CSS・実装
覚えておくと便利なHTML＆CSS Tips集の第2弾です。実装で困ったときに読み返せるようまとめました。
穏やかな配色が心地いい！配色BOOK – 色×イメージで見つける理想の配色
書籍・読んだ本
「穏やか」「やさしい」「やわらかい」といった落ち着いたトーンでまとめられた配色本の紹介です。他の配色本との違いを整理しました。
ウェブサイト制作において、私がいただいたら嬉しい資料とその作成方法
発注・ディレクション
デザイナーがウェブサイト制作を進める上で、発注者＝クライアント様から共有される情報は非常に大切です。企業の基本情報だけでなく、各ページに掲載する文章や写真、イラストなど、質の高いコンテンツ情報が必要となります。
お問い合わせフォーム最適化。改善しておきたい16の項目
SEO・サイト運用
入力を最後まで進めて送信してもらうために、改善しておきたい16のポイントを紹介します。「お問い合わせ数を増やしたい」というご相談に応えるための土台です。
デザインの見方と言語化を解説した書籍 – デザインのミカタ 無限の「ひきだし」と「センス」を手に入れる
書籍・読んだ本
デザインの作り方ではなく『見方』と『言語化』を扱った書籍です。デザインを生み出すスキルを磨くうえで土台になる本として紹介します。
デザインとして動画を設置する際に気をつけている7つのポイント
デザイン・参考
ウェブサイト上にデザインとして動画を活用する例は多くなってきました。クライアントからメインビジュアルや主要セクションに動画の設置を希望されることが増えてきて、需要があることは実感しています。
非デザイナーやPhotoshopが無い人でも大丈夫！画像生成AIツールのClipdropが便利
Web制作ツール
Photoshopのジェネレーティブ塗りつぶしはAdobe CCの契約が必要ですが、画像生成AIツールのClipdropならブラウザだけで使えます。背景生成、不要物の削除、画質補正など5つの機能を実際に試して紹介します。
Webサイトを使いやすくするユーザビリティ11の施策
発注・ディレクション
ウェブサイトを使いやすくするために私が実践しているユーザビリティの施策を11個紹介します。ナビゲーションやフォーム、読み込み速度など、制作前にチェックしておきたい項目をまとめました。
独学フリーランス必読！Webサイト制作に必要な知識が学べる書籍5選
書籍・読んだ本
Web制作はデザインやコーディングだけでは終わりません。契約や法律、ディレクション、運用まで学べる書籍を5冊紹介します。
ロゴデザイン初心者を抜け出したい人向けの書籍 – ロゴデザインのコツ プロのクオリティに高めるための手法65
書籍・読んだ本
COSYDESIGN代表の佐藤浩二氏の著書『ロゴデザインのコツ プロのクオリティに高めるための手法65』を読んで、押さえておきたいポイントを整理しました。
Figmaプラグイン17選。Webデザイナーが使い続けているプラグインを紹介
デザイン・参考
Figmaをデザイン作成のメインアプリに変えてから数ヶ月経過し、Figmaプラグインの見直しをおこないました。新たに発見したもの含め、私が使い続けているプラグインを17個紹介します。
ほどよい個性で見出しに使いたくなるGoogle Fonts 19選
デザイン・参考
Google Fontsは、約1500種類のフォント（執筆時点）を提供しているWebサービスで、イメージに合ったフォントを見つけるためには、多くの時間が必要です。
覚えておくと便利なCSSデザインTipsを9つ集めてみた
CSS・実装
これまで画像で表現していたデザインも、今ではCSSのみで実装できるものが増えました。現場で使えるCSSデザインTipsを9個紹介します。
【無料】現場で使えるアイコン・イラスト配布サイト8選
デザイン・参考
ウェブサイトで使う素材は、サイト全体で一貫したテイストにそろえたいもの。大手の素材サイトでは難しいこの条件を満たす、無料でアイコンやイラストを配布しているサイトを8つ紹介します。
あなたのWeb制作をサポートしてくれるWebツール13選
Web制作ツール
Web制作をサポートしてくれるツールを13個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツール…
いざという時に使える13のHTML&CSS Tips集
CSS・実装
覚えておくと便利なHTML＆CSSのTipsを13個紹介します。実装で困ったときに読み返せるようまとめました。
見出しをおしゃれにする無料の英字フォント19
デザイン・参考
見出しには日本語だけでなく英字も添えてアイキャッチにしています。書体はサイトの印象を左右するので、選び方とあわせて19書体を紹介します。
Web制作に便利なChrome拡張機能20選
Web制作ツール
ウェブサイト制作者の視点から、実務で使っているChrome拡張機能を20個紹介します。ChatGPT関連、Web制作、情報収集、お役立ちツールの4分野に分けて、頻繁に使うものといざという時に使うものをまとめました。
コーディング後や納品時に確認する62のチェックリスト
CSS・実装
Webデザイン制作中に使用している、コーディング後や納品時に確認すべき62項目のチェックリストを紹介します。
WordPressサイトのセキュリティ対策 – 最低限設定しておきたい5つ
SEO・サイト運用
WordPressで最低限おこなっておきたいセキュリティ対策について紹介します。難しい設定はなくWordPress初心者向きの内容です。ただ、かならず対応しておきたいものばかりなので、WordPress実装の際にチェック…
headに設定しておきたいHTMLメタデータやOGP、構造化データ
SEO・サイト運用
<head>内で最低限設定しておきたいHTMLタグを紹介します。
スクロール時に背景色を変更 – Intersection Observer
CSS・実装
スクロール後にイベントを実行させるIntersection Observerを使用して、背景色やテキストカラーを変更させる方法の紹介です。
CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選
CSS・実装
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使え…
現場で使えるFlexboxレイアウト12選
CSS・実装
現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。
