制作会社様向け
SNSで共有する画像の確認｜ページ本文とOGPを分けて点検する
SNSへURLを共有する前に、本文の写真とは別に共有用タイトル・画像・リンク先を確認します。架空の展示会ページの更新メモを例に、Web担当とSNS担当の確認範囲、古い表示が残る場合の調べ方を整理します。
GreenCodingのコラム
知りたいことから、
記事を探す。
Web制作の進め方から、公開後の運用、AIの業務活用まで。
読者とジャンルを組み合わせて、いま必要な情報を選べます。
記事を絞り込む
「誰向けか」と「何についてか」を、それぞれ選べます。数字は表示中の読者条件での件数です。
すべての読者 ／ すべてのジャンル
81 件の記事
1–12 件を表示
制作会社様向け
動きを減らす設定に対応するCSS｜表示が消える例と修正を検証
動きを減らす設定に対応するときは、演出を止めても文章とリンクが残るか確認します。透明な初期状態が残る失敗例とCSSの修正、PC・スマホ幅とキーボードでの試験結果を示します。
小規模事業者様向け
問い合わせ完了画面と自動返信メール｜受付後の案内をそろえる
問い合わせの完了画面と自動返信には、受付後の流れ、返信の目安、連絡がない場合の方法をそろえます。架空の修理相談を例に、予約確定との違い、記入例、公開前に照合する項目を説明します。
制作会社様向け
dialog要素のモーダル実装｜閉じ方とフォーカス復帰を検証
モーダルは、開くだけでなく閉じ方と元の作業位置へ戻る操作まで設計します。dialog要素のコード例と架空画面のPC・スマホ幅での試験から、確認できた動作と追加検収が必要な範囲を示します。
小規模事業者様向け
WordPressのお知らせ予約投稿｜日時と公開後に確かめること
お知らせの予約投稿は、日時の設定と公開後の確認をセットにします。架空の教室の記入例で、開催日・受付開始・公開日時を分け、担当と予定変更時の対応を整理します。
制作会社様向け
制作会社で使うAIツール｜提案・制作・素材・広告の活用例
AIツールを自社のどの仕事で使えるか、架空の雑貨店の周年企画で紹介します。ChatGPT・Claude、Codex・Claude Code、Firefly、Google広告を、入力する材料、下書き、人の仕上げに分けて考えます。
制作会社様向け
リンクとボタンの使い分け｜HTMLの役割とキーボード操作を検証
移動するリンクと、その場で実行するボタンは、見た目ではなく目的で選びます。クリックだけのdivと標準要素を比べ、Tab・Enter・Spaceの操作、開閉状態、PCとスマホ幅をローカルで検証しました。
制作会社様向け
確認用サイトの共有前に決める、閲覧範囲・試験条件・公開承認
確認用サイトは、見る人と今回の確認範囲、試してよい操作を揃えて共有します。架空の依頼メモを使い、検索除外と閲覧制限の違い、フォーム試験、本番公開への引き継ぎを説明します。
小規模事業者様向け
ホームページのPDF差し替えは、掲載リンクと古い版まで確認する
PDFを更新するときは、新版の追加だけでなく、掲載リンクと古い版の扱いも確認します。架空の教室の改定メモを使い、適用日・担当・公開画面での確認をつなぐ手順を説明します。
制作会社様向け
比較表の横スクロール実装｜スマホの見切れとキーボード操作を検証
比較表がスマホで見切れる例を再現し、表だけを横スクロールできるHTML/CSSへ修正します。見出しの対応、フォーカス表示、矢印キーとTabでの操作を確認する手順を示します。
制作会社様向け
固定ヘッダーとページ内リンクの実装｜CSSの余白とキーボード操作を検証
固定ヘッダーで目次の移動先が隠れる問題を、PCとスマホ相当幅で再現しました。CSSの固定値と実寸対応を比べ、見出しの位置・キーボードの操作先・直接リンクを確認する実装例を示します。
制作会社様向け
販促施策をWeb制作へつなぐ進め方｜目的・掲載範囲・依頼・検収・更新の順に決める
販促施策のWeb制作は、目的、掲載範囲と見送り、依頼内容、検収、公開後更新をつなげて進めます。架空の新製品紹介案件を通じ、各工程で決めたことを次の担当へ渡す方法を解説します。
記事を読んでも整理しきれないことがあればご相談ください。
いま決まっていることと、迷っていることからお聞かせください。