はてなブックマーク

WordPressで最低限おこなっておきたいセキュリティ対策について紹介します。難しい設定はなくWordPress初心者向きの内容です。ただ、かならず対応しておきたいものばかりなので、WordPress実装の際にチェックすることをおすすめします。 01, WordPress本体やWordPressプラグイン、WordPressテーマの更新 WordPressの本体やプラグイン、テーマを最新状態に保つのは基本です。どこでも言われていることですが、できていないサイトを散見します。定期的にアップデートし、最新状態に保つことが必要です。 WprdPressでは、2013年10月にリリースされたバージョン3.7からWordPressの自動アップデートが実装されました。これにより最新状態を常に維持することが可能です。 しかし、安易に自動アップデートを設定することはおすすめしません。WordPressプ

WordPressか静的サイトかは、サイトの性能ではなく、誰がそのサイトを運用するかで決めています。AIエージェントでのWeb制作が本格化してから議論をよく見るようになりましたが、この判断軸はAIが出てくる前から16年変わっていません。 サイトを作るときに、WordPressにするか、CMSを入れずに静的サイトにするか。この選択は技術の優劣で決まるものではないと考えています。同じ構成のサイトでも、更新する人が変われば適した作りは別になるからです。 この記事では、私が実際にどうやって決めているかを、自分のサイトの場合とクライアントの場合に分けてご紹介します。 私が所有するサイトを静的サイトに変えた理由 私が所有しているサイトは、以前はすべてWordPressで作っていました。今はほとんどを静的サイトに変えています。 理由はひとつで、ページの追加も編集もAIエージェントがやってくれるからです。

コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。 fit-contentで背景色 fit-contentでコンテンツ幅に背景色 中央位置に配置した見出しに背景色をつけるスタイル。 <h2> や <h3> などの見出しタグを親要素の中央の位置に配置しつつ、背景色をつけるためには横幅を指定しなければいけません。 fit-contentを使用しないと見出しごとに横幅を指定する必要がある また、見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまいます。 h2やh3などの見出しに display: inline-block を使用すればコンテンツ幅に背景色をつけることができます。 しかし、中央配置ができないため、見出しタグ

Chrome拡張機能は、ウェブ閲覧やウェブ制作のさいに非常に便利な機能です。新しい拡張機能を見つけるたびに追加し、実務で試しています。ただ、気がつくと使わない機能が溜まりがちなので、数ヶ月ごとに見直ししています。 先日もインストール済みのChrome拡張機能を見直し、頻繁に利用しているものや、いざという時に使用しているものを残して整理しました。 Webサイト制作者の視点から便利なChrome拡張機能を厳選して20個紹介します。 ChatGPT関連 Glarity-Summary for Google/YouTube (ChatGPT) Google検索ページやYouTube動画ページで利用ができるChrome拡張機能『Glarity-Summary for Google/YouTube (ChatGPT)』。 検索結果ページでは、検索ワードについて解説してくれます。気になるキーワードについ

フリーランスWebデザイナーである私が施しているSEO対策について紹介します。 前提として ここで案内するSEO対策は、Webサイト制作初心者やSEO対策はなんとなく理解しているがうまくいかない方向けの内容です。SEOを専門としている方には向きません。 また、自社のサイトにSEO対策を施して成果を出したい方は、SEO対策をサービスの主軸として提供していて信頼できるSEO専門会社に依頼するのがベストであることをお伝えしておきます。これは、Webサイト制作会社であってもSEOもメイン事業の一つとして提供している会社も含みます。 SEOをメインのサービスとして提供していない、結果を保証していないWebサイト制作会社や制作者と、結果を保証しているSEO専門会社の大きな違いは、ノウハウと経験、結果の量です。メソッドの質は専門家の方が圧倒的に高い。餅屋は餅屋です。 ただし、SEOを主軸としていないWe

Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン <div class="button01"> <a href="">ボタンデザイン</a> </div> .button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; background

Webデザイン制作中に使用している、コーディング後や納品時に確認すべき62項目のチェックリストを紹介します。 このチェックリストは、Webサイトの品質基準を定め、品質を維持することを目的としています。 感覚的に確認すると見落としが発生する可能性が高いため、私は常にチェックリストを参照しながら確認しています。 また、このチェックリストを使用して表示確認を行い、それをクライアントに提出することで、安心感を与えることもできます。 クオリティの高いWeb制作体験を提供するために、参考にしていただければ幸いです。 使い方 このチェックリストは、コーディング後や納品時に確認する内容です。私の場合、コーディング後に修正や若干の仕様変更があった場合に対応できるよう、コーディング後と納品時の2回、チェックリストを使用して確認をおこないます。 スプレッドシート1つのファイルに、コーディング後と納品時に確認する

私が実際に活用しているWebデザインギャラリーサイトを厳選して26サイトご紹介します。デザイン制作の参考にも、クライアントとの打ち合わせにも使えるものを集めました。 ザイナー視点はもちろん、クライアントが自社のデザインイメージを固める際にも役立ちます。デザインの方向性を大まかに決められることで、より良いデザインが生まれるきっかけになるので便利です。 Webデザインギャラリーサイトの活用について デザインギャラリーでの閲覧は、単なる模倣のためではなく、アイデアや発想を刺激するために活用しています。私の場合、各デザインの「意図」を独自の視点で解釈し、それを案件のコンセプトに合わせてデザインします。 フリーランスデザイナーとして一人で制作を行っていると、どうしても視点が限られてしまいます。本記事で紹介するサイトを通じて新しいアイデアに触れ、制作の幅を広げています。ただ眺めるだけでなく、自分なりの

現場で使えるFlexboxレイアウト12選 Update2025.03.24 Publication2021.06.24 コーディング 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウト flexboxを使った横並び1行レイアウト カードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実に身につけておきたいTipsです。 HTML <div class="wrap">

お問い合わせフォームの入力を完遂し、送信してもらうために改善しておきたい16のポイントを紹介します。サイトリニューアルの要望でよくある「お問い合わせ数を増やしたい」に応えるために最低限おさえておきたい情報をまとめました。ぜひ参考にしてみてください。 問い合わせ時に必要な項目のみに限定する 「この項目は本当に必要か？」いつも疑うようにしています。お問い合わせ時に必要な情報なのか？その後の打ち合わせで電話番号や住所など聞くことはできないのか？不要な項目を削除し、本当に必要な情報のみに限定することでユーザーも入力しやすくなります。 郵送で資料を送る資料請求フォームは住所は必要です。しかし、質問などメールだけでのやりとりのためのお問い合わせフォームであれば住所の情報は不要なので削除します。クライアントと相談しながら常に減らす意識は持つようにし、ユーザーの手間を省くようにします。 入力欄の数は最低限

見積もりの前に制作側から費用感を出すことにしてみた 発注・ディレクション Webサイト制作やロゴ制作の相談でかならず確認しているのが予算。どのくらいの金額を想定しているのかを毎回聞いている。 2026/10/02 AIが書いたWebサイトやブログの文章でよく直す5つのポイント 発注・ディレクション AIが書いたWebサイトやブログの文章で、私がよく直す5つのポイントを修正例とともに紹介します。AIへそのまま渡せる日本語文章作成ルールも用意しています。 2026/09/25 iPhone DuoでWebサイト制作はどう変わる？折りたたみスマホのUI設計とCSS対応 CSS・実装 iPhone Duoの3つの画面幅（466px・626px・890px）と、折りたたみスマホの画面におけるWebサイトのUI設計の考え方を解説します。既存サイトの検証ポイントから、折りたたみ端末ならではの新しい体験の