iPhone DuoでWebサイト制作はどう変わる？折りたたみスマホのUI設計とCSS対応
CSS・実装
iPhone Duoの3つの画面幅（466px・626px・890px）と、折りたたみスマホの画面におけるウェブサイトのUI設計の考え方を解説します。既存サイトの検証ポイントから、折りたたみ端末ならではの新しい体験の作り方、将来的な実装方針までを紹介します。
Note
制作ノート
最新の記事
Web制作後に90日間のレポートと改善を含める理由
発注・ディレクション
cortoのウェブサイト制作では、公開してから90日間のレポートと改善までを制作に含めています。ウェブサイトは制作完了後からがスタートだと考えているからです。公開したサイトの状況を30日ごとに確認し、必要な箇所へ手を入れるところまでをWeb制作の範囲にしました。
Webサイトの長文が読まれないときに見直す6つのこと
SEO・サイト運用
ウェブサイトの文章について、長文は読まれにくいという話をたまに見かけます。たしかに読み飛ばされることもありますが、私には読む長文と読まない長文があります。長さではなく興味です。
予算にあわせたWeb制作の提案スタイル
発注・ディレクション
Web制作費は、いただいた予算にあわせて提案する内容を決めています。私は予算で仕事を選びません。30万円でも150万円でも、事業の状況とフェーズから判断して、最善と思う内容を提案し制作させていただいております。
WordPressか静的サイトかの決め方
発注・ディレクション
WordPressか静的サイトかは、サイトの性能ではなく、誰がそのサイトを運用するかで決めています。AIエージェントでのWeb制作が本格化してから議論をよく見るようになりましたが、この判断軸はAIが出てくる前から16年変わっていません。
デザイン制作のイメージ共有で使うキーワード43個
発注・ディレクション
ロゴやウェブページのデザインを検討する際、「どんな雰囲気にしたいのか」や「どんな印象を与えたいのか」を明確に言葉で示すのは、思った以上に難しいものです。依頼する側と制作する側が、頭の中にあるイメージを共通認識として持つた…
CSS・実装
現場で使ってきたCSSや実装の工夫、コーディングのメモです。
このカテゴリの記事一覧へiPhone DuoでWebサイト制作はどう変わる？折りたたみスマホのUI設計とCSS対応
CSS・実装
iPhone Duoの3つの画面幅（466px・626px・890px）と、折りたたみスマホの画面におけるウェブサイトのUI設計の考え方を解説します。既存サイトの検証ポイントから、折りたたみ端末ならではの新しい体験の作り方、将来的な実装方針までを紹介します。
見出しに使えるfit-contentを解説してみる
CSS・実装
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。
CSSのみでカルーセルスライダーを実装する
CSS・実装
画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。
Web制作ツール
制作を助けてくれるツールやサービス、拡張機能の紹介です。
このカテゴリの記事一覧へWeb制作の現場で使える無料のWebサービス13選
Web制作ツール
CSSコーディングに役立つサービスやウェブサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直…
配色ツール。配色難民のためのウェブツール8選
Web制作ツール
デザイン作成時に悩みがちな色選びを助けてくれる配色ツールを8つ紹介します。単なる色の組み合わせだけでなく、ウェブサイトやイラスト、モックアップなどのデザインにも適用して確認できるツールもあります。デザイナーに限らず、さま…
ダウンロードコンテンツ販売に便利！無料のBASE Apps 28選+1
Web制作ツール
BASEは、月額費用無料で、販売手数料のみで運営可能なネットショップ作成サービスです。コストをできる限り抑えたい、スモールスタートを目指すクリエイターに最適なサービスと言えます。
デザイン・参考
デザインの参考サイトや、フォント・素材・表現のことをまとめています。
このカテゴリの記事一覧へWebデザインギャラリーサイト26選｜デザイン制作の参考に使えるWebサイトまとめ
デザイン・参考
私が実際に活用しているWebデザインギャラリーサイトを厳選して26サイトご紹介します。デザイン制作の参考にも、クライアントとの打ち合わせにも使えるものを集めました。
デザインとして動画を設置する際に気をつけている7つのポイント
デザイン・参考
ウェブサイト上にデザインとして動画を活用する例は多くなってきました。クライアントからメインビジュアルや主要セクションに動画の設置を希望されることが増えてきて、需要があることは実感しています。
Figmaプラグイン17選。Webデザイナーが使い続けているプラグインを紹介
デザイン・参考
Figmaをデザイン作成のメインアプリに変えてから数ヶ月経過し、Figmaプラグインの見直しをおこないました。新たに発見したもの含め、私が使い続けているプラグインを17個紹介します。
発注・ディレクション
サイトやロゴを発注する前に知っておきたい準備や考え方のこと。
このカテゴリの記事一覧へWeb制作後に90日間のレポートと改善を含める理由
発注・ディレクション
cortoのウェブサイト制作では、公開してから90日間のレポートと改善までを制作に含めています。ウェブサイトは制作完了後からがスタートだと考えているからです。公開したサイトの状況を30日ごとに確認し、必要な箇所へ手を入れるところまでをWeb制作の範囲にしました。
予算にあわせたWeb制作の提案スタイル
発注・ディレクション
Web制作費は、いただいた予算にあわせて提案する内容を決めています。私は予算で仕事を選びません。30万円でも150万円でも、事業の状況とフェーズから判断して、最善と思う内容を提案し制作させていただいております。
WordPressか静的サイトかの決め方
発注・ディレクション
WordPressか静的サイトかは、サイトの性能ではなく、誰がそのサイトを運用するかで決めています。AIエージェントでのWeb制作が本格化してから議論をよく見るようになりましたが、この判断軸はAIが出てくる前から16年変わっていません。
SEO・サイト運用
検索やサイト運用まわりで押さえておきたいことを整理しています。
このカテゴリの記事一覧へWebサイトの長文が読まれないときに見直す6つのこと
SEO・サイト運用
ウェブサイトの文章について、長文は読まれにくいという話をたまに見かけます。たしかに読み飛ばされることもありますが、私には読む長文と読まない長文があります。長さではなく興味です。
Webデザイナーが施す9つのSEO対策
SEO・サイト運用
フリーランスWebデザイナーである私が施しているSEO対策について紹介します。
お問い合わせフォーム最適化。改善しておきたい16の項目
SEO・サイト運用
入力を最後まで進めて送信してもらうために、改善しておきたい16のポイントを紹介します。「お問い合わせ数を増やしたい」というご相談に応えるための土台です。
書籍・読んだ本
読んで参考になった本の紹介です。デザインや制作の周辺で手元に置いている本を取り上げます。
このカテゴリの記事一覧へ穏やかな配色が心地いい！配色BOOK – 色×イメージで見つける理想の配色
書籍・読んだ本
「穏やか」「やさしい」「やわらかい」といった落ち着いたトーンでまとめられた配色本の紹介です。他の配色本との違いを整理しました。
デザインの見方と言語化を解説した書籍 – デザインのミカタ 無限の「ひきだし」と「センス」を手に入れる
書籍・読んだ本
デザインの作り方ではなく『見方』と『言語化』を扱った書籍です。デザインを生み出すスキルを磨くうえで土台になる本として紹介します。
独学フリーランス必読！Webサイト制作に必要な知識が学べる書籍5選
書籍・読んだ本
Web制作はデザインやコーディングだけでは終わりません。契約や法律、ディレクション、運用まで学べる書籍を5冊紹介します。
