# コーディング代行・フロントエンド開発のファストコーディング > AIO対策やSEOに強いHTMLコーディング代行をご提供。構造化タグ設置や、セマンティックコーディング、JavaScript実装やWordpressテーマ化を標準実施。AIに認知されやすく、検索エンジンが上位表示しやすいサイト制作が可能です。 --- ## お客様の声 - [株式会社ファーストリリー様](https://fastcoding.jp/voice/firstlily/): 明らかなデザインのズレすらもデザイン通り... - [ギバーテイクオール株式会社様](https://fastcoding.jp/voice/givertakeall/): SEOスコアが初期状態でも比較的高いため... - [株式会社ファストコーディング](https://fastcoding.jp/voice/sample/): このコンテンツはパスワードで保護されてい... - [ARIO株式会社様](https://fastcoding.jp/voice/ario-inc/): これまで何度か一緒にお仕事させて頂きまし... - [株式会社LLL様](https://fastcoding.jp/voice/lll-inc/): デザインイメージ通りのものを制作いただき... - [FANFARE Co., Ltd.様](https://fastcoding.jp/voice/fanfare/): 読み込み表示速度や編集のしやすさなど満足... - [株式会社IMT様](https://fastcoding.jp/voice/imt-mirai/): ご相談から納品までのスピードが早く満足の... - [株式会社HLM様](https://fastcoding.jp/voice/hlm-inc/): ソースコードも非常に綺麗で、デザインデー... - [株式会社NALU様](https://fastcoding.jp/voice/nalu/): デザインの再現性、読み込み速度、挙動、組... - [株式会社アステックペイント様](https://fastcoding.jp/voice/astecpaints/): 弊社の要望通りの仕様で作成いただき、大変... - [株式会社キルタイムコミュニケーション様](https://fastcoding.jp/voice/ktcom/): 仕様書に細かく書いていなかった部分も、常... - [株式会社アライドコーポレーション様](https://fastcoding.jp/voice/allied-thai/): ECの立ち上げに携わるのは初めてでしたが... - [株式会社マトリックス・オーガナイゼーション様](https://fastcoding.jp/voice/matrix/): ともするとクライアント都合で進行がルーズ... - [株式会社イルグルム様](https://fastcoding.jp/voice/yrglm/): 気になったことや修正したい点など、スプレ... - [株式会社まる様](https://fastcoding.jp/voice/maru/): 双方の認識にズレが生じないように、事前の... - [株式会社大都様](https://fastcoding.jp/voice/daito/): 料金体系がシンプルで安く、納品が早いこと... - [株式会社MAGES.様](https://fastcoding.jp/voice/mages/): WordPress(CMS)に精通してい... --- ## お知らせ - [プライバシーマークを取得いたしました](https://fastcoding.jp/news/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%90%e3%82%b7%e3%83%bc%e3%83%9e%e3%83%bc%e3%82%af%e3%82%92%e5%8f%96%e5%be%97%e3%81%84%e3%81%9f%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/): いつもご利用いただきありがとうございます... - [生成AI活用に関するポリシーの公開について](https://fastcoding.jp/news/%e7%94%9f%e6%88%90ai%e6%b4%bb%e7%94%a8%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e3%83%9d%e3%83%aa%e3%82%b7%e3%83%bc%e3%81%ae%e5%85%ac%e9%96%8b%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/): いつもご利用いただきありがとうございます... - [ISMS認証を取得いたしました](https://fastcoding.jp/news/isms/): いつもご利用いただきありがとうございます... - [【メディア掲載】弊社サービスがマーケティングメディア『キャククル』で紹介されました。](https://fastcoding.jp/news/%e3%83%9e%e3%83%bc%e3%82%b1%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%80%8e%e3%82%ad%e3%83%a3%e3%82%af%e3%82%af%e3%83%ab%e3%80%8f%e3%81%a7%e7%b4%b9%e4%bb%8b/): Zenken株式会社が運営するマーケティ... - [「SEO対策が得意なホームページ制作会社」に当社が選出されました。](https://fastcoding.jp/news/seo%e5%af%be%e7%ad%96%e3%81%8c%e5%be%97%e6%84%8f%e3%81%aa%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e5%88%b6%e4%bd%9c%e4%bc%9a%e7%a4%be/): 日本最大級の優良なホームページ制作会社を... - [累計コーディング数 30,000枚突破](https://fastcoding.jp/news/%e7%b4%af%e8%a8%88%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e6%95%b0-30000%e6%9e%9a%e7%aa%81%e7%a0%b4/): 弊社で制作しましたHTMLコーディングの... - [お取引先企業様 2,000社突破](https://fastcoding.jp/news/%e3%81%8a%e5%8f%96%e5%bc%95%e5%85%88%e4%bc%81%e6%a5%ad%e6%a7%98-2000%e7%a4%be%e7%aa%81%e7%a0%b4/): 弊社でご支援させていただいた企業様が、2... - [【通常通り営業中】新型コロナウイルスへの対応について](https://fastcoding.jp/news/%e3%80%90%e9%80%9a%e5%b8%b8%e9%80%9a%e3%82%8a%e5%96%b6%e6%a5%ad%e4%b8%ad%e3%80%91%e6%96%b0%e5%9e%8b%e3%82%b3%e3%83%ad%e3%83%8a%e3%82%a6%e3%82%a4%e3%83%ab%e3%82%b9%e3%81%b8%e3%81%ae%e5%af%be%e5%bf%9c/): 平素はファストコーディングをご利用いただ... - [年末年始も営業中！](https://fastcoding.jp/news/2019%e5%b9%b4%e5%b9%b4%e6%9c%ab%e5%b9%b4%e5%a7%8b%e5%96%b6%e6%a5%ad%e6%97%a5/): 日頃はファストコーディングをご利用いただ... - [ページスピード対策をオススメします](https://fastcoding.jp/news/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96%e3%82%92%e3%82%aa%e3%82%b9%e3%82%b9%e3%83%a1%e3%81%97%e3%81%be%e3%81%99/): 皆様のＷＥＢサイトでは、ページスピード対... - [【東京オフィス】回線工事のため電話が不通になります](https://fastcoding.jp/news/201910%e3%80%90%e6%9d%b1%e4%ba%ac%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%91%e5%9b%9e%e7%b7%9a%e5%b7%a5%e4%ba%8b%e3%81%ae%e3%81%9f%e3%82%81%e9%9b%bb%e8%a9%b1%e3%81%8c%e4%b8%8d%e9%80%9a/): 現在、東京オフィスの回線工事のため、電話... - [お盆休みも休まず制作中!](https://fastcoding.jp/news/2019summerholiday/): 弊社は夏季休暇無く営業しております。 皆... - [【東京オフィス】工事による電話問い合わせ一時休止のお知らせ](https://fastcoding.jp/news/201901%e5%9b%9e%e7%b7%9a%e5%b7%a5%e4%ba%8b%e3%81%ae%e3%81%9f%e3%82%81%e9%9b%bb%e8%a9%b1%e3%81%8c%e4%b8%8d%e9%80%9a/): 本日（2019年1月31日）、東京オフィ... - [【日本オフィス】2018年 年末年始営業日のお知らせ](https://fastcoding.jp/news/%e3%80%90%e6%97%a5%e6%9c%ac%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%912018%e5%b9%b4%e5%b9%b4%e6%9c%ab%e5%b9%b4%e5%a7%8b%e5%96%b6%e6%a5%ad%e6%97%a5%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/): 日頃はファストコーディングをご利用いただ... - [台風の影響により弊社へのお電話が通じづらくなっております](https://fastcoding.jp/news/telbusy/): お客様各位 平素はファストコーディングを... - [2018年のお盆休みも休まず制作中！](https://fastcoding.jp/news/2018%e5%a4%8f%e5%ad%a3%e4%bc%91%e6%9a%87/): いつもファストコーディングをご利用いただ... - [フランスオフィス開設のお知らせ](https://fastcoding.jp/news/%e3%83%95%e3%83%a9%e3%83%b3%e3%82%b9%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e9%96%8b%e8%a8%ad%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/): 平素はファストコーディングをご利用いただ... - [大阪北部にて発生した震災により、電話がつながりにくくなっております](https://fastcoding.jp/news/%e5%a4%a7%e9%98%aa%e5%8c%97%e9%83%a8%e3%81%ab%e3%81%a6%e7%99%ba%e7%94%9f%e3%81%97%e3%81%9f%e9%9c%87%e7%81%bd%e3%81%ab%e3%82%88%e3%82%8b%e5%bd%b1%e9%9f%bf/): 平素はファストコーディングをご利用いただ... - [【ベトナムオフィス】移転のお知らせ](https://fastcoding.jp/news/%e3%80%90%e3%83%99%e3%83%88%e3%83%8a%e3%83%a0%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%91%e7%a7%bb%e8%bb%a2%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/): 日頃はファストコーディングをご利用いただ... - [デザイン制作からまるっとご依頼ください！](https://fastcoding.jp/news/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e5%88%b6%e4%bd%9c%e3%81%8b%e3%82%89%e3%81%be%e3%82%8b%e3%81%a3%e3%81%a8%e3%81%94%e4%be%9d%e9%a0%bc%e3%81%8f%e3%81%a0%e3%81%95%e3%81%84%ef%bc%81/): 弊社はこの度、かねてより大変ご要望の多か... - [【東京オフィス】移転のお知らせ](https://fastcoding.jp/news/%e3%80%90%e6%97%a5%e6%9c%ac%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%91%e4%ba%8b%e5%8b%99%e6%89%80%e7%a7%bb%e8%bb%a2%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/): 日頃はファストコーディングをご利用いただ... - [年末年始も休みなく制作しています！](https://fastcoding.jp/news/%e3%80%90%e6%97%a5%e6%9c%ac%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%91%e5%b9%b4%e6%9c%ab%e5%b9%b4%e5%a7%8b%e5%96%b6%e6%a5%ad%e6%97%a5%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/): 日頃はファストコーディングをご利用いただ... - [価格を改定し、さらにご利用いただきやすくなりました。](https://fastcoding.jp/news/%e4%be%a1%e6%a0%bc%e6%94%b9%e5%ae%9a/): 弊社は制作工程をマニュアル化することで、... - [2017年のお盆休みも休まず制作中！](https://fastcoding.jp/news/2017%e5%a4%8f%e5%ad%a3%e4%bc%91%e6%9a%87/): いつもお世話になっております。ファストコ... - [新年のご挨拶](https://fastcoding.jp/news/%e6%96%b0%e5%b9%b4%e3%81%ae%e3%81%94%e6%8c%a8%e6%8b%b62017/): 御取引先様 各位 新年あけましておめでと... - [【日本オフィス】年末年始営業日のお知らせ](https://fastcoding.jp/news/%e5%b9%b4%e6%9c%ab%e5%b9%b4%e5%a7%8b%e5%96%b6%e6%a5%ad%e6%97%a5%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/): 日頃はファストコーディングをご利用いただ... - [2016年のお盆休みも休まず制作中！](https://fastcoding.jp/news/20160802-2/): WEBサイトをご覧頂きありがとうございま... - [Wordpress制作サービス FASTPRESSを開始しました](https://fastcoding.jp/news/20160114-2/): 平素はお世話になっております。 ファスト... - [年末年始営業日のお知らせ](https://fastcoding.jp/news/20151224-2/): 日頃はファストコーディングをご利用いただ... - [東京本社移転のお知らせ](https://fastcoding.jp/news/20151212-2/): 2015年12月12日（土）より、下記住... - [累計コーディング数 5,000枚突破](https://fastcoding.jp/news/20151028-2/): ファストコーディングでの累計コーディング... - [メールサーバー復旧のお知らせ](https://fastcoding.jp/news/20151008-2/): 10月5日（月）〜10月7日（水）にかけ... - [お盆休みも休まず稼働中！](https://fastcoding.jp/news/%e3%81%8a%e7%9b%86%e4%bc%91%e3%81%bf%e3%82%82%e4%bc%91%e3%81%be%e3%81%9a%e7%a8%bc%e5%83%8d%e4%b8%ad%ef%bc%81/): WEBサイトをご覧頂きありがとうございま... - [株式会社ファストコーディング設立のご案内](https://fastcoding.jp/news/20150421-2/): 2014年4月よりサービス開始させて頂き... - [累計コーディング数 1,500枚突破](https://fastcoding.jp/news/20150203-2/): ファストコーディングでの累計コーディング... --- ## 固定ページ - [無料ダウンロード 「kintoneアプリ開発」](https://fastcoding.jp/document/kintone/): 「kintone開発のご案内」の資料ダウ... - [kintoneアプリ開発](https://fastcoding.jp/kintone/): “成果報酬型”ファストのkintoneア... - [生成AI利活用に関するポリシー](https://fastcoding.jp/aipolicy/): HOME 生成AI活用に関するポリシー ... - [給サポ ご提案用機能案内](https://fastcoding.jp/pdf/kyufusupport_proposal/): このコンテンツはパスワードで保護されてい... - [HTMLコーディング代行の自動見積りシミュレータ](https://fastcoding.jp/calculator/): HOME オンライン自動見積り オンライ... - [コーディング料金（人月単価）](https://fastcoding.jp/price/md/): HOME コーディング代行の価格と納期（... - [コーディング料金](https://fastcoding.jp/price/): HOME コーディング代行の価格と納期 ... - [事業継続計画(BCP)](https://fastcoding.jp/bcp/): HOME 事業継続計画(BCP) BUS... - [無料ダウンロード 「フロントエンド開発」](https://fastcoding.jp/document/javascript/): 「フロントエンド開発のご案内」の資料ダウ... - [無料ダウンロード 「コーディング代行の強み」](https://fastcoding.jp/document/benefit/): 「コーディング代行の強み」の資料ダウンロ... - [FASTSUBMIT ご提案用機能案内](https://fastcoding.jp/pdf/fastsubmit_proposal/): このコンテンツはパスワードで保護されてい... - [pdf](https://fastcoding.jp/pdf/) - [document](https://fastcoding.jp/document/) - [コアウェブバイタル対策の概要](https://fastcoding.jp/webvital/overview/): ご提供するコアウェブバイタル対策の概要 ... - [指標の見かた](https://fastcoding.jp/webvital/overview/kpi/): 指標の見かた 01 フィールドデータ F... - [無料ダウンロード 「初めてのコーディング代行」](https://fastcoding.jp/document/beginner/): 「初めてのコーディング代行」の資料ダウン... - [情報セキュリティ方針](https://fastcoding.jp/securitypolicy/): HOME 情報セキュリティ方針 INFO... - [AIにも、SEOにも強いHTMLコーディングのポイント](https://fastcoding.jp/features/seo/): HOME コーディング代行サービスの特長... - [TOP](https://fastcoding.jp/): 制作会社/システム開発会社/広告代理店の... - [wordpress](https://fastcoding.jp/wordpress/): Webデザイン会社、制作会社様向けWor... - [HTMLコーディング代行、JavaScript開発のお問合せ](https://fastcoding.jp/contact/): HOME お問い合わせ お問い合わせ／お... - [PC/SPコーディング](https://fastcoding.jp/services/htmlcoding/): HOME FASTCODINGのサービス... - [リキッドコーディング](https://fastcoding.jp/services/liquidcoding/): HOME FASTCODINGのサービス... - [多言語サイト制作](https://fastcoding.jp/services/multilanguage/): HOME FASTCODINGのサービス... - [メディアサイト制作](https://fastcoding.jp/services/mediasite/): HOME FASTCODINGのサービス... - [よくある質問](https://fastcoding.jp/faq/): HOME コーディング代行のよくある質問... - [ご依頼方法と納期](https://fastcoding.jp/flow/): HOME コーディング代行のご依頼方法と... - [FASTCODINGの実績](https://fastcoding.jp/results/): HOME コーディング代行の実績 WOR... - [検索結果](https://fastcoding.jp/search/): の検索結果 TOPへ戻る - [サービス一覧](https://fastcoding.jp/services/): HOME コーディング代行のサービス一覧... - [レスポンシブコーディング](https://fastcoding.jp/services/responsivecoding/): HOME FASTCODINGのサービス... - [ウェブバイタル対策](https://fastcoding.jp/webvital/): HOME ウェブバイタル対策 Googl... - [リフレッシュコーディング](https://fastcoding.jp/refreshcoding/): デザインはそのまま、最新のHTMLコーデ... - [ecommerce](https://fastcoding.jp/ecommerce/): 自社ECサイト 一般的なオンラインショッ... - [Javascript](https://fastcoding.jp/javascript/): リピート率 96 % 取引企業様 290... - [Services](https://fastcoding.jp/javascript/services/): HOME jQueryを使ったフロントエ... - [FASTSCRIPT_UIUX](https://fastcoding.jp/javascript/services/uiux/): HOME UI/UXのフロントエンド開発... - [FASTSCRIPT_UIUX_FLOW](https://fastcoding.jp/javascript/services/uiux/flow/): HOME UI/UX開発 フロントエンド... - [FASTSCRIPT_UIUX_専門チーム体制](https://fastcoding.jp/javascript/services/uiux/team/): HOME UI/UX開発 フロントエンド... - [Flash移行開発 | フロントエンド開発会社のファストコーディング](https://fastcoding.jp/javascript/services/flash/): HOME Flash移行フロントエンド開... - [IoTデバイス向けアプリ開発 | フロントエンド開発会社のファストコーディング](https://fastcoding.jp/javascript/services/iotdevices/): HOME IoTプラットフォームアプリ開... - [Vue.js・React 開発 | フロントエンド開発会社のファストコーディング](https://fastcoding.jp/javascript/services/spa/): HOME Vue. jsやReactによ... - [コーディング アニメーション開発 | フロントエンド開発会社のファストコーディング](https://fastcoding.jp/javascript/services/animation/): HOME JavaScriptアニメーシ... - [Enterprise](https://fastcoding.jp/enterprise/): MENU TITLE 特長 お客様の声 ... - [WEBアクセシビリティ対応](https://fastcoding.jp/webaccessibility/): Webアクセシビリティ Webアクセシビ... - [JavaScriptアニメーション制作](https://fastcoding.jp/animation/): HOME JavaScriptアニメーシ... - [プライバシーポリシー](https://fastcoding.jp/privacypolicy/): HOME プライバシーポリシー PRIV... - [品質を高める取り組み](https://fastcoding.jp/features/fastmethod/): HOME OUR FEATURES 品質... - [コーディング代行のテスト・検証](https://fastcoding.jp/features/fastmethod/testing/): HOME OUR FEATURES 品質... - [ご利用規約](https://fastcoding.jp/servicepolicy/): HOME ご利用規約 SERVICE P... - [サイトマップ](https://fastcoding.jp/sitemap/): HOME サイトマップ SITEMAP ... - [会社概要](https://fastcoding.jp/company/): HOME COMPANY COMPANY... - [SEOに強いHTMLコーディング](https://fastcoding.jp/features/): HOME コーディング代行サービスの特長... - [チーム構成と専門ディレクタ](https://fastcoding.jp/features/fastmethod/coding-director/): HOME OUR FEATURES 品質... - [コーディング設計の技法](https://fastcoding.jp/features/fastmethod/codingrules/): HOME OUR FEATURES 品質... --- ## 投稿 - [最近のフロントエンドは"更新性格差"が激しい ─ ディレクターが知らない運用コストの落とし穴](https://fastcoding.jp/blog/all/direction/frontend-maintenance-cost/): Next. js等の最新技術で構築したサ... - [＜画像読み込み負荷を徹底管理＞Next/Nuxt Imageの最適化](https://fastcoding.jp/blog/all/frontend/next-nuxt-image-optimization/): Next. jsとNuxtの画像コンポー... - [「読みおわった証拠を見せる」─ 進捗を"点"で表して読了率を上げる](https://fastcoding.jp/blog/all/ui-ux/reading-progress-dots/): ブログ記事の読了率を18%向上させたセク... - [価格比較で"選ばせる"─ 中央の列をハイライト](https://fastcoding.jp/blog/all/ui-ux/pricing-table-center-highlight/): スマホの価格表で離脱率67%の問題を解決... - [ブランドに"動き"を与える！CSSアニメーションの効果的提案](https://fastcoding.jp/blog/all/html-css/css-animations-for-branding/): CSSアニメーションでブランドの世界観を... - [React startTransition/useDeferredValueで"固まらないUI"を実現する](https://fastcoding.jp/blog/all/frontend/react%e3%81%a7%e5%9b%ba%e3%81%be%e3%82%89%e3%81%aa%e3%81%84ui/): Reactのライブ検索で入力が固まる原因... - [AIブラウザ時代に備える―Webサイトが「AI操作」に対応するために必要なコーディングとは](https://fastcoding.jp/blog/all/info/ai-browser-compatible-coding/): AIブラウザ時代に備えるための“AIが操... - [“重複応募”を洗い出す！kintoneに「重複チェック」機能を実装（プラグイン付）](https://fastcoding.jp/blog/all/kintone/kintone%e3%81%ab%e9%87%8d%e8%a4%87%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e6%a9%9f%e8%83%bd%e3%82%92%e5%ae%9f%e8%a3%85/): 登録時のユニーク制御だけでは防げない“重... - [動画より軽い！CSSだけで作る没入型演出](https://fastcoding.jp/blog/all/webdesign/css%e3%81%a0%e3%81%91%e3%81%a7%e4%bd%9c%e3%82%8b%e6%b2%a1%e5%85%a5%e5%9e%8b%e6%bc%94%e5%87%ba/): 動画を使わず、CSSだけで没入感ある表現... - [“追加コンポーネントは後で読み込み”：イベント駆動の遅延ハイドレーション](https://fastcoding.jp/blog/all/frontend/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e9%a7%86%e5%8b%95%e3%81%ae%e9%81%85%e5%bb%b6%e3%83%8f%e3%82%a4%e3%83%89%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3/): ページの初期表示を軽くする「遅延ハイドレ... - [「戻ってきた人にだけ揺らす」─ リターンユーザー用のCTAアニメ](https://fastcoding.jp/blog/all/ui-ux/%e3%80%8c%e6%88%bb%e3%81%a3%e3%81%a6%e3%81%8d%e3%81%9f%e4%ba%ba%e3%81%ab%e3%81%a0%e3%81%91%e6%8f%ba%e3%82%89%e3%81%99%e3%80%8d%e2%94%80-%e3%83%aa%e3%82%bf%e3%83%bc%e3%83%b3%e3%83%a6%e3%83%bc%e3%82%b6/): リターンユーザーだけに表示する「軽いCT... - [製造業で設備管理を効率化！kintone×QRコードで“現場点検をスマート化”](https://fastcoding.jp/blog/all/kintone/%e8%a3%bd%e9%80%a0%e6%a5%ad%e3%81%a7%e8%a8%ad%e5%82%99%e7%ae%a1%e7%90%86%e3%82%92%e5%8a%b9%e7%8e%87%e5%8c%96kintone%e3%81%a8qr%e3%82%b3%e3%83%bc%e3%83%89%e3%81%a7%e7%8f%be%e5%a0%b4%e7%82%b9%e6%a4%9c/): 現場点検を“迷わず・速く”するkinto... - [滞在時間が10秒伸びる！時間差バナーのかんたん実装](https://fastcoding.jp/blog/all/ui-ux/%e6%bb%9e%e5%9c%a8%e6%99%82%e9%96%93%e3%81%8c10%e7%a7%92%e4%bc%b8%e3%81%b3%e3%82%8b%e6%99%82%e9%96%93%e5%b7%ae%e3%83%90%e3%83%8a%e3%83%bc%e3%81%ae%e7%b0%a1%e5%8d%98%e5%ae%9f%e8%a3%85/): 出すより“出さない”設計が鍵。時間差ポッ... - [“過剰な状態管理”をやめる：URL／サーバ主導の最小ステート](https://fastcoding.jp/blog/all/system/%e9%81%8e%e5%89%b0%e3%81%aa%e7%8a%b6%e6%85%8b%e7%ae%a1%e7%90%86%e3%82%92%e3%82%84%e3%82%81%e3%82%8burl%e3%82%b5%e3%83%bc%e3%83%90%e4%b8%bb%e5%b0%8e%e3%81%ae%e6%9c%80%e5%b0%8f%e3%82%b9%e3%83%86/): ReactやVueでありがちな「過剰な状... - [CTAは読み終わりで光る ─ 記事の最後に光るアニメーション](https://fastcoding.jp/blog/all/webdesign/cta%e3%81%af%e8%aa%ad%e3%81%bf%e7%b5%82%e3%82%8f%e3%82%8a%e3%81%a7%e5%85%89%e3%82%8b-%e2%94%80-%e8%a8%98%e4%ba%8b%e3%81%ae%e6%9c%80%e5%be%8c%e3%81%ab%e5%85%89%e3%82%8b%e3%82%a2%e3%83%8b%e3%83%a1/): 記事の読了タイミングでCTAボタンを“自... - [“誰でも使えるWeb”を提案 ─ HTML/CSSでできるアクセシビリティ改善](https://fastcoding.jp/blog/all/ui-ux/%e8%aa%b0%e3%81%a7%e3%82%82%e4%bd%bf%e3%81%88%e3%82%8bweb%e3%82%92%e6%8f%90%e6%a1%88-%e2%94%80-html-css%e3%81%a7%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b7/): HTMLとCSSで実現する“実践的アクセ... - [動きすぎないのが心地いい！さりげないJSアニメーションの作り方](https://fastcoding.jp/blog/all/webdesign/%e5%8b%95%e3%81%8d%e3%81%99%e3%81%8e%e3%81%aa%e3%81%84%e3%81%ae%e3%81%8c%e5%bf%83%e5%9c%b0%e3%81%84%e3%81%84%ef%bc%81%e3%81%95%e3%82%8a%e3%81%92%e3%81%aa%e3%81%84js%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc/): Web制作で役立つ「さりげないアニメーシ... - [40代ユーザーに響く！配色とタイポグラフィのCSS最適化](https://fastcoding.jp/blog/all/webdesign/40%e4%bb%a3%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ab%e9%9f%bf%e3%81%8f%ef%bc%81%e9%85%8d%e8%89%b2%e3%81%a8%e3%82%bf%e3%82%a4%e3%83%9d%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%81%aecss%e6%9c%80/): 40代以上のユーザーに「読みやすい」体験... - [60fpsで快適表示！「仮想スクロール」を使った実装法（ReactとVue共通編）](https://fastcoding.jp/blog/all/frontend/60fps%e3%81%a7%e5%bf%ab%e9%81%a9%e8%a1%a8%e7%a4%ba%ef%bc%81%e3%80%8c%e4%bb%ae%e6%83%b3%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%80%8d%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e5%ae%9f%e8%a3%85/): ReactやVueで数千件のデータを60... - [ホバーすると広がる！簡単リップルエフェクト](https://fastcoding.jp/blog/all/ui-ux/%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%99%e3%82%8b%e3%81%a8%e5%ba%83%e3%81%8c%e3%82%8b%ef%bc%81%e7%b0%a1%e5%8d%98%e3%83%aa%e3%83%83%e3%83%97%e3%83%ab%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88/): Webディレクター必見！ボタンに「リップ... - [提案力アップのカギ！Bento Boxレイアウトに挑戦しよう](https://fastcoding.jp/blog/all/webdesign/%e6%8f%90%e6%a1%88%e5%8a%9b%e3%82%a2%e3%83%83%e3%83%97%e3%81%ae%e3%82%ab%e3%82%ae%ef%bc%81bento-box%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ab%e6%8c%91%e6%88%a6%e3%81%97%e3%82%88%e3%81%86/): Webディレクター必見！情報が多いページ... - [Nuxt3 “段階ハイドレーション”で重いLPを軽く](https://fastcoding.jp/blog/all/frontend/nuxt3-%e6%ae%b5%e9%9a%8e%e3%83%8f%e3%82%a4%e3%83%89%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7%e9%87%8d%e3%81%84lp%e3%82%92%e8%bb%bd%e3%81%8f/): Nuxt3を使ってLPの表示速度を改善！... - [簡単にできます！スクロールに合わせたアニメーション](https://fastcoding.jp/blog/all/webdesign/%e7%b0%a1%e5%8d%98%e3%81%ab%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3/): スクロール連動アニメーション、入れすぎて... - [サイトの軽量化を図る！─ サステナブルWebコーディングの実践ノウハウ](https://fastcoding.jp/blog/all/webdesign/%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e8%bb%bd%e9%87%8f%e5%8c%96%e3%82%92%e5%9b%b3%e3%82%8b%e3%82%b5%e3%82%b9%e3%83%86%e3%83%8a%e3%83%96%e3%83%abweb/): あなたのサイト、軽くできていますか？ こ... - [離脱率を下げる！最新CSSで実現する“読みやすいWeb体験”](https://fastcoding.jp/blog/all/ui-ux/%e9%9b%a2%e8%84%b1%e7%8e%87%e3%82%92%e4%b8%8b%e3%81%92%e3%82%8b%ef%bc%81%e6%9c%80%e6%96%b0css%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%e8%aa%ad%e3%81%bf%e3%82%84%e3%81%99%e3%81%84web/): ユーザーが離脱する原因は「読みにくさ」か... - [【2025年9月最新版】ブレイクポイント早見表とファーストビュー最適化の要点](https://fastcoding.jp/blog/all/info/designwidth-202509/): 2025年9月現在のWebデザインの「最... - [無料でここまで出来る！Excelライクな企業 Web アプリ向けデータグリッド 3 選](https://fastcoding.jp/blog/all/frontend/excel-by-javascript/): Excel業務をWebアプリ化したい企業... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.8 崩れやすいUIトップ5 ─ 実装現場で多発するトラブルと設計の回避ポイント](https://fastcoding.jp/blog/all/info/web-direction-guide08/): 「デザインどおりに作ったのに、なぜ崩れる... - [このデザイン、どうコーディングする？ #8｜CSSとHTMLだけで実現！レスポンシブ対応のタイムラインUI](https://fastcoding.jp/blog/all/jquery/responsive-timeline-by-css/): タイムラインUIをライブラリなしで実装す... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.7 “ただ組むだけ”では通用しない ─ HTML/CSSに設計が必要な本当の理由](https://fastcoding.jp/blog/all/info/web-direction-guide07/): 「見た目通りに組むだけ」で終わらせない実... - [このデザイン、どうコーディングする？ #7｜縦書き⇔横書きをCSSだけでスマートに切り替えるには？writing-modeと論理プロパティを使いこなす](https://fastcoding.jp/blog/all/frontend/css-writing-mode-tategaki/): スマホ向け縦書き表現のニーズが増える中、... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.6 静的デザインが実装の手間を増やす理由 ─ 状態・変化を想定した設計のすすめ](https://fastcoding.jp/blog/all/info/web-direction-guide06/): 一見完璧な静的デザインでも、実装で手が止... - [このデザイン、どうコーディングする？ #6｜モーダルを外側クリックで閉じる？JS最小限でもしっかり動く＆アクセシブルに設計する方法](https://fastcoding.jp/blog/all/frontend/modal-css/): HTML標準の要素を使えば、モーダルの開... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.5 JavaScriptいらずのUI表現集 ─ CSSだけでここまでできる実装アイデア](https://fastcoding.jp/blog/all/info/web-direction-guide05/): CSSも日々進化しているの知ってますか？... - [このデザイン、どうコーディングする？ #5｜スクロールで変化する透明ヘッダー、CSSだけで自然に固定する方法](https://fastcoding.jp/blog/all/ui-ux/scroll-header-css/): スクロールに応じて背景が切り替わるヘッダ... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.4 軽くて崩れにくいCSS設計 ─ 複雑なデザインを支える実装の工夫とは？](https://fastcoding.jp/blog/all/info/web-direction-guide04/): 1. はじめに：見た目が同じでも、コード... - [このデザイン、どうコーディングする？ #4｜Figmaだけにある“あのマージン指定”、CSSで正しく落とし込む方法](https://fastcoding.jp/blog/all/ui-ux/figma-margins-css/): Figmaでよく見られる「左右40pxの... - [「Freelancehub」でブログ記事をご紹介いただきました](https://fastcoding.jp/blog/all/info/freelancehub-link/): レバレジーズ株式会社様が運営するITフリ... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.3 CSSが効かない？バグじゃなくて“仕様通り”な挙動とその正体](https://fastcoding.jp/blog/all/info/web-direction-guide03/): Web制作でよくある「CSSが効かない」... - [【最新】HTMLコーディング代行会社 検索上位10社比較（2025年4月）](https://fastcoding.jp/blog/all/info/hikaku_202504/): こちらの記事では、コーディング代行を利用... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.2 レスポンシブ対応の落とし穴 ─ ブレイクポイントだけじゃ防げないUI崩れ](https://fastcoding.jp/blog/all/info/web-direction-guide02/): UIUXのレスポンシブ対応はPCとスマホ... - [【このデザイン、どうコーディングする？ 】#3｜JSなしでスクロール連動フェードイン。CSSだけでここまでできる！](https://fastcoding.jp/blog/all/frontend/css-scroll-fadein/): 弊社で実際に使っているCSSだけでスクロ... - [「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.1 なぜ“デザイン通り”に見えない？実装現場が語る、再現性の限界と理由](https://fastcoding.jp/blog/all/info/web-direction-guide01/): デザインとコーディングの「ズレ」は、技術... - [【このデザイン、どうコーディングする？ 】#02「Pinterest風の高さバラバラな要素をスマートに整列させる方法」](https://fastcoding.jp/blog/all/ui-ux/pinterest-layout-css/): Pinterest風のグリッドレイアウト... - [【このデザイン、どうコーディングする？ 】#01「スマホで横スライド！比率固定のカルーセルUIをCSSだけで作る方法」](https://fastcoding.jp/blog/all/html-css/carousel-by-css/): このブログシリーズでは、モダンなUIデザ... - [運用サービスのご案内](https://fastcoding.jp/blog/clients/sitemanagementservice/): このコンテンツはパスワードで保護されてい... - [いまさら聞けない！CSSでレイアウトを決めるプロパティと具体的な使い方](https://fastcoding.jp/blog/all/frontend/css-layout-properties/): Web制作をしていると、「このレイアウト... - [これだけは押さえたい！リスクを回避オープンソースライブラリ活用とライセンスの基本](https://fastcoding.jp/blog/all/info/what-licenses-are-better/): WEBサイトやWEBシステムを作るとき、... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！散布図作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-scatter-plot-plugins/): データを視覚的に伝えるためのレーダーチャ... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！レーダーチャート作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-radar-chart-plugins/): データを視覚的に伝えるためのレーダーチャ... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！折れ線グラフ作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-line-graph-plugins/): データをわかりやすく伝える手段として、グ... - [AUN座談会に参加しました！](https://fastcoding.jp/blog/all/info/aun/): 先日、弊社でも大変お世話になっている「A... - [【最新】HTMLコーディング代行会社 検索上位10社比較（2025年1月）](https://fastcoding.jp/blog/all/info/hikaku_202501/): こちらの記事では、コーディング代行を利用... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！円グラフ作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-circle-graph-plugins/): 最近、データのビジュアル化が注目されてお... - [＜みんな気になる＞コーディング代行会社のよくある用語とその解説](https://fastcoding.jp/blog/all/info/coding_keywords/): コーディング代行会社を調べていると、各社... - [【完全版】絶対に失敗しない！WordPressの引っ越し](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step1/): WordPress関連で、おそらくお客様... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その2～サーバ選定編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step2/): さて、Wordpress引っ越し作業の連... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その4～リストア（アップロード）編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step4/): ファイルデータとデータベースのバックアッ... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その3～バックアップ編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step3/): サーバの選定が完了したら、次に行うべきス... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その5～DNSの切り替え編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step5/): いままでの流れで、既に新しいサーバにはW... - [【完全版】絶対に失敗しない！WordPressの引っ越し《その6～引っ越し後の動作確認編～》](https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step6/): DNSの切り替えが完了したら、新しいサー... - [【コーディング屋のネタ帳】データ可視化はこれで決まり！棒グラフ作成に役立つJavaScriptライブラリ5選](https://fastcoding.jp/blog/all/frontend/javascript-bar-graph-plugins/): 最近、Webサイトでデータをグラフにして... - [【最新】HTMLコーディング代行会社 おすすめ6社比較（2024年11月）](https://fastcoding.jp/blog/all/info/hikaku_202411/): 最新のウェブ検索結果をもとに、HTMLコ... - [【コーディング屋のネタ帳】簡単に実装できるスクロールアニメーション3選](https://fastcoding.jp/blog/all/info/easy-scroll-animations-by-css/): 最近のWEBサイトでは、スクロールに合わ... - [【ご契約者様専用】ご利用いただきありがとうございました](https://fastcoding.jp/blog/clients/arigatou/): このコンテンツはパスワードで保護されてい... - [＜大公開＞コーディング代行会社のメリットデメリット、上手な使い方とは](https://fastcoding.jp/blog/all/info/codingmerit/): コーディング代行専業として、かれこれもう... - [【第４章】「コーディング代行サービスに関するよくある質問」についてまとめて回答します！](https://fastcoding.jp/blog/all/info/beginner-series04/): コーディング代行会社がお届けする「初めて... - [【2024年8月調査結果】推奨ブレイクポイントとWebサイト横幅とファーストビュー](https://fastcoding.jp/blog/all/info/designwidth-202408/): こんにちは。FASTCODINGデザイナ... - [【第３章】コーディング代行サービスの選び方](https://fastcoding.jp/blog/all/info/beginner-series03/): コーディング代行会社がお届けする「初めて... - [【第２章】「コーディング代行サービス」を使うのはどんな人？](https://fastcoding.jp/blog/all/info/beginner-series02/): コーディング代行会社がお届けする「初めて... - [【第１章】HTMLコーディング代行サービスとは？](https://fastcoding.jp/blog/all/info/beginner-series01/): ウェブサイト制作に欠かせない「コーディン... - [Wordpressのエディタにはどんな違いがある？ ～Gutenbergエディタとクラシックエディタの違い～](https://fastcoding.jp/blog/all/wordpress/wordpress_01/): WordPressのエディタには、「グー... - [【YouTube,mp4】 Webサイトトップに動画を利用する時のメリットと注意点](https://fastcoding.jp/blog/all/webdesign/movie-on-webpage/): こんにちは。FASTCODINGデザイナ... - [動画編集ソフト！Adobe After EffectsとPremiere Proどっちを利用するべき？](https://fastcoding.jp/blog/all/movie/adobe-after-effects-premiere-pro/): こんにちは。FASTCODINGデザイナ... - [「Webアクセシビリティ」とは？ デザイン制作に意識すべきこと](https://fastcoding.jp/blog/all/ui-ux/webaccessibility/): こんにちは。FASTCODING UI/... - [【YouTube,mp4】 Webサイトに動画掲載する方法まとめ](https://fastcoding.jp/blog/all/webdesign/embed-youtube/): こんにちは。FASTCODINGデザイナ... - [【2024年版】 目的別に無料で使える 動画編集ソフト４選 ](https://fastcoding.jp/blog/all/direction/video4/): こんにちは。FASTCODINGデザイナ... - [2024年はWebアクセシビリティが義務化？！今こそ早期対応を！](https://fastcoding.jp/blog/all/info/2024-web-accessibility/): こんにちは。FASTCODING UI/... - [【UI Design Tool】 Figmaと XDとSketchの分かりやすく比較まとめ](https://fastcoding.jp/blog/all/info/xd-figma-sketch/): こんにちは。FASTCODINGデザイナ... - [【YouTube,mp4】 Webサイトに動画を上手に利用しているサイト](https://fastcoding.jp/blog/all/info/video1/): こんにちは。FASTCODINGデザイナ... - [【2023年12月】推奨Webサイト横幅サイズとファーストビュー結果](https://fastcoding.jp/blog/all/info/designwidth-2023-12/): こんにちは。FASTCODINGデザイナ... - [「フレーミング効果」を利用して売り上げアップ！ UI/UXデザインに使える具体例をご紹介。](https://fastcoding.jp/blog/all/info/framingeffect/): こんにちは。FASTCODING UI/... - [マイクロコピーとは？効果的な活用方法をご紹介！](https://fastcoding.jp/blog/all/info/microcopy/): こんにちは。FASTCODING UI/... - [ファーストビューを改善してCVアップ！ 制作のポイントとは？](https://fastcoding.jp/blog/all/info/firstview/): こんにちは。FASTCODING UI/... - [キービジュアルやバナー制作で使える！ 印象的な「文字組み」を作るアイディア。](https://fastcoding.jp/blog/all/ui-ux/typography/): こんにちは。FASTCODING UI/... - [UXライティングとは？制作の際、気をつけるべきポイントを解説！](https://fastcoding.jp/blog/all/direction/uxwriting/): こんにちは。FASTCODING UI/... - [WEBデザインの参考に！ ［2023年］トレンド•デザイン傾向まとめ](https://fastcoding.jp/blog/all/info/trend/): こんにちは。FASTCODING UI/... - [色覚特性に配慮して、誰もが使いやすいUIにする方法](https://fastcoding.jp/blog/all/direction/color_vision/): こんにちは。FASTCODING UI/... - [【決定版】コーディング代行会社が説明する、コーディング代行の使い方！](https://fastcoding.jp/blog/all/info/coding_01/): こんにちは。FASTCODINGディレク... - [【Illustrator-Hack_1】イラストレーターでぷっくりした3Dイラストを作ろう](https://fastcoding.jp/blog/all/other/illustrator-hack1/): こんにちは。FASTCODINGデザイナ... - [GoogleマップをWebサイトのデザインに合わせてオシャレにする方法](https://fastcoding.jp/blog/all/info/googlemap-custom/): こんにちは。FASTCODINGデザイナ... - [WEBサイトの色はどうやって決める？ 抑えるべき配色の基本ルールについてご紹介。](https://fastcoding.jp/blog/all/direction/color/): こんにちは。FASTCODING UI/... - [縦に長くなってしまうスマホページの情報設計はどうする？ 最適化して見やすいページにする方法](https://fastcoding.jp/blog/all/webdesign/smartphonedesign/): こんにちは。FASTCODING UI/... - [【ご契約者様向け】フォームについて](https://fastcoding.jp/blog/clients/form/): このコンテンツはパスワードで保護されてい... - [【2023年5月】Webサイト横幅サイズとファーストビューとフォントサイズ](https://fastcoding.jp/blog/all/info/designwidth-2023-5/): こんにちは。FASTCODINGデザイナ... - [UI改善って何をすればいいの？ 改善のポイント、改善例をご紹介！](https://fastcoding.jp/blog/all/info/improvement/): こんにちは。FASTCODING UI/... - [CVがアップする、LPのストーリー構成について](https://fastcoding.jp/blog/all/direction/lp/): こんにちは。FASTCODING UI/... - [レスポンシブデザインとリキッドデザインの違いを明確にしよう！](https://fastcoding.jp/blog/all/webdesign/responsive-liquid/): こんにちは。FASTCODING Web... - [2022年のUI/UXデザイントレンド、 スクロールテリングとは？](https://fastcoding.jp/blog/all/direction/scrolltelling/): こんにちは。FASTCODING UI/... - [GA4 のレポート画面の見方【1】](https://fastcoding.jp/blog/all/info/ga4-3/): こんにちは。FASTCODING Web... - [ユニバーサル アナリティクス（旧）からGoogleアナリティクス4（新）への移行手順](https://fastcoding.jp/blog/all/info/ga4-2/): こんにちは。FASTCODING Web... - [ユニバーサル アナリティクス（旧）とGoogleアナリティクス4（新）の違い](https://fastcoding.jp/blog/all/info/ga4-1/): こんにちは。FASTCODING Web... - [Facebook、Twitter、Instagram、OGP画像の適切サイズ](https://fastcoding.jp/blog/all/info/ogp-img/): こんにちは。FASTCODING Web... - [レスポンシブ？リキッド？フレキシブル？レイアウトのまとめ](https://fastcoding.jp/blog/all/info/liquid-design/): こんにちは。FASTCODING Web... - [【2022】 目的別のおすすめWebサイトビルダー5選！](https://fastcoding.jp/blog/all/info/website-builders2/): こんにちは。FASTCODING Web... - [DIY! Webサイトビルダー選びのポイント](https://fastcoding.jp/blog/all/info/website-builders1/): こんにちは。FASTCODING Web... - [定番だけど、使い方に注意が必要なUIコンポーネントとは？](https://fastcoding.jp/blog/all/direction/component/): こんにちは。FASTCODING UI/... - [行動喚起を最大化させるには？ 緊急性を高めたCTAでコンバージョンをアップさせる方法](https://fastcoding.jp/blog/all/webdesign/cta/): こんにちは。FASTCODING UI/... - [目を引くアイキャッチを作る方法](https://fastcoding.jp/blog/all/webdesign/eyecatch/): こんにちは。FASTCODING UI/... - [【ページスピード対策】画像処理による改善策](https://fastcoding.jp/blog/all/frontend/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96_%e7%94%bb%e5%83%8f%e5%87%a6%e7%90%86/): 皆さん、こんにちは！ ファストコーディン... - [新しいUIデザインのトレンド「クレイモーフィズム」](https://fastcoding.jp/blog/all/info/claymorphism/): こんにちは。FASTCODINGデザイナ... - [【ページスピード対策】Lazy loading（遅延読み込み）による改善策](https://fastcoding.jp/blog/all/frontend/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96_lazy-loading_%e9%81%85%e5%bb%b6%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf/): 皆さん、こんにちは！ ファストコーディン... - [【2022年第1四半期】Webサイト横幅サイズとファーストビュー](https://fastcoding.jp/blog/all/info/designwidth-2022-2/): こんにちは。FASTCODINGデザイナ... - [デザイントレンドを振り返ろう](https://fastcoding.jp/blog/all/webdesign/design-trends/): こんにちは。FASTCODINGデザイナ... - [次世代画像フォーマット「WebP」に対応する方法](https://fastcoding.jp/blog/all/webdesign/website-images-webp/): こんにちは。FASTCODINGデザイナ... - [Webサイトに最適な画像形式は何？](https://fastcoding.jp/blog/all/webdesign/website-images/): こんにちは。FASTCODINGデザイナ... - [視線誘導とは？視線の法則をUIデザインに活用しよう](https://fastcoding.jp/blog/all/direction/gaze/): こんにちは。FASTCODING UI/... - [【保存版】イラストレーターで簡単にできるタイトル文字デザイン](https://fastcoding.jp/blog/all/webdesign/illustrator1/): こんにちは。FASTCODINGデザイナ... - [少しの気遣いで離脱を防ぐ！ 使い心地を良くするUIテクニック](https://fastcoding.jp/blog/all/direction/ui-tips/): こんにちは。FASTCODING UI/... - [オブジェクト指向UI（OOUI）とは？ 設計手法とメリットについて](https://fastcoding.jp/blog/all/direction/ooui/): こんにちは。FASTCODING UI/... - [ワイヤーフレーム制作前に必要となる「情報設計」とは？ 進め方とポイント](https://fastcoding.jp/blog/all/direction/ia/): こんにちは。FASTCODING UI/... - [Web制作を外注する際のポイント。 失敗しないために必要な事前準備とは？](https://fastcoding.jp/blog/all/webdesign/outsourcing/): こんにちは。FASTCODING UI/... - [【2021年版】WordPressを高速化するプラグイン３選](https://fastcoding.jp/blog/all/info/wp-pagespeed/): こんにちは。FASTCODINGデザイナ... - [UIデザインするのに適したツールは？おすすめをご紹介！](https://fastcoding.jp/blog/all/webdesign/designtools/): こんにちは。FASTCODING UI/... - [デザインがしっくりこない原因は何…？ 美しいデザインの法則](https://fastcoding.jp/blog/all/webdesign/designtheory/): こんにちは。FASTCODING UI/... - [モーショングラフィックス徹底解説！活用メリットと2021年のトレンド](https://fastcoding.jp/blog/all/webdesign/motion-graphics/): こんにちは。FASTCODINGデザイナ... - [【Photshop】ピンボケ写真をくっきり補正する](https://fastcoding.jp/blog/all/webdesign/photoshop-tips2/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 5 】コアウェブバイタルの具体的な対策まとめ](https://fastcoding.jp/blog/all/info/corewebvitals-5/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 4 】Google PageSpeed Insights （ページスピードインサイト）の使い方](https://fastcoding.jp/blog/all/info/corewebvitals-4/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 3 】Google Search Console （グーグルサーチコンソール）の使い方](https://fastcoding.jp/blog/all/info/corewebvitals-3/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 2 】Google Search Console （グーグルサーチコンソール）の基本と登録方法](https://fastcoding.jp/blog/all/info/corewebvitals-2/): こんにちは。FASTCODINGデザイナ... - [【Core Web Vitals 1 】コアウェブバイタルとは？詳しく解説](https://fastcoding.jp/blog/all/info/corewebvitals-1/): こんにちは。FASTCODINGデザイナ... - [ミニマルデザインの落とし穴！気をつけたいポイント](https://fastcoding.jp/blog/all/webdesign/minimal/): こんにちは。FASTCODING UI/... - [【Photshop】SNSのアイコンに！人物写真をイラスト風に加工する](https://fastcoding.jp/blog/all/webdesign/photoshop-tips1/): こんにちは。FASTCODINGデザイナ... - [ミニマルデザインとは？ デザインスタイルの変遷とスタイルの特徴を解説！](https://fastcoding.jp/blog/all/direction/designstyle/): こんにちは。FASTCODING UI/... - [【MEGA CREATOR】Facebook、Instagram、Twitter、YouTube用の画像が簡単に作れちゃう便利サイト](https://fastcoding.jp/blog/all/webdesign/mage-creator/): こんにちは。FASTCODINGデザイナ... - [【2021年下半期】Webデザイナー必読！横幅サイズとファーストビューサイズ](https://fastcoding.jp/blog/all/info/designwidth-2021-7/): こんにちは。FASTCODINGデザイナ... - [CVに繋げるUI/UXデザインのポイント（３）](https://fastcoding.jp/blog/all/direction/cvr3/): こんにちは。FASTCODING UI/... - [CVに繋げるUI/UXデザインのポイント（２）](https://fastcoding.jp/blog/all/direction/cvr2/): こんにちは。FASTCODING UI/... - [CVに繋げるUI/UXデザインのポイント（１）](https://fastcoding.jp/blog/all/direction/cvr1/): こんにちは。FASTCODING UI/... - [UIデザインをする上で重要な「インタラクションコスト」とは？](https://fastcoding.jp/blog/all/direction/interactioncost/): こんにちは。FASTCODING UI/... - [UIデザインをする上でのルール・概念](https://fastcoding.jp/blog/all/direction/theory/): こんにちは。FASTCODING UI/... - [【セキュリティ対策】コンピューターウイルスの種類と対策](https://fastcoding.jp/blog/all/info/security-1/): こんにちは。FASTCODINGデザイナ... - [UXをデザインする方法](https://fastcoding.jp/blog/all/direction/uxdesign/): こんにちは。FASTCODING UI/... - [人間中心設計・デザイン思考とは？](https://fastcoding.jp/blog/all/direction/hcd/): こんにちは。FASTCODING UI/... - [「Google Best Things」世界で人気のある商品をゲットしよう！](https://fastcoding.jp/blog/all/info/bestthings/): こんにちは。FASTCODINGデザイナ... - [UI/UXはなぜ必要？重要性と改善方法](https://fastcoding.jp/blog/all/direction/importance_uiux/): こんにちは。FASTCODING UI/... - [ユーザービリティとは](https://fastcoding.jp/blog/all/direction/usability/): こんにちは。FASTCODING UI/... - [UI/UXとは？それぞれの違いを理解しよう](https://fastcoding.jp/blog/all/direction/uiux/): こんにちは。FASTCODING UI/... - [【gfyCat】10分の1以上圧縮！GifアニメをWebM形式に変換してWebサイトに貼り付ける！](https://fastcoding.jp/blog/all/info/gfycat/): ※こちらのサービスは、現在は提供を終了し... - [「cosha」画像と同じ色のシャドウを入れてオシャレにしてみた。](https://fastcoding.jp/blog/all/webdesign/cosha/): こんにちは。FASTCODINGデザイナ... - [高速化機能Lazy-loadingをWordPress 5.7のiframeで標準サポート](https://fastcoding.jp/blog/all/wordpress/wp-news0413/): こんにちは。FASTCODINGデザイナ... - [Googleトップニュース掲載の条件からAMPが必要なくなる！？](https://fastcoding.jp/blog/all/info/g-news0331/): こんにちは。FASTCODINGデザイナ... - [【第三部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳）](https://fastcoding.jp/blog/all/info/state-of-frontend-2020-3/): こんにちは。FASTCODINGデザイナ... - [フォントワークス8書体がGoogle Fontsで利用可能に！](https://fastcoding.jp/blog/all/info/fontworks8/): こんにちは。FASTCODINGデザイナ... - [【2021年4月】現場で使える！テキストエフェクトのまとめ](https://fastcoding.jp/blog/all/info/202104-text-animation/): こんにちは。FASTCODINGデザイナ... - [【第二部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳）](https://fastcoding.jp/blog/all/info/state-of-frontend-2020-2/): こんにちは。FASTCODINGデザイナ... - [【第一部】4500人に聞いた！2021年最新のフロントエンド開発レポート（和訳）](https://fastcoding.jp/blog/all/info/state-of-frontend-2020-1/): こんにちは。FASTCODINGデザイナ... - [フォントのすべて「Webサイトで使えるフォントはコレ！」](https://fastcoding.jp/blog/all/info/website-font/): こんにちは。FASTCODINGデザイナ... - [【2021年3月】アニメーションが印象に残るサイトのまとめ](https://fastcoding.jp/blog/all/info/202103-animation-site/): こんにちは。FASTCODINGデザイナ... - [【CSS】CSSだけで画像をトリミングできる「object-fit」](https://fastcoding.jp/blog/all/info/object-fit/): こんにちは。FASTCODINGデザイナ... - [「Lazy Load」でページの読み込み速度を向上させる](https://fastcoding.jp/blog/all/info/lazyload/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -6】アニメーションを最適化してパフォーマンスを高める](https://fastcoding.jp/blog/all/info/animation-6/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -5】JavaScriptアニメーションライブラリまとめ（2021年2月版）](https://fastcoding.jp/blog/all/info/animation-5/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -4】JavaScriptアニメーション基本・作り方まとめ](https://fastcoding.jp/blog/all/info/animation-4/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -3】CSSアニメーションライブラリ2021年まとめ](https://fastcoding.jp/blog/all/info/animation-3/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 -2】CSSアニメーションの基本・作り方まとめ](https://fastcoding.jp/blog/all/info/animation-2/): こんにちは。FASTCODINGデザイナ... - [【アニメーション特集 - 1】アニメーションはCSSとJSのどちらを使うべきなのか？](https://fastcoding.jp/blog/all/info/animation-1/): こんにちは。FASTCODINGデザイナ... - [【2021注目】フロントエンド開発「静的サイトジェネレータ」](https://fastcoding.jp/blog/all/info/ssg/): こんにちは。FASTCODINGデザイナ... - [【ご契約者様向け】ご納品データのご案内](https://fastcoding.jp/blog/clients/readme/): このコンテンツはパスワードで保護されてい... - [【ご契約者様向け】ページスピード対策](https://fastcoding.jp/blog/clients/psi/): このコンテンツはパスワードで保護されてい... - [主流のデザインソフトでWebデザイン作るときの基本設定](https://fastcoding.jp/blog/all/info/design-tools-setting/): こんにちは。FASTCODINGデザイナ... - [【2021年1月】スマホ用Webデザインはこのアートボードサイズで作ろう！](https://fastcoding.jp/blog/all/info/iphone-size2021jan/): こんにちは。FASTCODINGデザイナ... - [【Illustrator実践】マスコット人形の写真をイラストにしてみよう。](https://fastcoding.jp/blog/all/other/illustrator-1-2/): こんにちは。FASTCODINGデザイナ... - [入力率を高める！お問合わせフォームのデザイン](https://fastcoding.jp/blog/all/info/mail-form/): こんにちは。FASTCODINGデザイナ... - [プロトタイプのユーザーテストが簡単に行える「Maze」](https://fastcoding.jp/blog/all/info/maze/): こんにちは。FASTCODINGデザイナ... - [【2020年版】配色の基本５ポイントと便利ツール5選！](https://fastcoding.jp/blog/all/info/color-scheme/): こんにちは。FASTCODINGデザイナ... - [【Google Fonts 高速化】必要な文字だけを読み込む方法！](https://fastcoding.jp/blog/all/info/google-fonts-subset/): こんにちは。FASTCODINGデザイナ... - [2021年最新バージョンをリリース予定のFont Awesome v6！使った事がない人は必見](https://fastcoding.jp/blog/all/info/font-awesome/): こんにちは。FASTCODINGデザイナ... - [【2020年必須】ページスピードを上げる！PageSpeed Insights対策](https://fastcoding.jp/blog/all/info/pagespeed/): こんにちは。FASTCODINGデザイナ... - [【ご契約者様向け】WordPress設置後のページスピード対策設定](https://fastcoding.jp/blog/clients/psiwordpress/): このコンテンツはパスワードで保護されてい... - [【2020年10月版】デザイナー必読！Webサイト横幅サイズとファーストビューサイズ](https://fastcoding.jp/blog/all/info/designswidth-2020/): こんにちは。FASTCODINGデザイナ... - [ページスピードスコアを上げる！おすすめのWordpressプラグイン](https://fastcoding.jp/blog/all/info/pagespeed-plugin/): こんにちは。FASTCODINGデザイナ... - [今更きけない！構造化データって何？](https://fastcoding.jp/blog/all/info/structured-data/): こんにちは。FASTCODINGデザイナ... - [Can I Use （ブラウザの対応表）をブログに埋め込む](https://fastcoding.jp/blog/all/info/can-i-use/): こんにちは。FASTCODINGデザイナ... - [Googleの新しい検索ランキング指標「Core Web Vitals」とは](https://fastcoding.jp/blog/all/info/web-vitals/): こんにちは。FASTCODINGデザイナ... - [CSSで背景を斜めにデザインする方法まとめ！](https://fastcoding.jp/blog/all/webdesign/css-diagonal-layout/): こんにちは。FASTCODINGデザイナ... - [【保存版】CSS Flexbox プロパティまとめ](https://fastcoding.jp/blog/all/info/css-flexbox2/): こんにちは。FASTCODINGデザイナ... - [UIデザインツールFigma②実践編](https://fastcoding.jp/blog/all/info/figma2/): こんにちは。FASTCODINGデザイナ... - [【2020年版】CSS Flexbox 実践！レイアウトを作る](https://fastcoding.jp/blog/all/info/css-flexbox1/): こんにちは。FASTCODINGデザイナ... - [【2020年版】商用OKな海外のオススメ無料写真素材サイト](https://fastcoding.jp/blog/all/info/photo-sozai2020/): こんにちは。FASTCODINGデザイナ... - [UIデザインツールFigma ①入門編](https://fastcoding.jp/blog/all/info/figma1/): こんにちは。FASTCODINGデザイナ... - [【2020年】新しいデザインのトレンド「ニューモーフィズム」に注目](https://fastcoding.jp/blog/all/info/neumorphism/): こんにちは。FASTCODINGデザイナ... - [手書きのイラストを簡単にベクトルデータ化できるAdobe Capture！](https://fastcoding.jp/blog/all/info/adobe-capture/): こんにちは。FASTCODINGデザイナ... - [【２０２０年】SEO対策はどうなるのか？抑えて置きたいポイント](https://fastcoding.jp/blog/all/info/2020seo/): こんにちは。FASTCODINGデザイナ... - [2020年9月以降、Google検索の表示順位はモバイルサイトが対象へ！SEOへの影響と対応方法まとめ](https://fastcoding.jp/blog/all/info/google-mobile-first-index/): こんにちは。FASTCODINGデザイナ... - [2020年Adobe Flash終了の要因とリスク！HTML5への移行](https://fastcoding.jp/blog/all/info/flash-animation/): こんにちは。FASTCODINGデザイナ... - [WEB制作の修正依頼はAUN「あうん」を使って効率化しよう](https://fastcoding.jp/blog/all/other/tool-aun/): （記事更新：2020年8月18日） こん... - [【２０２０年版】Chrome拡張機能！テーマ別厳選１６](https://fastcoding.jp/blog/all/info/extension2020/): こんにちは。FASTCODINGデザイナ... - [Google BERT の導入により、これまで以上にWebコンテンツが重要になる](https://fastcoding.jp/blog/all/info/googlebert/): こんにちは。FASTCODINGデザイナ... - [リモートワークに最適！外出先からPCを遠隔操作するChromeリモートデスクトップ](https://fastcoding.jp/blog/all/info/remote-desktop/): こんにちは。FASTCODINGデザイナ... - [【2020年12月版】Sketchで絶対入れたいプラグイン7選](https://fastcoding.jp/blog/all/info/sketch-plugin2020/): こんにちは。FASTCODINGデザイナ... - [Webアクセシビリティ対応② <実装編> チェックリスト17項目](https://fastcoding.jp/blog/all/info/accessibility-2/): こんにちは。FASTCODINGデザイナ... - [Webアクセシビリティ対応① 基礎編](https://fastcoding.jp/blog/all/info/accessibility-1/): こんにちは。FASTCODINGデザイナ... - [【4】マテリアルデザイン践実 ③カードのルールと使い方](https://fastcoding.jp/blog/all/info/material-design4/): こんにちは。FASTCODINGデザイナ... - [【3】マテリアルデザイン実践 ②ボタンのルールと作り方](https://fastcoding.jp/blog/all/webdesign/material-design3/): こんにちは。FASTCODINGデザイナ... - [【2】マテリアルデザイン実践 ①カラーの選び方](https://fastcoding.jp/blog/all/webdesign/material-design2/): こんにちは。FASTCODINGデザイナ... - [【1】これまでのデザインとマテリアルデザイン](https://fastcoding.jp/blog/all/info/material-design1/): こんにちは。FASTCODINGデザイナ... - [【2】Sketchの導入方法と基本操作](https://fastcoding.jp/blog/all/webdesign/2019sketch-2/): こんにちは。FASTCODINGデザイナ... - [【1】WebデザイナーがSketchを使う理由](https://fastcoding.jp/blog/all/webdesign/2019sketch-1/): こんにちは。FASTCODINGデザイナ... - [Googleしごと検索（Google for jobs）がついに日本上陸！構造化データなど対応方法まとめ](https://fastcoding.jp/blog/all/info/google-for-jobs/): こんにちは。FASTCODINGです。 ... - [Google MAPS APIが7/16有料化？地図を埋め込んでいるサイトは要確認！](https://fastcoding.jp/blog/all/jquery/google-maps-no-longer-free/): こんにちは。FASTCODINGです。 ... - [Googleマップをサイトに追加する方法](https://fastcoding.jp/blog/all/jquery/howtoaddgooglemap/): こんにちは。ベトナムオフィスのThanh... - [日本だからって無視出来ない！WordpressをGDPR対応するには](https://fastcoding.jp/blog/all/info/gdpr/): こんにちは。 FASTCODINGです。... - [jQueryによるフォームの検証](https://fastcoding.jp/blog/all/jquery/jquery-form-validation/): ※こちらのプラグインはかなり古くなってし... - [サイト移転に必須!!301リダイレクトの為の.htaccess書き方5選](https://fastcoding.jp/blog/all/frontend/htaccessredirect/): WEBサイトの引越しの際、忘れてはいけな... - [jQueryを使うには何を準備したらいいの？jQueryことはじめ](https://fastcoding.jp/blog/all/jquery/jquerybeginner/): ホームページを、より魅力的に見せたりユー... - [どれを選ぶ？導入シェアから見るオススメCMSツール紹介](https://fastcoding.jp/blog/all/direction/cmsshare/): こんにちは。ファストコーディングです。 ... - [【2018年4月版】もう迷わない！Webサイト横幅サイズの大正解](https://fastcoding.jp/blog/all/webdesign/designswidth-2018/): こんにちは、FASTCODINGです。 ... - [2017年終盤の今、常時SSL化を急がねばならない理由＜後編＞](https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e5%be%8c%e7%b7%a8/): こんにちは、ファストコーディングです。 ... - [2017年終盤の今、常時SSL化を急がねばならない理由＜中編＞](https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e4%b8%ad%e7%b7%a8/): こんにちは、ファストコーディングです。 ... - [2017年終盤の今、常時SSL化を急がねばならない理由＜前編＞](https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e5%89%8d%e7%b7%a8/): こんにちは、ファストコーディングです。 ... - [WordPressを導入した方が良い理由](https://fastcoding.jp/blog/all/frontend/wordpress%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%9f%e6%96%b9%e3%81%8c%e8%89%af%e3%81%84%e7%90%86%e7%94%b1/): こんにちは！ディレクターの楠本と申します... - [【初心者編】Googleアナリティクス基礎：トラッキングコードの取得・設置](https://fastcoding.jp/blog/all/frontend/googleanalytics-trackingcode/): どうもディレクター楠本です。 前回のブロ... - [【コピペ】HTMLフォームのselect項目まとめ(生年月日・年齢・都道府県・職業)](https://fastcoding.jp/blog/all/frontend/form-select/): こんにちは、ディレクターのせりなです。 ... - [Retina対応のWebデザインをするときの注意点](https://fastcoding.jp/blog/all/webdesign/retina-weddesign/): こんにちは、ディレクターのせりなです。 ... - [新人WebディレクターのためのWeb業界用語【初心者用】](https://fastcoding.jp/blog/all/direction/director-words/): こんにちは、ディレクターのせりなです。 ... - [Google web fontsの雰囲気別おすすめ30選！Webフォントを導入しよう！](https://fastcoding.jp/blog/all/webdesign/google-webfonts-recommended/): こんにちは、ディレクターのせりなです。 ... - [【簡単】Webフォントの使い方！Google web fontsを使ってみよう](https://fastcoding.jp/blog/all/webdesign/web-fonts/): こんにちは、ディレクターのせりなです。 ... - [【WordPress初心者】使い方と注意点まとめ！](https://fastcoding.jp/blog/all/direction/wp_howtouse/): こんにちは、ディレクターのせりなです。 ... - [【レスポンシブ】PCとスマホで違う画像に切り替える方法！CSSだけで簡単画像切り替え！](https://fastcoding.jp/blog/all/frontend/responsive_img/): こんにちは！ディレクターのせりなです。 ... - [HTML5.1を使ってSEOに強いセマンティックコーディングをする方法](https://fastcoding.jp/blog/all/html5toseo/): FASTCODINGの波乗りディレクター... - [【初心者向け】HTML、CSS、JavaScriptの違いと役割について](https://fastcoding.jp/blog/all/jquery/html-css-javascript/): こんにちは、ディレクターのせりなです。 ... - [【WordPress】記事をランダムに表示させる方法！プラグイン不要！](https://fastcoding.jp/blog/all/system/wordpress-random/): FASTCODING-Vietnamのバ... - [初めてのSchema.org(スキーマ)](https://fastcoding.jp/blog/all/info/schema-org/): FASTCODINGの波乗りディレクター... - [JavaとJavaScriptの違いが簡単にわかる！初心者のためのWeb講座](https://fastcoding.jp/blog/all/jquery/java-javascript/): どうも、ディレクターのせりなです。 IT... - [【SEO対策】HTMLページをAMP対応化する詳しい方法と、本当にAMPで良いの？](https://fastcoding.jp/blog/all/frontend/amporpwa/): FASTCODINGの波乗りディレクター... - [AMP対応のメリット・デメリット、導入する？](https://fastcoding.jp/blog/all/info/amp/): FASTCODINGの波乗りディレクター... - [WordPressの脆弱性対策！すぐにバージョンアップしていいの？更新方法・手順とは](https://fastcoding.jp/blog/all/wordpress/updating-of-wordpress/): こんにちは、ディレクターのせりなです。 ... - [Webサイトの表示速度を改善する3つの方法！Google PageSpeed Insightsとは？～初心者編～](https://fastcoding.jp/blog/all/seo/google-pagespeed/): ※2019年6月25日追記 Google... - [【決定版】WordPressの引っ越し！サーバー移行・移転手順](https://fastcoding.jp/blog/all/system/moving-wordpress/): はじめに ファストコーディングのシステム... - [Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版](https://fastcoding.jp/blog/all/webdesign/designswidth/): 2021年、最新のWebデザインの横幅サ... - [なぜJavaScriptを使う？その強みとは？](https://fastcoding.jp/blog/all/frontend/whyjs/): FASTCODINGの波乗りディレクター... - [コーディング指示書の書き方！Web制作の入稿前にディレクター・デザイナーが確認したい5つのこと](https://fastcoding.jp/blog/all/direction/codingspec/): おはようございます！ FASTCODIN... - [絶対パス、相対パス、ルートパスの違いってなに？メリット・デメリットは？](https://fastcoding.jp/blog/all/frontend/path/): FASTCODINGディレクターのせりな... - [Webデザイナー必見！メインビジュアルのデザイン参考サイト！](https://fastcoding.jp/blog/all/webdesign/mainvisual/): はじめまして。 ディレクター(兼デザイナ... - [HTML5で効果的な動画演出!！？](https://fastcoding.jp/blog/all/jquery/html5move/): 自分が知らなかったものをメモとして残しま... - [4月21日までにスマホ対応しないとマズイ！？](https://fastcoding.jp/blog/all/info/0421spsite/): 皆様このニュースはご存知の方が多いかと思... - [ベトナムオフィス移転のお知らせ](https://fastcoding.jp/blog/all/other/%e3%83%99%e3%83%88%e3%83%8a%e3%83%a0%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e7%a7%bb%e8%bb%a2%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/): ３月１日よりベトナムオフィスを下記の場所... - [コーディング外注の仕方はどうやるの？ポイントは○個？](https://fastcoding.jp/blog/all/direction/coding_point/): こんにちは！ 最近はクライアント様のとこ... - [RSS取得はどう行うのか？](https://fastcoding.jp/blog/all/frontend/rss-get/): 先日ページ内にgoogleのapiを使っ... - [AUTOCODINGリリース](https://fastcoding.jp/blog/all/info/autocoding%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9/): FASTCODINGではないのですが、 ... - [画像容量軽減ツール２つの紹介](https://fastcoding.jp/blog/all/frontend/reduction/): 週に１回は更新をしようと思っていたのです... - [webでhtmlを学ぶ（codeprep）](https://fastcoding.jp/blog/all/frontend/codeprep/): 現在はweb上で勉強ができるという良い時... - [よく使うhtmlタグの振り返り7つ](https://fastcoding.jp/blog/all/frontend/htmltag/): 今回はSEOに強いタグの設定、第3段の紹... - [Titleタグ・metaタグの設定のポイントは11点](https://fastcoding.jp/blog/all/frontend/tagpoint/): FASTCODINGのBLOGをご覧頂き... - [altタグの設定のポイントは3点](https://fastcoding.jp/blog/all/frontend/alttag/): FASTCODINGブログをご覧頂き、あ... - [Bookmark登録しているサイトデザイン集12サイトの紹介](https://fastcoding.jp/blog/all/info/bookmark/): 私がWebサイトやコーディングを参考にす... - [HTMLコーディングとは](https://fastcoding.jp/blog/all/info/coding/): HTMLコーディングについてWeb業界で... - [コーディング請負体制](https://fastcoding.jp/blog/all/info/project/): FASTCODINGのコーディング請負体... - [オフショアコーディング](https://fastcoding.jp/blog/all/info/offshore/): FASTCODINGは、ベトナム人のコー... - [ご挨拶](https://fastcoding.jp/blog/all/info/greeting/): 皆さんこんにちは！FASTCODINGの... --- # Detailed Content ## 固定ページ - Published: 2025-09-26 - Modified: 2025-09-26 - URL: https://fastcoding.jp/document/kintone/ 「kintone開発のご案内」の資料ダウンロード 弊社のkintone開発の特長やメリットについてご案内しております。kintone開発の外部化をお考えの方は、是非ご一読ください。こちらのフォームにご入力いただきますと、返信メールにて資料のダウンロードＵＲＬをお送りいたします。※お急ぎでしたらお電話でのご相談も可能です。お気軽にお問合せください。 東京 03-6806-0354 大阪 06-7878-8160 「kintone開発のご案内」資料ダウンロード 必須会社名 必須お名前（姓） 必須お名前（名） 必須フリガナ（姓） 必須フリガナ（名） 必須メールアドレス 電話番号 見込み客のデータ元 -None- インバウンド荷電 アウトバウンド荷電 紹介（内部） 紹介（外部） Web見積り Web問合せ Web打合せ リスト購入 Chatwork問い合わせ 資料請求 詳細情報 「kintoneアプリ開発サービス」の資料請求 広告フラグ function addAriaSelected3177955000016902024 { var optionElem = event. target; var previousSelectedOption = optionElem. querySelector ( '' ); if( previousSelectedOption ){ previousSelectedOption. removeAttribute ( 'aria-selected' ); } optionElem. querySelectorAll ( 'option' ). ariaSelected = 'true'; } function validateEmail3177955000016902024 { var form = document. forms; var emailFld = form. querySelectorAll ( '' ); var i; for( i = 0; i < emailFld. length; i++ ){ var emailVal = emailFld. value; if((emailVal. replace( /^\\s+|\\s+$/g,'' )). length ! = 0 ){ var atpos = emailVal. indexOf ( '@' ); var dotpos = emailVal. lastIndexOf ( '. ' ); if( atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal. length ){ alert ( '有効なメールアドレスを入力してください。 ' ); emailFld. focus ; return false; } } } return true; } function checkMandatory3177955000016902024 { var mndFileds = new Array ( 'Company', 'First Name', 'Last Name', 'Email', 'LEADCF2', 'LEADCF3' ); var fldLangVal = new Array ( '\\u4F1A\\u793E\\u540D', '\\u540D', '\\u59D3', '\\u30E1\\u30FC\\u30EB\\u30A2\\u30C9\\u30EC\\u30B9', '\\u30D5\\u30EA\\u30AC\\u30CA\\u59D3', '\\u30D5\\u30EA\\u30AC\\u30CA\\u540D' ); for( i = 0; i < mndFileds. length; i++ ){ var fieldObj = document. forms\]; if( fieldObj ){ if(((fieldObj. value ). replace( /^\\s+|\\s+$/g,'' )). length == 0 ){ if( fieldObj. type == 'file' ){ alert ( 'アップロードするファイルを選択してください。' ); fieldObj. focus ; return false; } alert ( fldLangVal + ' は入力必須です。' ); fieldObj. focus ; return false; } else if( fieldObj. nodeName == 'SELECT' ){ if( fieldObj. options. value == '-None-' ){ alert ( fldLangVal + ' は入力必須です。' ); fieldObj. focus ; return false; } } else if( fieldObj. type == 'checkbox' ){ if( fieldObj. checked == false ){ alert ( 'Please accept ' + fldLangVal); fieldObj. focus ; return false; } } try { if( fieldObj. name == 'Last Name' ){ name = fieldObj. value; } } catch ( e ){} } } trackVisitor3177955000016902024 ; if( ! validateEmail3177955000016902024){ return false; } var urlparams = new URLSearchParams ( window. location. search ); if( urlparams. has( 'service' ) && ( urlparams. get( 'service' ) === 'smarturl' )){ var webform = document. getElementById ( 'webform3177955000016902024' ); var service = urlparams. get ( 'service' ); var smarturlfield = document. createElement ( 'input' ); smarturlfield. setAttribute ( 'type', 'hidden' ); smarturlfield. setAttribute ( 'value', service ); smarturlfield. setAttribute ( 'name', 'service' ); webform. appendChild ( smarturlfield ); } document. querySelector ( '. crmWebToEntityForm . formsubmit' ). setAttribute ( 'disabled', true ); } function tooltipShow3177955000016902024 ( el ){ var tooltip = el. nextElementSibling; var tooltipDisplay = tooltip. style. display; if( tooltipDisplay == 'none' ){ var allTooltip = document. getElementsByClassName ( 'zcwf_tooltip_over' ); for( i = 0; i < allTooltip. length; i++ ){ allTooltip. style. display = 'none'; } tooltip. style. display = 'block'; } else { tooltip. style. display = 'none'; } } var $zoho = $zoho || {}; $zoho. salesiq = $zoho. salesiq || { widgetcode:'siq5ec4f1b9c63100030343042abc3a04c3', values: {}, ready: function {} }; var d = document; s = d. createElement ( 'script' ); s. type = 'text/javascript'; s. id = 'zsiqscript'; s. defer = true; s. src = 'https://salesiq. zoho. com/widget'; t = d. getElementsByTagName ( 'script' ); t. parentNode. insertBefore ( s, t ); function trackVisitor3177955000016902024 { try { if( $zoho ){ var LDTuvidObj = document. forms; if( LDTuvidObj ){ LDTuvidObj. value = $zoho. salesiq. visitor. uniqueid ; } var firstnameObj = document. forms; if( firstnameObj ){ name = firstnameObj. value + ' ' + name; } $zoho. salesiq. visitor. name ( name ); var emailObj = document. forms; if( emailObj ){ email = emailObj. value; $zoho. salesiq. visitor. email ( email ); } } } catch ( e ){} } --- - Published: 2025-09-22 - Modified: 2025-09-26 - URL: https://fastcoding.jp/kintone/ “成果報酬型”ファストのkintoneアプリ開発 定額アプリ開発の資料ダウンロードプロジェクトのご相談はこちら 多数の実績あり！ ADVANTAGEkintoneアプリ開発の強み サンプルアプリを見てから発注できる 「ファストのkintoneアプリ開発」では、サンプルアプリをご注文前に構築いたします。サンプルアプリを見てから発注を決めて頂けますので安心してご依頼いただけます。 業界10年以上の豊富な実績 現在、お取引き企業様数は2,700社以上、プロジェクト数4,400以上、通算33,000ページ以上の制作を実施しております。※全サービス通算の実績となります kintone専門開発ディレクタによる迅速な対応 初めての方も安心！ご相談から納品まで、経験豊富なkintone開発ディレクターが迅速・丁寧に対応いたします。 他システムとの連携標準対応 フロントエンド開発専門だからこそできる、他システムとの連携開発は標準で対応しています。豊富な経験を元に最適な仕様をご提案します。 仕様が変わっても安心の明朗会計 開発してみて分かる改善／修正点はとっても重要です。開発途中でのご要望の変更や修正も「期間が延びるのか」「そのままで対応可能か」を必ず事前にお伝えします。明朗会計がモットーです。 任せて安心無料運用サポート 納品後は半年間の無償サポート付き。運用中のトラブルや改善も気軽にご相談いただけます。 VOICE弊社のサービスを利用したお客様の声 株式会社大都 様 価格がシンプルで安く、納品も早い上に、SEO対策もできる。 料金体系がシンプルで安く、納品が早いことに加えて、セマンティックコーディングでSEO対策も出来ました。何より、思い描いたデザイン通りにコーディングしてもらえたのが最高でした。 続きを読む 株式会社MAGES. 様 顧客ニーズに合わせた柔軟なシステム開発が可能。 WordPress（CMS）に精通していて、ニーズに合わせた柔軟なシステム開発が可能な上、こちらの要望を的確に理解してもらえたので、安心してお任せできました。 続きを読む 株式会社イルグルム 様 修正対応もとても迅速なので大変心強い存在です。 気になったことや修正したい点など、スプレットシートにまとめていけるのでとても効率的ですし、修正対応もとても迅速なので大変心強い存在です。 続きを読む お客様の声へ PRICEkintoneアプリ開発の価格 kintone環境内のみのアプリ開発 シンプルプラン 月額費用 20万円 サンプルアプリ開発 0円 半年間の無償サポート付き！ 最低契約期間：2か月 kintone環境内で完結するアプリやプラグインの開発を想定 月次定例会を開催し進捗のご報告やご要件変更の確認を実施 ChatworkもしくはBacklogを通じたコミュニケーションを随時実施 システム連携を含むアプリ開発 スタンダードプラン 月額費用 30万円 サンプルアプリ開発 0円 半年間の無償サポート付き！ 最低契約期間：2か月 kintone環境内や、Windowsデスクトップで動作するアプリを用いて他システム連携も含めた開発を想定 隔週で定例会を開催し進捗のご報告やご要件変更の確認を実施 ChatworkもしくはBacklogを通じたコミュニケーションを随時実施 クラウド環境も含めた独自開発 プレミアムプラン 月額費用 50万円〜 サンプルアプリ開発 0円 1年間の無償サポート付き！ 最低契約期間：3カ月 クラウドサーバが必要となるようなシステム連携や開発を含めた、kintoneアプリ／プラグイン開発を想定 毎週定例会を開催し、進捗のご報告やご要件変更の確認を実施 ChatworkもしくはBacklogを通じたコミュニケーションを随時実施 ※無償運用サポートでは設定や開発等はできず、構築したアプリに関するご質問の回答のみとなります。 ※表示価格は税別となります。 価格の詳細はお問合せください FLOWkintoneアプリ開発の流れ STEP 1 問合せと事前相談会 プロジェクトの詳細をお見積りフォームからお送りください。担当営業より事前相談会のご都合をお伺いしまして、担当ディレクタと共に詳細をお伺いいたします。※事前相談会は無料となりますので、ご注文前提でなくても構いません。 で相談お問い合わせ 03-6806-0354 （平日 10:00〜18:00） 03-6806-0354 STEP 2 サンプルアプリのご提案 頂いたご要件を元に、サンプルアプリを構築してご提案します。アプリを確認の上、ご注文書をお送りください。 STEP 3 アプリ開発 弊社にて開発作業を行います。 STEP 4 定例会の開催 開発中はオンライン定例会を開催いたします。日々出来上がっていくアプリを見て頂きながら進捗のご報告や、御要望の確認を行います。 STEP 5 ご納品・利用方法のレクチャー 完成したアプリを御社kintone環境へご納品いたします。また利用マニュアルのご案内や必要に応じてレクチャーを行い、運用開始をサポートいたします。 詳しい流れはお問合せ SERVICEkintoneアプリ開発のサービス一覧 アプリ構築 プラグイン開発 既存アプリのレビュー・改善サポート 他システムとの連携開発 kintone連携デスクトップアプリ開発 運用サポート WORKSkintoneアプリ開発の実績 ※協力会社様とのお取組みも含まれます。詳細は担当営業までお問い合わせください。 詳細はお問合せください FAQよくあるkintoneアプリ開発のご質問 他社の「伴走支援」や「定額開発」と何が違うのですか？ 一般的な伴走支援や定額開発は、準委任の契約となります。準委任契約では「作業時間を提供する契約」で、成果物やゴール達成は保証されません。弊社サービスは「成果保証型」であり、ご要望を達成するシステム開発を行います。 要件変更が出た場合、追加料金はかかりますか？ 変更内容に応じて「期間延長」または「期間内調整」をご提示します。費用が増える場合は必ず事前に明示し、**明朗会計で進められる**のが特長です。 開発が終わった後のサポートはありますか？ はい。無償運用サポートが付きます。運用中のトラブルやご質問はサポートチャンネルにて担当者が対応しますので、安心して使い続けることができます。 お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする --- - Published: 2025-07-24 - Modified: 2025-09-25 - URL: https://fastcoding.jp/aipolicy/ HOME 生成AI活用に関するポリシー Policy on the use of generative AI 生成AI活用に関するポリシー 株式会社ファストコーディング（以下、当社）では、経済産業省・総務省が策定した「AI事業者ガイドライン（第1. 0版）」に準拠した社内規程を整備し、AIの責任ある利活用を全社的に推進しています。 当社のすべての生成AI利用は、この社内規程に基づき、法令・倫理・顧客保護の観点から管理・運用されています。 当社では、社内規定に沿ったAIの利活用を、以下のとおり高い倫理観をもって行い、業務効率化およびお客様への高品質なサービスをご提供することをお約束します。 当社における生成AIの利活用方針 当社では、以下の業務およびそれに付随する業務において生成AIを補助ツールとして活用しています。 ・提案書や構成案の初期草案作成 ・社内FAQやマニュアルの文案整形・初期生成 ・プログラムコードのテンプレート生成 ・宣伝広告コンテンツのアイデア出しや文案生成、および言語校正 これらの活用にあたっては、必ず人間による確認・修正を経て、正確性と妥当性を担保しています。AIの出力内容が直接お客様に提供されることはありません。 セキュリティとプライバシー保護に関する対策 当社では、生成AI活用に伴うリスク（情報漏えい・誤情報・差別的出力等）を未然に防ぐため、以下の対策を実施しています。 1. 利用制限と申請制の徹底 ・生成AIの業務利用にあたっては、会社への事前申請が必須です。 ・社内で承認されていない生成AIサービスの利用は禁止されています。 2. 個人情報の入力禁止 ・要配慮個人情報や特定個人情報を含む一切の個人情報は、いかなる形式であってもAIに入力しません。 3. 利用サービスの事前確認と学習制御 利用予定の生成AIサービスは、サービス提供者の法人概要、プライバシーポリシー・利用規約等を精査の上、下記条件を満たしたもののみ採用します。 ・入力情報がモデル学習に使用されない明示的記載があること ・データが第三者と共有されない、もしくは共有をオプトアウト可能であること ・ISO規格、SOC2規格、もしくはそれに準ずる規格に則ったサービス運営がなされていること 責任ある生成AI活用を目指して 私たちは、生成AIをあくまで人間の創造性と知見を支援する「補助的ツール」として位置づけており、次の価値観をもって運用しています。 ・透明性：AI活用の業務と手段を社内外に明示 ・安全性：誤情報や倫理的懸念がある出力は必ず人間が制御 ・説明責任：生成AIを使ったプロセスや成果物について、必要に応じて顧客に説明可能な状態を維持 おわりに 生成AIの社会実装が進む中、私たち企業には「活用する責任」と「守る責任」の両立が求められます。 株式会社ファストコーディングは、お客様の信頼と安心を最優先に、安全・透明・責任あるAI活用文化を確立し続けることをお約束します。 ご不明な点や詳細な運用方針については、お気軽に当社までお問い合わせください。 付則 本ポリシーの準拠指針 本ポリシーは、以下の公的ガイドラインを踏まえて作成されています。 ・経済産業省・総務省「AI事業者ガイドライン（第1. 0版）」 ・個人情報保護委員会「生成AIサービスの利用に関する注意喚起」（2023年6月2日） ・日本産業規格「JIS X 9606（ISO/IEC 23894 準拠）」 制定:2025年7月24日 株式会社ファストコーディング 代表取締役 黒川 真吾 --- - Published: 2025-06-23 - Modified: 2025-06-23 - URL: https://fastcoding.jp/pdf/kyufusupport_proposal/ このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2024-11-02 - Modified: 2024-11-02 - URL: https://fastcoding.jp/calculator/ HOME オンライン自動見積り オンライン簡単自動お見積り 詳細をご入力いただきますと、概算金額が表示されます。 Japan 制作するページ数 必須 ページ ※確定していない場合は、おおよそ近い数字を入力してください。 デザインの種類 必須 レスポンシブサイトパソコンサイトスマホサイト ※ほとんどの場合で「レスポンシブサイト」になります。不明な場合は「レスポンシブサイト」をお選びください。 CMS機能（WordPress） カスタム投稿（ニュース・ブログ・インタビュー紹介等）カスタムフィールドお問い合わせフォームサイト内検索会員管理 ※WordPressによるCMS機能が必要な場合は選択してください。上記にない機能や、WordPress以外の実装も可能です。その場合はお問い合わせください 表示アニメーション（JavaScript） スライドショーカルーセルアコーディオンタブ切り替えライトボックススムーススクロールヘッダー固定ツールチップ1文字ずつ表示動的検索／絞り込み背景動画パララックスフルスクロールスクロールフェードイン数字カウントアップイメージマップInstagram埋め込みGoogleMap埋め込みYouTube埋め込みマーキー ※各機能の概要は価格ページをご覧ください。また上記にない機能の実装も可能です。その場合はお問い合わせください その他のご要望 コーディングガイドライン指定短納期対応サーバ公開代行既存サイト修正 ※上記に記載のないその他のご要望も、ほとんどの場合で対応可能です。詳細はお問い合わせください ※LPの場合は単価が異なりますのでお問合せください。※シミュレーションで表記されておりますお見積りはあくまで参考価格となります。条件や内容を加味して変動する場合もございますので詳しくはお問合せください。 正式な見積書が必要な場合は、以下より御社の情報をお送りください。すぐさまメールにてお送りいたします。 法人種別 必須 選択してください株式会社有限会社社団法人学校法人医療法人その他の法人（個人事業主以外） ※弊社は法人様向けにサービスをご提供しております。個人事業主を含む個人の方はご利用いただけませんので予めご了承ください。 法人名 必須 ご担当者名 必須 電話番号 必須 メールアドレス 必須 見積もりに関して追加のご要望があればご記入ください。 利用規約および個人情報の取り扱いにご同意いただいた方のみ、本サービスをご利用いただけます。 利用規約および個人情報の取り扱いに同意する var wpcf7Elm = document. querySelector( '. wpcf7' ); wpcf7Elm. addEventListener( 'wpcf7mailsent', function( event ) { var category = 'calculator'; location. href='/contact/complete/? category='+category+(fcAd ? '&ad='+fcAd : ''); }, false ); wpcf7Elm. addEventListener( 'wpcf7invalid', function( event ) { $('html, body'). animate({scrollTop:$('. wpcf7-response-output'). offset. top}); }, false ); ページ数とデザインの種類を選択してください ページ数とデザインの種類を選択してください --- - Published: 2024-10-15 - Modified: 2024-12-02 - URL: https://fastcoding.jp/price/md/ HOME コーディング代行の価格と納期（チームプラン） PRICE コーディングチームを依頼する場合の価格 プロジェクトが長期に及ぶ場合や、コーディングチームを構成したい場合はこちらのチームプラン（人月価格プラン）をご利用ください。 メンバー数 稼働月数 人月単価 合計価格 メンバースキル 人月単価 HTMLコーダー 200,000円/月から JavaScriptエンジニア（ページアニメーション制作） 300,000円/月から JavaScriptエンジニア(Vue. js, React, Angular, Node. js） 350,000円/月から WordPressエンジニア(PHP) 350,000円/月から ※メンバースキルの選定はプロジェクトの詳細をお伺いして決定します。※人月単価はメンバースキル毎に細かく異なります。詳細はお問い合わせください。 お見積もり例 コーポレートサイト（600ページ 期間3カ月） レスポンシブサイト（ブレイクポイント1つ）、WordPress、テンプレート数100、流し込みデータ500ページ お見積もり料金 HTMLコーダー（制作対応） 2名 × 1. 5カ月¥600,000 HTMLコーダー（並行修正対応） 1名 × 1カ月¥200,000 HTMLコーダー（流し込み対応） 1名 × 2カ月¥400,000 WordPressエンジニア 1名 × 1カ月¥350,000 ¥1,550,000（税別） サービス紹介サイト（150ページ 期間4カ月） レスポンシブサイト（ブレイクポイント1つ）、スクロールアニメーション、キービジュアルアニメーション お見積もり料金 HTMLコーダー（制作対応） 1名 × 4カ月¥800,000 HTMLコーダー（並行修正対応） 1名 × 1カ月¥200,000 JavaScriptエンジニア（ページアニメーション） 1名 × 1カ月¥300,000 ¥1,300,000（税別） Shopifyサイト（90ページ 期間1. 5カ月） レスポンシブサイト（ブレイクポイント1つ）、Shopify、ローディングアニメーション、スクロールアニメーション お見積もり料金 HTMLコーダー（制作対応） 3名 × 1カ月¥600,000 HTMLコーダー（並行修正対応） 1名 × 1カ月¥200,000 JavaScriptエンジニア（ページアニメーション） 1名 × 1カ月¥300,000 ¥1,100,000（税別） お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2024-09-11 - Modified: 2025-11-18 - URL: https://fastcoding.jp/price/ HOME コーディング代行の価格と納期 PRICE コーディング代行の価格と納期 創業以来ずっと！基本料金0円！シンプルな料金プランでご提供しています 料金設定は「ページ単価×ページ数」だけ。業界初のWordPressもJavaScriptもコミコミ価格。 ファストコーディングの料金設定はとてもシンプルです。通常コーディング料金には、基本料やプロジェクト管理費など目に見えない費用が含まれていますが、ファストコーディングでは全てのお客様に分かりやすい価格でご提供するため、その様な費用は一切いただいておりません。また業界初のWordPress制作も含まれた価格になっています。皆様に分かりやすい「ページ単価×ページ数」だけのシンプルな料金でご提供しております。 ※チーム単位でご利用いただくプランもございます。詳細はこちらをご覧ください。 コーディングページ数が多ければ多いほどお得に ページ数 ページ単価 合計価格 例えば・・・ レスポンシブ(リキッド込み) PC SP 8ページのご依頼なら 8,000 円/枚 6,000 円/枚 6,000 円/枚 15ページのご依頼なら 6,500 円/枚 5,000 円/枚 5,000 円/枚 23ページのご依頼なら 5,000 円/枚 4,000 円/枚 4,000 円/枚 36ページのご依頼なら 4,000 円/枚 3,000 円/枚 3,000 円/枚 ※LPの場合は単価が異なります。詳細はお問い合わせください。※修正対応は、ご依頼時点でのデザインや仕様に準ずる要件のみお引き受けします。尚、修正回数には制限があります。※デザインや仕様によっては、追加でお見積りする場合がございます。 なんと、WordPress制作は無料！ 投稿機能 フォーム機能 カスタムフィールド機能 ※10ページ以上のページ制作ご依頼の場合に適応されます。 ※プロジェクトの仕様や条件によっては別料金になる場合がございます。 ※対応可能なチーム数に限りがありますので、リソース状況を事前にお問合せください。 そして、JavaScriptやCSSのエフェクトもすべて無料！ スライドショー カルーセル アコーディオン タブ切り替え ライトボックス スムーススクロール ヘッダー固定 ツールチップ 1文字ずつ表示 動的検索／絞り込み 背景動画 パララックス フルスクロール スクロールフェードイン 数字カウントアップ イメージマップ GoogleMap埋め込み YouTube埋め込み マーキー ※プロジェクトの仕様や条件によっては別料金になる場合がございます。詳しくは担当ディレクタまでご相談ください。 さらに、修正や公開作業も無料！ 仮で設置されているテキストや画像の差し替え¥0 テキストや写真・背景画像等が仮の状態でご入稿いただいた場合も、本番データへの差し替えは無料です。 デザインの大きな変更を伴わない調整¥0 実際に出来上がったコーディングをパソコンやスマートフォンで見て気づく事もあるかと思います。その場合の修正も無料で対応いたします。 本番サーバへのアップロード・公開作業¥0 テスト環境や本番環境へのアップロード・公開作業もそのままお任せください。 ※プロジェクトの仕様や納期によっては無料で対応できない場合もございます。詳しくは担当ディレクタまでご相談ください。 そしてサイト運用も対応！ただいま3カ月間無料の運用プラン体験キャンペーン実施中！ テスト環境の継続利用 テスト環境として制作時の環境をそのままご利用いただけます。FTPアカウントもお渡しいたします。 テキストや画像の差し替え キービジュアル画像やニュース、会社の地図といった運用後におきる変更も、無料で対応します。 WordPressの利用サポート ブログ記事を投稿したい、メニューを変えたい、ユーザを追加したいといったWordPressの利用方法について、無償でサポートします。 WordPressのアップデート WordPress本体やプラグインのバージョンアップに伴うアップグレード作業も弊社で対応いたします。 ※プロジェクト着手時にお申し出が必要です。着手後は対応できない場合があります。※プロジェクトの仕様によっては無料で対応できない場合もございます。詳しくは担当ディレクタまでご相談ください。 お見積もり例 コーポレートサイト（15ページ） レスポンシブサイト（ブレイクポイント1つ）、WordPress、オプションなし、追加費用なし、標準ブラウザ保証、修正無制限 お見積もり料金 サイト基本料金 ¥0 レスポンシブコーディング ¥13,000 × 15P¥195,000 スライドショー ¥0 WordPressニュース投稿 ¥0 WordPressメールフォーム ¥0 WordPress固定ページ化 ¥0 ¥195,000（税別） キャンペーンサイト（22ページ） レスポンシブサイト（ブレイクポイント1つ）、簡易スクロールアニメーション、標準ブラウザ保証、修正無制限 お見積もり料金 サイト基本料金 ¥0 レスポンシブコーディング ¥10,000 × 22P¥220,000 スライドショー ¥0 簡易スクロールアニメーション ¥0 本番アップロード対応（弊社指定サーバの場合） ¥0 ¥220,000（税別） 採用サイト（32ページ） レスポンシブサイト（ブレイクポイント1つ）、スクロールアニメーション、標準ブラウザ保証、修正無制限 お見積もり料金 サイト基本料金 ¥0 レスポンシブコーディング ¥10,000 × 32P¥320,000 スライドショー ¥0 スクロールアニメーション ¥0 ¥320,000（税別） キャンペーンサイト（リキッド対応 10ページ） レスポンシブサイト（ブレイクポイント1つ）、リキッド対応、モーダルあり、標準ブラウザ保証、修正無制限 お見積もり料金 サイト基本料金 ¥0 レスポンシブコーディング ¥13,000 × 10P¥130,000 リキッド対応（50%） ¥80,000 WordPress固定ページ化 ¥0 ¥210,000（税別） ECサイト（レスポンシブコーディング 300ページ） レスポンシブサイト（ブレイクポイント1つ）、流し込みあり（流し込み用エクセルの支給必須）、モーダルあり、標準ブラウザ保証、修正無制限 お見積もり料金 サイト基本料金 ¥0 レスポンシブコーディング ¥10,000 × 50P¥500,000 流し込みコーディング ¥6,000 × 250P¥1,500,000 写真モーダル ¥0 ¥2,000,000（税別） コーポレートサイト（13ページ） レスポンシブサイト（ブレイクポイント2つ タブレット用デザイン入稿必須）、WordPress、標準ブラウザ保証、修正無制限 お見積もり料金 サイト基本料金 ¥0 レスポンシブコーディング ¥19,500 × 13P¥253,500 WordPressニュース投稿 ¥0 WordPressメールフォーム ¥0 WordPress固定ページ化 ¥0 ¥253,500（税別） お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2024-08-29 - Modified: 2025-08-23 - URL: https://fastcoding.jp/bcp/ HOME 事業継続計画(BCP) BUSINESS CONTINUITY PLAN 事業継続計画(BCP) ここでは、弊社の事業継続計画(BCP)をご紹介しております。昨今の日本国内における自然災害の多発、および激甚化に伴い、弊社では自然災害発生時の事業への影響を最小限に抑え、お客様に影響を与えない体制づくりに取り組むべく、事業継続計画(BCP)を策定しております。ご不明点がございましたらお問合せフォーム よりお問い合わせください。事業継続計画(BCP)のダウンロード --- - Published: 2024-08-22 - Modified: 2025-06-29 - URL: https://fastcoding.jp/document/javascript/ 「フロントエンド開発のご案内」の資料ダウンロード 弊社のフロントエンド開発の特長やメリットについてご案内しております。フロントエンド開発の外部化をお考えの方は、是非ご一読ください。こちらのフォームにご入力いただきますと、返信メールにて資料のダウンロードＵＲＬをお送りいたします。※お急ぎでしたらお電話でのご相談も可能です。お気軽にお問合せください。 東京 03-6806-0354 大阪 06-7878-8160 「フロントエンド開発のご案内」資料ダウンロード 必須会社名 必須お名前（姓） 必須お名前（名） 必須フリガナ（姓） 必須フリガナ（名） 必須メールアドレス 電話番号 見込み客のデータ元 -None- インバウンド荷電 アウトバウンド荷電 紹介（内部） 紹介（外部） Web見積り Web問合せ Web打合せ リスト購入 Chatwork問い合わせ 資料請求 詳細情報 「フロントエンド開発サービス」の資料請求 広告フラグ function validateEmail3177955000011950008 { var form = document. forms; var emailFld = form. querySelectorAll(''); var i; for (i = 0; i < emailFld. length; i++) { var emailVal = emailFld. value; if ((emailVal. replace(/^\\s+|\\s+$/g, '')). length ! = 0) { var atpos = emailVal. indexOf('@'); var dotpos = emailVal. lastIndexOf('. '); if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal. length) { alert('有効なメールアドレスを入力してください。 '); emailFld. focus; return false; } } } return true; } function checkMandatory3177955000011950008 { var mndFileds = new Array('Company', 'First Name', 'Last Name', 'Email', 'LEADCF2', 'LEADCF3'); var fldLangVal = new Array('\\u4F1A\\u793E\\u540D', '\\u540D', '\\u59D3', '\\u30E1\\u30FC\\u30EB\\u30A2\\u30C9\\u30EC\\u30B9', '\\u30D5\\u30EA\\u30AC\\u30CA\\u59D3', '\\u30D5\\u30EA\\u30AC\\u30CA\\u540D'); for (i = 0; i < mndFileds. length; i++) { var fieldObj = document. forms\]; if (fieldObj) { if (((fieldObj. value). replace(/^\\s+|\\s+$/g, '')). length == 0) { if (fieldObj. type == 'file') { alert('アップロードするファイルを選択してください。'); fieldObj. focus; return false; } alert(fldLangVal + ' は入力必須です。'); fieldObj. focus; return false; } else if (fieldObj. nodeName == 'SELECT') { if (fieldObj. options. value == '-None-') { alert(fldLangVal + ' は入力必須です。'); fieldObj. focus; return false; } } else if (fieldObj. type == 'checkbox') { if (fieldObj. checked == false) { alert('Please accept ' + fldLangVal); fieldObj. focus; return false; } } try { if (fieldObj. name == 'Last Name') { name = fieldObj. value; } else if (fieldObj. name == 'LEADCF2' || fieldObj. name == 'LEADCF3') { const katakanaRegex = /^+$/; if(! katakanaRegex. test(fieldObj. value)) { alert(fldLangVal + ' はカタカナで入力してください。'); fieldObj. focus; return false; } } } catch (e) {} } } trackVisitor3177955000011950008; if(! validateEmail3177955000011950008){return false;} var urlparams = new URLSearchParams(window. location. search); if (urlparams. has('service') && (urlparams. get('service') === 'smarturl')) { var webform = document. getElementById('webform3177955000011950008'); var service = urlparams. get('service'); var smarturlfield = document. createElement('input'); smarturlfield. setAttribute('type', 'hidden'); smarturlfield. setAttribute('value', service); smarturlfield. setAttribute('name', 'service'); webform. appendChild(smarturlfield); } document. querySelector('. crmWebToEntityForm . formsubmit'). setAttribute('disabled', true); } function tooltipShow3177955000010450012(el) { var tooltip = el. nextElementSibling; var tooltipDisplay = tooltip. style. display; if (tooltipDisplay == 'none') { var allTooltip = document. getElementsByClassName('zcwf_tooltip_over'); for (i = 0; i < allTooltip. length; i++) { allTooltip. style. display = 'none'; } tooltip. style. display = 'block'; } else { tooltip. style. display = 'none'; } } var $zoho= $zoho || {};$zoho. salesiq = $zoho. salesiq || {widgetcode:'siq5ec4f1b9c63100030343042abc3a04c3', values:{},ready:function{}};var d=document;s=d. createElement('script');s. type='text/javascript';s. id='zsiqscript';s. defer=true;s. src='https://salesiq. zoho. com/widget';t=d. getElementsByTagName('script');t. parentNode. insertBefore(s,t);function trackVisitor3177955000011950008{try{if($zoho){var LDTuvidObj = document. forms;if(LDTuvidObj){LDTuvidObj. value = $zoho. salesiq. visitor. uniqueid;}var firstnameObj = document. forms;if(firstnameObj){name = firstnameObj. value +' '+name;}$zoho. salesiq. visitor. name(name);var emailObj = document. forms;if(emailObj){email = emailObj. value;$zoho. salesiq. visitor. email(email);}}} catch(e){}} --- - Published: 2024-07-14 - Modified: 2025-06-29 - URL: https://fastcoding.jp/document/benefit/ 「コーディング代行の強み」の資料ダウンロード 制作会社とコーディング代行会社って何が違うのでしょうか？またどうやって良いコーディング代行会社を選べばいいでしょうか？そんなお悩みにお答えする資料をご用意しましたので、是非ご一読ください。こちらのフォームにご入力いただきますと、返信メールにて資料のダウンロードＵＲＬをお送りいたします。※お急ぎでしたらお電話でのご相談も可能です。お気軽にお問合せください。 東京 03-6806-0354 大阪 06-7878-8160 コーディング代行の強み 必須会社名 必須お名前（姓） 必須お名前（名） 必須メールアドレス 電話番号 見込み客のデータ元 -None- インバウンド荷電 アウトバウンド荷電 紹介（内部） 紹介（外部） Web見積り Web問合せ Web打合せ リスト購入 Chatwork問い合わせ 資料請求 詳細情報 「コーディング代行の強み」の資料請求 広告フラグ function validateEmail3177955000011436008 { var form = document. forms; var emailFld = form. querySelectorAll(''); var i; for (i = 0; i < emailFld. length; i++) { var emailVal = emailFld. value; if ((emailVal. replace(/^\\s+|\\s+$/g, '')). length ! = 0) { var atpos = emailVal. indexOf('@'); var dotpos = emailVal. lastIndexOf('. '); if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal. length) { alert('有効なメールアドレスを入力してください。 '); emailFld. focus; return false; } } } return true; } function checkMandatory3177955000011436008 { var mndFileds = new Array('Company', 'First Name', 'Last Name', 'Email'); var fldLangVal = new Array('\\u4F1A\\u793E\\u540D','\\u540D','\\u59D3','\\u30E1\\u30FC\\u30EB\\u30A2\\u30C9\\u30EC\\u30B9','\\u30D5\\u30EA\\u30AC\\u30CA\\u59D3','\\u30D5\\u30EA\\u30AC\\u30CA\\u540D'); for (i = 0; i < mndFileds. length; i++) { var fieldObj = document. forms\]; if (fieldObj) { if (((fieldObj. value). replace(/^\\s+|\\s+$/g, '')). length == 0) { if (fieldObj. type == 'file') { alert('アップロードするファイルを選択してください。'); fieldObj. focus; return false; } alert(fldLangVal + ' は入力必須です。'); fieldObj. focus; return false; } else if (fieldObj. nodeName == 'SELECT') { if (fieldObj. options. value == '-None-') { alert(fldLangVal + ' は入力必須です。'); fieldObj. focus; return false; } } else if (fieldObj. type == 'checkbox') { if (fieldObj. checked == false) { alert('Please accept ' + fldLangVal); fieldObj. focus; return false; } } try { if (fieldObj. name == 'Last Name') { name = fieldObj. value; } else if (fieldObj. name == 'LEADCF2' || fieldObj. name == 'LEADCF3') { const katakanaRegex = /^+$/; if(! katakanaRegex. test(fieldObj. value)) { alert(fldLangVal + ' はカタカナで入力してください。'); fieldObj. focus; return false; } } } catch (e) {} } } trackVisitor3177955000011436008; if(! validateEmail3177955000011436008){return false;} var urlparams = new URLSearchParams(window. location. search); if (urlparams. has('service') && (urlparams. get('service') === 'smarturl')) { var webform = document. getElementById('webform3177955000010450012'); var service = urlparams. get('service'); var smarturlfield = document. createElement('input'); smarturlfield. setAttribute('type', 'hidden'); smarturlfield. setAttribute('value', service); smarturlfield. setAttribute('name', 'service'); webform. appendChild(smarturlfield); } document. querySelector('. crmWebToEntityForm . formsubmit'). setAttribute('disabled', true); } function tooltipShow3177955000011436008(el){ var tooltip = el. nextElementSibling; var tooltipDisplay = tooltip. style. display; if(tooltipDisplay == 'none'){ var allTooltip = document. getElementsByClassName('zcwf_tooltip_over'); for(i=0; i --- - Published: 2024-06-02 - Modified: 2025-07-28 - URL: https://fastcoding.jp/pdf/fastsubmit_proposal/ このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2024-05-15 - Modified: 2024-05-15 - URL: https://fastcoding.jp/webvital/overview/ ご提供するコアウェブバイタル対策の概要 まず対策をするのは、具体的な方針が示されている「改善できる項目」からとなります。続いて「診断」に示されている、不合格だった監査項目について対応することで、おおよそ80点以上のPageSpeedスコアを獲得することが可能です。 指標の見方はこちら ※ ここにあるのは一例です。実際にはHTMLやCSSの構造、JavaScriptによるアニメーションの状況に応じて、より効果を発揮する施策から順に実施いたします。 課題 CSS の最小化 対策 ミニファイと呼ばれるファイル圧縮を行います。 課題 適切なサイズの画像 対策 ビューポート（表示領域の大きさ）に合わせて適切な解像度に調整した画像を利用するようにHTMLやCSSを編集します。 課題 使用していないCSSを削除 対策 利用していないエントリーを削除します。またページ毎に必要最低限なCSSのみを利用するといったファイル構造の変更も効果を発揮します。 課題 テキスト圧縮の有効化 対策 HTTP通信上の圧縮（gzip, deflate等）を設定します。主にサーバー設定の調整となります。 課題 サーバーの応答時間が遅い 対策 主にサーバー設定、またはバックエンド側スクリプト（PHP、Java等）を調整します。 課題 複数ページリダイレクトの回避 対策 リダイレクトは増えれば増えるほど速度低下を招きます。基本的にはリダイレクトを解除します。 課題 Webフォント読み込み中の全テキスト表示 対策 Webフォントを利用する場合に、フォントデータが読み込まれるまでの表示フォントを指定します。 課題 オフスクリーン画像の遅延読み込み 対策 ファーストビュー以下の要素に存在する画像の読み込みを遅延させます。lazyload等のプラグインを利用します。 課題 次世代フォーマットでの画像の配信 対策 画像フォーマット自体を次世代フォーマットに変更する場合、一部のブラウザで表示できなくなることがあります。対応したいブラウザによって対応を判断します。 課題 効率的な画像フォーマット 対策 画像ファイル自体のファイルサイズを縮小するよう可逆圧縮／非可逆圧縮等を行います。 課題 レンダリングを妨げるリソースの除外 対策 主にファーストビュー内に含まれるCSSやJavaScriptによる画面描画要素のインライン化、より高速に処理できる手法への置き換え等を行います。 課題 メインスレッド処理の最小化 対策 CSSやJavaScriptによる効果を、より高速に処理できる手法へ置き換えたり、削減します。 TOPページに戻る 指標の見方はこちら Contact 電話で問合せ 03-6806-0354 フォームで問合せ お問合せフォーム CODING SAMPLE 弊社では通常PUG/SASSを用いてコーディングを行います。コーディングルールが必要な場合はお問合せ下さい。 サンプルサイト1 サンプルサイト2 サンプルサイト3 コーディング実績へ OFFICE TOKYO 03-6806-0354 〒101-0021 東京都千代田区外神田6-11-16 GMビル5階 OSAKA 06-7878-8160 〒541-0044 大阪市中央区伏見町4-4-9 淀屋橋東洋ビル3階 --- - Published: 2024-05-15 - Modified: 2024-05-15 - URL: https://fastcoding.jp/webvital/overview/kpi/ 指標の見かた 01 フィールドデータ FCPもFIDも、共に、GoogleChromeを利用しているユーザから得られた情報を元に算出・比較され、「早い」「遅い」「平均」という３つのグループに分類されて表示されます。この指標は先の通り、GoogleChromeの利用者からの情報を元に算出されるため、十分な情報が得られない限りは表示がされません。 例えばGoogle検索（https://www. google. co. jp）はもちろん、トヨタ（https://toyota. jp）、本田技研工業（https://www. honda. co. jp/）といった著名企業、首相官邸（https://www. kantei. go. jp/）やJR（https://www. jreast. co. jp/）といった行政や公共交通機関等の広く知られているサイトでは表示されます。 FCPとは ? First Contentful Paintの略で、対象サイトへのアクセス開始からDOM要素の表示開始時点までの時間となります。大まかに表現すれば、JavaScriptやCSSアニメーション等のエフェクトを除いた、最低限のページを表示するための準備が整うまでの時間、ということになります。 FIDとは ? First Input Delayの略で、対象サイトにおいて、何かしらのユーザ操作（リンクをクリック、ボタンをタップ、JavaSciptを用いた操作等）が行われてから反応が返ってくるまでの時間となります。 02 ラボデータ Lighthouseで得られたデータを元に、以下の 6つの指標 が表示されます。フィールドデータと同じように、各指標が「早い」「遅い」「平均」に色分けして表示されます。 1 コンテンツの初回ペイント（First Contentful Paint） アクセス開始からDOM要素の表示開始時点までの時間 2 意味のあるコンテンツの初回ペイント（First Meaningful Paint） アクセスを開始してから、最初の要素（いわゆるファーストビューや“Above the fold”と呼ばれる領域に表示される要素）の表示が完了するまでの時間 3 速度インデックス（Speed Index） アクセスを開始してから、ページが表示されるまでの時間（単位は秒だが、指標化されているため実測値とは異なる） 4 CPUの初回アイドル（First CPU Idle） アクセスを開始してから、ページに対する操作（入力、スクロールダウン、ホバーのアニメーション等）をブラウザが遅延なく受け付けることが出来るようになるまでの時間 5 インタラクティブになるまでの時間（Time to Interactive） アクセスを開始してから、ページを完全に読み込み、表示し終わるまでの時間 6 最大推定FID（Max Potential First Input Delay） 何かしらのユーザ操作（リンクをクリック、ボタンをタップ、JavaSciptを用いた操作等）が行われてから反応が帰ってくるまでの時間の内、もっとも長い時間※わかりやすくするため、一部簡約している箇所があります 03 監査 Lighthouseでの監査結果から得られた、具体的な問題点や対策がここに表示されます。監査では以下 ３つに区分け されて表示されます 1 改善できる項（Opportunities） PageSpeed Insightsのスコアを上げるために効果のある、具体的な施策が表示されます。高スコアを目指すために、最初に対応する施策となります。 2 診断（Diagnostics） 対象ページがWeb開発のベストプラクティスにどのように準拠しているかが表示されます。あくまでPageSpeed Insightsのスコアにおいての、ベストプラクティスという見方が良いかと思います（ここで監査項目があるからといって、実際の表示やユーザ体験に影響を及ぼしているとはいいきれません） 3 合格した監査（Passed Audits） 合格した監査項目になります。ここは対応する必要はありません。 TOPページに戻る 施策の一例を見る Contact 電話で問合せ 03-6806-0354 フォームで問合せ お問合せフォーム CODING SAMPLE 弊社では通常PUG/SASSを用いてコーディングを行います。コーディングルールが必要な場合はお問合せ下さい。 サンプルサイト1 サンプルサイト2 サンプルサイト3 コーディング実績へ OFFICE TOKYO 03-6806-0354 〒101-0021 東京都千代田区外神田6-11-16 GMビル5階 OSAKA 06-7878-8160 〒541-0044 大阪市中央区伏見町4-4-9 淀屋橋東洋ビル3階 --- - Published: 2024-05-15 - Modified: 2025-06-29 - URL: https://fastcoding.jp/document/beginner/ 「初めてのコーディング代行」の資料ダウンロード コーディング代行のご利用が初めての方や、これから利用を検討している方など、「初めてのコーディング代行」をお考えの方は、是非ご一読ください。こちらのフォームにご入力いただきますと、返信メールにて資料のダウンロードＵＲＬをお送りいたします。※お急ぎでしたらお電話でのご相談も可能です。お気軽にお問合せください。 東京 03-6806-0354 大阪 06-7878-8160 初めてのコーディング代行 必須会社名 必須お名前（姓） 必須お名前（名） 必須メールアドレス 電話番号 見込み客のデータ元 -None- インバウンド荷電 アウトバウンド荷電 紹介（内部） 紹介（外部） Web見積り Web問合せ Web打合せ リスト購入 Chatwork問い合わせ 資料請求 詳細情報 「初めてのコーディング代行」の資料請求 広告フラグ function validateEmail3177955000010450012 { var form = document. forms; var emailFld = form. querySelectorAll(''); var i; for (i = 0; i < emailFld. length; i++) { var emailVal = emailFld. value; if ((emailVal. replace(/^\\s+|\\s+$/g, '')). length ! = 0) { var atpos = emailVal. indexOf('@'); var dotpos = emailVal. lastIndexOf('. '); if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal. length) { alert('有効なメールアドレスを入力してください。 '); emailFld. focus; return false; } } } return true; } function checkMandatory3177955000010450012 { var mndFileds = new Array('Company', 'First Name', 'Last Name', 'Email'); var fldLangVal = new Array('\\u4F1A\\u793E\\u540D', '\\u540D', '\\u59D3', '\\u30E1\\u30FC\\u30EB\\u30A2\\u30C9\\u30EC\\u30B9', '\\u30D5\\u30EA\\u30AC\\u30CA\\u59D3', '\\u30D5\\u30EA\\u30AC\\u30CA\\u540D'); for (i = 0; i < mndFileds. length; i++) { var fieldObj = document. forms\]; if (fieldObj) { if (((fieldObj. value). replace(/^\\s+|\\s+$/g, '')). length == 0) { if (fieldObj. type == 'file') { alert('アップロードするファイルを選択してください。'); fieldObj. focus; return false; } alert(fldLangVal + ' は入力必須です。'); fieldObj. focus; return false; } else if (fieldObj. nodeName == 'SELECT') { if (fieldObj. options. value == '-None-') { alert(fldLangVal + ' は入力必須です。'); fieldObj. focus; return false; } } else if (fieldObj. type == 'checkbox') { if (fieldObj. checked == false) { alert('Please accept ' + fldLangVal); fieldObj. focus; return false; } } try { if (fieldObj. name == 'Last Name') { name = fieldObj. value; } else if (fieldObj. name == 'LEADCF2' || fieldObj. name == 'LEADCF3') { const katakanaRegex = /^+$/; if(! katakanaRegex. test(fieldObj. value)) { alert(fldLangVal + ' はカタカナで入力してください。'); fieldObj. focus; return false; } } } catch (e) {} } } trackVisitor3177955000010450012; if (! validateEmail3177955000010450012) { return false; } var urlparams = new URLSearchParams(window. location. search); if (urlparams. has('service') && (urlparams. get('service') === 'smarturl')) { var webform = document. getElementById('webform3177955000010450012'); var service = urlparams. get('service'); var smarturlfield = document. createElement('input'); smarturlfield. setAttribute('type', 'hidden'); smarturlfield. setAttribute('value', service); smarturlfield. setAttribute('name', 'service'); webform. appendChild(smarturlfield); } document. querySelector('. crmWebToEntityForm . formsubmit'). setAttribute('disabled', true); } function tooltipShow3177955000010450012(el) { var tooltip = el. nextElementSibling; var tooltipDisplay = tooltip. style. display; if (tooltipDisplay == 'none') { var allTooltip = document. getElementsByClassName('zcwf_tooltip_over'); for (i = 0; i < allTooltip. length; i++) { allTooltip. style. display = 'none'; } tooltip. style. display = 'block'; } else { tooltip. style. display = 'none'; } } var $zoho = $zoho || {}; $zoho. salesiq = $zoho. salesiq || { widgetcode: 'siq5ec4f1b9c63100030343042abc3a04c3', values: {}, ready: function {} }; var d = document; s = d. createElement('script'); s. type = 'text/javascript'; s. id = 'zsiqscript'; s. defer = true; s. src = 'https://salesiq. zoho. com/widget'; t = d. getElementsByTagName('script'); t. parentNode. insertBefore(s, t); function trackVisitor3177955000010450012 { try { if ($zoho) { var LDTuvidObj = document. forms; if (LDTuvidObj) { LDTuvidObj. value = $zoho. salesiq. visitor. uniqueid; } var firstnameObj = document. forms; if (firstnameObj) { name = firstnameObj. value + ' ' + name; } $zoho. salesiq. visitor. name(name); var emailObj = document. forms; if (emailObj) { email = emailObj. value; $zoho. salesiq. visitor. email(email); } } } catch (e) {} } --- - Published: 2024-03-28 - Modified: 2025-04-17 - URL: https://fastcoding.jp/securitypolicy/ HOME 情報セキュリティ方針 INFORMATION SECURITY POLICY 情報セキュリティ方針 株式会社ファストコーディング（以下、当社）は、当社の情報資産、並びにお客様からお預かりした情報資産を事故・災害・犯罪などの脅威から守り、お客様ならびに社会の信頼に応えるべく、以下の方針に基づき全社で情報セキュリティに取り組みます。また弊社は情報セキュリティマネジメントシステムにおける国際規格であるISMS(ISO/IEC 27001:2022)を認証取得しております。詳細はこちらをご覧ください。 1. 経営者の責任 当社は、経営者主導で組織的かつ継続的に情報セキュリティの改善・向上に努めます。 2. 社内体制の整備 当社は、情報セキュリティの維持及び改善のために組織を設置し、情報セキュリティ対策を社内の正式な規則として定めます。 3. 従業員の取組み 当社の従業員は、情報セキュリティのために必要とされる知識、技術を習得し、情報セキュリティへの取り組みを確かなものにします。 4. 法令及び契約上の要求事項の遵守 当社は、情報セキュリティに関わる法令、規制、規範、契約上の義務を遵守するとともに、お客様の期待に応えます。 5. 違反及び事故への対応 当社は、情報セキュリティに関わる法令違反、契約違反及び事故が発生した場合には適切に対処し、再発防止に努めます。 制定日:2024年3月14日株式会社ファストコーディング代表取締役 黒川 真吾 --- - Published: 2024-02-20 - Modified: 2025-05-19 - URL: https://fastcoding.jp/features/seo/ HOME コーディング代行サービスの特長 SEO対策に強いHTMLコーディング代行 SEO FRIENDLY AIO対策やSEO対策に強いHTMLコーディングとは セマンティックコーディング 構造化データ コアウェブバイタル対策 実際に受注したプロジェクトの一例 オンライン見積 AIやSEOに強いHTMLコーディングAIO/SEO FRIENDLY セマンティックコーディング 構造化データ コアウェブバイタル対策 01 AIやSEO対策に強いHTMLコーディングとは WEBサイト制作を行う上で、最も重要な施策の一つが、検索エンジンでランキング上位を目指すSEO対応や、AIにインデックスされやすくする、いわゆるAIOへの対応です。検索エンジンやAIはサイトに記載されているコンテンツを読み取り、利用者のニーズによりマッチするサイトを紹介しますが、その助けとなるのが、HTMLコーディングにおける「AIO・SEO」対策です。弊社が行っている「AIやSEOに強いHTMLコーディング」を作るためのノウハウの一部をご紹介いたします。 1 セマンティックコーディング セマンティックとは、ウェブの情報を、コンピューター自身が理解しやすいように、HTMLタグに意味を持たせることです。HTML5では、HTMLタグを本来の定義づけに利用するため、いくつかのタグ定義が追加されました。header,footer,nav,article,aside 等がその一例です。過去のHTMLとの後方互換性も残しつつ、データ量が増えている現状のインターネットにおいて、意味づけに重点を置いた定義を行い、コンピュータの理解できるインターネットを作ろうというメッセージが含まれているのではないかと思います。弊社ではこのHTML5で導入されたHTMLタグを利用して文章の意味／構造を明確にし、しかしながら表現の自由度は損なわないようCSSやJavaScriptを用いてWebページを実装する「セマンティックコーディング」を基本としております。 検索エンジンが読み取りやすいコード SEMで重要となるターゲットキーワードに合致しやすい最適なマークアップ セマンティックコーディングされたHTMLの「わかりやすさ」は、例えばCSSや画像表示を無効化すると一目瞭然です。Webサイトが見出し、小見出し、本文とその付録、といった形で定義されていることがわかります。見た目の装飾は一切ありませんが、文章自体を理解するには逆に読みやすいと思われないでしょうか？実際、検索エンジンはこの状態のWebページを見ています。ここから見出しや要約文、ナビゲーション情報などを抜き出して検索結果に表示をしているわけです。 2 構造化データ HTML5によるセマンティックコーディングの導入により、検索エンジンは今まで以上にサイトコンテンツを知ることができるようになりました。しかしながらまだ完全とは言えません。HTMLを用いて個々の文や節に意味づけをすることはできますが、ページ全体を要約し、何のトピックについて書かれているかを明らかにすることは困難です。そこで考え出されたのが構造化データです。以前よりmetaタグというものがありましたが、metaというのは、その情報に関する補足情報を意味します。これを用いて、例えばFacebookでシェアされたときの画像はこれにする、このページの作者は誰々である等の、Webページに対する補足情報を追加しようというのが構造化データです。 この付加情報を、metaタグやmicrodata、JSON-LDといったHTMLタグの派生形式で記述することで、より細かな定義づけができるようになりました。その中でももっとも有名なフォーマットが、Google、Microsoft、Yahooの3社が共同で提供しているScheme. orgという構造化データなります。 構造化データが複雑になるにつれて、セクションや大括弧や中括弧は増えていく 構造化データは予め定義された「vocabulary 」を用いて、ページ内の情報をカテゴライズすることができます。vocabulary の定義は一律で行われているため、検索エンジンは構造化タグを通じてページをまとめ上げる（マッシュアップ）することができるようになります。弊社では構造化タグの設定を推奨しております。多種多様なvocabulary の中から、お客様のサイトに合う構造化タグを選んで実装をいたします。 3 コアウェブバイタル対策 サイトの表示速度が遅ければ、ユーザは確実に離脱します。以前はサーバやインターネット回線といったインフラの影響が大きくありましたが、現代では単にサーバやインターネット回線の速度を早くするだけでは、早いとはいえません。Googleはコアウェブバイタルという指標を用いてサイトの速度指標を評価していますが、HTMLコーディングや、CSSの構造、JavaScriptの処理方法を最適化しなければ、良い評価を得ることはできません。弊社では制作時のページスピード確認や、既存サイトのコアウェブバイタル対策を行っています。 PageSpeed Insightsで表示速度を評価 ※WordpressやCMS実装を行う場合、コアウェブバイタル対策を行うことで運用方法が変わるため、ご指示いただいた場合のみ対応としております。 02 過去にご注文いただいたプロジェクトの一例 01 コーポレートサイト（15ページ） プロジェクト内容 レスポンシブサイト（ブレイクポイント1つ）、WordPress、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥ 0 レスポンシブコーディング ¥13,000 × 15P ¥195,000 スライドショー ¥ 0 WordPress（10P以上無料） ¥ 0 ¥195,000 (税別) 02 キャンペーンサイト（22ページ） プロジェクト内容 レスポンシブサイト（ブレイクポイント1つ）、簡易スクロールアニメーション、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥ 0 レスポンシブコーディング ¥10,000 × 22P ¥220,000 スライドショー ¥ 0 簡易スクロールアニメーション ¥ 0 ¥220,000 (税別) 03 採用サイト（32ページ） プロジェクト内容 レスポンシブサイト（ブレイクポイント1つ）、スクロールアニメーション、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥ 0 レスポンシブコーディング ¥10,000 × 32P ¥320,000 スライドショー ¥ 0 スクロールアニメーション ¥ 40,000 ¥360,000 (税別) 04 ECサイト（スマホコーディングのみ 300ページ） プロジェクト内容 スマホサイト、流し込みあり、モーダルあり、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥ 0 スマホコーディング ¥5,000 × 50P ¥250,000 流し込みコーディング ¥2,500 × 250P ¥625,000 写真モーダル ¥ 0 ¥875,000 (税別) ※御用件やスケジュールによっては、異なる御見積になる場合もございます。 --- - Published: 2022-10-19 - Modified: 2025-11-01 - URL: https://fastcoding.jp/ 制作会社/システム開発会社/広告代理店の皆さま フロントエンドに、とても強い HTML/CSS React Vue. js kintoneアプリ Salesforce HubSpot WordPress HeartCore MovableType Adobe Experience Manager 私たちはフロントエンド技術を使って、全てのITプロジェクトをご支援する、フロントエンド専門の開発会社です。 制作会社/システム開発会社/広告代理店の皆さま 効果の上がるWEBサイト制作 WordPress Shopify Vue. js Angular React jQuery CSS HTML PHP 私たちはAIやSEOに強い、効果の上がるサイト作りをする、コーディング代行の会社です。 リピート率 96% 取引企業様 2900 社以上 安全・安心のセキュリティISMS認証/Pマーク取得済み企業です。 多数の実績あり！ SERVICESファストコーディングの主なサービス デザインを忠実に再現するコーディングから、kintone・Salesforce・HubSpot・Shopifyといった各種SaaSのテーマ開発・連携まで。あらゆるITプロジェクトにおいて、ビジネスを前進させるフロントエンド開発を提供します。 10年を超える実績 コーディング代行 AIやSEO対策に必須となるセマンティックコーディングを構造化タグ付きでご納品します。また表示速度向上のためのページスピード対策も実施しています。 詳しく見る ReactとVue. jsの専門家 JavaScript開発 ReactやVue. jsによるフロントエンド開発の専門家が御社のプロジェクトをご支援します。Node. jsによるバックエンドも含めたフルスタック開発も対応しています。 詳しく見る 成果が出る定額開発 kintoneアプリ開発 サンプルアプリで事前にお試しいただける、kintoneアプリやプラグインの定額開発サービスをご提供しています。 詳しく見る テーマ／プラグイン WordPress制作 WordPressのテーマ制作やプラグイン開発対応を行っています。また既存WordPressの速度向上チューニングやトラブル対応もお任せください。 詳しく見る ADVANTAGEコーディング代行・フロントエンド開発の強み AIとSEOに強い HTMLコーディング代行 AIやSEOに強いサイト制作が得意です。セマンティックコーディングや構造化データの実装、ページスピードスコア高得点のHTMLを必ず納品します。 詳しく見る 論理的に美しいコード フロントエンド開発 フロントエンドに特化した独自の設計方法で、React/Vue. js/Angularを用いたフロントエンド開発をいたします。 詳しく見る 業界10年以上の 豊富な実績 現在、お取引き企業様数は2,700社以上、プロジェクト数4,400以上、通算33,000ページ以上の制作を実施しております。 詳しく見る VOICEコーディング代行・フロントエンド開発を行ったお客様の声 ご利用いただいた感想をお聞きしました 株式会社大都 様 価格がシンプルで安く、納品も早い上に、SEO対策もできる。 料金体系がシンプルで安く、納品が早いことに加えて、セマンティックコーディングでSEO対策も出来ました。何より、思い描いたデザイン通りにコーディングしてもらえたのが最高でした。 続きを読む 株式会社イルグルム 様 修正対応もとても迅速なので大変心強い存在です。 気になったことや修正したい点など、スプレットシートにまとめていけるのでとても効率的ですし、修正対応もとても迅速なので大変心強い存在です。 続きを読む 株式会社マトリックス・オーガナイゼーション 様 システムを含めた複雑なサイト構築まで親身に相談 ともするとクライアント都合で進行がルーズになりがちですが、とてもきっちりと管理していただけて恐縮です。また進行管理を共有するシステムをとっており、進捗が分かりやすく助かります。 続きを読む 株式会社MAGES. 様 顧客ニーズに合わせた柔軟なシステム開発が可能。 WordPress（CMS）に精通していて、ニーズに合わせた柔軟なシステム開発が可能な上、こちらの要望を的確に理解してもらえたので、安心してお任せできました。 続きを読む お客様の声へ PRICEコーディング代行の価格 基本料金0円！シンプルなコーディング代行料金 ページ数 ページ単価 合計価格 ページ数 レスポンシブ PC・SP 1 ～ -10p 8,000円/ページ 6,000円/ページ 11 ～ -20p 6,500円/ページ 5,000円/ページ 21 ～ -30p 5,000円/ページ 4,000円/ページ 31p～ 要相談 要相談 ※ページ単価は縦の長さが2,500pxまでを想定しております。それ以上長い場合は別途お見積りとなります。※Wordpressの固定ページ化は10ページ以上のプロジェクトで無料となります。投稿機能、フォーム機能については別途ご相談ください。※ご案件の内容よっては、追加でお見積りする場合がございます。 コーディングページ数が多ければ多いほどお得に 価格の詳細・お見積もり例へ 価格の詳細へ FLOWコーディング代行の流れ ご利用方法は５ステップ。迅速に対応いたします！ STEP1. 2. 4はお客様フローになります。 STEP1 問合せと事前相談会 プロジェクトの詳細をお見積りフォームからお送りください。担当営業より事前相談会のご都合をお伺いしまして、担当ディレクタと共に詳細をお伺いいたします。その後お見積りURLをお送りいたしますのでご検討ください。※事前相談会は無料となりますので、ご注文前提でなくても構いません。 STEP2 データ入稿 デザインデータやサイトマップ等をご入稿いただきます。 STEP3 コーディング 弊社にてHTMLコーディング制作を行います。 STEP4 テスト確認・調整 弊社で準備するテストサーバー上で確認いただきます。調整事項があればお教えください。 STEP5 本番納品 ZIPファイルにてご納品いたします。本番サーバへのアップロードをご希望の場合はお申し付けください。 詳しい流れはこちら DELIVERY TIMEリアルタイム納期 2025年11月〜 ページ数ごとの納期はこちらをご確認ください ご注文 本日 11/1 (日) 11/2 (月) 11/3 (火) 11/4 (水) 11/5 (木) 11/6 10ページ納品日 (金) 11/7 (土) 11/8 (日) 11/9 (月) 11/10 (火) 11/11 20ページ納品日 (水) 11/12 (木) 11/13 ※前営業日のリソース状況を元に算出した目安の納期となります。実際の納期はお問い合わせください。※連休前は、依頼が立て込みますので、余裕を持ってご依頼いただけますと幸いです。※祝日や、弊社休業日を挟む場合は納品日が異なります。詳細はお問い合わせください。 SERVICEコーディング代行のサービス一覧 コーディング関連は全ておまかせ！ レスポンシブコーディング代行 WordPress制作 JavaScriptアニメーション JavaScriptフロントエンド開発 ページスピード対応 ウェブバイタル対策 PC/SPコーディング代行 リキッドコーディング代行 ECサイト構築 多言語サイト制作 大量ページコーディング代行 メディアサイト制作 リフレッシュコーディング代行 Webアクセシビリティ対応 常時SSL化対応 サービス一覧へ WORKSコーディング代行・フロントエンド開発の実績 業界10年以上の実績と技術力で選ばれています お取引き企業様数（総計） 3,100社 合計コーディング代行プロジェクト数 5,277PJ 合計コーディング数 37,507枚 リピート率 99. 2% 世界のオフィス数 4箇所 創立2012年 業界13年 実績の詳細はこちら QUALITYコーディング代行・フロントエンド開発のサービス詳細 Pug/SASS標準対応 料金体系がシンプルで安く、納品が早いことに加えて、セマンティックコーディングでSEO対策も出来ました。何より、思い描いたデザイン通りにコーディングしてもらえたのが最高でした。 構造化タグ実装 AIO対策（AIに対する認知向上施策）やSEO対策によく効くGoogleが推奨する構造化データ（Schemaタグ）を実装してご納品いたします。もちろんご指定いただくことも可能です。 WordPressカスタマイズ WordPressテーマ化や、プラグインカスタマイズ、会員制サイト構築等の経験が豊富です。また表示の高速化や、バージョンアップ対応も行っております。 WEBアクセシビリティ対応 官公庁やナショナルクライアント様向けのWEBアクセシビリティ対応はお任せください。対応基準に応じた既存コードの修正や、結果表の制作も可能です。 柔軟な修正対応 修正は無制限。またHTMLコーディングプロジェクト専門のコーディングディレクタが、プロジェクトの全体スケジュールに合わせて柔軟に対応いたします。 人と機械のダブルチェック テスターによる目視確認と、独自開発したチェックシステムによるダブルチェックで品質を保証します。テスト結果をご提出することも可能です。 進捗管理表 制作状況がいつでも一目で確認いただけます。進捗管理表はリアルタイムに更新されるので、エンドクライアント様への報告にも、そのままご利用いただけます。 課題管理表 修正内容や質問はどんどん「課題管理表」に記載してください。修正専門チームがすぐさま確認・対応いたします。 本番アップ対応 本番公開もご依頼ください。本番公開時はスケジュールの調整や、公開直後のテスト確認含めて実施いたします。サーバの選定や取次契約も行っております。 Git納品 Git納品が必要な場合はお申し付けください。ご指定のGitブランチ／レポジトリへプッシュいたします。チーム開発に最適です。 テストサーバ提供 制作中は弊社よりご案内するテストサーバでいつでもご確認いただけます。もちろんご利用は無償です。ご納品後のテスト環境としてもご利用可能です。 運用対応 サイト運用や定期更新もサポートしています。また突発的なトラブル対応や、WordPressのバージョンアップ対応等もサービスメニューに含めることが出来ます。 FAQよくあるコーディング代行・フロントエンド開発のご質問 よくあるご質問をまとめました 作業着手前に対面でのお打ち合わせは可能でしょうか？ もちろん可能でございます。現在国内と海外に4拠点の営業所がございますが、それ以外の地域でもまずはご相談ください。詳しくは お見積フォーム、または お問合せフォームよりご連絡ください。 メール以外のコミュニケーションツールには対応していますか？ はい、もちろん対応をしております。メールやお電話はもちろん、ChatWork、Backlog等のコミュニケーションツールに対応しております。御社の制作フローに合わせて最適なツールをご指定ください。 発注する際に必要なデザインデータの入稿形式を教えてください デザインデータは下記のファイル形式にて承っております。 Adobe XDSketchFigma、Zeplinなどのワイヤフレーム作成ツールAdobe PhotoshopAdobe Illustrator 上記以外にも対応可能な場合もございますので、詳細は担当営業までお問い合わせください。 PC用のデザインのみでレスポンシブコーディングにしてもらうことはできますか？ はい、対応可能です。ただし、その場合は弊社の一任で進めることとなり、後ほど修正を行うことが出来かねますこと、予めご了承ください。 納品までどのくらい時間がかかりますか？ ご依頼が確定してから最短2営業日で対応いたしますが、ページ数によります。詳しくは ご依頼方法と納期のページをご参照ください。ただし、お急ぎの案件である場合は出来る限りご希望に沿えるよう対応いたしますのでご相談ください。 その他のご質問へ お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする --- - Published: 2022-06-12 - Modified: 2024-11-02 - URL: https://fastcoding.jp/wordpress/ Webデザイン会社、制作会社様向けWordPress制作代行サービス 構造化データ実施、SEOに強い高品質なWordPressサイトを構築します！お問い合わせ お問合わせ About usWebデザイン会社、制作会社様専用のワードプレス制作サービス 弊社が提供するWordPress制作代行サービスは、Webデザイン・制作会社様向けに特化したサービスとなっております。 Web制作会社の皆さま、こんなお悩みありませんか？ エンドクライアントからサイト制作の相談があったが、WordPressで要件を満たせるのか分からない エンドクライアントに提案するにあたり、実際にどのぐらいの費用が必要か分からない。 WordPressの脆弱性の問題やアップデートについて詳しくない。 WordPressでサイト制作した後の運用が難しい。 弊社がすべて解決します！ WordPressを知り尽くしたプロのフロントエンドエンジニアが要件定義の段階からご支援いたします！ 弊社のWordPress制作サービスは、HTMLコーディング代行サービスで培ったサイト制作代行の経験をもとに、サイトの要件定義フェーズからご支援いたします。またHTMLコーディング代行からWordPress制作、本番公開作業および運用業務までワンストップで対応することができます。これまで通算1800サイトを超えるWordPress制作の代行を行ってきました。SEOに強く、運用しやすいWordPressの仕様作成、構築、本番公開作業まで、すべてお任せください。 ADVANTAGE弊社のWordPress制作代行サービスの強み 要件定義からご支援します エンドクライアント様と会話していく中で、WordPressでどのように実装するのか分からない、提案できないことも多々あると思います。ご相談いただければ、ご注文前であっても実装方式やより良い運用方法をご提案します。 発注前にモックで確認OK 実際にどんな管理画面になるのか、ご注文前に動作を確認いただけるモック画面をご用意することも可能です。 サーバも含めてご提案 WordPressで制作するサイトの内容や規模から、サーバもご提案できます。 万全のサポート体制 当初想定しなかった追加のご要望にも対応します。また、納品後のご質問や操作方法の確認等も含めて弊社にご相談ください。 WordPress制作代行サービスの実績 お取引き企業様数 3,100社 合計プロジェクト数 5,277件 合計コーディング数 37,507枚 リピート率 99. 2% 創立2012年 業界13年 Webデザイン会社・制作会社様の為のWordPress制作 難しいことは全部まる投げOK お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする PLAN制作プラン WordPress制作プラン シンプルプラン！HTMLコーディングデータをご用意いただければ、そちらを元にWordPressを制作いたします。 入稿データ HTMLコーディングデータ ご納品物 WordPressで制作されたサイトのデータ一式 ※サーバへの代行設置も可能です 価格 30,000円〜 納期 5営業日～ HTMLコーディング ＋ WordPress制作プラン SEOに強いHTMLコーディングを制作の上、WordPressを制作いたします。 入稿データ デザインデータ（Adobe XD /Photoshop / Illustrator / FireWorks / Sketch 対応。） ご納品物 WordPressで制作されたサイトのデータ一式 価格 60,000円〜 納期 8営業日～ 詳細はお問い合わせください FLOW納品までの流れ ご利用の流れは５ステップ。の番号はお客様フローになります。 STEP1 お問合せ ご利用プランとプロジェクトの内容をお教えください。お見積りを作成します。 STEP2 データ入稿 デザインデータまたは、HTMLコーディングデータと指示書を入稿いただきます。 STEP3 制作を開始 専用ツールでいつでも進捗状況を確認いただけます。 STEP4 テスト確認 当社で準備するテストサーバーで確認いただきます。 STEP5 本番納品 ZIPファイルまたは本番サーバーへアップロードします。 詳しい流れは、オンライン打合せでご確認ください FAQよくある質問 WordPressを導入するのに条件はありますか？ 以下の推奨サーバ環境をご用意ください。ご不明な場合はご相談ください。WordPress公式サイト-要件 WordPressで会員制サイトを作成することは可能ですか？ はい、もちろん対応可能です。会員登録や管理・運営方法に合わせて最適なプランをご提案いたします。まずはお問合せ下さいませ。 WordPressをカスタマイズすることは可能ですか？ はい、対応しております。ご希望のシステムの要件等をお伺いの上、最適なカスタマイズのご提案をいたします。ぜひお問い合わせください WordPressでECサイトを作成することは可能ですか？ はい、対応しております。プラグインを用いて開発をいたします。詳しくは一度 お問合せフォームよりご相談をお願いいたします。 その他のご質問は、お気軽にお問い合わせください Webデザイン会社・制作会社様の為のWordPress制作 難しいことは全部まる投げOK お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする WordPress SAMPLE 弊社では通常PUG/SASSを用いてコーディングを行い,スクラッチでWordPressテーマを制作します。テーマファイルをご覧になりたい場合はお問合せ下さい。 WordPressサンプルサイト コーディング実績へ OFFICE TOKYO 03-6806-0354 〒101-0021 東京都千代田区外神田6-11-16 GMビル5階 OSAKA 06-7878-8160 〒541-0044 大阪市中央区伏見町4-4-9 淀屋橋東洋ビル3階 VIETNAM +84 028-6685-7839 Giay Viet Plaza, 180-182 Ly Chinh Thang, Dist. 3, Ho Chi Minh city, Viet Nam. --- - Published: 2022-04-07 - Modified: 2024-02-02 - URL: https://fastcoding.jp/contact/ HOME お問い合わせ お問い合わせ／お見積り／相談予約 詳細をご入力の上、「送信」ボタンを押してください。すぐさま担当者よりご返信いたします。 Japan ご用件 必須 質問・相談見積り作成依頼オンライン打合せの予約 ※どれか分からない場合は「質問・相談」を選択してください。 法人種別 必須 選択してください株式会社有限会社社団法人学校法人医療法人その他の法人（個人事業主以外） ※弊社は法人様向けにサービスをご提供しております。個人事業主を含む個人の方はご利用いただけませんので予めご了承ください。 法人名 必須 ご担当者名 必須 電話番号 必須 メールアドレス 必須 プロジェクト詳細・お問い合わせ内容 必須 ※デザインデータをお送りいただく場合は、ファイル転送サービスにアップロードいただき、ダウンロードURLをご記載ください。 プロジェクトに関するご質問 ご希望の納品日 ご予算 ※ご記載いただければ、ご予算に合わせたご提案をさせていただきます。分かる範囲でお教えください。 プロジェクト詳細 必須 ※デザインデータをお送りいただく場合は、ファイル転送サービスにアップロードいただき、ダウンロードURLをご記載ください。 お打合せの・ご希望日時と・ご相談内容の詳細 必須 お打合せのご希望日時を２，３件、またどのような内容をご相談いただくかお教えください。 利用規約および個人情報の取り扱いにご同意いただいた方のみ、本サービスをご利用いただけます。 利用規約および個人情報の取り扱いに同意する var wpcf7Elm = document. querySelector( '. wpcf7' ); wpcf7Elm. addEventListener( 'wpcf7mailsent', function( event ) { var tabs = $('form. wpcf7-form input:checked'). val; var category = 'contact'; if(tabs == '見積り作成依頼') category = 'estimate'; else if(tabs == 'オンライン打合せの予約') category = 'webmeeting'; location. href='. /complete/? category='+category+(fcAd ? '&ad='+fcAd : ''); }, false ); wpcf7Elm. addEventListener( 'wpcf7invalid', function( event ) { $('html, body'). animate({scrollTop:$('. wpcf7-response-output'). parents('form'). offset. top}); }, false ); --- - Published: 2022-02-13 - Modified: 2024-09-10 - URL: https://fastcoding.jp/services/htmlcoding/ HOME FASTCODINGのサービス一覧 PC/SPコーディング ADAPTIVEPC/SPコーディング デバイス毎にHTMLを用意する、もっともシンプルなHTMLコーディング手法で、アダプティブコーディングとも呼ばれます。スマートフォン専用のサービスや、Monaca、PhoneGap等で開発されるスマホアプリで利用されるHTMLコーディング、またパソコン専用のシステム管理画面等、ターゲットデバイスが限定されるサービスで多く活用されています。 PC/SPコーディングの特長 デバイス別に異なるコンテンツを利用することができる クライアント様のマーケティング戦略によっては、PCとスマホであえて異なるコンテンツを利用する場合があります。レスポンシブ化をせず、ユーザの利用シーンに応じた別々のサイトを構築する際に利用します。 CSSが簡素化され、表示速度が上がる 一般的なレスポンシブコーディングに比べればCSSの記述量が圧倒的に少ないため、ページの表示速度が上がる傾向にあります。 ユーザの利用デバイスを特定できるサービスであれば、それ専用のコーディングを制作することでサイト全体のユーザビリティ向上に寄与します。 PC/SPコーディングの価格と納期 PC/SPコーディングの価格 1ページ 3,000円～ PC/SPコーディングの納期 10 ページ以下2 〜 4営業日 11～20 ページ5 〜 7営業日 21 ページ以上応相談 ※縦の長さが2,500pxまで。それ以上の場合は別途ご相談ください。※休日、定休日は日数に含まれません。※弊社は初期費用やCSS作成費用は一切頂戴せず、ページ単価でお見積もりしております。詳細は是非一度お問合せください。 価格一覧はコチラ PC/SPコーディングの制作の流れ ご利用の流れは５ステップ。の番号はお客様フローになります。 STEP お見積り・ご注文 プロジェクトの詳細をお見積りフォームからお送りください。担当営業よりお見積りURLをお送りいたします。ご注文はお見積りURLにあるご注文ボタンから簡単にできます。 STEP データ入稿 デザインデータと当社フォーマットのサイトマップ、及びコーディング指示書（任意）をご入稿いただきます。デザインデータはターゲットデバイスに合わせた幅およびフォントサイズの物をご入稿ください。 STEP コーディング作業 弊社にてHTMLコーディング制作を行います。別途お渡しする管理シートにて、ページ毎の進捗状況を確認いただけます。 STEP テスト確認 当社で準備するテストサーバー上で確認いただきます。調整等ございましたら別途お渡しする「課題管理表」からご連絡くださいませ。 STEP 調整作業・ご納品 「課題管理表」にご記載いただいた内容を対応しご連絡いたします。問題なければZIPファイルにてご納品いたします。本番サーバへのアップロードをご希望の場合は、担当営業までお申し付けください。 詳しい流れはこちら PC/SPコーディングのよくある質問 閲覧している機種によって、PCサイトとSPサイトを出しわけることはできますか？ はい可能です。JavaScriptを用いる方法や、Webサーバの設定で対応する方法等ありますので、詳細は担当ディレクタにお問合せください。 対応ブラウザは何になりますか？ 標準で対応しているブラウザはFAQページをご覧ください。その他のブラウザに対応することも可能です。詳細は担当ディレクタにお問合せください。 SEO上の効果はPC/SPコーディングとレスポンシブコーディングで違いますか？ 弊社の認識としては、PC/SPコーディングとレスポンシブコーディングでSEO上の効果の違いがあるとは考えておりません。 しかしながら、どちらか一方のみ用意する場合は、用意されていない機種でのユーザビリティが悪くなり、サイトからの離脱やユーザ数減少につながることでSEOに影響を与えると考えますので、デバイス毎のHTMLコーディングを用意することは必要です。 PCコーディングをスマートフォンで閲覧した場合も、問題なく閲覧できますか？ PCコーディングをスマートフォンで閲覧した場合は、PCサイトと同じ表示になりますが、画面幅が小さいために各テキストはかなり小さく表示されます。スマートフォン利用者のユーザビリティが下がり、SEOにも悪影響を及ぼすと考えますので、SPコーディングも用意した方が良いかと存じます。 SPコーディングをPCブラウザで閲覧した場合も、問題なく閲覧できますか？ SPコーディングをPCブラウザで閲覧した場合は、スマホ表示と同じ見た目でPCサイトのブラウザ幅に拡大されるようになります。しかしながらそれでは見づらいため、一定の最大幅を設定して、それ以降は背景色等で埋めることで、PCブラウザでの閲覧性を高めることが可能です。詳細は担当ディレクタまでお問い合わせください。 その他のFAQはこちら お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-13 - Modified: 2024-09-10 - URL: https://fastcoding.jp/services/liquidcoding/ HOME FASTCODINGのサービス一覧 リキッドコーディング LIQUIDリキッドコーディング デザインデータの横幅をブラウザ幅と捉え、ターゲットデバイスの大きさに合わせて、常に同じ縮尺で見えるよう制作するHTMLコーディング手法です。 リキッドコーディングの特長 横スクロールバーが出ず、常にコンテンツ全体を表示することが出来る ブラウザ幅を100%と捉え各要素の大きさを調整するので、コンテンツが見切れることが無く、常に同じユーザ体験を提供できるHTMLコーディングです。 単に拡大／縮小するのではなく、各画面に「最適化」させます リキッドレイアウトを拡大／縮小での表示と捉えるのではなく、フォントサイズや画像解像度、左右の要素数を画面サイズに応じて調整した、画面別の最適表示と考えることで、より見やすいページ制作を行います。 レスポンシブコーディングと併用して制作が可能 レスポンシブコーディングではメディアクエリを用いて画面サイズ別の表示要素の切り替えを行います。リキッドレイアウトと組み合わせることにより、より最適な画面レイアウト構成を行うことが出来ます。 リキッドコーディングの価格と納期 リキッドコーディングの価格 1ページ 4,000円～ リキッドコーディングの納期 10 ページ以下3 〜 4営業日 11～20 ページ5 〜 10営業日 21 ページ以上応相談 ※縦の長さが2,500pxまで。それ以上の場合は別途ご相談ください。※弊社は初期費用やCSS作成費用は一切頂戴せず、ページ単価でお見積もりしております。詳細は是非一度お問合せください。 価格一覧はコチラ リキッドコーディングの制作の流れ ご利用の流れは５ステップ。の番号はお客様フローになります。 STEP お見積り・ご注文 プロジェクトの詳細をお見積りフォームからお送りください。担当営業よりお見積りURLをお送りいたします。ご注文はお見積りURLにあるご注文ボタンから簡単にできます。 STEP データ入稿 デザインデータと当社フォーマットのサイトマップ、及びコーディング指示書（任意）をご入稿いただきます。フォントサイズもリキッドにすることも可能ですので、その場合はサイトマップ内で明記ください。 STEP コーディング 弊社にてHTMLコーディング制作を行います。別途お渡しする管理シートにて、ページ毎の進捗状況を確認いただけます。 STEP テスト確認 弊社で準備するテストサーバー上で確認いただきます。調整等ございましたら別途お渡しする「課題管理表」からご連絡くださいませ。 STEP 調整・ご納品 「課題管理表」にご記載いただいた内容を対応しご連絡いたします。問題なければZIPファイルにてご納品いたします。本番サーバへのアップロードをご希望の場合は、担当営業までお申し付けください。 詳しい流れはこちら リキッドコーディングのよくある質問 どんな大きさの画面でもデザインと同じようになりますか？ 基本的にはデザインと同じ大きさが等倍で縮尺されていくようになりますが、ブラウザやOSによっては表示できるフォントサイズに制限がある場合がありますので細かな差異が出る場合もあります。過去の制作経験より、最適なサイズとレイアウトに調整しながら、デザイナー様のご要望に最大限お答えするようしております。 レスポンシブコーディングと同時に依頼も可能ですか？ はい、可能です。その場合は各画面サイズにおいてどのように表示したいか、デザインデータ等でご指示ください。 フォントサイズは固定のまま、要素の幅だけをリキッドにすることは可能ですか？ はい、可能です。コーディング指示書にてご指定いただくことができますので、詳細は担当ディレクタまでお問い合わせください。 その他のFAQはこちら お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-13 - Modified: 2024-09-10 - URL: https://fastcoding.jp/services/multilanguage/ HOME FASTCODINGのサービス一覧 多言語サイト制作 MULTILINGAL多言語サイト制作 グローバル展開を行う企業様や、インバウンド事業等、日本語圏以外のユーザをターゲットにしたサービス提供では、Webサイトも多言語化する必要があります。SEO施策においては、各言語別のページをhreflangアノテーションやサイトマップを用いて定義することで、ユーザの言語設定に合わせた最適なページが検索結果に表示されるようになります。リリースと同時に複数の言語へ対応することで、来訪者に離脱されないサイト作りを行うことができます。 多言語サイト制作の特長 多言語SEOに標準対応 言語別のコンテンツを検索エンジンに認識させられるように、多言語化でのSEO対策に強いHTMLコーディングを制作いたします。豊富なSEO対策コーディングの経験から、貴社サイトの流入数増大に貢献します。 言語別のCSS設定をご提案 日英中韓といった、アルファベットや漢字が混在する環境では、単純にHTMLをコピーしてテキストを変更するだけでは、余白や文字間が詰まってしまって、思うように表現できないこともしばしばあります。言語に応じた表示調整を細かく行い、より品質の高いページ制作を行います。 翻訳も含めて対応いたします 元となる原稿をご入稿いただければ、弊社にて翻訳／流し込み対応を行います。翻訳は専門の外部パートナー企業と共に実施します。専門用語の翻訳や、複数の構成者でダブルチェックをすることで、単なる翻訳ではない意味あるサイト作りをご支援します。 多言語サイト制作の価格と納期 多言語サイト制作の価格（翻訳込み） 1サイト 146,250円～ 多言語サイト制作の納期 1サイト15営業日 ※ページ数日英合わせて30ページ 日英対応のPC/SPレスポンシブサイトを想定※縦の長さが2,500pxまで。それ以上の場合は別途ご相談ください。※デザイン代は含まれておりません 価格一覧はコチラ レスポンシブコーディングの制作の流れ ご利用の流れは５ステップ。の番号はお客様フローになります。 STEP サイト構成のヒアリング、対応言語数の決定 お求めになる多言語サイトの目的やターゲットユーザ、デザインを拝見いたします。御社の事業展開やターゲットによって、必要となる言語数を割り出します。 STEP ページ数の算出と翻訳レベル（専門性）によるお見積もり サイト構成や対応言語数が決まりましたら、翻訳レベルを決定いたします。翻訳レベルとは、対象サイトの内容や専門性によって決まる翻訳の難易度を表します。サイトの目的や内容に応じ、翻訳文自体もその文体含めてレベルが分かれます。弊社パートナー企業に確認した上で、お見積もりをご提案いたします。 STEP コーディング制作、WordPress開発 デザインデータをご入稿いただきましたらサイト制作を開始いたします。SEOに強いセマンティックコーディングや、コアウェブバイタル対策を施したWordPress開発を実施いたします。また多言語用コンテンツはパートナー企業にて翻訳作業を開始いたします。 STEP テスト確認 制作が完了しましたら弊社テストサーバへテストアップいたします。お気づきの点や調整事項ございましたら、別途お送りする「課題管理表」にご記入ください。 STEP 調整・ご納品 「課題管理表」にご記載いただいた内容を対応しご連絡いたします。問題なければZIPファイルにてご納品いたします。本番サーバへのアップロードをご希望の場合は、担当営業までお申し付けください。 詳しい流れはこちら 多言語サイト制作のよくある質問 翻訳できる対応言語は何ですか？ 対応可能言語は以下となります。それ以外の言語は原稿をご入稿ください英語／ベトナム語／フランス語／中国語（繁体字・簡体字）／韓国語 言語別にサーバやドメインを変えることは可能ですか？（地域別SEO） はい、可能です。グローバル展開をされている企業様においては、各地域の担当会社のサーバに配置することも多々あります。詳細は担当ディレクターにご相談ください。 その他のFAQはこちら お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-13 - Modified: 2024-09-10 - URL: https://fastcoding.jp/services/mediasite/ HOME FASTCODINGのサービス一覧 メディアサイト制作 WEB MEDIASメディアサイト制作 プロモーション効果を高める一環として、また自社メディアを活用したブランディングや、広告媒体としての売上を狙うこともできるメディアサイトの制作は是非弊社にお任せください。 メディアサイト制作の特長 豊富な経験から最適なサイト構成をご提案 多数のメディアサイト制作経験がある弊社が重視するのは「運用のしやすさ」です。つまり記事コンテンツやバナー等を以下に更新しやすくするか、そして複数名で管理しやすくするか、という点です。弊社はHTMLコーディング、およびWordPress制作の観点から、サイトの魅力となる記事コンテンツ運用のしやすさ、SNSへの連携設定、アクセス数に応じたランキング表示やリコメンドによる回遊施策の実装など、メディアサイト制作に最適なHTMLコーディング制作をご提案いたします。 運用しやすいから、継続できる メディアサイトの運用では、定期的な記事／コンテンツの追加や更新が日々の運用業務となります。また記事制作は担当ライターに、運用はサイトマスター、ソーシャルメディア対応はオペレータなど、それぞれ役割分担を行ってサイトを運営していくこともよくあるケースです。ファストコーディングのメディアサイト制作では、役割毎にログイン情報を提供し、それぞれ権限を分けることにより、運用しやすいワークフローの構築が可能となります。また投稿する記事の種類に応じたテンプレートの制作や、プラグインによる自動リンクカード生成等、運用しやすいメディアサイト制作をお約束いたします。 表示速度向上も対応します メディアサイト制作においては、他のWebサイト制作に比べても表示速度が離脱率に直結しやすいため、より高速に表示ができるサイト制作が求められます。弊社はGoogleページスピード対策も自社で行っているため、高速で表示されるメディアサイト制作が可能です。 メディアサイト制作の価格と納期 メディアサイト制作の価格 1サイト 200,000円～ メディアサイト制作の納期 1サイト10営業日 ※テンプレート数4パターンのPC/SPレスポンシブのブログサイトを想定※デザイン代は含まれておりません 価格詳細へ メディアサイト制作の制作の流れ ご利用の流れは５ステップ。の番号はお客様フローになります。 STEP サイト構成や詳細のヒアリング お求めになるメディアサイトの目的やターゲットユーザ、デザインを拝見いたします。その上でどういったカテゴリ単位で投稿化するか、カスタムフィールドをどのように設けるか、その他設定機能や検索／リコメンド機能等のご案内をさせていただきます。 また運用の体制やユーザ数もお伺いし、より運用しやすいサイトになるよう、担当ディレクターよりご提案させていただきます。 STEP テンプレート数の割り出し、お見積もり サイト構成が固まりましたら、実際に制作するWordPressでのテンプレート数の割り出しや、既存サイトからの記事流し込みのボリュームを計算し、お見積もりをご提案いたします。ご注文はお見積りURL内にあるボタンから簡単に行っていただけます。 STEP コーディング制作、WordPress開発 デザインデータをご入稿いただきましたらサイト制作を開始いたします。SEOに強いセマンティックコーディングや、コアウェブバイタル対策を施したWordPress開発を実施いたします。 STEP テスト確認 制作が完了しましたら弊社テストサーバへテストアップいたします。調整や修正等ございましたら、別途ご連絡します「課題管理表」にご記入ください。 STEP 調整・ご納品 「課題管理表」にご記載いただいた内容を対応しご連絡いたします。問題なければZIPファイルにてご納品いたします。本番サーバへのアップロードをご希望の場合は、担当営業までお申し付けください。 詳しい流れはこちら メディアサイト制作のよくある質問 Facebookや自社サイトへ、投稿記事を連動できますか？ はい、可能です。WordPressのプラグインを用いて設定を行います。詳細は担当ディレクターにご相談ください。※サイト構成によっては出来ない場合もあります。 会員制にしてコメントを受け付けたいのですが可能ですか？ はい、可能です。仕様等を担当ディレクターにご相談ください。弊社のWordPress開発専門チームが対応いたします。 多言語化は可能ですか？ はい、可能です。多言語用のプラグイン等を用いて実装いたします。詳細はこちらをご覧ください。 その他のFAQはこちら お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-10 - Modified: 2025-05-19 - URL: https://fastcoding.jp/faq/ HOME コーディング代行のよくある質問 FAQコーディング代行のよくある質問 目次 料金・サービス コーディング デザインデータ 発注・納品 検証環境 お問合せ 料金・サービス 明朗会計とはどういうことでしょうか？ はい、弊社は基本料金・CSS代金、ディレクション費は一切いただきません。ページ単価×ページ数がお見積りとなります。WordPress固定ページ化や簡単なjQueryも料金内で対応しております。弊社はSEOに強い最高品質・低価格のコーディングサービスをご提供しております。詳しくは価格ページをご覧ください。 AIやSEOに強いHTMLコーディングとは何ですか？ 弊社ではHTMLコーディングの質を、AIに対する認知向上（AIO対策）や、SEOに効果があることと考えております。AIO対策や、SEO効果を高めるためにはソフトウェアがページを正しく認識しやすくするHTMLコーディングにする必要がございます。これをセマンティックコーディングと呼びます。Webページを 絵 ではなく、文章として認識させるためのコーディング手法になります。弊社ではセマンティックコーディングを標準で実施し、その上Googleページスピードを意識したコーディングを制作いたしますので、AIやSEOに強い、高い効果を出すHTMLコーディングをご納品することが可能です。詳しくは AIやSEOに強いHTMLコーディングのページをご覧ください。 WordPressなどのCMS構築にも対応していますか？ はい、対応しております。HTMLコーディングだけではなく、CMSに適応させて運用を開始いただくまでが弊社のサービスであるという認識でございます。また、制作後も快適に運用できるように、弊社独自のプラグインも制作しておりますので、ご安心下さい。 ECサイトの構築も対応していますか？ はい、対応しております。EC-CubeやCS-Cart、Magentoを用いたサイト構築、またASP型のECサイト構築にも一部対応しております。詳しくは一度 お見積りフォームよりご相談をお願いいたします。 JavaScript実装にも対応していますか？ はい、もちろん対応しております。よく利用する簡易なjQueryは無料で提供しております。詳細は価格ページで確認いただけます。 運用サービスも実施していますか？ はい、実施しております。Webサイトの仕組みや目的、更新頻度に合わせてご提案いたします。また弊社では、オフショア制作スタッフをチーム化してご提供する「チームプラン」サービスも実施しております。詳しくは一度 お問合せフォームよりご相談をお願いいたします。 スマートフォンサイトのコーディングは対応をしていますか？ はい、もちろん対応しております。ご依頼時にスマホサイトのコーディングだとわかるようにお伝えください。 レスポンシブWebサイトのコーディングは対応をしていますか？ はい、もちろん対応しております。ご依頼時にPC及びスマートフォン用のデザインデータのご入稿をお願いいたします。 LP(ランディングページ)は対応をしていますか？ はい、もちろん対応しております。詳しくは一度 お見積フォームよりご相談をお願いいたします。 コーディング メール以外のコミュニケーションツールには対応していますか？ はい、もちろん対応をしております。メールやお電話はもちろん、ChatWork、Backlog等のコミュニケーションツールに対応しております。御社の制作フローに合わせて最適なツールをご指定ください。 セマンティックコーディングのソース例はありますか？ 弊社ウェブサイトの各ページ下部にコーディングサンプルへのリンクを設置しております。そちらよりご確認くださいませ。 METAタグやALTタグの挿入はしてくれますか？ はい、もちろん対応しております。記載内容の指定がある場合はその旨をお申し付けください。 ディレクトリ指定は対応していますか？ はい、もちろん対応をしております。発注する際に作成いただくコーディング指示書(仕様書)にてご指示をお願いいたします。 コーディングガイドラインは貰うことは可能でしょうか？ はい、可能です。お問合せフォームよりご連絡をお願いいたします。 持込のガイドラインでコーディング依頼は可能でしょうか？ はい、可能です。詳しくは一度 お問合せフォームよりご連絡をお願いいたします。 ブレイクポイントの指定はできますか？ はい、もちろん可能です。デザインデータ通りのサイズでコーディングいたしますので、デザインデータを作成の際にブレイクポイントを決定し、お伝えくださいませ。 タブレット端末向けのコーディングにも対応していますか？ はい、もちろん対応しております。タブレット用のデザインもおありの場合は合わせてご入稿ください。またPCやSPの見た目を流用する場合はその旨をお伝えくださいませ。 Webフォントを使用してのコーディングは可能ですか？ はい、もちろん対応しております。利用するWebフォントデータを合わせてお送りください。また、クラウド形式のWebフォントサービスを利用する場合は必要となるタグをお伝えくださいませ。 デザインデータ 発注する際に必要なデザインデータの入稿形式を教えてください デザインデータは下記のファイル形式にて承っております。 Adobe XD Sketch Figma、Zeplinなどのワイヤフレーム作成ツール Adobe Photoshop Adobe Illustrator 上記以外にも対応可能な場合もございますので、詳細は担当営業までお問い合わせください。 デザインデータを入稿する際の注意点はありますか？ ご入稿いただく際は、下記の4点をご確認ください デザインデータのご入稿時は書き出したJPEG画像を必ずご送付ください。(デザインソフトウェアによっては、ファイルを開く端末の環境に依存して、オブジェクトの配置に若干のズレが生じる場合がございます) リンクファイルがある場合は漏れなくご送付をお願いします。 Web用の解像度、およびフォントサイズで作成してください。 Adobe Illustrator形式でご入稿の際は、アウトライン前と後の両方のデータをご送付ください。 デザインデータが重いのですが、入稿の際の注意点はありますか？ 無料のオンラインストレージサービス ギガファイル便等にファイルをアップロードして、ダウンロードURLをお知らせください。 スマートフォン用サイトも作成予定ですが、まだデザインデータを作成していません。PC用のデザインからレスポンシブコーディングにしてもらうことはできますか？ はい、対応可能です。ただし、その場合は弊社の一任で進めることとなり、後ほど修正を行うことが出来かねますこと、予めご了承ください。 発注・納品 発注する際はどの様なデータの用意が必要ですか？ 下記の3点のご用意をお願いしております。 １）発注書ご依頼内容が確定したら弊社よりご送付いたしますので、ご返送ください。 ２）デザインデータおよびデザインをJPG化した確認用画像 デザインソフトウェアによっては、OSやバージョン違いにより、弊社の環境とお客様の環境で異なる表示になる場合があります。確認用としてJPG化した画像も必ずご入稿ください。 ３）弊社指定のサイトマップシート、及びコーディング指示書（任意）サイトマップシートは必須となっておりますが、コーディング指示書は任意となっております。コーディング指示書のご入稿が無い場合は弊社の方で適宜判断して制作を進めてまいります。 発注後のキャンセルはできますか？ 大変申し訳ございませんが発注後のキャンセルについては承っておりません。発注書をいただきました時点でコーディングリソースを確保とさせていただきますので、予めご了承ください。 基本契約書やNDA(秘密保持契約書)の締結は可能ですか？ はい、もちろん可能です。契約書のフォーマットをお送りいただければすぐさま対応いたします。 完成後の修正はどこまで対応してもらえますか？ 万が一弊社の瑕疵により不備があった部分についてはすぐに修正いたしますので仰ってください。また、追加で修正が必要な場合があれば対応いたしますので、担当ディレクターにお申し付けくださいませ。 納品までどのくらい時間がかかりますか？ ご依頼が確定してから最短2営業日で対応いたしますが、ページ数によります。詳しくは ご依頼方法と納期のページをご参照ください。ただし、お急ぎの案件である場合は出来る限りご希望に沿えるよう対応いたしますのでご相談ください。 納品の際はどのような形式でファイルをいただけますか？ 基本的にZIP圧縮にて必要ファイルをお渡ししております。必要でしたら本番サーバアップまで承ることも可能ですので、お問合せの際にご相談ください。 検証環境 検証ブラウザの種類・バージョンについて教えてください。 弊社では以下のブラウザにて検証をしております。検証機（機器）のご指定がある場合はご相談いただければ対応いたします。※各ブラウザソフトウェアは最新を利用します。各OSは過去2～3年以内リリースのバージョンのいずれかを利用します。 Microsoft Edge Google Chrome Safari iPhone Safari Android Chrome iPad Safari 検証ブラウザ以外の環境で検証してほしいのですが、対応してもらえますか？ 弊社でご用意している検証環境以外でも、対応可能な場合がございます。お問合せの際に予めご相談くださいますようお願いします。 お問合せ 営業時間は何時から何時までですか？ お電話・メールでのお問合せは平日の9:00～18:00まで対応しております。フォームでのご連絡は お見積フォーム または お問合せフォーム より受付を行なっております。 メールでのお問合せ後、どのくらいで返信してくれますか？ 1営業日以内にご返信いたします。お急ぎの場合はメールにてご連絡いただいた後、お電話(03-6806-0354)でその旨をお伝えいただければ優先的に対応いたします。 作業着手前に直接会ってのお打ち合わせは可能でしょうか？ もちろん可能でございます。原則は、都内近郊、および関西近郊で弊社営業スタッフが訪問可能な地域でお願いしておりますが、必要に応じて世界各地どこへでも伺います。詳しくは お見積フォーム 、または お問合せフォーム よりご連絡ください。 お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-10 - Modified: 2024-10-16 - URL: https://fastcoding.jp/flow/ HOME コーディング代行のご依頼方法と納期 FLOWコーディング代行のご依頼方法と納期 ご利用方法は５ステップ 赤文字はお客様にて対応いただく作業となります。 お問合せと事前相談会 まずは、お気軽にお問合せ下さい。デザインデータやサイトマップ等がありますと、より詳細なお見積りが可能です。お問合せの後、弊社担当営業より事前相談会についてスケジュールをご連絡いたします。担当ディレクタ同席の上で、プロジェクトの詳細についてお打合せいたします。※事前相談会は無料です。ご注文前提でなくても構いませんのでお気軽にお問合せください。 データ入稿 ご発注 弊社よりお送りした電子注文書画面にございます「注文する」ボタンをクリックして発注をしてください。 デザインデータ Photoshop / Illustrator / Sketch / Adobe XD / FIGMA 等に対応しております。データの共有はファイル転送サービスをご利用ください（推奨：ギガファイル便） コーディング指示書 → こちらからコーディング指示書をダウンロードしご記入ください※同様の内容が分かれば別のフォーマットでも構いません。 準備は３つ！ コーディング 弊社は徹底してマニュアル化した制作フローを採用し、最高品質のコーディングを提供しています。またプロジェクトの進捗は専用ツールでいつでもご確認いただけます。 テストアップ・調整 テスト環境は弊社から無償提供いたします。 テスター／ディレクターによる厳正なチェックを行います。 修正対応は、課題管理表を用いて迅速に対応いたします。 テスト環境でチェック をお願いします！ ご納品・本番アップロード ZIPファイルにてご納品、もしくは本番サーバへアップロードいたします。※お支払いは、弊社より納品が完了した月の月末にご請求書をお送りいたしますので、翌月末までに銀行振込にて送金ください。 リアルタイム納期 2025年8月〜 本日 8/23 ご注文 (日) 8/24 (月) 8/25 (火) 8/26 (水) 8/27 (木) 8/28 (金) 8/29 10ページ納品日 (土) 8/30 (日) 8/31 (月) 9/1 (火) 9/2 (水) 9/3 20ページ納品日 (木) 9/4 ※前営業日のリソース状況を元に算出した目安の納期となります。実際の納期はお問い合わせください。※連休前は、依頼が立て込みますので、余裕を持ってご依頼いただけますと幸いです。※祝日や、弊社休業日を挟む場合は納品日が異なります。詳細はお問い合わせください。 お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-10 - Modified: 2022-06-12 - URL: https://fastcoding.jp/results/ HOME コーディング代行の実績 WORKSファストコーディングの実績（2025年3月末時点） 数字で見る実績 取引企業数 0 社 従業員数別（％） 上場企業 61 300名以上 20 100〜299名 12 100名以下 7 0 20 40 60 80 100 累計ページ数 0 枚 ページ数割合（％） 31〜50ページ 38 51〜100ページ 35 100ページ以上 15 30ページ以下 12 0 20 40 60 80 100 業種別ページ数 情報通信・IT 4,932 人材 3,899 小売・EC 3,789 士業 3,214 飲食 2,944 製造・メーカー 2,499 金融 2,395 理美容・コスメティック 2,294 病院・医療関連 2,195 スポーツ・レジャー 1,960 出版・印刷 1,633 旅行・宿泊施設 1,448 不動産 1,141 運輸 1,115 教育・学術研究 1,083 その他 966 合計プロジェクト数 0 件 タイプ別プロジェクト件数 HTMLコーディング 1,223 WordPressカスタマイズ 1,644 大規模サイト 791 JavaScriptアニメーション 686 Vue. js開発 726 お取引き企業様数 0 社 合計プロジェクト数 0 件 合計コーディング数 0 ページ リピート率 0 % 世界のオフィス数 0 箇所 創立2012年 業界 0 年 最新コーディング実績 ALL HTML WordPress JavaScriptアニメーション Vue. js開発 コーポレートサイト（15ページ） レスポンシブサイト（ブレイクポイント1つ）、WordPress、オプションなし、追加費用なし、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥0 レスポンシブコーディング ¥6,500 × 15P¥97,500 スムーススクロール ¥0 WordPress（10P以上無料） ¥0 ¥97,500（税別） キャンペーンサイト（22ページ） レスポンシブサイト（ブレイクポイント1つ）、スクロールアニメーション、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥0 レスポンシブコーディング ¥5,000 × 22P¥110,000 スライドショー ¥0 キービジュアルアニメーション ¥40,000 ¥150,000（税別） ECサイト（スマホコーディング 300ページ） スマホサイト（SPコーディング）、流し込みあり、モーダルあり、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥0 スマホコーディング ¥2,500 × 50P¥125,000 流し込みコーディング ¥1,250 × 250P¥312,500 写真モーダル ¥40,000 ¥477,500（税別） メディアサイト（10ページ+記事流し込み1000件） レスポンシブサイト（ブレイクポイント1つ）、WordPress、記事流し込み対応（機械流し込み）、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥0 レスポンシブコーディング ¥6,500 × 10P¥65,000 WordPress（メディアサイト用） ¥200,000 記事流し込み（約1000件、ランダムチェック付） ¥125,000 ¥390,000（税別） 受注システム管理画面開発（PCのみ） Vue. js開発、標準ブラウザ保証 お見積もり料金 Vue. jsによる画面開発 ¥450,000 APIとの結合テスト ¥0 ¥450,000（税別） アイソメトリックアニメーション開発 レスポンシブコーディング、モーダルあり、標準ブラウザ保証、修正無制限 お見積もり料金 通常サイト基本料金 ¥0 レスポンシブコーディング ¥8,000 × 1P¥8,000 アイソメトリックアニメーション ¥250,000 写真モーダル ¥40,000 ¥298,000（税別） お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-10 - Modified: 2022-04-25 - URL: https://fastcoding.jp/search/ の検索結果 TOPへ戻る お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする --- - Published: 2022-02-10 - Modified: 2024-09-10 - URL: https://fastcoding.jp/services/ HOME コーディング代行のサービス一覧 SERVICEファストコーディングのサービス一覧 レスポンシブコーディング 一つのHTMLで複数のデバイス向けのページを提供するのがレスポンシブコーディング。HTMLコーディング制作のスタンダードです。詳しくみる WordPress制作 オープンソースのCMSとしては、世界一利用されているWordPress。カスタマイズ性も高く、コーポレートサイト制作やメディアサイト制作、会員制サイト制作など幅広い用途に利用できます。詳しくみる JavaScriptアニメーション 表示速度を意識したJavaScriptによるアニメーション制作を行っています。CanvasJSや、D3. js、Chart. jsなどの様々なライブラリに対応して制作いたします。詳しくみる JavaScriptフロントエンド開発 Vue. jsを用いたSingle Page Application開発を中心に、フロントエンドアプリケーションの開発を行っています。詳しくみる Googleページスピード対応 表示速度を向上させ、Googleページスピードスコアを向上するための、多種多様な施策を実施いたします。詳しくみる ウェブバイタル対策 完全成果報酬型のウェブバイタル改善サービスを提供しております。詳しくみる PC/SPコーディング（アダプティブコーディング） デバイス毎に異なるHTMLを用意し、ユーザの利用シーンに応じた適切なコンテンツ提供を行うことのできるPC/SPコーディングを制作します。詳しくみる リキッドコーディング デバイス間の画面解像度の差異に臨機応変に対応する、リキッドコーディングを制作します。詳しくみる ECサイト構築 オリジナルのECサイトを最短5営業日で構築できるサービスを提供しております。詳しくみる 多言語サイト制作 1つのサイトを複数の言語、または複数の地域、またはその双方に合わせて制作する多言語サイト制作を行っております。詳しくみる 大量ページコーディング 100ページ超の大規模サイト制作プロジェクトにおいて、プロジェクト進行やソースコード管理のノウハウを生かしながら、絶対に遅延しない大量ページ制作を行います。詳しくみる メディアサイト制作 プロモーション促進やユーザコミュニティの育成、またCSRを目的としたメディアサイト制作を行っております。詳しくみる Webアクセシビリティ対応 「みんなの公共サイト運用ガイドライン」に則ったアクセシビリティ対応済みのコーディング制作を行っております。詳しくみる リフレッシュコーディング サイト構築後数年かけて運用をしていると、徐々に使わなくなったCSSやJavaScriptが増え、ページスピードスコアに悪影響を及ぼします。同じ見た目でもリフレッシュコーディングを行うことでより高いSEO効果を狙うことができます。詳しくみる お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-10 - Modified: 2024-09-10 - URL: https://fastcoding.jp/services/responsivecoding/ HOME FASTCODINGのサービス一覧 レスポンシブコーディング RESPONSIVEレスポンシブコーディング 一つのHTMLで複数のデバイス向けのページを提供するのがレスポンシブコーディング。大まかに言えば一つのHTML要素に対し、表示する画面の大きさ（ビューポートの大きさ）に応じた複数のCSSで装飾を行うコーディング手法と呼べます。HTMLを１カ所書き換えるだけで、すべてのデバイス向けの表示を更新することができるため、運用コストを削減でき、サイトの更新性も高めやすい、現在のWebサイト制作の主流となっているHTMLコーディング手法です。 レスポンシブコーディングの特長 どのデバイスからWebサイトを閲覧しても、最適化されたレイアウトで表示される スマートフォンやタブレットが登場する前は、Webサイトの閲覧はPCから行うことが一般的でした。しかし、現在ではスマートフォンのように小さなデバイスからWebサイトを見るユーザーが増えたため、どのデバイスから見ても見易いWebサイトである必要があります。レスポンシブコーディングであれば、PCとスマートフォンで大きなデザインの違いがなく、それぞれのデバイスサイズで最適化されたWebサイトを構築することが可能です。 ワンソースですべてのデバイスへ対応することができる これまでは、PC用、モバイル用それぞれのデバイスに合わせてHTMLファイルとCSSファイルを用意していました。これをアダプティブコーディングと称します。これは、２つのサイトを運営しているようなものなので、更新には大変な手間がかかっていました。現在主流のレスポンシブコーディングは、PC、スマートフォン、タブレットなど、デバイス間での表示違いをCSSで調整をするため、HTMLコーディングは常に同じになります。その為、システムへの組み込みや更新運用の負荷もかなり軽減できます。例）デバイスのウィンドウ幅が750px以下だったらスマートフォン用のレイアウトを表示し、それより広ければPC用のレイアウトを表示するなど、レイアウトをCSSファイルで調整します。 Googleがレスポンシブデザインを推奨 Googleは、モバイルファーストインデックスとしてWebサイトをレスポンシブコーディングで制作することを推奨しているため、Webサイトがモバイルに最適化されている事が、Googleの検索順位に影響します。※モバイルファーストインデックス：Googleの検索順位決定において、PCサイトではなくスマホやタブレットといったモバイル型端末向けのサイトを重視するという方針 ユーザーにSNSでシェアされやすい URLが1つなのでWebサイトに訪れるユーザーにシェアされやすくなります。スマホ用とPC用のWebサイトを別に用意すると、見せたいユーザーのデバイスに合わせて異なるURLを送らなければなりません。 レスポンシブコーディングの価格と納期 レスポンシブコーディングの価格 1ページ 4,000円～ レスポンシブコーディングの納期 10 ページ以下3 〜 5営業日 11～20 ページ6 〜 10営業日 21 ページ以上10 〜営業日 ※縦の長さが2,500pxまで。それ以上の場合は別途ご相談ください。※休日、定休日は日数に含まれません。※弊社は初期費用やCSS作成費用は一切頂戴せず、ページ単価でお見積もりしております。詳細は是非一度お問合せください。 価格一覧はコチラ レスポンシブコーディングの制作の流れ ご利用の流れは５ステップ。の番号はお客様フローになります。 STEP お見積り・ご注文 プロジェクトの詳細をお見積りフォームからお送りください。担当営業よりお見積りURLをお送りいたします。ご注文はお見積りURLにあるご注文ボタンから簡単にできます。 STEP データ入稿 レスポンシブ用に設計されたデザインデータと当社フォーマットのサイトマップ、及びコーディング指示書（任意）をご入稿いただきます。PCデザインのみ頂戴し、レスポンシブコーディングを制作することも可能です。 STEP コーディング 弊社にてHTMLコーディング制作を行います。別途お渡しする管理シートにて、ページ毎の進捗状況を確認いただけます。 STEP テスト確認 弊社で準備するテストサーバー上で確認いただきます。調整等ございましたら別途お渡しする「課題管理表」からご連絡くださいませ。 STEP 調整作業・ご納品 「課題管理表」にご記載いただいた内容を対応しご連絡いたします。問題なければZIPファイルにてご納品いたします。本番サーバへのアップロードをご希望の場合は、担当営業までお申し付けください。 詳しい流れはこちら レスポンシブコーディングのよくある質問 ブレイクポイントの指定はできますか？ はい、可能です。お見積もりの際に、ご指定のブレイクポイントを担当ディレクターにお伝えください。 デザインデータはPC用とスマートフォン用の両方の入稿が必要ですか？ いいえ、PC用デザインデータの入稿だけでも大丈夫です。PC用デザインデータを見ながら、スマートフォン表示時を調整、実装いたします。 タブレットも含めたレスポンシブは可能ですか？ はい、可能です。タブレットでの表示をどのようにするか、デザインデータ等でご提供ください。 リキッドレイアウトも対応できますか？ はい、可能です。基本的にはスマートフォンでの表示はリキッドレイアウトになりますが、それ以上の大きさの場合もリキッドレイアウトにすることができます。詳細は担当ディレクターにお問合せください。 その他のFAQはこちら お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする CODING SAMPLEコーディングサンプル サンプルサイト1 サンプルサイト2 WordPressサンプルサイト3 弊社ではPUG、およびSASSを用いてコーディングを行い、必要に応じてWordPressテーマを独自開発いたします。PUGやSASSのサンプルデータ、WordPressテーマデータ、またコーディングルールが必要な場合はこちらよりお問い合わせください。 コーディング実績へ --- - Published: 2022-02-10 - Modified: 2024-05-15 - URL: https://fastcoding.jp/webvital/ HOME ウェブバイタル対策 Google推奨！SEO必須対策！ コアウェブバイタル対策ページスピード超高速化完全成果報酬1 万円〜 先ずはお気軽にご相談から 速度改善結果 各社、大幅に改善されています！ HTMLコーディング制作、およびフロントエンド開発専業のパイオニアとして、多種多様なプロジェクトを経験してまいりました。表示速度に影響するクラウドやネットワークに対する様々な知見は、他社には真似のできない、弊社独自の知的財産です。 コーポレートサイト 静的HTMLで構成されたサイトについて、CLS対策を中心とした施策を行いました 65 対策前 97 対策前 PC 48 対策前 90 対策前 SP ECサイト 外部システムと連携したECサイトについて、フロントエンド側のみの施策を行いました。 65 対策前 97 対策前 PC 48 対策前 90 対策前 SP メディアサイト WordPressで構成されたサイトについて、各プラグイン設定内容の見直しやテーマファイル（PHPファイル）の再構成を実施しました。 65 対策前 97 対策前 PC 48 対策前 90 対策前 SP こんなお悩みありませんか？ そのページ対策「ダメ」です。 画像を軽くしてみたが、思うようにPageSpeed Insightsの得点が伸びない。 制作会社に相談すると、サイトを作り直しをするしかないと言われた。 社内の担当者がとても忙しくて、手が回らない。丸投げで対応してくれると嬉しい。 代理店だが、クライアントからページスピードスコアが低いと言われ困っている。 完全成果報酬型！結果が出なければ そのお悩み、私たちが解決します！ ページスピード超高速化 長年蓄積されたノウハウを駆使し、且つサイトの目的やデザインに応じた施策を実施することで、Google PageSpeed Insightsで高スコアを獲得できるように、サイトをチューニングします。 業界初！完全成果報酬 結果が出てからのお支払いなので、最初に余計なコストが掛かりません！もちろん、実績多数あり自信があるから成果報酬でサービスをご提供しています。 作業レポートをご納品 どういった対策を行ったか、対策内容やコードの変更点を記載したレポートをご納品しています。今後の御社での対策の指針にお役立てください。 ファストコーディングのPageSpeed Insights対策 ファストコーディングでは構築時にGoogleChromeのLighthouseプラグインを用いてスコアをチェックし、高得点が得られるようにコードを最適化するPageSpeed Insights対策を行っています。ご希望のお客様には、サーバー設定に関係するPageSpeed Insights対策の設定代行も行っております。 Lighthouseプラグインとは ? Googleが提供するWebページの評価ツールです。PageSpeed Insightsの一部の結果は、このLighthouseの技術を用いて計算されます。Google Chromeにインストールして利用ができるため、ページ制作と同時にPageSpeed Insights対策が出来ます。 Lighthouse プラグイン ページスピードを改善するとどうなるの？ SEOに必須！? 検索結果で上位表示されやすくなる Webサイトのページの表示スピードは、検索結果のランキング指標の重要な１つです。得点の低いサイトは検索結果にランキングされづらくなるため、問い合わせや商品購入が減少し、引いてはビジネス全体の売り上げに大きな影響を与えます。ページスピード対策を行う事で、Google PageSpeed Insightsで高スコアを獲得できるようになります。 ユーザビリティが改善されコンバージョン率が向上する Googleが公表しているデータの中に、Webサイトの表示速度が遅くなるとユーザーの顧客満足度は大幅に低下し直帰率が高くなる調査結果があります。ユーザーの47％は、Webページが2秒以内に読み込まれることを期待し、表示に3秒以上かかるページは40%以上のユーザーが離脱すると言われています。ページ表示速度向上の目的は検索順位も関係しますが、UX「ユーザー体験」においてとても重要な対策の1つとなります。 もっと詳しく解説 コアウェブバイタル対策とは？ PageSpeed Insightsにおいて高得点を取るためのサイト改善活動がページスピード対策です。ページスピードを改善する為には、サイトの目的やデザインに応じた施策を実施することが重要です。 PageSpeed Insights （ページスピードインサイト） とは？ サイトの測定ツールの一つです。ページの表示速度を主として、ページの状態を０～100の点数を用いてチェックすることができます。コアウェブバイタルも測定することでき、WEB VITALを意識したページ制作には必須のツールです。 Google PageSpeed Insights の使い方 WEB VITAL （ウェブバイタル）とは？ Webサイトの健康状態を表した指標です。Googleにとっての健康＝検索で上位にランキングされやすくなる唯一の指標です。重要な３つの指標（LCP・FID・CLS）は「コアウェブバイタル」と呼ばれ、SEO対策にとって最も重要視される指標です。 コアウェブバイタルとは？詳しく解説 よくある事例のご紹介 事例 1 外部サービス（CDNやWebフォントAPI等）を利用しており、評価が下がっている 外部サービス自身もコアウェブバイタル対策を行っているとはいえ、ネットワークのスピードや、監査項目に対する対策内容については差が発生し、完璧であるとは言い切れません。その場合は代替案となるサービス／手法を検討するか、サイトデザインや機能の変更が必要になる場合もあります。 サイトデザインや機能の変更を極力行わず、コードの最適化をもって対応することが可能です。 事例 2 サーバーの返答速度が遅いと言われている サーバの設定変更や、キャッシュ設定の追加により高得点が得られる場合もありますが、その場合はインフラエンジニアの協力を仰ぐ必要もあります。 ファストコーディングではサーバのチューニングに関するご支援も可能です。 事例 3 画像、CSSを圧縮したけど点数があがらない 単にファイルを圧縮するだけでも高スコアは望めますが、SEOで必須となる90点以上のスコアを取得するには、最適なクリティカルレンダリングパスを生むためにファイル内部の変更が必要になります。 ファストコーディングのフロントエンド制作専門チームが、HTML/CSS/JavaScriptの3つの観点から最適なフロントエンドの再構成を行います。 事例 4 サイトを何も変更していないのに、点数がどんどん落ちてきた。 PageSpeed InsightsはLighthouseやGoogleChromeから得られたデータを元に評価を行うために、その評価結果も徐々に変化していきます。よって高得点を獲得した後も、定期的なチェック／対策が必要になります。 弊社の運用プランにお申込みいただくことで、定期的な検査、またページ追加時の最適化も行います。 詳細はお問合せください。 ご提供するコアウェブバイタル対策の概要 コアウェブバイタルの重要な3指標、LCP(Largest Contentful Paint)、FID(First Input Delay)、CLS(Cumulative Layout Shift)を測定するツール「PageSpeed Insights」を用いて対策を行います。 指標の見方はこちら 施策の一例を見る 安心の料金設定 完全成果報酬！ 弊社サービスは、対象ページの難易度と、PageSpeed Insightsの結果に応じて料金を設定しております。難易度の判定は個別に行っておりますので、まずはお気軽にお問い合わせ下さい。 完全成果報酬型 安心して下さい！成果が出るまで料金は一切掛かりません！！ 難易度で料金設定 ページ事に判定するので、明瞭な料金システムです。 料金設定（難易度：中の場合） スコア 69点以下 1万円 / ページ スコア 70点以上 80点以下 2万円 / ページ スコア 80点以上 90点以下 3万円 / ページ スコア 90点以上 4万円 / ページ ご利用の流れ STEP1 お問合せ まずは、ご相談からお気軽にお問合せください。 STEP2 お見積り サイトの詳細をお伺いし、弊社から難易度と料金想定表（見積書）をお送りいたします STEP3 ご契約 見積もり内容にご納得いただきましたらご契約ください。 STEP4 対策・確認 弊社テスト環境に御社サイトをコピーし対策作業を開始、１週間程度で結果をご案内。 STEP5 本番納品 対策内容をご確認頂きましたら、データを御社サーバに本番アップロードいたします。 よくある質問 事前に、かかる費用を知りたいのですが、見積もりはいただけますか？ はい、ご利用の流れに記載の通り、サイトに応じて設定された難易度から事前に料金をお知らせいたします。 対策内容は教えていただけますか？ はい、もちろんです。対策後に対策内容を記したレポートをお送りいたしますのでそちらでご確認いただき、御社サイトへ適応ください。※弊社にて御社サイトの更新をご希望の場合は、その旨担当営業までご連絡ください。 WordPressなどのCMSで構築されたWebサイトにも対応していますか？ はい、もちろん対応しております。WordPress等のCMSではページスピードスコアを上げるための表示速度改善プラグインが多数存在しますが、それらはテーマやテンプレートの作り方によっては、サイトが表示できなくなるような悪影響を与える場合もあります。弊社はWordPress制作サービスも行っており、WordPressに関する深い知見から、安全にコアウェブバイタル対策を実施することが可能です。 Contact 電話で問合せ 03-6806-0354 フォームで問合せ お問合せフォーム CODING SAMPLE 弊社では通常PUG/SASSを用いてコーディングを行います。コーディングルールが必要な場合はお問合せ下さい。 サンプルサイト1 サンプルサイト2 サンプルサイト3 コーディング実績へ OFFICE TOKYO 03-6806-0354 〒101-0021 東京都千代田区外神田6-11-16 GMビル5階 OSAKA 06-7878-8160 〒541-0044 大阪市中央区伏見町4-4-9 淀屋橋東洋ビル3階 --- - Published: 2021-08-17 - Modified: 2024-02-22 - URL: https://fastcoding.jp/refreshcoding/ デザインはそのまま、最新のHTMLコーディングでSEO強化！ モバイルサイトが無いと検索順位が下がります 古いコーディングのままではGoogle Robotに嫌われます こんな方は今が “改善チャンス” です！ オンライン営業を強化したい！ Webサイトからの「お問合せ」を増やしたい スマートフォンに対応したい 検索順位を上げたい 古くなったWebサイトを改善したい！ Google優良サイトに認定されたい 表示速度を上げたい コストと時間をかけずに新しくしたい 以下に一つでも該当した方は、今すぐ対応が必要です。 Webサイトを制作してから2年以上経過している Googleの「PageSpeed対策」をしていない モバイル対応になっていない FASTCODINGが全て解決します！ 見た目のデザインはそのまま、集客に重要なSEO対策済みの最新HTMLコーディングを 通常コーディング価格で提供します！ 古いコードソースをSEOに強い最新のコーディングにします ページスピードが改善されます レスポンシブに対応します 低コスト・短期間で無理なく対応します 私たちが解決しますコチラからお問合せください リフレッシュコーディングとは？ 見た目のデザインは変更せず、HTMLだけ最新かつSEOに強いHTMLに作り替えるFASTCODING独自のサービスです。 1 構造化タグによってSEOに強いサイトへ SEOに強いサイト制作が得意です。セマンティックコーディングや、構造化データの実装、ページスピード 90点以上のHTMLを必ずご納品します。 2 コストを抑えながら最新のHTMLに！ コーディング費用は、ページ単価×ページ数のシンプルな料金で提供します。デザイン不要なので、お時間も通常のリニューアルの半分以下です。 3 レスポンシブに対応します 「モバイルファースト」スマフォでの閲覧を最適化します。デザイン不要、弊社で対応します。 4 ページスピードが向上する Googleは公式ブログで、ページの表示速度はSEOランキングに影響を与えることを明言しており、SEO対策上大変重要な施策です。 リフレッシュコーディングが必要な理由 HTMLは日々進化している 検索エンジンは、HTMLが最新であり、きちんとしたルール（構造化タグ）で記述されていることを好みます。その為、古いHTMLのままにしていると検索順位に影響し、見てほしいホームページも見られなくなってしまいます。 検索順位はモバイルサイトが基準へ Googleは、2020年9月より、全サイトを対象に「モバイルファーストインデックス」に強制移行します。検索結果のランキングにモバイルサイトの評価を使用するのです。その為、PCのみのWebサイトは評価の対象外となり、検索順位に大きな影響が考えられます。 コアウェブバイタル対策をしていなければ、もうランキングされません Googleは、2021年5月より、コアウェブバイタルスコアを基準としたランキング表示に移行します。コアウェブバイタルスコアとは、SEOに強いHTMLかどうかを測るGoogle独自の基準です。コアウェブバイタルスコアの基準は常に新しくなるため、古いコーディングをそのまま利用していては順位はあがりません。 古いコーディングのWebサイトとモバイル非対応のWebサイトは検索結果が下がり、大きな機会損失に繋がります！ 私たちが解決しますコチラからお問合せください 費用はいたってシンプル コーディング料金はページ単価 × ページ数弊社の新規のコーディング費用と同じです。 コーディング単価 PC SP レスポンシブ 1～10ページ 8,000円/枚 6,000円/枚 6,000 円/枚 11～20ページ 6,500円/枚 5,000円/枚 5,000円/枚 21～30ページ 5,000円/枚 4,000円/枚 4,000円/枚 31ページ～ 要相談 要相談 要相談 コーディング単価 PC 1～10 p 8,000円/枚 11～20 p 6,000円/枚 21～30 p 5,000円/枚 3１p～ 要相談 コーディング単価 SP 1～10 p 8,000円/枚 11～20 p 6,000円/枚 21～30 p 5,000円/枚 3１p～ 要相談 コーディング単価 レスポンシブ 1～10 p 16,000 円/枚 11～20 p 13,000円/枚 21～30 p 10,000円/枚 3１p～ 要相談 ※ページ単価は縦の長さが2,500pxまでを想定しております。それ以上長い場合は別途お見積りとなります。 ※ご案件の内容よっては、追加でお見積りする場合がございます。 リフレッシュコーディングフロー 1 お問合せ 対象サイトのURL、サイトマップ、CMS（システム）導入の有無など現状の諸情報をお送りください。不明な場合は、対象のURLだけでも構いませんので、お気軽にご相談ください。 2 弊社にてWebサイトチェック ココが重要サイト診断をします。必要な場合は、Page Speed対策などの改善案をご提案します。 現在のWebサイトの状態をチェックします。現状サイトの構築のされ方によって別途お見積りがかかる場合がございます。 3 リフレッシュコーディング ココが重要集客に重要なSEOに強いコーディングノウハウ 弊社はＳＥＯに強いWEBサイト作りをこれまで20,000件以上行ってまいりました。スピード対策も含め、SEOに強い最新のHTMLコーディングを致します。 4 弊社テストサイトでご確認 弊社で準備するテストサイトで確認いただきます。修正なども無料でお受けいたします。 ご納品 よくある質問 Qお見積りはすぐに頂けますでしょうか？ はい、ページ数などがわかれば即日お見積りは可能です。ページ数の情報などがない場合は、１～２営業日頂くことがございます。 QSEOに強いHTMLコーディングとは何ですか？ 弊社ではHTMLコーディングの質を「SEOに効果があること」と考えております。SEO効果を高めるためには検索エンジンがページを正しく認識するHTMLコーディングにする必要がございます。これをセマンティックコーディングといいます。Webページを 絵 ではなく、文章として認識させるためのコーディング手法になります。弊社ではセマンティックコーディングを標準で実施いたしますので、SEOに強い、高い効果を出すHTMLコーディングをご納品することが可能です。 Q本当にSEOで順位があがりますでしょうか？ 本サービスはSEOの順位を保証するものではないですが、これまでの経験上、弊社からご提供しておりますSEO対策済みのコーディングに書き換えて順位が向上したケースは多いです。キーワードの難易度などにもよりますので、詳細はお問合せ下さい。 Qスマホのデザインがないですが、対応できますでしょうか？ はい、対応は可能です。現状のPCデザインから弊社の任意でレスポンシブ対応（スマホ化）を進めていきます。 私たちが解決しますコチラからお問合せください --- - Published: 2020-10-01 - Modified: 2024-11-11 - URL: https://fastcoding.jp/ecommerce/ 自社ECサイト 一般的なオンラインショップの構築は、、、 FAST-EC が全て解決します！ FAST-ECとは？ 料金プラン 導入フロー よくある質問 導入実績 お問合せ オリジナルECサイトを構築！ 3ヶ月間完全無料最短5日で運用開始 これまでのオンラインショップの構築は、、、 オリジナルECサイトの場合 初期コストがかなり高い。 開発期間がとにかく長い 専門知識が必要 Yahooや楽天へ出店の場合 顧客を資産にできない 価格競争に巻き込まれる カスタマイズできない オリジナルで作りたいけど、高くてすぐに使えない 楽天には出店してるけど、やっぱり独自のECで顧客管理したい そこで！ FAST-EC が全て解決します！ ３ヶ月間完全無料 サポート込み/サーバー付きです。 最短5日〜で構築！ サポート込み/サーバー付きです。 補助金申請に対応 補助金を受け取るまで、無料期間で運用できる！ 集客に重要 な SEO対策込みオンラインショップ構築します。 まずは、お気軽にお問合せ下さい！ FAST-ECとは？ 1 半年間無料でお試し！自社ECを持つのに最適 安心の国産ＥＣ－ＣＵＢＥを利用、数日で構築し、サポートも付いています。半年間無料でお試し運用可能です。 2 在庫管理は楽天市場と連動可能でらくらく 楽天市場のＣＳＶに対応しており、在庫連動が可能ですので、管理はこれまで通り。楽天市場から多店舗展開するのに最適です。 3 独自デザインで競合他社と差をつける よくありがちな、テンプレートと違い、御社独自のデザイン制作を行いますので、自分好みの自社ＥＣサイトが構築できます。 4 補助金を申請してコストを削減できる FAST-ECは初めてのオンラインビジネスや、非対面型ビジネスへの転換での補助金／助成金申請に対応しています。 SEOのノウハウが詰まった自社ECを短期間で構築できるサービスです。 料金プラン まずは、無料ではじめてみよう！ スタータープラン ３ヶ月間無料 月額０円 ３ヶ月間オンラインサポート付き！ 製作期間：5営業日〜 アイテム数 ＳＫＵ単位で100まで デザインテンプレートでの構築 サーバ付き（独自ドメイン不可） FAST-ECオリジナルテンプレート シルバープラン 制作費用50万円（税抜） 月額０円 ３ヶ月間オンラインサポート付き！ 製作期間：5～10営業日程度 アイテム数 ＳＫＵ単位で50程度まで デザインテンプレートでの構築 独自ドメインで運用 自社オリジナルデザイン ゴールドプラン 制作費用100万円〜（税抜） 月額０円 ３ヶ月間オンラインサポート付き！ 製作期間：20営業日 アイテム数：ＳＫＵ単位で200まで オリジナルデザインでの構築 独自ドメインで運用 上記プランすべてにご納品から３ヶ月間の無料オンライン運営サポートが付きます。商品の登録など使い方のサポートをさせて頂きます。※機能のカスタマイズなどは別途有償にてご対応となります。無料サポート後の運用サポート継続に関して、必要な場合は別途担当営業までご相談ください。 今なら！補助金対応しています！ FAST-ECは初めてのオンラインビジネスや非対面型ビジネスへの転換で、全国の各種補助金／助成金に対応しています。 現在では、対象経費の2/3が補助され最大１００万円まで支給される制度もございます。お問合せ頂くタイミングやご相談頂く地域によって、ご案内できる補助金/助成金などが違ってきますので、気になる方はお気軽にお問い合わせください。 スタータープラン と合わせて、補助金の申請をオススメしています。 導入実績 サンプルサイト1 サイトを見る サンプルサイト2 サイトを見る サンプルサイト3 サイトを見る まずは、お気軽にお問合せ下さい！ 導入フロー step1 ご依頼日 スタータープランの場合 デザインテンプレートの決定 テンプレートのデザイン画像をご案内いたします。ベースのカラーやお写真の入れ替えが可能です。またサイトに掲載する商品情報を弊社指定のフォーマットにてお送りください。 シルバープランの場合 ヒアリング ココが重要 弊社がオススメの機能などをご提案するので、EC構築が初めての方でも安心。 ECサイト構築経験の豊富なWEBディレクタが、御社の商材や販売体制、目標売上額などをお伺いし、最適なサイト構成をご提案いたします。 step2 弊社にてサイト構築 ココが重要 集客に重要なSEOに強いコーディングノウハウ 弊社はＳＥＯに強いサイト作りを2000以上行ってまいりました。集客に重要なＳＥＯに強いＥＣサイトを構築いたします。オプションでＳＥＯに関するコンサルテーション契約も可能です。 step3 テストサイトでご確認 弊社で準備するテストサイトで、特商表記などの追加情報をご入力頂きます。 ご納品 よくある質問 サイト構築後のサポートはしてもらえるのでしょうか？ はい、もちろんです。弊社ではご納品後3か月間のメールによるサポートを行っております。またお電話でのサポートや長期間のサポートが必要な場合にも対応いたしますので、詳しくは営業担当までご連絡ください。 店舗運営の代行もできますか？ はい、可能です。問い合わせ対応や商品情報の更新、広告用ページやバナー作成から、受注対応まで幅広く対応しております。詳細は営業担当までお問い合わせください。 いままで楽天市場で店舗を展開していたため、自社ECサイトの広告宣伝の知識がありません。広告運用の依頼は可能でしょうか？ はい、可能です。弊社で御作りするECサイトは、そもそもSEOに強い作りになっていますのでGoogle検索にもヒットしやすい作りになっております。また、Google広告の知識を持つマーケティングコンサルタントが御社専用の運用方法をご提案いたします。詳細は営業担当までお問い合わせください。 導入実績 タンしゃぶ鍋と焼肉の店 こいずみ 利用プラン スタータープラン 費用 無料 制作期間 7日 特徴 テイクアウト予約機能付き サイトを見る CHINA MODERN Liang You 利用プラン シルバープラン 費用 50万円 制作期間 20日 特徴 テイクアウト予約機能付き ふるさとの味 利用プラン ゴールドプラン 費用 130万円 制作期間 30日 特徴 多言語機能付き まずは、お気軽にお問合せ下さい！ --- - Published: 2020-06-23 - Modified: 2025-09-14 - URL: https://fastcoding.jp/javascript/ リピート率 96 % 取引企業様 2900 社以上 安全・安心のセキュリティISMS認証/Pマーク取得済み企業です。 ＼JavaScript開発の専門チーム／ フロントエンド開発 に 特化 しています 外注が初めて・特長を知りたい方は リピート率 95% ↑ サービスの特長を見る プロジェクトの相談は ↓ 今すぐ問い合わせ ADVANTAGE 専門チームに任せるおすすめポイント！ フロントエンド開発は専門家に任せてください。 POINT, 01 バックエンド開発に集中！低コスト化を実現 フロントエンドは専門家に任せ、バックエンドエンジニアが集中できる環境をつくることができます。自社の優秀な人材は、工数単価の高いバックエンド業務に充てて、利益率を高めることができます。 POINT, 02 サーバーレス開発でスケジュールを短縮 APIを介して、フロントとバックエンドが連携する為、フロントをS3等のCDNに配置しバックエンドをサーバーレス構築できます。バックエンド開発とフロントエンド開発が並行して進むため、スケジュールを短縮できます。 POINT, 03 デザイン変更はフロントで吸収、開発後も改善し易い！ バックエンドとフロントを分けて開発しているので、サービスイン後のUI/UXの改善がし易くなり、開発途中のデザイン変更にも、バックエンド開発に影響を与えることなく対応できます。 SERVICE フロントエンド開発サービス一覧 豊富な開発経験を 元に専門チームが、 最適なご提案します。 React Vue. js 開発 詳しくみる UI/UX 開発 詳しくみる アニメーション 開発 詳しくみる IOTデバイス 向け開発 詳しくみる CONTACT フロントエンド開発の専門チームが、まずはご相談から最適解をご提案します。 導入後のサポートOK カスタマイズOK ご相談・お問合せはこちら 資料請求はこちら お急ぎの方 東京 03-6806-0354 大阪 06-7878-8160 FAQ よくある質問 Qどんなフレームワークやプラグインに対応していますか？ ファストコーディングではVue. jsやReactによるUI・フロントエンド開発や、jQueryベースのアニメーション開発、またはフレームワークやライブラリを利用しない組み込み機器向けのシステム開発も行っております。無料でお見積りいたしますので、お問い合わせフォームよりお気軽にご相談ください。 Q別の開発会社に依頼して作ってもらったJavaScriptが動かなくなってしまいました。 既存JavaScriptの更新・改善をお願いすることはできますか？ はい、もちろん対応可能です。 ファストコーディングはJavaScriptを用いたフロントエンド開発に関することでしたら何でもご相談できますので、お気軽にお問い合わせください。 Qブラウザ対応について教えてください。 ご依頼いただく動きにもよりますが、モダンブラウザへの対応は確実に行います。詳しくはお問い合わせくださいませ。 Qメール以外のコミュニケーションツールには対応していますか？ はい、もちろん対応をしております。 お電話はもちろん、ChatWork、Backlog等のコミュニケーションツールにも対応しております。 お使いの環境に合わせて最適なツールをご指定ください。 Q依頼したいプロジェクトの要件は複雑です。お打ち合わせすることは可能ですか？ はい、もちろん可能です。まずは お問い合わせフォームより日程をご相談ください。 CONTACT フロントエンド開発の専門チームが、まずはご相談から最適解をご提案します。 導入後のサポートOK カスタマイズOK ご相談・お問合せはこちら 資料請求はこちら お急ぎの方 東京 03-6806-0354 大阪 06-7878-8160 --- - Published: 2020-06-23 - Modified: 2020-06-23 - URL: https://fastcoding.jp/javascript/services/ HOME jQueryを使ったフロントエンド開発 jQuery Customizing jQueryを使ったフロントエンド開発 01シンプルで強力なjQueryテンプレート ファストコーディングでは、Webサイト制作でよく利用されるjQueryを用いた動き、表現のテンプレートを数多く取り揃えております。またテンプレートを元にお客様のご意向に合わせたカスタマイズや調整を加えていきますので、スケジュールも短縮することができます。 事前にテンプレートで動きを確認することができるので、想定していた動きじゃない、仕様が異なるといったご要件のヌケモレも防ぐことができます。お客様にとってご依頼いただきやすいJavaScriptを用いたフロントエンド開発サービス、それがファストコーディングです。 テンプレート一覧（一部抜粋） VIEW MORE スライドショー VIEW MORE カルーセル VIEW MORE ライトボックス VIEW MORE アニメ―ション VIEW MORE パララックス VIEW MORE フルページ VIEW MORE アコーディオン VIEW MORE 固定header VIEW MORE ナビゲーション VIEW MORE スムース スクロール VIEW MORE グループ フィルター VIEW MORE インスタント 検索 VIEW MORE 画像の拡大表示 VIEW MORE 問い合わせ フォーム VIEW MORE SNS関連 VIEW MORE その他 02jQueryプラグインのカスタマイズに自信あり テンプレートを利用した開発を行うことで、制作スピードの高速化や、バグの発生を未然に防ぐことができるのは大きなメリットです。 しかしながら、お客様のプロジェクトに合わせた調整やカスタマイズは、必ず必要な作業となります。 ファストコーディングではjQueryライブラリ・プラグインを用いた開発経験が豊富です。これらのライブラリやプラグインを用いた、カスタマイズ・チューンアップも柔軟に対応いたします。 03動きの調整、ご納品後の運用サポートも対応いたします より効果的な動きやユーザビリティの向上を考えれば、カスタマイズの要望が多くなるのも当たり前です。また一度ご納品した後に更新が発生しやすいのもフロントエンド開発プロジェクトならではのお悩みかと思います。 ファストコーディングではこういったご納品後の更新や運用業務の対応も可能です。経験豊富なエンジニアが、お客様に最適な解決策をご提案いたします。 --- - Published: 2020-06-23 - Modified: 2020-06-23 - URL: https://fastcoding.jp/javascript/services/uiux/ HOME UI/UXのフロントエンド開発 UI/UX DEVELOPMENT UI/UXのフロントエンド開発 01UI/UX開発の専門チーム CMS構築や業務系システム開発、またクライアントアプリケーション開発では、それらのシステムを管理運営するために必要な「管理画面」開発も重要です。管理画面の操作性は、ひいては業務全体の効率にも影響するからです。 また、近年はタブレット端末を活用したシステム開発も活発に行われているため、利用者の利便性を高め、且つ入力ミスを少なくするUI/UXを用いた管理画面開発は、プロジェクトの重要な要素と言えるでしょう。 ファストコーディングでは、これら「管理画面」開発を簡単且つスピーディーに行う専門チームを持っております。 AngularやVue. jsフレームワークを用いた実装経験の豊富な専門チームが、UI/UXに優れた使いやすい管理画面開発をご支援します。まずはお問い合わせください。 ファストコーディングが提供する「UI/UX開発専門チーム」 JavaScriptフレームワークを知り尽くした専門集団 パーツ化、動きの共通化を行い、より統一された操作感を演出する コーディング ブラウザや閲覧環境固有の癖を理解し対処するシステム開発能力 02UI/UX開発を熟知したコーディングディレクタがご支援 UI/UX開発の目的は、操作するユーザを迷わない、ミスさせない、そして作業効率を向上させることにあります。UI/UXデザイナーが作り上げたデザインや設計書は重要ですが、それを完全に理解し、実装に結び付けるためのディレクションがなければ意味がありません。 弊社のコーディングディレクタは、FASTCODINGで培ったマニュアル化技術とディレクション工程効率化ノウハウを元に、UI/UX開発のスムーズな進行を指揮するコーディング業務の専門家です。 お客様のプロジェクト状況に応じて柔軟に対応することで、効果あるUI/UX開発をご支援いたします。 UI/UX開発の流れ --- - Published: 2020-06-23 - Modified: 2020-06-23 - URL: https://fastcoding.jp/javascript/services/uiux/flow/ HOME UI/UX開発 フロントエンド開発の流れ DEVELOPMENT FLOW フロントエンド開発の流れ STEP1画面全体をサイトマップにて把握 どういったページが何ページある、といった個別の情報のみならず、各ページが保持する情報（モデル）が何か、どういったアクションが実行されるか、それによりどういった情報の変化が発生するかという、ユーザ行動から考えた画面定義を行います。 この情報は後工程で実施されるスクリプト実装時に、初期設計情報として活用されます。 STEP2共通画面パーツの定義 共通で利用されるフォーム部品や表・グラフ部品といったパーツを、共通パーツとして定義します。 パーツは個別に定義するわけではなく、派生／非派生関係をもったパーツ体系として取りまとめていきます。 こうすることで、マークアップ段階での効率化や、変更による影響範囲の特定がしやすくなります。 STEP3共通レスポンスアクションの定義 ユーザが何らかの行動を起こした際のレスポンスアクションは、共通したパーツや動きとして定義します。 特に動きはユーザ体験に大きく影響する要素です。表示間隔や秒数、デバイスによる許容される表示差異等も、この段階で確認することで、管理画面全体の操作性が決まるといっても過言ではありません。 また定義されたレスポンスアクションは、管理画面の機能追加や変更時にも、どういったUIにするべきかという情報ソースとして重要な役割を果たします。 STEP4マークアップ実装 パーツ集としてまとめられた画面パーツやレスポンスアクションを元に、前工程の実装となるHTML・CSSマークアップを行います。 基本的にはレイアウト（パーツが入る骨組み）とパーツから作成を進めていきますが、プロジェクトの性質によってはこの段階でアジャイル手法を用いる場合もございます。 STEP5ブラウザ検証（静的表示） マークアップが終了する際には、リンクのみでの画面遷移確認を行います。アクションはこの段階では未実装ですが、表示崩れや差異が無いかというブラウザ検証を実施します。 弊社では、この段階でのモダンブラウザとレガシーブラウザでの表示差異について、エンドクライアント様との間で確認を行うことをお勧めしています。スクリプト実装に入ってからの静的表示の調整は、影響範囲が大きくなるためです。 STEP6JSによるスクリプト実装 実装の最終工程となるこの段階では、STEP2や3で定義したスクリプトで表現する動きや機能の実装を行います。 実装手順はプロジェクトによりさまざまですが、大よそ外部APIとの通信部分とレスポンスアクション部分を中心に開発を実施します。 尚、プロジェクトによっては外部APIも同時に開発している場合が多く、スクリプト実装時にはスタブを構築して実装することもあります。 STEP7ブラウザ検証（動的表示） 検証の最終段階では定義された動きについてはもちろんのこと、ユーザに実際に確認いただくシナリオテストも実施いたします。 また外部APIが存在する場合は、サーバとの連携テストも実施することで、より本番環境に近い動作確認が可能となります STEP8調整期間 管理画面やアプリといったUI/UXにかかわるシステム開発では、実際に使ってみて分かる改善点があるのが当たり前です 弊社ではご提案の初期段階で、この調整期間の導入を強くお勧めしております。よりよいUI/UX開発につなげるための、重要なフェーズと認識しています。 上記はあくまで一例です。弊社ではお客様のプロジェクトの性質に応じた、最適なUI/UX開発フローをご提案しております。是非お気軽にお問い合わせくださいませ。 最適な開発フローを問い合わせる --- - Published: 2020-06-23 - Modified: 2020-06-23 - URL: https://fastcoding.jp/javascript/services/uiux/team/ HOME UI/UX開発 フロントエンド開発のチーム体制 TEAM MEMBERS フロントエンド開発のチーム体制 すべて専門職が担当 プロジェクトを円滑に進めるため、弊社では以下のようなチーム体制をもってプロジェクトを進行しております 担当ディレクタフロントエンド開発をトータルでご支援する、御社のカウンターパートナ お客様のプロジェクト進行において、お客様と直接お話しし、パートナーとして業務を遂行するスタッフです。お客様の要件把握とプロジェクト進行管理、及びギャップ調整時の要件差異の把握を行います。 設計部門プロジェクトの要件定義、及びシステム設計を行う部門 業務アナリスト お客様から頂戴するサイトマップやページ群を元に、エンドクライアント様の業務目的の理解と、そのために必要な各種機能内容の取りまとめを行います。 この業務を行うには、細かい情報収集と、プロジェクトを俯瞰した目的と要件の理解が必要となります。ディレクターの業務と分けているのは、それだけにこの部分が重要と考えているからです。 プロジェクトの詳細を把握したのち、業務アナリストはプロジェクトで必要となる情報群（モデル）と、機能群（ビューとアクション）を明確にします。 システムデザイナー 実装するシステムの設計を担当します。具体的にはバックエンド側のAPI仕様や業務アナリストから得られたモデル・ビュー・アクションの一覧を元に、最適な実装方針を検討します。 実装方針は運用開始後のメンテナンスや改善業務の効率も左右する重要なポイントです。経験豊富なシステムデザイナーが、御社のプロジェクトに最適な実装をご提供します。 実装部門実装及び単体テストを行う部門 プロジェクトマネージャ 通常プロジェクトマネージャは、プロジェクト全体の進行を管理し、お客様との折衝を行いますが、フロントエンド開発プロジェクトに特化したコーディングディレクタを用いる弊社では、実装分野のみを専門的に管理します。 プロジェクトマネージャは設計部門から共有されたシステム設計を元にシステムエンジニアを指揮し、実装を進めていきます。プロジェクトマネージャはプロジェクトをスケジュール内に完了するよう進行しますが、時には柔軟な仕様変更に対応できるよう、実装順序の段取り替えやモック実装、サンプル実装などを行うことで、プロジェクト全体の品質を高めるよう業務を進めます。 システムエンジニア 実装を担当します。実装はテストドリブンで実施され、単体テストまでをカバーします。常にプロジェクトマネージャと連携を取りながら、スケジュール遅延やミスの無いよう開発を進行します。 テスト部門結合テスト、シナリオテストを行い、「使える」フロントエンド開発の提供を担保する部門 テストデザイナー テスト設計を行います。テストは単体、結合、シナリオ、負荷テスト等、多種多様な種類があり、どういったテストが必要であるかは、プロジェクトによってばらばらです。 テストデザイナーは、プロジェクトの性質から、少なすぎず、多すぎない「必要十分」なテストを設計いたします。また自動テストを利用する場合のテストスクリプト作成も行います。 テスター テストを行います。弊社のテスターはテスト業務を実施するだけではなく、ユーザ視点での意見提案も同時に行います。単に項目を埋めるだけではなく、より「生きた」テストを行います。 上記はあくまで一例です。弊社ではお客様のプロジェクトの性質に応じた、最適な体制をもって対応しております。是非お気軽にお問い合わせくださいませ。 まずはお問い合わせ --- - Published: 2020-06-23 - Modified: 2020-06-23 - URL: https://fastcoding.jp/javascript/services/flash/ HOME Flash移行フロントエンド開発 Flash to JavaScript Flash移行フロントエンド開発 Flash To JavaScriptの難易度 Adobe Flash © はユーザインタラクティブなWebコンテンツの制作に大変便利なツールでしたが、サポートの終了が決まっているため、コンテンツの移行作業が大変重要になってきています。 世の中にはいくつかの自動変換ツールもありますが、特に業務用システムやサービス管理画面、UI/UXとして活用されているFlashソフトウェアの移行は難しく、１００％再現できるツールは未だ存在しないのが現状です。 特に業務用システムにて利用されているFlashは、構築当初から時間がたち、業務フローの見直しや、それに伴う再設計が必要となっている可能性が高いと推測されます。 Flash TO FlashからJavaScriptへの移行・移植は弊社まで 弊社ではJavaScriptを用いたリッチメディアコンテンツの開発を行っており、Flashで構築されたUI/UX環境からJavaScriptへの移行開発を積極的にサポートしております。 Flash上のユーザビリティ高いコンポーネントを、そのままJavaScriptへの移植したり、Vue. jsやAngularを用いたフロントエンドシステム全体の再構築もご支援しております。 JavaScriptを知り尽くした弊社だからできる、Flashからのシームレスな移行を、是非ご体感ください。 実績に自信あり。まずは問合せを！ --- - Published: 2020-06-23 - Modified: 2020-06-23 - URL: https://fastcoding.jp/javascript/services/iotdevices/ HOME IoTプラットフォームアプリ開発 IoT Platforms IoTプラットフォームアプリ開発 IoTデバイス向けOSでのフロントエンドシステム開発 弊社ではTizenやFirefoxOS（B2G）、Windows 10 IoT Core搭載デバイス用のフロントエンドシステム開発を行っております。 各OSではW3C準拠のブラウザ（レンダリングエンジン）が搭載されることもありますが、ことスクリプト処理においては、モバイルデバイス故の処理能力の制限から、独自実装が多いのが現状です。 こういった環境下でのシステム開発は、スクリプトの記述は正しいのに動かない、メモリーリークが多発する、急にシステムがダウンする等といった、原因不明のバグが生まれやすい難易度の高い作業となります。 弊社ではOSやデバイスに関する知識あるディレクタ、エンジニアが、各OSの特性はもちろんのこと、実装デバイスの処理能力に応じたスクリプトのチューニングも実施いたします。 単にスクリプト開発を行うのではなく、「使える」フロントエンドソフトウェアを開発いたします。 実績に自信あり。まずは問合せを！ --- - Published: 2020-06-23 - Modified: 2025-10-16 - URL: https://fastcoding.jp/javascript/services/spa/ HOME Vue. jsやReactによるフロントエンド開発 SPA by Vue. js/React Vue. jsやReactによるフロントエンド開発 01Vue. jsやReactによるSPA開発 ブラウザの能力が向上するにつれ、フロントエンドだけで多種多様な処理を行うSingle Page Application（SPAs）の開発ニーズが高まっています。JavaScriptは、その中心言語として広く利用されています。 画面アニメーションや入力補助に使われる程度であればJavaScriptのネイティブオブジェクト（DOM）やjQuery等のプラグインを用いることで簡易に開発することができますが、データバインドやバックエンドとの非同期通信処理が求められるSPA開発ではより大規模なシステムフレームワークが必要となります。 弊社ではVue. jsやReactを用いたフロントエンド開発を行っております。FASTCODINGから得られたマニュアル化技術を用いることで、より早く効率的に行う専門チームを保有しております Vue. js/React開発チームに問合せ 02対応フレームワークの一覧と、各々の特性 多種多様なJavaScriptフレームワークも、それぞれ得意不得意があります。それぞれ一般的には以下の特性があると認識されております。 特長とお勧めするプロジェクト Angular 大規模なアプリケーション開発に向いているフレームワーク システム全体のフロントエンドフレームワークとして導入できる場合であれば、どのプロジェクトにも最適なフレームワークです。 しかしながら、部分的に導入する場合や、すでに異なるフレームワークが存在する場合は、導入コストが高くなる可能性があります。 React UIに関する機能を中心に実装されたライブラリ UI/UXの改善を行う場合や、すでにデータバインディング、バックエンドとの通信処理が実装済みの場合にはお勧めのライブラリです。 Vue. js データバインディングに関する機能を中心に実装された軽量フレームワーク シンプルで軽量なフレームワークです。AngularやReactと同程度の機能を持ち合わせながらも、非常に軽量に動作します。どのプロジェクトでもお勧めできるライブラリです。 Node. js バックエンド（サーバサイド）向けのJSフレームワーク バックエンドで稼働するフレームワークです。もちろんフロントエンド開発において、バックエンド実装を意識する必要は基本的にありませんが、弊社ではフルJavaScriptでのフロント／バックエンドシステム開発も可能であります。 Socket. IO WebSocketを利用するためのライブラリ リアルタイムでのデータ表示が必要なサービス開発には重要なライブラリです。通常のHTTP通信ではカバーしきれない細かなリアルタイムデータバインディングを行うWebSocket。これを簡易かつ強力に実装できるライブラリです。チャットサービスや共同編集のドキュメントUI構築などで利用します。 ファストコーディングではVue. jsやReactを用いたフロントエンド開発に対応しております。Vue. jsやReactはコンパクトなライブラリでありながらも、他のフレームワークに引けを取らない機能が豊富です。 また活発なコミュニティ活動による日々の改善が、より効率的なフロントエンド開発を可能にします。 03フレームワークを生かした設計能力 フレームワークを使った実装は、リファレンスやサンプルソースを確認することで誰もが可能です。 しかし最も重要なことは、それらを活用して、どういった設計を行うかにつきます。 フレームワークによってはMVCやMVVCといった設計指針は元より、通信時のデッドロックや画面フリーズが起きないイベント通知等、細かな癖を理解することが非常に重要となります。 弊社では多数のフロントエンド開発経験から、ターゲットブラウザや環境の特性を生かして設計を行います。 設計段階から専門チームに依頼することこそ、フロントエンド開発の成功の秘訣です。 フロントエンド設計を依頼する --- - Published: 2020-06-23 - Modified: 2020-06-23 - URL: https://fastcoding.jp/javascript/services/animation/ HOME JavaScriptアニメーションのフロントエンド開発 ANIMATION SCRIPTS JavaScriptアニメーションのフロントエンド開発 アニメーション開発のポイント Webサイトをより魅力的に見せるため、アニメーションの実装を行うことは非常に重要です。 しかしながらどういったアニメーションを実装するかはプロジェクトによって千差万別。また対象となる端末やブラウザによっても実装方法が変わってきます。 また実際に動かすまでは、どういった実装ができあがるかわからないのも、アニメーション開発の難しいところです。 Webデザイナーやアニメーター、またクライアント様のご要望が着実に反映されるかどうか、Webディレクタの悩みの種ではないでしょうか？ 弊社ではアニメーション開発を進める上で、以下に重視しながらプロジェクトを進行しております。アニメーション開発を熟知しているからこそ、遅延しない、最高品質の制作が可能となります。 アニメーションサンプルと価格はこちら --- - Published: 2020-05-22 - Modified: 2024-11-02 - URL: https://fastcoding.jp/enterprise/ MENU TITLE 特長 お客様の声 チーム価格 よくある質問 お問合せ ムリ・ムダ・ムラのないプロジェクト管理 チームで制作するので柔軟に対応できる！大量コーディング制作 大量HTMLコーディング制作 ファストコーディングでは大量HTMLコーディング制作や大規模プロジェクトのHTMLコーディング制作、CMS構築も承っております。 ディレクション 1000ページを超える大規模Webサイト構築経験を持つコーディングディレクターが大量HTMLコーディングプロジェク完了までしっかりとサポートすることをお約束いたします。 スピード対応 プロトタイプツールからのHTMLコーディング制作、既存HTMLコーディングを活かした流し込みなど大量HTMLコーディング制作に必要な省力化、スピード対応をお約束いたします。 明朗会計 FASTCODINGで培ったマニュアル化によるHTMLコーディング手法を用いますので、明朗会計でのサービス提供をお約束いたします。 ディレクション 1000ページを超える大規模Webサイト構築経験を持つコーディングディレクターが大量HTMLコーディングプロジェク完了までしっかりとサポートすることをお約束いたします。 スピード対応 プロトタイプツールからのHTMLコーディング制作、既存HTMLコーディングを活かした流し込みなど大量HTMLコーディング制作に必要な省力化、スピード対応をお約束いたします。 明朗会計 FASTCODINGで培ったマニュアル化によるHTMLコーディング手法を用いますので、明朗会計でのサービス提供をお約束いたします。 FASTCODING ENTERPRISEの特長 プロトタイプツールからのHTMLコーディング制作 大量ページ作成では、すべてのページデザイを制作することは稀です。弊社では標準デザインパーツを元に、SketchやProttといったプロトタイプデータや、PowerPoint等で作成されたワイヤーフレームをベースとするHTMLコーディング制作に対応しています。 W3CやJIS規格に準拠するHTMLコーディング制作 W3Cに準拠するHTMLコーディング制作はもちろんのこと、JIS規格にて制定されたWebアクセシビリティ（JIS X 8341-3:2016）にも準拠したHTMLコーディング制作にも対応しています。大企業のコーポレートサイト構築要件や、官公庁への入札時に必要なコーディング要求仕様をクリアしたHTMLコーディングを制作いたします。 商用CMSへ取り込みやすいパーツ・CSS設計 各種ベンダーにより提供される大規模Webサイト向け商用CMS用のHTMLコーディング制作にも対応しております。各商用CMSが持つ、固有のテンプレート仕様に沿ったテンプレートパーツ制作やテーマファイル制作、流し込みデータ登録も対応可能です。 担当ディレクタによるプロジェクト進捗報告、レポーティングの実施 担当となるコーディングディレクタは、大規模Webサイト構築のプロジェクトマネージメント経験が豊富です。プロジェクト運営で重要となる課題管理やリスク管理、また定例会での進捗報告も行います。リスクとなりうる問題をいち早く察知し、プロジェクト運営を円滑に進めるご支援をいたします。 お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする お客様の声 株式会社大都 様 価格がシンプルで安く、納品も早い上に、SEO対策もできる。 料金体系がシンプルで安く、納品が早いことに加えて、セマンティックコーディングでSEO対策も出来ました。何より、思い描いたデザイン通りにコーディングしてもらえたのが最高でした。 続きを読む 株式会社イルグルム 様 修正対応もとても迅速なので大変心強い存在です。 気になったことや修正したい点など、スプレットシートにまとめていけるのでとても効率的ですし、修正対応もとても迅速なので大変心強い存在です。 続きを読む 株式会社マトリックス・オーガナイゼーション 様 システムを含めた複雑なサイト構築まで親身に相談 ともするとクライアント都合で進行がルーズになりがちですが、とてもきっちりと管理していただけて恐縮です。また進行管理を共有するシステムをとっており、進捗が分かりやすく助かります。 続きを読む 株式会社MAGES. 様 顧客ニーズに合わせた柔軟なシステム開発が可能。 WordPress（CMS）に精通していて、ニーズに合わせた柔軟なシステム開発が可能な上、こちらの要望を的確に理解してもらえたので、安心してお任せできました。 続きを読む お客様の声へ チーム価格 メンバー数 稼働月数 人月単価 合計価格 メンバースキル 人月単価 HTMLコーダー 200,000円/月から JavaScriptエンジニア（ページアニメーション制作） 300,000円/月から JavaScriptエンジニア(Vue. js, React, Angular, Node. js） 350,000円/月から WordPressエンジニア(PHP) 350,000円/月から ※メンバースキルの決定はプロジェクトの詳細をお伺いして決定します。※人月単価はメンバースキル毎に細かく異なります。詳細はお問い合わせください。 FAQ お客様よりよくご質問をいただく内容を一覧にまとめましたのでご覧ください。また、ご不明な点がございましたらお問い合わせフォーム よりお気軽にご連絡ください どういったプロトタイプツールに対応していますか？ SketchやPrott、InVisionなどに対応しております。また特にツール自体の制限はせず、お客様の要求仕様が確認できるデータ形式であれば、積極的に対応をしております。 パーツ定義書やCSSの設計書を納品することは可能ですか？ はい、もちろん対応可能です。パーツ定義書は後々の運用フェーズでも利用される重要なドキュメントです。またCSSについては各種設計技法に応じたCSSファイル構造や各セクションの説明文を記述したCSS設計書をご納品することも可能です。 JIS規格への対応はどこまで実施可能ですか？ 具体的にはJIS X 8341-3:2016への対応を実施しておりますが、対象ブラウザの定義や実装するJavaScript、各種アニメーション処理によっては、技術上対応ができない場合もございます。 メール以外のコミュニケーションツールには対応していますか？ はい、もちろん対応をしております。お電話はもちろん、ChatWork、Backlog等のコミュニケーションツールにも対応しております。お使いの環境に合わせて最適なツールをご指定ください。 クライアント特有の仕様や、CMS特有の仕様にも対応可能ですか？ はい、もちろん可能です。まずはコーディングディレクタまで詳細仕様をお伝えください。 お見積り・ご相談等、お気軽にお問合せ下さい 東京 03-6806-0354 大阪 06-7878-8160 自動見積りをする 問い合わせをする --- - Published: 2020-03-26 - Modified: 2024-02-28 - URL: https://fastcoding.jp/webaccessibility/ Webアクセシビリティ Webアクセシビリティ義務化について WEBアクセシビリティとは？ SEOとWebアクセシビリティ 弊社Webアクセシビリティ対策の特長 価格と納期 既存サイトへのWEBアクセシビリティ対応の流れ FAQ お問合せ HOME Webアクセシビリティ SEOの観点からも重要なWebアクセシビリティ対策 Webアクセシビリティ対応が義務化されます。 2024年4月に施行される「改正障害者差別解消法」により、全事業者に対して「合理的配慮の提供」が義務化されます。これにより、企業側は障害のある方もWeb上で自由に情報を得られるよう、アクセシビリティに配慮したWebサイトの提供を心掛ける必要があります。 詳しくはこちら 無料でWebアクセシビリティ診断を行っております。 ご指定のサイトや、制作中のプロジェクトについて無料でWebアクセシビリティ診断を行います。JIS基準の適合度合いや、どういった修正作業が必要か、診断結果と共にご案内しております。 WEBアクセシビリティとは？ Webを利用するすべての人が年齢や身体的制約、利用環境などに関係なくWebにアクセスできること。 1CASE コンタクトレンズやメガネを忘れて文字が読みづらかった。 テキストの文字サイズを標準の200％まで拡大しても、コンテンツの閲覧や操作に支障が生じないようにする必要があります。 2CASE 外出先でスマホを利用したら、使いづらかった。 コントラスト比は４. ５:１以上！文字と背景のコントラストを確保することは、モバイルでのWebコンテンツ利用の比率が高まるにつれ、屋外などでも読みやすくするためにも重要性が高まっています。 3CASE 視覚障害があり、音声読み上げソフトを利用している 漢字にできる箇所は、記号を使わず漢字を使う！数字に付随する単位はカタカナにする！スペースや改行の取り方。画像化された文字はテキストを用いて情報を伝えなければならないなど、様々な対応があります。 上記の様な状況全てに対応していこうというのが「Webアクセシビリティ」の基本的な考えです。 SEOとWebアクセシビリティ 1SEOを意識したマークアップがWebアクセシビリティに繋がっている！？ Webアクセシビリティ対策をほとんど意識せず、特別な対策はしていないにもかかわらず現状のサイトはアクセシビリティをある程度確保できている。こういったパータンって結構多くあります。それは、検索エンジン（ロボット）に対してSEOの観点から、画像の代わりとなるテキスト情報（代替テキスト、alt属性）を指定したり、ロボットに文書の構造が適切に伝わるように、タイトルや見出しなど、HTMLを適切にマークアップするなどの施策が行われているからです。 2マシンリーダビリティを向上させる コンテンツをロボットが読み易くする事を「マシンリーダビリティ」と呼びます。検索エンジンのロボットやスクリーンリーダーは、人の目を持たないプログラムです。SEOの目的でマシンリーダビリティを向上すれば、支援技術でアクセスしやすいものになり、結果的にアクセシビリティ向上につながるのです。 3検索結果が重要視される Webで何かを探そうとするユーザーは、年齢や身体的制限があるないにかかわらず、まず検索エンジンで検索する事がほとんどです。例えば、お店のアクセス情報を知りたいと思った時、まずはお店の名前で検索します。次にサイト内のナビゲーションに「アクセス」「所在地」などの項目がないか探しますが見当たらない事もあります。その場合は検索エンジンに戻り、「店舗名 アクセス」のように検索し直します。すると、ほとんどの確率で情報がヒットするでしょう。このように、サイト内のナビゲーションが使いにくければ、検索エンジンで直接探すほうが早く効率的な場合があります。 SEO対策を考慮したコーディングはアクセシビリティにも良い結果をもたらしてくれるわけです。 弊社Webアクセシビリティ対策の特長 1POINT 総務省「みんなの公共サイト運用ガイドライン」に準拠 総務省が発表している「みんなの公共サイト運用ガイドライン（2016年版）」に準拠し、サイトのチェックや修正を行います。チェックには「みんなのアクセシビリティ評価ツール（miChecker （エムアイチェッカー））」を用います。 2POINT 修正結果のレポーティング 修正箇所や修正内容に関して、指定のフォーマットでのレポートが可能です。もしフォーマットが無い場合は、弊社にてご用意いたします。 3POINT 既存サイトのアクセシビリティ対応も可能 既に公開しているサイトに対して、WEBアクセシビリティ対応を行うことも可能です。現状の問題点と修正の方針を打ち合わせにて共有し、修正いたします。 価格と納期 1サイト 150,000円〜 納期 8〜10営業日程度 ※10ページの静的サイトに基準Aの対応を想定 ※修正結果表作成含む 既存サイトへのWEBアクセシビリティ対応の流れ 1 サイト構成のヒアリング・達成基準の決定 対象となるサイトのページ構成やシステムの有無等をヒアリング致します。またプロジェクトにおいて必須となる達成基準（等級A, AA, AAA）をお選びいただきます。※基準によっては、サイトデザインやレイアウトの変更を要する場合もございます 2 対応ページ数の確定・お見積り サイト構成や達成基準を参考に、チェック／修正が必要となるボリュームを計算し、お見積もりをご提案いたします。 3 テスト環境構築・修正作業開始 現状データをご入稿いただきましたら弊社テストサーバにてテスト環境を構築いたします。その後チェックと修正作業を順次行います。 4 テストアップと結果表のご納品 修正結果はテストサーバに反映いたします。またチェックリストや修正結果表をデータにてご納品いたします。 FAQ QCMSが含まれるサイトも対応可能ですか？ はい、可能です。詳細は担当ディレクターにご相談ください。 Q官公庁サイトの対応も可能ですか？ はい、可能です。総務省の通達においては、行政や官公庁サイトでは基準ＡＡを求められていますが、実際には各団体において個別に判断されている事例もあります。実際に必要な達成基準や方針をお教えください。 --- - Published: 2019-12-09 - Modified: 2025-08-23 - URL: https://fastcoding.jp/animation/ HOME JavaScriptアニメーション制作 JSアニメーション ココが強い！ こんなお悩みありませんか？ サンプルデータ アニメーション制作の流れ FAQ お問合せ JavaScriptアニメーション制作専門チーム JavaScriptアニメーション制作を専門に行うチームが、ご要望に合わせたアニメーションを制作いたします。 ココが強み！ 1 point オープンソースのアニメーションライブラリに対応 世界的に利用されているCanvasJS、D3. js、Chart. js等のライブラリを用いた制作が可能です。 2 point 表示速度を意識したアニメーション制作 SEOに強いHTMLコーディング制作を行う弊社では、アニメーションを付けることによるユーザビリティの低下を防ぐため、アニメーション表示までのローディングや、一時的な仮表示画像等の設定を意識してアニメーション制作を行います。 3 point Flashからの移行も対応 Flashの機能や動作を確認し、同じ効果や機能を持つアニメーションを最新のJavaScriptライブラリを用いて制作いたします。 こんなお悩みありませんか？ ライバルサイトのような動きを持たせてみたいが、どうやって作られているかは分からない 弊社にお任せください！ まずは動きの参考となるサイトのアドレスと、実装したいサイトのアドレスをお送りください。JavaScriptアニメーション制作の専門チームが動きを解析し、開発方針とお見積もりをご提案いたします。 動きを入れたらサイトが重いと言われた 弊社にお任せください！ 弊社ではアニメーションが再生される前後の挙動も含めて設計し、ユーザビリティを損なわないアニメーション制作を行います。 既存のアニメーションをバージョンアップしたいが、過去の制作資料は無い 弊社にお任せください！ まずはJavaScriptアニメーション制作専門チームが既存のデータを拝見し、仕様を確認いたします。また制作してから年数がたっている場合は、新しいライブラリに置き換えることでより早く安価に開発できる場合もあります。御社にとって最適な開発方針をご提案いたします。 アニメーションに関するお問合せはこちら サンプルデータ 2D Animation スクロールアニメーション アイソメトリック地図アニメーション COMINGSOON アニメーション制作の流れ 1 実現したいアニメーションの内容と、対象サイトを確認 ココが重要 アニメーションの内容の説明が難しい場合は？ 具体的にどういった動きが必要になるか。動かないWebデザインに比べますと、エンドクライアントの意向を把握するのに苦労するのがアニメーション開発です。プロジェクト規模によっては、想定する参考サイトや参考のアニメーションを元に、アニメーションのモックアップ制作も重要になってきます。弊社ではムービーでの大まかな動きの作成からご支援することが可能です。 2 開発方針と御見積、スケジュールをご提案 ココが重要 対象ユーザから、ターゲット環境やブラウザを選別する エンドクライアントからすれば、全ての環境で動作するものを求められるのは必然のことです。しかしながら、JavaScriptを利用するアニメーション開発では、各ブラウザやOSの仕様から、必ずしもすべての環境で同じ動作にならないというのも、現実問題として存在します。したがってすべての環境で同様に表示するには、コストがかかってきてしまうことは言うまでもありません。エンドクライアントには技術的な問題を事前に説明するとともに、対象ユーザから同定したブラウザ環境を「こちらから」提案することが重要と思われます。 3 実装、テストアップを行い、ギャップ調整を行う ココが重要 プロジェクトスケジュールに、調整期間を必ず持たせる 細かな要件定義を重ねて開発を行っても、やはり「実際に動かしてわかること」は、あって当たり前だと考えます。よって調整期間として、リリース後の一定期間を確保するのは、エンドクライアントにとっても安心できる提案の一つだと考えます。調整期間を有効に活用するには、制作期間中も含めて課題管理をしっかり行うことが重要です。弊社では多数のコーディングプロジェクトを運営した経験より、どういったプロジェクト管理手法が最適であるか、ご提案をいたします ご納品 FAQ 対応しているブラウザは何になりますか？ 標準ではモダンブラウザ（Edge, Google Chrome, Firefox, Safari）の最新バージョンに対応しております。その他のブラウザにも対応可能ですのでまずはご相談ください。 対応しているライブラリは何になりますか？ Create. jsやPixi. jsといったアニメーションのライブラリや、jQueryのプラグインベースのアニメーション開発も可能です。詳細はお問い合わせください。 ライブラリを一切使わない開発（Vanilla JSでの開発）も可能ですか？ はい、可能です。弊社のJavaScript開発専門チームが、ブラウザやクライアント端末に負荷をかけないアニメーション制作をご提案いたします。まずはお問い合わせください。 細かな動きやアニメーションの雰囲気等の要件をどのように伝えればよいですか？ 参考となるWebサイトや動きの事例をお伝えください。ご提示いただいた参考データを元に、最適な実装をご提案いたします。 事前に打ち合わせは可能ですか？ はい、もちろん可能です。まずは概要をお問い合わせください。別途営業担当からご連絡いたします。 --- - Published: 2019-11-09 - Modified: 2025-09-24 - URL: https://fastcoding.jp/privacypolicy/ HOME プライバシーポリシー PRIVACY POLICY プライバシーポリシー 株式会社ファストコーディング（以下、当社）は、様々な業務において取得する顧客等の個人情報と当社従業者の個人情報を適切に管理することが重要な社会的責務であると認識し、個人情報保護方針を定めて、従業者に周知徹底を図り、個人情報の保護に努めます。お客様のプロジェクトによっては、NDAを締結しなければならない場合もあるかと存じます。その場合は別途契約を行いますので、詳細をお問合せフォーム よりお送りください。 個人情報保護方針 1. 個人情報の取得および利用 当社は、事業遂行のために必要な範囲内で利用目的を明確に定め、適切に個人情報の取得、利用及び提供を行います。取得した個人情報は利用目的の範囲内でのみ利用し、目的外利用を行わないための措置を講じます。 2. 法令等の遵守 当社は、個人情報の取扱いに関する法令、国が定める指針、その他規範を遵守します。 3. 個人情報の安全対策 当社は、個人情報への不正アクセス、個人情報の紛失、破壊、改ざん、漏えい等のリスクに対して合理的な安全対策及び是正措置を講じます。 4. 個人情報の苦情・相談への対応 当社は、個人情報の取扱いに関するご本人からの苦情及び相談に対して遅滞無く対応いたします。 5. 個人情報保護マネジメントシステムの継続的改善 個人情報保護を適切に維持するために、個人情報保護マネジメントシステムを確立し、運用状況について定期的に監査を実施し、継続的な改善に努めます。 6. 個人情報保護方針に関するお問い合わせ窓口 株式会社ファストコーディング 個人情報保護担当E-mail：privacy@fastcoding. jp 個人情報の取り扱いについて 1. 利用目的 1) お客様に関する個人情報 ・ 弊社サービスに関するご案内、お問い合わせ等への対応のため ・ 弊社サービスに関するイベント、セミナー等の案内のため ・ 弊社サービスに関するアンケートや販売分析のため 2) ご契約者様に関する個人情報 ・ 弊社サービスに関する申し込みの受付、利用サポートのため ・ ユーザーのトラフィック測定及び行動測定のため ・ 広告の配信、表示及び効果測定のため ・ 弊社サービスに関する当社の規約、ポリシー等（以下「規約等」といいます。）に違反する行為に対する対応のため ・ 弊社サービスに関する規約等の変更などを通知するため ・ 1)の目的のため 3) 当社へ採用応募者に関する個人情報 ・ 採用選考のため ・ 問い合わせに対する回答のため 4) 従業員に関する個人情報 ・ 労務・人事・給与手続き、福利厚生、健康管理、社会保障・税、教育管理のため 5) 委託 当社は、上記利用目的の達成の範囲内で、個人情報の取扱いを委託することがあります。委託先に当たっては、当社の基準に基づいて個人情報の適切な管理を行っている事業者を選択し、同事業者を監督するとともに、非開示契約を締結することにより必要な個人情報の安全性を確保します。 6) 第三者提供 当社は、利用者情報のうち、個人情報については、あらかじめユーザーの同意を得ないで、第三者（日本国外にある者を含みます。）に提供しません。但し、次に掲げる必要があり第三者（日本国外にある者を含みます。）に提供する場合はこの限りではありません。 ・ 当社が利用目的の達成に必要な範囲内において個人情報の取扱いの全部または一部を委託する場合 ・ 合併その他の事由による事業の承継に伴って個人情報が提供される場合 ・ 国の機関もしくは地方公共団体またはその委託を受けた者が法令の定める事務を遂行することに対して協力する必要がある場合であって、ユーザーの同意を得ることによって当該事務の遂行に支障を及ぼすおそれがある場合 ・ その他、個人情報の保護に関する法律（以下「個人情報保護法」といいます。）その他の法令で認められる場合 7) 共同利用 当社はお客様個人情報を第三者と共同で利用する可能性があります。その場合は、あらかじめ以下の項目を通知、又はホームページ等で公表等することとします。 1. 共同利用する旨 2. 共同して利用されるお客様個人情報 3. 共同して利用する者の範囲 4. 共同して利用する者の利用目的 5. 当該お客様個人情報について責任を有する者の氏名又は名称及び住所並びに法人の場合にあっては、その代表者の氏名 2. 保有個人データに関する事項の周知 1) 事業者の名称 ・ 会社名：株式会社ファストコーディング ・ 住所：東京都千代田区外神田6-11-16 GMビル5階 ・ 代表者：代表取締役 黒川 真吾 2) 個人情報の管理者 ・ 管理者名：石井 小百合 ・ 所属部署：株式会社ファストコーディング 総務部 ・ 連絡先：privacy@fastcoding. jp 3) 全ての保有個人データの利用目的 上記「個人情報の利用目的」に記載の通りとします。 4) 保有個人データの取り扱いに関する問い合わせ先 ・ 苦情・相談窓口：株式会社ファストコーディング 総務部 カスタマーサポート ・ 住所：東京都千代田区外神田6-11-16 GMビル5階 ・ 連絡先：privacy@fastcoding. jp 5) 保有個人データ又は第三者提供記録の開示等の求めに応じる手続き （1）開示等の求めの申し出先 当社は利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去、第三者への提供の停止及び第三者提供記録の開示（以下、開示等）の依頼を受け、かかる依頼が個人情報保護法に定める要件を満たす場合は、弊社の手続きに従って速やかに対応します。 開示等のお求めは、上記「保有個人データの取り扱いに関する問い合わせ先」にお申し出ください。 （2）開示等の求めに関するお手続き お申し出受付け後、当社より「保有個人情報に関する開示等の請求書」を送付いたします。 ご記入いただいた「請求書」と「本人確認書類のコピー」、代理人によるお求めの場合は「代理人であることを確認する書類」を送付ください。 ・ 本人確認書類のコピー（運転免許証、パスポート、健康保険証、住民票、年金手帳など） ・ 代理人であることを確認する書類（下記参考。各資料の本籍地情報は都道府県までとし、それ以降の情報は黒塗りなどの処理をしてください） 【未成年者の法定代理人の場合】 ・ 代理人ご本人の本人確認書類のコピー ・ いずれかのコピー ・ 戸籍謄本 ・ 住民票（続柄の記載されたもの） ・ その他法定代理権の確認ができる公的書類 【成年被後見人の法定代理人の場合】 ・ 代理人ご本人の本人確認書類のコピー ・ いずれかのコピー ・ 成年被後見人であることを証明する登記事項証明書 ・ その他法定代理権の確認ができる公的書類 【委任による代理人の場合】 ・ 委任状 ・ ご本人の印鑑証明書（3ヶ月以内に発行されたもの） ・ 委任を受けたご本人の本人確認書類のコピー （3）開示等のご請求の手数料および徴収方法 ご請求については、1回の申請ごとに1,000円を弊社所定の請求書記載の口座にお振り込みください（お振り込み手数料はご請求者にて負担ください） ※手数料が不足している場合および手数料が振り込まれていない場合は、その旨をご連絡申し上げますが、所定の期間内にお支払いがない場合は、開示の求めがなかったものとして対応させて頂きます。 ※手数料の発生は、「保有個人データの利用目的の通知」又は「保有個人データ又は第三者提供記録の開示」に限ります。 3. 個人情報の安全管理のために講じた措置について 1) 組織的安全管理措置 ・ 個人情報の取扱いに関する責任者を定め、報告連絡体制や、取り扱い方法を管理しています。 ・ 個人情報の取扱状況について定期的な点検及び監査を実施しています。 2) 人的安全管理措置 ・ 個人情報の取扱いに関する留意事項について、従業者に定期的な研修を実施しています。 ・ 個人データについての秘密保持に関する事項を就業規則などに盛り込んでいます。 3) 物理的安全管理措置 ・ 入退出管理や持ち込む機器等の制限を実施し、あわせ権限を有しない者による閲覧などを防止する手段を講じています。 ・ 個人情報を取扱う機器や書類等の盗難又は紛失等を防止する措置を講じています。 4) 技術的安全管理措置 ・ 個人情報データベース等へのアクセス者の認証ルール・権限を明確化し、必要最低限に設定しています。 ・ 個人データを取り扱うシステムや、関連機器に導入するセキュリティ対策ソフトを最新の状態を保持しています。 制定:2025年2月3日最終改正:2025年5月19日株式会社ファストコーディング代表取締役 黒川 真吾 --- - Published: 2019-11-09 - Modified: 2019-11-09 - URL: https://fastcoding.jp/features/fastmethod/ HOME OUR FEATURES 品質を高める取り組み QUALITY MANAGEMENT 品質を高めるための理論 HTMLコーディング業務を徹底分析した「ファストメソッド」 コーディング代行のお問合せはこちら 品質を高める取り組みQUALITY MANAGEMENT 01品質を高めるための理論 Webデザイン制作や、システム開発の手法が千差万別な様に、HTMLコーディングを制作する手法もまた、世の中には大量にあります。マークアップを効率的に制作するECTやPUG、SMACSSやOOCSSなどのCSS設計技法、またこれらの言語やツールを統合し、業務全体のスピードを上げるタスクランナーやBTS。制作全体の効率化を図るためSketchやZeplinといったツールを利用することも、一種の制作手法と呼べるかもしれません。どの手法が「早く」、「最高品質」を生み出せるか、私たちは日夜研究を重ねました。その研究結果を元に作成されたのが、最も効率的、すなわち、早くても品質を保つことができる独自の業務フロー「ファストメソッド」です。 02HTMLコーディング業務を徹底分析した「ファストメソッド」 「ファストメソッド」はHTMLコーディング代行専用のプロジェクトマネージメント手法と言えます。私たちは生産工学の観点から業務を分析し、各工程のムリムダムラを把握しました。また、常に全行程の「見える化」ができる業務管理ツールを独自開発し、早くて質の良いHTMLコーディングを生み出すことのできる「HTMLコーディングマニュアル」＝「ファストメソッド」を作り上げました。この「ファストメソッド」を活用することで、質を落とさず、一定のスピードでHTMLコーディングを制作できる、コーディング業務に特化した業務フローを確立しています。 「ファストメソッド」はコーディング制作をフェーズごとに分析し、最も効率的かつバグを低減する管理方法を考えた、HTMLコーディングプロジェクト専用のプロジェクトマネージメント手法です。以下に「ファストメソッド」の一部をご紹介いたします。弊社の品質を守る活動をご覧ください。 チーム構成と専門ディレクタ コーディング設計の技法 テスト検証方法 --- - Published: 2019-11-09 - Modified: 2019-11-09 - URL: https://fastcoding.jp/features/fastmethod/testing/ HOME OUR FEATURES 品質を高める取り組み HTMLコーディング代行のテスト・検証作業 TESTING コーディング品質とは 自動検証システム レビューア コーディング代行のお問合せはこちら HTMLコーディング代行のテスト・検証作業TESTING 01コーディング品質とは HTMLコーディングはデザイン通りに見えることは当たり前の品質です。その上で、メンテナンス性や可読性、SEOを念頭に置いたマークアップ等、求められる品質は多数あるかと思います。弊社ではHTMLコーディングの品質を「SEO効果の高いセマンティックコーディング」と捉えています。元来のSEO対策経験をもとに、Google、Yahooの検索エンジンへのインデックス効果が高いセマンティックコーディングを行うことで、Webサイトの収益性をどこよりも高めて制作を行います。 02自動検証システム 特に大量ページをコーディングする場合、一つ一つのチェックを目視で行うには時間的制約があることがほとんどです。品質を担保したまま大量ページのコーディングを行うため、弊社ではオープンソースのSonarCubeをカスタマイズした自動検証システムを構築しています。マニュアル化されたHTMLコーディング制作手法は、検証段階でも役立ちます。自動検証を取り入れることにより、常時バグの検査が可能となり、プロジェクト全体のスピードを早めることが可能となりました。 03レビューア 見た目のチェックを行うのがチェッカーであるとすれば、弊社では裏側のチェック＝ソースコードとして、論理的にバグが無いかどうかをチェックする要因としてレビューアを配置しています。レビューアは実装段階からコーダーのソースコードを確認し、コーディング設計で定義されたパーツやCSS構造単位に越脱が無いか、ブラウザ依存するコーディングになっていないかなどを確認しています。レビュー記録は社内で共有されるため、将来的にバグを軽減するコーダ教育にも大いに役立っています。 --- - Published: 2019-11-09 - Modified: 2024-12-13 - URL: https://fastcoding.jp/servicepolicy/ HOME ご利用規約 SERVICE POLICY ご利用規約 本ページでは、弊社のHTMLコーディング代行サービスやフロントエンド開発サービス等をご利用いただく際の規約を記載しております。お客様のプロジェクトによっては、異なる規約・契約を適応しなければならない場合もあるかと存じます。その場合は別途契約を行いますので、詳細をお問合せフォーム よりお送りください。担当者がご相談内容・疑問点等についてお答えいたします。 ファストコーディング 利用規約（以下「本規約」という。）は、株式会社ファストコーディング（以下「当社」という。）が提供する全てのサービス（以下「本サービス」という。）を利用しようとする者（以下「申込者」という。）及び当社との間で本サービスの利用契約（以下「本契約」という。）を締結した者（以下「契約者」という。）に適用される。 第１条（目的） １ 本規約は、本サービスの申込者が当社との間で本契約を締結するための手順、並びに、契約者が本サービスを利用する際の契約条件などを定めるものである。 ２ 本規約は、当社と申込者及び契約者との間の権利義務を規律するものであり、本サービスの申込者及び契約者は、本規約の全ての内容に同意したものとみなされる。 第２条（申込手続） １ 当社は、申込者から「お見積りフォーム」や電子メール、打合せを通じて見積り依頼を受信した場合、本サービスの提供に必要な申込者の情報や、申込者が本サービスに求める仕様を記載した「仕様書」の提出を申込者に求める。 ２ 前項により申込者が提出した「仕様書」に不十分な点又は不明瞭な点がある場合、当社、申込者に対してこれらの照会を求めることがある。その場合、申込者は、当該照会に対して、誠実かつ適切に対応するものとする。 ３ 当社は、前二項を通じて提出された情報に基づき、当該申込者に対する本サービス提供のための「依頼内容」を確定し、申込者に実施内容を提案する。 ４ 申込者が前項の実施内容を確認し、弊社へサービスの申込を行う場合、申込者は「発注書」を弊社に送付する。 ５ 弊社が「発注書」を受信し、弊社が電子メールにおいて受領した旨を通知することで本サービスの申込みが完了する。 第３条（申込と本契約の成立） １ 本サービスの申込者は、前条（申込手続）及び当社が指示する手順を通じて、当社に対し、本サービスの申込みをする。 ２ 当社は、申込者が以下のいずれかに該当した場合は、当該申込者の申込みを承諾しないことがある。なお、当社は、上記判断に関する理由を開示する義務は負わない。 （１）前項の方法によらずに本契約の申込を行った場合 （２）当社に提供される情報の全部又は一部につき、虚偽、誤記又は記載漏れがあった場合 （３）当社からの照会に適切な回答がなされない場合 （４）本規約に違反するおそれがある場合 （５）過去に本規約に違反した者又はその関係者である場合 （６）法人の代表権を有する者の同意を得ていなかった場合 （７）本サービスと同種又は類似するサービスを提供している場合又は将来提供する予定である場合 （８）その他当社が申込を妥当でないと判断した場合 ３ 本契約は、前条第５項の「発注書」が当社に到達した時点で成立する。 ４ 契約者は、本契約の成立までに当社に提出した契約者に係る情報（以下「登録事項」という。）が、全て正確であることを保証する。 ５ 契約者は、登録事項に変更が生じた場合は、直ちに当社に対し、その旨を通知するものとする。これを怠ったことによって契約者が損害を被ったとしても、当社は一切責任を負わない。 第４条（解除） １ 当社は、以下のいずれかの場合、一方的に本契約を解除することができる。 （１）サービス遂行における質疑について、当社からの照会に契約者が適切に対応しない場合 （２）申込者が提出した「仕様書」が、本サービスの遂行に十分な内容を有せず、本サービスの遂行ができないと当社が判断する場合 （３）当社からの照会に契約者が適切に対応しない場合 （４）その他、契約者の責めに帰すべき事由により本サービスの提供が妨げられたと当社が判断した場合 ２ 契約が解除される場合、当社は解約料として見積金額の全額を契約者に請求し、契約者はそれを支払う。 第５条（本サービス） １ 本サービスは、契約者が提出した「仕様書」に基づいて、制作作業をするものであり、「発注書」を送付した後に契約者が「仕様書」を追加・修正する場合、別途、費用がかかる場合がある。 ２ 契約者が提出した「仕様書」に記載のない事柄について、当社は、当社がサービスの提供において妥当と考えうる内容にて作業することとし、契約者は、事前に特定の希望を述べない限り、これに異議を申出ることができないものとする。 第６条（納品） １ 当社は、当社が第２条の申込手続に際して案内した納品日までに、制作物を契約者に納品する。 ２ 契約者は、制作物の納品日から５営業日以内に制作物を検収し、不備がないことを確認し、作業が完了した旨の連絡を当社に通知するものとする。なお、制作物の検収は、当社所定のテスト環境（対応ブラウザ、プロパティ）に準拠した方法による必要がある。 ３ 制作物を検収した結果、不備がみつかった場合、当社は早急に不備を是正するように対応するものとする。但し、当社の責めに帰すべき事由がない場合はその限りではない。 ４ 第２項にかかわらず、契約者が５営業日以内に検収結果を当社に通知しない場合、当該制作物は検収に合格し作業が完了したものみなす。 第７条（利用料金） １ 契約者は、本サービスの利用の対価として、当社が提案し契約者が同意した「発注書」に記載する 料金及びこれに対する消費税相当額（以下、併せて「利用料金」という。）を当社に支払うものとする。 ２ 前項の利用料金は、前条第３項及び第５項により作業が完了となった日の属する月の翌月末日（当該日が金融機関の休業日である場合は、その前営業日）までに、当社が別途指定する銀行預金口座宛に振込送金の方法により支払うものとする。なお、振込手数料は、契約者の負担とする。 ３ 契約者が利用料金の全部又は一部を支払わない場合、当社は契約者に対し、支払期限の翌日より実 際の支払日までの日数に応じ、未払利用料金に対し年利１４．６％を乗じて計算した金額を遅延損害金 として請求できる。 ４ 前二項にかかわらず、当社は、「仕様書」などに応じて、当社から提案する「発注書」において、 契約者に利用料金の先払いを求めることがある。 第８条（協力） 当社による本サービスの円滑な実施のためには、契約者の協力が必要であることに鑑み、契約者は、 当社に対する情報の提出、当社からの照会に対する回答その他当社が都度要請する本サービスの円滑な 遂行に必要な作業について、迅速かつ的確に対応するものとする。契約者がかかる対応を遅延し又は実 施しない場合若しくは不完全な対応であった場合、それにより当社に生じた損害の賠償も含めて、かか る遅延又は不実施若しくは不完全な対応について、当社に対して責任を負うものとする。 第９条（再委託） １ 当社は、当社の責任において、本サービスの提供の全部又は一部を第三者に再委託できる。 ２ 当社は、契約者の責めに帰すべき事由がある場合を除き、再委託先の行為について自ら本サービス の全部を実施した場合と同様の責任を負うものとする。 第１０条（禁止行為） 契約者は、本サービスの利用にあたり、以下の各号のいずれかに該当し又は該当すると当社が判断する行為をしてはならないものとする。 （１）法令に違反する行為 （２）犯罪に関連する行為 （３）公序良俗に反する行為 （４）当社又は第三者の知的財産権等、プライバシー権、名誉権、信用、肖像権、その他一切の権利又は利益を侵害する行為 （５）本サービスの運営・維持を妨げる行為 （６）虚偽又は事実とは異なる内容を流布し、本サービスの信用を失墜、毀損させる行為 （７）第三者になりすます行為 （８）第三者に本サービスを利用させ又は本サービスの利用権を貸与若しくは販売する行為 （９）当社が本サービスの提供において必要な範囲で複製、改変、送信その他の行為を行うことが第三者の知的財産権等、プライバシー、名誉、信用、肖像、その他一切の権利又は利益の侵害に該当することとなる情報を当社に提供する行為 （10）反社会的勢力等（暴力団、暴力団員、右翼団体、反社会的勢力、その他これに準ずる者を意味する。以下同じ。）の維持、運営若しくは経営に協力若しくは関与する等反社会的勢力等との何らかの交流若しくは関与をする行為 （11）前各号の行為を直接又は間接に惹起し又は容易にする行為 （12）その他、当社が不適切と判断する行為 第１１条（期限の利益喪失・解除） １ 当社は、契約者が以下の各号のいずれかに該当し又は該当すると当社が判断した場合は、直ちに本契約を解除することができる。 （１）本規約及び本契約のいずれかの条項に違反し、当社指定期間内に違反状態が是正されない場合 （２）支払停止若しくは支払い不能となり、又は、破産手続開始、民事再生手続開始、会社更生手続開始、特別清算手続開始もしくはこれらに類する手続の開始の申立てがあった場合 （３）自ら振出し、もしくは引受けた手形又は小切手につき、不渡りの処分を受けた場合 （４）差押、仮差押、仮処分、強制執行又は競売の申立てがあった場合 （５）租税公課を滞納し、その保全差押を受けた場合 （６）解散又は営業停止状態となった場合 （７）第２号乃至前号の他、契約者の信用状態に重大な変化が生じたと当社が判断した場合 （８）監督官庁より事業停止命令を受け、又は事業に必要な許認可の取消処分を受けた場合 （９）株主構成、役員の変動等により会社の実質的支配関係が変化し従前の会社との同一性が失われた場合 （10）反社会的勢力等である、又は資金提供その他を通じて反社会的勢力等の維持、運営若しくは経営に協力若しくは関与する等反社会的勢力等との何らかの交流若しくは関与を行っている場合 （11）当社に対する重大な背信行為があった場合 （12）その他、当社が契約者による本サービスの利用を適当でないと判断した場合 ２ 契約者は、前項各号のいずれかに該当し、又は、該当すると当社が判断した場合は、当社に対して負っている債務の一切について期限の利益を失い、直ちに当社に対する全ての債務の履行をしなければならないものとする。 ３ 当社は、本条に基づき当社が行った行為により契約者に生じた損害について一切の責任を負わない。 第１２条（紛争対応及び損害賠償） １ 申込者及び契約者は、本サービスの申込又は利用に際して当社に損害を与えた場合、当社に対し、相当な因果関係が認められる範囲内で、その損害を賠償するものとする。 ２ 契約者が、本サービスの利用に関連して第三者からクレームを受け又は第三者との間で紛争が生じた場合、契約者は、直ちにその内容を当社に通知すると共に、契約者の費用と責任において、当該クレーム又は紛争を処理し、その進捗及び結果を当社に報告するものとする。 ３ 当社が、契約者による本サービスの利用に関連して第三者からクレームを受け又は第三者との間で紛争が生じた場合、契約者は、契約者の費用と責任において、当該クレーム又は紛争を処理し、その進捗及び結果を当社に報告すると共に、万が一、当社が支払いを余儀なくされた金額その他の損害がある場合、これを全額填補するものとする。 ４ 当社は、本サービスの提供に際して、自己の故意又は重過失により契約者に損害を与えた場合に限り、契約者にこれを賠償するものとする。 ５ 前項により、当社が契約者に対して損害賠償義務を負う場合、当社が賠償すべき損害の範囲は、契約者に現実に発生した損害に限るものとし、賠償すべき損害の額は、損害賠償義務の原因となった本契約の利用料金の額を限度とする。なお、本条は、債務不履行、瑕疵担保責任、原状回復義務、不当利得、不法行為その他請求原因を問わず、全ての損害賠償等に適用されるものとする。 ６ 第６条第２項に基づき、当社は、納品遅れによって契約者に生じた損害を賠償する責任を負わないものとする。 ７ 当社は、本規約に規定された責任以外の責任を負わないものとする。 第１３条（秘密保持） １ 申込者又は契約者は、本サービスの提供を受けるに際して提出する情報に、秘密として保持すべき情報が含まれる場合、当該情報が記録された媒体（書面、光ディスク、ＵＳＢメモリ及びＣＤ等を含むが、これらに限らない。以下同じ。）又は情報を含む電磁的データ（電子メール、電子ファイルの送信又はアップロード等により開示される場合の電子メール及び電子ファイルを含むが、これらに限られない。以下同じ。）に秘密である旨を明示した上で、当社に対して情報を提出するものとする。ただし、以下のいずれかに該当する情報は、秘密情報には該当しない。 （１）開示された時点で公知である情報 （２）開示された後に当社の責めに帰すべき事由なく公知となった情報 （３）開示される以前に当社が正当に保持していた情報 （４）秘密情報を使用することなく当社が独自に取得した情報 （５）当社が権利を有する第三者から適法に取得した情報 （６）開示者から秘密保持の必要なき旨書面で確認された情報 ２ 当社は、自らが保有し同程度の重要性を有する情報を保護するのと同程度の注意義務をもって、受領した秘密情報の取扱い及び保管を行う。 ３ 当社は、本契約以外の目的で秘密情報を使用してはならない。 ４ 当社は、本契約のために客観的かつ合理的に必要な範囲に限り、秘密情報の複写、複製等を行うことができる。 ５ 当社は、秘密情報を流出させてはならず、また、開示者の事前の書面による承諾なしに、秘密情報を第三者に開示してはならない。ただし、以下の各号に定める者に限り開示することができる。 （１）本契約のために必要最小限の自己の役員及び従業員並びに再委託先（ただし、本業務のために客観的かつ合理的に必要な範囲の秘密情報に限る。） （２）弁護士、公認会計士等の法律上の守秘義務を負う専門家 （３）申込者又は契約者が事前に書面により承諾した第三者（ただし、当該第三者が本契約における受領者の義務と同等の義務を課すことを条件とする。） ６ 当社は、申込者又は契約者から要求があった場合又は本契約が終了した場合には、申込者又は契約者から受領した全ての秘密情報を、遅滞なく破棄するものとする。 ７ 当社は、万一開示を受けた秘密情報が流出した場合には、直ちに申込者又は契約者にその詳細を報告し、流出の拡大を防止するために客観的に合理的な措置をとるものとする。 ８ 受領者は、司法機関又は行政機関等から秘密情報の開示を求められたときは、速やかに、その事実を開示者に通知し、開示者から要請がある場合には、その開示範囲を狭めるための努力を尽くした後、秘密情報を開示することができる。開示者が法的救済を求めるときは、合理的範囲内で開示者に協力するものとする。 ９ 本条の規定は、本契約終了後２年間存続する。 第１４条（本規約の変更） 当社は、随時、本規約を変更することができるものとする。 第１５条（権利義務の譲渡） １ 当社は、契約者に対する債権を第三者に譲渡できるものとする。 ２ 契約者は、当社の事前の書面による承諾なく、本契約上の地位又は本契約に基づく権利義務につき、第三者に対し、譲渡、移転、担保設定、承継、その他の処分をすることはできない。 第１６条（合意管轄） 本契約に関して紛争が生じた場合、東京地方裁判所又は東京簡易裁判所をもって、第一審の専属的な管轄裁判所とする。 第１７条（協議解決） 本規約の解釈に疑義が生じた場合、又は本規約に定めのない事項については、当社及び契約者は、誠意をもって協議し解決する。 以上 附則 ２０１５年１２月 制定２０１６年４月 改定２０１７年１２月 改定２０１８年６月 改定２０２０年１月 改定２０２３年１月 改定２０２３年２月 改定２０２４年１２月 改定 株式会社ファストコーディング代表取締役 黒川 真吾 --- - Published: 2019-11-09 - Modified: 2025-05-19 - URL: https://fastcoding.jp/sitemap/ HOME サイトマップ SITEMAP サイトマップ 01コーディング代行の特長 私たちの特長 AIやSEOに強いHTMLコーディング 品質を高める取り組み チーム構成と専門ディレクタ コーディング設計 テスト・検証 02コーディング代行のサービス内容 レスポンシブコーディング WordPress制作 コアウェブバイタル対策 JavaScriptアニメーション制作 フロントエンド開発 WEBアクセシビリティ対応 PC/SPコーディング リキッドコーディング 大量コーディング制作 メディアサイト制作 多言語サイト制作 03コーディング代行の流れや価格 価格 ご依頼方法と納期 制作実績 お客様の声 よくある質問 05お問合せ オンライン自動見積り お問合せ／お見積り／オンライン相談フォーム 04弊社について 会社概要 スタッフ紹介 新着情報 利用規約 プライバシーポリシー --- - Published: 2019-11-09 - Modified: 2025-11-01 - URL: https://fastcoding.jp/company/ HOME COMPANY COMPANY 会社概要 オフィス所在地 スタッフ紹介 ニュース お問合せ COMPANYHTMLコーディング代行会社の概要 01 会社概要 商号 株式会社ファストコーディング 設立 2015年5月 資本金 1,000万円 代表者 代表取締役 黒川 真吾 事業内容 フロントエンド開発事業 kintone連携システム開発事業※1 Salesforce連携システム開発事業 ITリスキリング事業※2 ※1:国内事業所のみ※2:海外事業所のみ 電話番号 東京：03-6806-0354大阪：06-7878-8160※制作のご依頼／お問い合わせはこちらのフォームからお送りください。 許認可・認証等 ISO/IEC 27001:2022（ISMS） 認証取得済みプライバシーマーク（Pマーク） 取得済み 所属団体 一般社団法人ソフトウェア協会https://www. saj. or. jp/ 適格請求書発行事業者登録番号 T7-0104-0111-8193 02 オフィス所在地 本社オフィス 〒111-0053 東京都台東区浅草橋5丁目8-11 大富ビル※登記上の本店所在地 東京オフィス 〒101-0021 東京都千代田区外神田6-11-16 GMビル5階 大阪オフィス 〒541-0044 大阪市中央区伏見町4-4-9 淀屋橋東洋ビル3階 ホーチミンオフィス 11/12, Tran Van Đang, Ward 9, Dist. 3, Ho Chi Minh city, Viet Nam ダナンオフィス 773 Ngo Quyen str. , Son Tra Dist. , Danang city, Viet Nam --- - Published: 2019-11-09 - Modified: 2025-05-19 - URL: https://fastcoding.jp/features/ HOME コーディング代行サービスの特長 FEATURES AIやSEOに強いコーディング代行 jQuery,WordPress無料対応 シンプルな料金体系 品質を高める取り組み コーディング代行のお問合せはこちら コーディング代行サービスの特長FEATURES 01AIやSEOに強いコーディング代行 弊社では、AIでの認知向上（AIO対策）や、SEOに強い効果を期待できるセマンティックコーディング（Semantic Coding）を標準で実施しております。HTMLに意味を持たせることで、検索エンジンやAIが読み取りやすいコード＝ユーザが求める情報で重要となるターゲットキーワードに合致しやすい最適なマークアップとなります。また、特にAIO対策で重要となる、AIに対するメタ情報を提供する構造化データの実装や、ご納品するすべてのページにおいてGoogle Pagespeed Insightsでのチェック／高得点化を標準で行っております。弊社のAI・SEOに最強のHTMLコーディングを是非ご体感ください。 SEOに強いHTMLコーディングとは 02jQuery,WordPress無料対応 スマートフォンの利用も活発な現在、動きのあるWEBサイトを作ることは、サイト利用者の利便性をあげるため、コンバージョンを上げるために必要不可欠です。 弊社では「動きのあるコーディング」を、jQueryを利用することで無料で提供いたします。jQueryとはJavaScriptで記述された、オープンソースのプログラムです。WEBサイトでよく利用される「動き」を、共通化して簡単に利用できるようにしています。 無料のjQuery一覧 スライドショー カルーセル アコーディオン タブ切り替え ライトボックス スムーススクロール header固定 ツールチップ ※無料で対応するjQueryの一部をご紹介しております。詳細はお問合せください。 素早く、安全な修正を行うためには、CMSを導入することは当たり前。FASTCODINGではこのWordpress対応を無料（※）にいたしました。昨今では、CMSといえばWordpressと言われるほどに、このオープンソースのCMSシステムが一般的に利用されるようになりました。納品時だけではなく納品後にも安心して使えるCMSへの対応は、FASTCODINGでは至極当然です。※10ページ以上をご依頼のプロジェクトでは固定ページ化を無料でお引き受けしております。 03修正無制限、シンプルな料金体系 弊社の価格は、基本料金やCSS代金を一切いただかない「ページ数」×「ページ単価」のシンプルな設定です。この価格設定は弊社が日本国内で初めて実施いたしました。まだオフショアのコーディング会社が少なかった創業当時、ご依頼いただくお客様にとって分かりやすく、またお求めやすい商品にしたいという思いから始めた弊社の理念です。最近では修正にかかる費用や、ユーザビリティを高めるJavaScriptの動き／機能の実装も、このページ単価に含めてご提案しております。これからも変わらず「ページ数」×「ページ単価」の価格設定で、AIやSEOに強いHTMLコーディングをご提供してまいります。 価格と納期について 04品質を高める取り組み 弊社ではコーディング業務をマニュアル化することにより、常に最高品質を提供できる体制を構築しております。しかしながらWeb制作プロジェクト全体から見れば、最高品質のコーディングであることはもちろんのこと、プロジェクトを遅延せず、目標を達成するためのスケジュール管理やバグ管理、要望管理も大変重要となってきます。HTMLコーディング代行業務を日々行い得られた経験をまとめ上げた、HTMLコーディング代行の専用プロジェクトマネージメント手法である「ファストメソッド」では、コーディング制作をフェーズごとに分析し、最も効率的かつバグを低減する管理方法を考えた、HTMLコーディングプロジェクト専用のプロジェクトマネージメント手法です。数十ページから数百ページを超えるプロジェクトまで、是非弊社のファストメソッドを活用したプロジェクト運営をご体感ください。 品質を高める取り組み --- - Published: 2019-11-09 - Modified: 2025-05-19 - URL: https://fastcoding.jp/features/fastmethod/coding-director/ HOME OUR FEATURES 品質を高める取り組み HTMLコーディング代行のチーム構成と専門ディレクタ TEAMS & CODING DIRECTOR 最適なチーム構成 コーディング専門ディレクタとは Webディレクタとコーディングディレクタの違い コーディング代行のお問合せはこちら HTMLコーディング代行のチーム構成と専門ディレクタTEAMS & CODING DIRECTOR HTMLコーディングを進める上で必要となるのはコーダーだけではありません。コーディング着手前の設計業務を担当する設計者やコーディング中のパーツ管理を行うライブラリアン、品質チェックを行うチェッカーとプロジェクト全体のスケジュール管理を行うコーディングディレクタが、適宜協調しながら進めていくことで最高品質のコーディングが得られます。 コーディングディレクタ お客様との窓口になる、HTMLコーディング代行の知識を持った専門ディレクタです。HTMLコーディング代行では、前工程となる企画／デザイン制作から、後工程となるシステムへの組み込みやサーバ環境への展開作業へスムーズに接続するため、一般的なWebディレクタとは異なる知識が必要になります。弊社のコーディングディレクタは多種多様なHTMLコーディング代行プロジェクトを経験していますので、安心してプロジェクトをお任せください。 設計者 全体のデザインやサイトの仕様／要件をもとに、HTMLコーディングのための設計書します。具体的にはパーツ設計やCSS設計といった工程を実施します。コーディング設計の技法 コーダー 実際にコーディング作業を行うエンジニアです。PUGやSASSといった開発環境を扱いながら、AIやSEOに強いHTMLコーディングを制作いたします。 テスター／レビュアー コーディング結果をテストし、要求／仕様通りに構築出来ていることを保証するエンジニアです。単に要求／仕様に従っているかのテストのみならず、AIやSEOに強いコーディングになっているかどうか、表示速度に著しく影響を及ぼす処理を含んでいないか、運用しやすいかどうかといったコーディングの詳細までテストを行うことで、よりAIやSEOに強いHTMLコーディングを目指します。テスト検証方法 ライブラリアン 規模の大きなプロジェクトでは、予め共通となる要素のパーツ化を行うことで、コードの統一や作業時間の短縮を行うことができます。パーツは表示時の状態（例えばログインと非ログイン）や、レイアウト毎の違い（例えばファーストビューに表示するのか、フッター上に表示するのか）によって細かな違いを持つことがよくありますが、それを管理し、有効活用できるようにコーダーに指示を出すのがライブラリアンの仕事です。AIやSEOに強いHTMLコーディングを制作するためには大変重要な仕事です。 01コーディング専門ディレクタとは Web制作では企画、デザイン、コーディング、システム開発から運用まで、複数の業務がフェーズに分かれて進行します。一般的なWebディレクタはそれらすべてを総括しながら、お客様の要望を的確にとらえ、反映させていくプロジェクトのかじ取り役です。しかしながら個々の業務においては専門的な知識やノウハウが要求され、より効率的な業務運営を行うには専門職としてのWebディレクタが必須と弊社は考えています。弊社のコーディングディレクタは、一般的なWebディレクタとは異なります。全員がコーディング・システム開発を経験しているため、お客様の要望をすぐさま形にできる、HTMLコーディングのプロフェッショナルです。コーディングディレクタという職種を持つ弊社だからこそ、お客様が安心してコーディング業務をお任せいただける環境をご提供することができます。 02Webディレクタとコーディングディレクタの違い PM要素が強い コーディング業務は、プロジェクトの前段階である企画やデザインが終わった後、実制作フェーズでの最初の業務となります。また企画やデザインで決まった内容を元に、実際に動く形に作り上げていく工程ですので、遅延やバグの発生はプロジェクト全体のリスクとなります。こういった業務特性を理解し、高い品質を保つために、弊社のコーディングディレクタはプロジェクトマネージメント研修を受けています。遅延しない・バグが起きない・品質を落とさないコーディングプロジェクトの運営は、是非弊社にお任せください。 コーディング自体に対する知識力が多い 日々大量のコーディングを行う弊社だからこそ、現在のトレンドや主流、またプロジェクトに応じた最適なコーディングの方法を知り尽くしているのは、弊社の強みです。また多数のWebブラウザでの見え方を経験則として理解しているため、ブラウザによるデザインの実装可否や、難易度、運用をとらえたコーディング設計を行います。 運用フェーズまで想定したコーディング・CMS設計に強い 企画やデザイン段階では見落としがちな運用コスト。実際に改善活動を行うことでより効果を高めていくWebサイトの運用を考えながらHTMLコーディングを行うことは非常に重要です。またCMS導入の場合は管理要素の設計やプラグイン選定、実装も含め、弊社のコーディングディレクタがご提案いたします。 コーディング専業だからこそ、コーディング自体のプロフェッショナルであることは当たり前。コーディングプロジェクトを成功に導くには、コーディングディレクタが不可欠です。そんなプロに相談したい方は是非お問合せください。 コーディング設計の技法 --- - Published: 2019-11-09 - Modified: 2019-11-09 - URL: https://fastcoding.jp/features/fastmethod/codingrules/ HOME OUR FEATURES 品質を高める取り組み コーディング設計の技法 FASTMETHOD コーディングルール パーツ化とユニーク化 CSS設計 【良いCSS＝効率的な構築】 【既存CSSのコード解析】 【命名規則と構造化】 【フレームワークの採用】 特殊要件への対応 【JISアクセシビリティ対応】 【特殊ブラウザ対応】 コーディング代行のお問合せはこちら コーディング設計の技法FASTMETHOD METHOD 2コーディング設計 コーディングルール 制作会社のお客様や、Webシステムをお持ちのお客様であれば、社内のコーディング規約を定義していることもあるかと存じます。また大規模なプロジェクトであれば、プロジェクト専用のルールを決める場合もございます。コーディングルールではネーミング規則やファイル／フォルダ構成、文字コードやファイルタイプを指定する記述がほとんどですが、弊社ではパーツ設計とCSS設計を含めることをお勧めしております。コーディングルールはその後の運用コストに大きく影響する重要な制作指針となります。また多数のコーダが同時並行で進める大規模プロジェクトにおいては、コーディング品質そのものを左右するといっても過言ではありません パーツ化とユニーク化 一つのWebサイトを作成する過程では、デザインのトーン＆マナーを保ち、UXを向上するためにパーツのパターン化が行われるのが当然です。HTMLコーディングにおいても、パターン化されたパーツを元に、レイアウトに従って組み立てていくことで、コードの独立性やメンテナンス性の向上を図ることができます。弊社ではコーディング着手前にパーツ確認を行い、コーディング途中に起きる変更にも柔軟に対応できるよう、パーツ定義書を作成しています（※）。また定義されたパーツをどういったファイルで管理するか、共通ファイルの定義や読み込み方法、変数の定義を柔軟に行うことで、運用しやすいサイト制作を行っております。※プロジェクトによっては作成しない場合もあります。詳細はお問合せください。 CSS設計 1, 【良いCSS＝効率的な構築】良いCSSとは何であるか、見やすさやコードの短さ等、様々な考え方がありますが、弊社は構築時のわかりやすさが最も重要と考えています。将来の運用を見越してクラス定義を行うことはできますが、実際運用で発生する変更がはっきりしていない場合は、むやみに想定をせず、現状の要件を元に実装をいたします。シンプルに実装を開始するからこそ、プロジェクトの進行中に発生する変更や、次フェーズへの備えも容易にできるというのが、弊社の考え方です。 2, 【既存CSSのコード解析】HTMLコーディングを行う上では、既存のコーディングを流用したり、CMSが動的に出力するヘッダーやフッター等の共通要素を取り込んで実装する場合があります。 CSSでは要素適応の優先順位があるために、追加するCSSによって既存サイトが崩れたり、予期しないページでバグを引き起こす可能性があります。弊社では既存コーディングを流用する場合は、主にCSSについて、徹底的にコード解析を行います。 命名規則や構造の把握はもちろん、過去の更新の変遷を見ながら、他に影響を与えない、今後のメンテナンス性も低下させないCSSコーディングをいたします。 3, 【命名規則と構造化】 良いCSSを構築するためにも、HTML同様CSSにも設計作業が必要です。特に命名規則と構造化の単位を決めることは重要です。命名規則とは、クラス名やID名等を用いて要素選択を行うCSSセレクタの書式を決めることを意味します。CSSにはセレクタの書式によって、要素適応の優先順位が決まるため、なるだけ一つの書式（クラスのみ利用する、状態クラスには接頭辞を付ける 等）のみを利用するよう定義するべきと考えています。 実際にはコーディングルールによって定義が異なるために、各プロジェクトに応じて実装を行います構造化とは、装飾をどの単位で一つのCSS要素として定義するか、装飾のグルーピングを行うことを意味します。 その名称にもなっているカスケーディング（親子間構造）によって装飾定義が可能なために、命名規則同様になるだけ単純且つ明確な定義を行うべきです。 世の中にはいくつかの構造化（および命名規則）のルールがあり、SMACSS、BEM、OOCSSは有名なルールです。 弊社では主にSMACSSベースの構造化を行いますが、異なる構造化指針を採用される場合は、事前にご相談ください。 4, 【フレームワークの採用】 BootstrapやFoundation、Material-UI等のCSSフレームワークは、プロジェクトによっては利用することで効率化を図ることができます。 弊社では標準的にフレームワークは利用しませんが、プロジェクトの詳細を伺った段階で、導入をご提案する場合もあります。 CSSフレームワークの活用を行いたい場合は、事前にご相談ください。 特殊要件への対応 1, 【JISアクセシビリティ対応】主に国・地方公共団体が提供するWebサービスや、上場企業のWebサービスでは、ウェブアクセシビリティへ対応するためにJIS基準「JIS X 8341-3」への対応を求められる場合があります。一方で同規格は対象範囲や達成等級によって実施すべき施策が異なるため、具体的にどういった実装を行うべきか、判断に迷うことも多い規格ではないかと思われます。弊社ではご指定の対象、等級、また独自ルール等に応じた実装対応が可能であります。導入を検討されている場合は是非ご相談ください。 2, 【特殊ブラウザ対応】 主に組み込み系デバイスで用いられるサブセット版のブラウザソフトウェアは、全てのHTML/CSS要素をサポートしていない場合もございます。 弊社では特殊仕様のブラウザ表示にも対応したHTMLコーディング実績が多数ございます。 組み込み系デバイス向けのコーディング制作、特殊仕様への対応が必要な場合は、事前にご相談ください。 テスト・検証方法 --- --- ## お客様の声 - Published: 2024-06-14 - Modified: 2024-11-02 - URL: https://fastcoding.jp/voice/firstlily/ 明らかなデザインのズレすらもデザイン通りに実装されていたのが逆にびっくりしました。 --- - Published: 2024-05-07 - Modified: 2024-11-02 - URL: https://fastcoding.jp/voice/givertakeall/ SEOスコアが初期状態でも比較的高いため、原稿入稿後の少しの調整で高スコアへ調整できた --- - Published: 2024-05-07 - Modified: 2024-05-07 - URL: https://fastcoding.jp/voice/sample/ このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2024-01-16 - Modified: 2024-11-02 - URL: https://fastcoding.jp/voice/ario-inc/ これまで何度か一緒にお仕事させて頂きましたが、要望と違う仕様で上がってきた事は一度もありません。 --- - Published: 2023-07-10 - Modified: 2023-07-10 - URL: https://fastcoding.jp/voice/lll-inc/ デザインイメージ通りのものを制作いただき、非常に満足しております。 --- - Published: 2023-06-29 - Modified: 2023-06-30 - URL: https://fastcoding.jp/voice/fanfare/ 読み込み表示速度や編集のしやすさなど満足しております --- - Published: 2023-04-02 - Modified: 2023-06-01 - URL: https://fastcoding.jp/voice/imt-mirai/ ご相談から納品までのスピードが早く満足のいくものでした。 --- - Published: 2023-01-03 - Modified: 2023-01-06 - URL: https://fastcoding.jp/voice/hlm-inc/ ソースコードも非常に綺麗で、デザインデータ通り忠実に再現されており、社内でも「めっちゃ綺麗、頼んで良かった」という声が上がるほどでした。 --- - Published: 2022-10-13 - Modified: 2023-01-03 - URL: https://fastcoding.jp/voice/nalu/ デザインの再現性、読み込み速度、挙動、組み方など丁寧でとても満足しています。 --- - Published: 2022-05-09 - Modified: 2023-01-03 - URL: https://fastcoding.jp/voice/astecpaints/ 弊社の要望通りの仕様で作成いただき、大変満足しています。 また、外部で改修を進める際にはご相談をさせていただきたいと思います。 --- - Published: 2021-07-20 - Modified: 2022-04-13 - URL: https://fastcoding.jp/voice/ktcom/ 仕様書に細かく書いていなかった部分も、常識的な観点で柔軟に対応いただけたので助かりました --- - Published: 2021-05-10 - Modified: 2022-04-13 - URL: https://fastcoding.jp/voice/allied-thai/ ECの立ち上げに携わるのは初めてでしたが、未経験でもきめ細やかにフォローしてくれたおかげで、問題なくローンチが出来て満足しております。また、当社の受発注のスキームにあわせてシステムを組んでくれて大変助かりました。 --- - Published: 2021-05-10 - Modified: 2024-07-15 - URL: https://fastcoding.jp/voice/matrix/ ともするとクライアント都合で進行がルーズになりがちですが、とてもきっちりと管理していただけて恐縮です。修正対応をせかされた場合なども柔軟に対応して頂き助かってます。またエクセルで進行管理を共有するシステムをとっており、進捗が分かりやすく助かります。 --- - Published: 2021-01-02 - Modified: 2022-04-13 - URL: https://fastcoding.jp/voice/yrglm/ 気になったことや修正したい点など、スプレッドシートにまとめていけるのでとても効率的ですし、修正対応もとても迅速なので大変心強い存在です。 --- - Published: 2020-09-25 - Modified: 2022-04-13 - URL: https://fastcoding.jp/voice/maru/ 双方の認識にズレが生じないように、事前の打ち合わせで十分に時間を取って細かくヒアリングしてくださり満足しています。結果、弊社の希望どおりのカスタマイズを実現して頂きました。 --- - Published: 2020-08-20 - Modified: 2024-09-16 - URL: https://fastcoding.jp/voice/daito/ 料金体系がシンプルで安く、納品が早いことに加えて、セマンティックコーディングでSEO対策もできました。何より、思い描いたデザイン通りにコーディングしてもらえたのが最高でした。 --- - Published: 2020-05-25 - Modified: 2024-07-15 - URL: https://fastcoding.jp/voice/mages/ WordPress(CMS)に精通していて、ニーズに合わせた柔軟なシステム開発が可能な上、こちらの要望を的確に理解してもらえたので、安心してお任せできました。 --- --- ## お知らせ - Published: 2025-08-08 - Modified: 2025-08-15 - URL: https://fastcoding.jp/news/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%90%e3%82%b7%e3%83%bc%e3%83%9e%e3%83%bc%e3%82%af%e3%82%92%e5%8f%96%e5%be%97%e3%81%84%e3%81%9f%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/ いつもご利用いただきありがとうございます。 株式会社ファストコーディングは、2025年8月8日付で一般財団法人日本情報経済社会推進協会（JIPDEC）より「プライバシーマーク（Pマーク）」の付与を受けました。 プライバシーマーク制度は、日本産業規格「JIS Q 15001（個人情報保護マネジメントシステム－要求事項）」に準拠し、個人情報の適切な取扱い体制を整備している事業者に対して、その信頼性を示すマークを付与し、事業活動での使用を認める制度です。 今回の認定取得を機に、弊社ではこれまで以上に厳格な情報管理と安全対策に努め、お客様および取引先様により高い信頼と安心を提供できるよう、継続的な改善と体制強化に取り組んでまいります。 弊社における個人情報の取り扱い方針については、「プライバシーポリシー」のページをご参照ください。 ＜認証登録内容＞ 付与年月日：2025年8月8日 登録番号：22000510 審査機関：一般社団法人ソフトウェア協会 プライバシーマーク付与機関：一般財団法人日本情報経済社会推進協会（JIPDEC） --- - Published: 2025-07-24 - Modified: 2025-08-08 - URL: https://fastcoding.jp/news/%e7%94%9f%e6%88%90ai%e6%b4%bb%e7%94%a8%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e3%83%9d%e3%83%aa%e3%82%b7%e3%83%bc%e3%81%ae%e5%85%ac%e9%96%8b%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/ いつもご利用いただきありがとうございます。 株式会社ファストコーディングは、生成AIの業務活用に関する基本方針として、「生成AI活用に関するポリシー」を策定し、公開いたしました。 近年、生成AI技術の急速な発展と普及により、その利便性と同時にリスクも社会的に注目されるようになっています。企業においてもAI活用の透明性や倫理性、安全性が強く求められる中、当社としても明確な方針を定め、責任あるAI活用を推進していく必要があると判断いたしました。 本ポリシーは、経済産業省および総務省による「AI事業者ガイドライン（第1. 0版）」に準拠し、情報の安全性と倫理性を重視したうえで、生成AIを適切に活用するための姿勢を明示したものです。 今後も当社は、この方針に基づき、生成AIを安全かつ効果的に活用しながら、業務の効率化とサービス品質の向上に努めてまいります。 詳細はこちらをご覧ください。 生成AI活用に関するポリシー --- - Published: 2024-07-11 - Modified: 2024-07-17 - URL: https://fastcoding.jp/news/isms/ いつもご利用いただきありがとうございます。 当社は2024年7月1日、情報セキュリティマネジメントシステムにおける国際規格であるISMS(ISO/IEC 27001:2022)を取得いたしました。 今回の認証取得により一層の情報セキュリティマネジメントの強化を行い、またお預かりするすべての情報資産を正確かつ安全に取り扱って業務を遂行することで、お客様の信頼に応えてまいります。 認証取得の詳細については以下をご覧ください。 ＜認証登録内容＞ 認証番号： GIJP-1364-IC 対象組織： 株式会社ファストコーディング 認証基準： ISO/IEC 27001:2022 認証機関： 株式会社GCERTI-JAPAN 初回認証日：2024年7月1日 適応範囲： ・Webサイトの設計・開発・保守 ・システムの設計・開発・保守 ・システムコンサルティング ・ソフトウェアの設計・開発・販売 --- - Published: 2023-12-04 - Modified: 2023-12-04 - URL: https://fastcoding.jp/news/%e3%83%9e%e3%83%bc%e3%82%b1%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%80%8e%e3%82%ad%e3%83%a3%e3%82%af%e3%82%af%e3%83%ab%e3%80%8f%e3%81%a7%e7%b4%b9%e4%bb%8b/ Zenken株式会社が運営するマーケティングメディア『キャククル』にて、弊社サービスを紹介いただきました。 掲載記事は、こちらよりご覧いただけます。 HTMLコーディング代行サービスを一挙紹介！各社の特徴や費用、事例、口コミ評判を徹底比較 --- - Published: 2023-06-21 - Modified: 2023-06-21 - URL: https://fastcoding.jp/news/seo%e5%af%be%e7%ad%96%e3%81%8c%e5%be%97%e6%84%8f%e3%81%aa%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e5%88%b6%e4%bd%9c%e4%bc%9a%e7%a4%be/ 日本最大級の優良なホームページ制作会社を紹介している「優良WEB」にて、この度弊社が「SEO対策が得意なホームページ制作会社」として選出、掲載されました。 SEO対策が得意なホームページ制作会社 今後もSEO対策、ページスピード対策を念頭に置いたHTMLコーディング制作を行ってまいります。 今後ともよろしくお願いいたします。 --- - Published: 2022-04-01 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e7%b4%af%e8%a8%88%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e6%95%b0-30000%e6%9e%9a%e7%aa%81%e7%a0%b4/ 弊社で制作しましたHTMLコーディングの累計ページ数が30,000ページを突破いたしました。 これも日頃よりご依頼いただいております、お客様皆様のおかげと存じます。 従業員一同、心より御礼申し上げます。 これからも皆様に愛され続けますよう、より使いやすく、より効率的なコーディング制作のご支援に邁進してまいります。 今後とも、ファストコーディングのフロントエンド開発・HTMLコーディング制作サービスを何卒宜しくお願い致します。 --- - Published: 2021-01-03 - Modified: 2021-01-03 - URL: https://fastcoding.jp/news/%e3%81%8a%e5%8f%96%e5%bc%95%e5%85%88%e4%bc%81%e6%a5%ad%e6%a7%98-2000%e7%a4%be%e7%aa%81%e7%a0%b4/ 弊社でご支援させていただいた企業様が、2,000社を突破いたしました。 これも日頃よりご依頼いただいております、お客様皆様のおかげと存じます。 従業員一同、心より御礼申し上げます。 これからも皆様に愛され続けますよう、より使いやすく、 より効率的な制作・開発業務のご支援に邁進してまいります。 今後とも、ファストコーディングのコーディング代行サービス、 並びにVue. js開発サービスのご利用を何卒宜しくお願い致します。 お問合せはこちら --- - Published: 2020-03-24 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e3%80%90%e9%80%9a%e5%b8%b8%e9%80%9a%e3%82%8a%e5%96%b6%e6%a5%ad%e4%b8%ad%e3%80%91%e6%96%b0%e5%9e%8b%e3%82%b3%e3%83%ad%e3%83%8a%e3%82%a6%e3%82%a4%e3%83%ab%e3%82%b9%e3%81%b8%e3%81%ae%e5%af%be%e5%bf%9c/ 平素はファストコーディングをご利用いただきありがとうございます。 弊社では新型コロナウィルスの影響を鑑み、従業員のリモートワーク、営業活動のオンライン化等の対策を行い、サービス提供を続けております。 通常通りの営業時間／サービス内容にて、皆様のご利用を心よりお待ち申し上げております。 --- - Published: 2019-12-03 - Modified: 2019-12-03 - URL: https://fastcoding.jp/news/2019%e5%b9%b4%e5%b9%b4%e6%9c%ab%e5%b9%b4%e5%a7%8b%e5%96%b6%e6%a5%ad%e6%97%a5/ 日頃はファストコーディングをご利用いただき、誠にありがとうございます。 弊社は年末年始もHTMLコーディング制作を行っております！ 年内に終わらなかったコーディングや、年始に納品しないといけないプロジェクトがありましたら 是非お問い合わせください！ ※東京・大阪・フランスオフィスでは、2019年12月28日(土)～2020年1月5日(日)まで、年末年始休暇をいただいております。 ベトナムオフィスは2019年1月1日を除き営業しております。 --- - Published: 2019-11-19 - Modified: 2019-11-19 - URL: https://fastcoding.jp/news/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96%e3%82%92%e3%82%aa%e3%82%b9%e3%82%b9%e3%83%a1%e3%81%97%e3%81%be%e3%81%99/ 皆様のＷＥＢサイトでは、ページスピード対策していますか？ ＳＥＯに必須と言われるようになったGoogle PageSpeed Insights対策は、是非弊社まで。 詳細はこちらからご確認ください。 --- - Published: 2019-10-29 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/201910%e3%80%90%e6%9d%b1%e4%ba%ac%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%91%e5%9b%9e%e7%b7%9a%e5%b7%a5%e4%ba%8b%e3%81%ae%e3%81%9f%e3%82%81%e9%9b%bb%e8%a9%b1%e3%81%8c%e4%b8%8d%e9%80%9a/ 現在、東京オフィスの回線工事のため、電話が不通となっております。 お急ぎのお客様はお手数ですが、弊社大阪オフィス 06-7878-8160 までお電話いただきますようお願い致します。 --- - Published: 2019-08-01 - Modified: 2019-08-01 - URL: https://fastcoding.jp/news/2019summerholiday/ 弊社は夏季休暇無く営業しております。 皆様のお休み期間中に、弊社にて作業をすることで、効率的なコーディング制作が可能になります。 まずはご相談くださいませ。 ※例年この期間は非常にリソースが埋まりやすく、お早めにご相談いただくことをお勧めいたします。 (恐れ入りますが、営業窓口は8月13日～8月15日までお休みをいただいておりますのでご了承ください。) お問合せ先: info@fastcoding. jp --- - Published: 2019-01-31 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/201901%e5%9b%9e%e7%b7%9a%e5%b7%a5%e4%ba%8b%e3%81%ae%e3%81%9f%e3%82%81%e9%9b%bb%e8%a9%b1%e3%81%8c%e4%b8%8d%e9%80%9a/ 本日（2019年1月31日）、東京オフィスの回線工事のため、一時電話が不通となります。 お急ぎのお客様はお手数ですが、弊社大阪オフィスまでお電話いただきますようお願い致します。 --- - Published: 2018-12-04 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e3%80%90%e6%97%a5%e6%9c%ac%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%912018%e5%b9%b4%e5%b9%b4%e6%9c%ab%e5%b9%b4%e5%a7%8b%e5%96%b6%e6%a5%ad%e6%97%a5%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ 日頃はファストコーディングをご利用いただき、誠にありがとうございます。 東京・大阪オフィスでは、 2018年12月29日(土)～2019年1月3日(木)まで、年末年始休暇をいただいております。 2019年1月4日(金)より、通常通り営業をしておりますのでどうぞよろしくお願いいたします。 --- - Published: 2018-09-04 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/telbusy/ お客様各位 平素はファストコーディングをご利用いただき誠にありがとうございます。 弊社は受電業務を大阪拠点で行っております都合上、西日本に接近している台風の影響によって お電話でのお問合せをお受けしづらい状況になっております。 誠に恐れ入りますが、お急ぎの場合はお問合せフォームからご連絡ください。 ご不便をおかけいたしますが、ご理解の程、何卒宜しくお願い致します。 --- - Published: 2018-07-30 - Modified: 2024-07-08 - URL: https://fastcoding.jp/news/2018%e5%a4%8f%e5%ad%a3%e4%bc%91%e6%9a%87/ いつもファストコーディングをご利用いただきありがとうございます。 ファストコーディングはお盆期間中も休まず制作しております。 例年8月9月はプロジェクトが多い時期であり、皆様のお休み期間に弊社を利用して制作を進めることで、 より効率的なWeb制作が可能です。 この期間にプロジェクトをお持ちのお客様は、是非ご相談下さいませ。 ※例年この期間は非常にリソースが埋まりやすく、お早めにご相談いただくことをお勧めいたします。 (恐れ入りますが、営業窓口は8月13日〜8月16日までお休みをいただいておりますのでご了承ください。) お問合せ先: info@fastcoding. jp --- - Published: 2018-07-09 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e3%83%95%e3%83%a9%e3%83%b3%e3%82%b9%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e9%96%8b%e8%a8%ad%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ 平素はファストコーディングをご利用いただきありがとうございます。 この度、ヨーロッパ市場へのサービス展開を目的としまして、下記に弊社事務所を開設いたしました。 【フランスオフィス】 代表者： ゴールネ・クレモン (Gourney Clement） 住所： 24 Boulevard Gambetta, 62200 Boulogne-sur-Mer, France 電話番号：09-7046-3911 営業時間：午前8時～午後5時 これを機に社員一同皆様のご期待にお応えできるよう一層精進して参りますので 何卒倍旧のご愛顧のほどお願い申し上げます。 --- - Published: 2018-06-18 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e5%a4%a7%e9%98%aa%e5%8c%97%e9%83%a8%e3%81%ab%e3%81%a6%e7%99%ba%e7%94%9f%e3%81%97%e3%81%9f%e9%9c%87%e7%81%bd%e3%81%ab%e3%82%88%e3%82%8b%e5%bd%b1%e9%9f%bf/ 平素はファストコーディングをご利用いただきありがとうございます。 本日、大阪北部で発生しました震災において被災されたお取引様、関係各位、並びにご家族の皆様に心よりお見舞い申し上げます。 本件の影響により、現在弊社の電話回線がつながりにくくなっております。 ※弊社は業務の都合上、すべての電話を大阪オフィスにて受電しております。 ご利用のお客様には大変お手数をおかけしますが、お問合せフォーム、またはEmailにてご連絡いただければ幸いです。 何卒宜しくお願い致します。 --- - Published: 2018-06-02 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e3%80%90%e3%83%99%e3%83%88%e3%83%8a%e3%83%a0%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%91%e7%a7%bb%e8%bb%a2%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ 日頃はファストコーディングをご利用いただき、誠にありがとうございます。 この度、人員増加と事業拡大のため、ベトナムオフィスを下記へと移転いたしました。 ＜新住所＞ VINA GIAY PLAZA, 180-182 Ly Chinh Thang, Dist. 3, Ho Chi Minh city, Viet Nam 昨今のIT人材不足に加え、フロントエンド分野でのニーズの多様化、高度化に対し、 オフショア人材を活用したより良いサービスをご提案して参る所存です。 今後とも、皆様からのご指導ご鞭撻のほど、何卒よろしくお願いいたします。 --- - Published: 2018-04-18 - Modified: 2024-07-08 - URL: https://fastcoding.jp/news/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e5%88%b6%e4%bd%9c%e3%81%8b%e3%82%89%e3%81%be%e3%82%8b%e3%81%a3%e3%81%a8%e3%81%94%e4%be%9d%e9%a0%bc%e3%81%8f%e3%81%a0%e3%81%95%e3%81%84%ef%bc%81/ 弊社はこの度、かねてより大変ご要望の多かった「Webデザイン制作」も対応可能となりました。デザイン制作自体は提携会社が受け持ち、HTMLコーディング制作／サイト構築は弊社が行います。 デザイン制作も、HTMLコーディングも、CMS開発も。 すべて、まるっとお任せください！ まずは問い合わせフォームからご相談ください！ --- - Published: 2018-03-01 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e3%80%90%e6%97%a5%e6%9c%ac%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%91%e4%ba%8b%e5%8b%99%e6%89%80%e7%a7%bb%e8%bb%a2%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ 日頃はファストコーディングをご利用いただき、誠にありがとうございます。 この度、人員増加と事業拡大のため、東京オフィスを下記へと移転いたしました。 ＜新住所＞ 〒101－0021 東京都千代田区外神田6－11－16 GMビル5階 ※電話番号、FAX番号は変更無し 昨今のIT人材不足に加え、フロントエンド分野でのニーズの多様化、高度化に対し、 オフショア人材を活用したより良いサービスをご提案して参る所存です。 今後とも、皆様からのご指導ご鞭撻のほど、何卒よろしくお願いいたします。 --- - Published: 2017-12-01 - Modified: 2017-12-01 - URL: https://fastcoding.jp/news/%e3%80%90%e6%97%a5%e6%9c%ac%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e3%80%91%e5%b9%b4%e6%9c%ab%e5%b9%b4%e5%a7%8b%e5%96%b6%e6%a5%ad%e6%97%a5%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ 日頃はファストコーディングをご利用いただき、誠にありがとうございます。 東京・大阪オフィス（営業窓口）では、 2017年12月29日(金)～2018年1月3日(水)まで、年末年始休暇をいただいております。 しかしながら、制作は休みなく続けております！ 御社の休暇中にコーディング制作を行い、年明けにご納品いたします。 是非ともご依頼ください！ ※年始は2018年1月4日(木)より営業をいたします。 --- - Published: 2017-09-21 - Modified: 2017-09-21 - URL: https://fastcoding.jp/news/%e4%be%a1%e6%a0%bc%e6%94%b9%e5%ae%9a/ 弊社は制作工程をマニュアル化することで、効率的なコーディング制作を行っておりますが、このたび、制作マニュアルを改良することで、制作の効率性が大幅にアップいたしました。 これは、皆様のご利用から得られた経験を基に、多数の改善活動を行った結果です。 よって弊社では、皆様に御礼の気持ちをお伝えしたく、サービスをさらにお安くご提供することといたしました。 新しい価格は料金ページよりご確認ください。 これからも皆様のご愛顧のほど、何卒宜しくお願いいたします。 --- - Published: 2017-07-20 - Modified: 2024-07-08 - URL: https://fastcoding.jp/news/2017%e5%a4%8f%e5%ad%a3%e4%bc%91%e6%9a%87/ いつもお世話になっております。ファストコーディングです。 弊社は夏季休暇を取らずに営業しております。 プロジェクトをお持ちのお客様、既にスタートしていてリソースが足りないお客様は 是非ともお声がけください。 お問合せ先: info@fastcoding. jp --- - Published: 2017-01-04 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e6%96%b0%e5%b9%b4%e3%81%ae%e3%81%94%e6%8c%a8%e6%8b%b62017/ 御取引先様 各位 新年あけましておめでとうございます。 法人としましては2期目を迎えております弊社は、サービス開始から重ね、600社を超えるお取引先様にご愛顧いただきながら、日々お客様のため邁進しております。 今年度はサービスの増強、より高速かつ高品質な制作フローの向上を行い、より良いサービスのご提供に一層励む所存であります。 本年も何卒宜しくお願いいたします。 --- - Published: 2016-11-24 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/%e5%b9%b4%e6%9c%ab%e5%b9%b4%e5%a7%8b%e5%96%b6%e6%a5%ad%e6%97%a5%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ 日頃はファストコーディングをご利用いただき、誠にありがとうございます。 東京・大阪オフィスでは、 2016年12月29日(木)～2017年1月3日(火)まで、年末年始休暇をいただいております。 2017年1月4日(水)より、通常通り営業をしておりますのでどうぞよろしくお願いいたします。 --- - Published: 2016-08-02 - Modified: 2024-07-29 - URL: https://fastcoding.jp/news/20160802-2/ WEBサイトをご覧頂きありがとうございます。 ファストコーディングはお盆期間中も休まず制作しております。 お盆休み前後に案件が溜まっているというお客様はこの機会にお気軽にご相談下さいませ。 弊社へ次々と案件のご依頼が殺到しており、リソースが埋まっておりますので、ご相談はお早めに！！ (恐れ入りますが、営業窓口は8月12日(金)〜8月16日(火)までお休みをいただいておりますのでご了承ください。) お問合せ先: info@fastcoding. jp 8月12日(金)〜8月16日(火)の緊急連絡先：080-3112-7993 --- - Published: 2016-01-14 - Modified: 2024-07-29 - URL: https://fastcoding.jp/news/20160114-2/ 平素はお世話になっております。 ファストコーディングではこの度、WordpressやCMS環境の制作、カスタマイズを低価格且つ最高品質でお受けするサービス「FASTPRESS（ファストプレス） 」の販売を開始いたしました。 ファストプレスではファストコーディングから受け継ぐ「徹底したマニュアル化」による業務フローの効率化と、オフショア拠点を活用した低コスト化により、国内最安値ながらも最高品質の受託開発サービスを提供いたします。 低価格、高品質のWordpress制作サービス「 FASTPRESS（ファストプレス） 」を是非一度お試しください！ --- - Published: 2015-12-24 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/20151224-2/ 日頃はファストコーディングをご利用いただき、誠にありがとうございます。 2015年12月29日～2016年1月4日まで、弊社は年末年始休暇をいただいております。 2016年1月5日より、通常通り営業をしておりますので何卒宜しくお願いいたします。 --- - Published: 2015-12-12 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/20151212-2/ 2015年12月12日（土）より、下記住所に事務所を移転しました。 〒103-0027 東京都中央区日本橋3-4-12 八重洲ファーストビル8階 最寄駅 ・JR中央線(快速) 東京駅 八重洲中央口 徒歩2分 ・JR山手線 東京駅 八重洲中央口 徒歩2分 ・東京メトロ銀座線 日本橋駅 Ｂ3出口 徒歩3分 ・東京メトロ銀座線 京橋駅 7番出口 徒歩4分 連絡先：TEL. 03-6262-5384 FAX. 03-6262-5382 これを機に、さらなるサービスの向上を目指し社員一同活動してまいりますので、何卒よろしくお願い致します。 --- - Published: 2015-10-28 - Modified: 2015-10-28 - URL: https://fastcoding.jp/news/20151028-2/ ファストコーディングでの累計コーディング枚数が5,000枚を突破致しました。 今後も多くのお客様にご利用いただけるよう、コーディング体制も新たに整えて臨んでおります。 これからもファストコーディングをどうぞよろしくお願い致します。 費用・見積もり前のご相談・疑問点... どんなことでも、まずはお気軽にお問合せ下さい。 お問合せはこちら --- - Published: 2015-10-08 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/20151008-2/ 10月5日（月）〜10月7日（水）にかけてメールサーバーの障害が発生したため、一部お客様のメールがお受け取り並びに配信ができない状態が続きました。 現在は正常にお受け取りできる状態に復旧しております。 お手数ではございますが、ご返信がない場合は、再度お問合せをして頂けますようお願い申し上げます。 お客様には大変なご迷惑とご心配をおかけいたしますことを深くお詫び申し上げます。 今後ともファストコーディングを何卒よろしくお願い申し上げます。 --- - Published: 2015-07-31 - Modified: 2015-07-31 - URL: https://fastcoding.jp/news/%e3%81%8a%e7%9b%86%e4%bc%91%e3%81%bf%e3%82%82%e4%bc%91%e3%81%be%e3%81%9a%e7%a8%bc%e5%83%8d%e4%b8%ad%ef%bc%81/ WEBサイトをご覧頂きありがとうございます。 ファストコーディングはお盆期間中（8月12日〜8月14日）も休まず稼働しております。 お盆休み前後に案件が溜まっているというお客様はこの機会にお気軽にご相談下さいませ。 弊社へ次々と案件のご依頼が殺到しており、リソースが埋まっておりますので、ご相談はお早めに！！ お問合せ先: info@fastcoding. jp --- - Published: 2015-04-21 - Modified: 2022-04-13 - URL: https://fastcoding.jp/news/20150421-2/ 2014年4月よりサービス開始させて頂きましたファストコーディングは 皆様のご愛顧により株式会社プレートの事業・サービスから独立し、 2015年5月1日より株式会社ファストコーディングとして、設立いたします。 株式会社プレートのグループとして 株式会社ファストコーディングが今まで以上に よりよい品質サービスが提供できるよう追求して参ります。 --------------------------------------------------------------------------- 会社名 ：株式会社ファストコーディング 設立年月日：2015年5月1日 住所 ：東京都港区虎ノ門1-19-5 虎ノ門1丁目森ビル2階 代表取締役：河田邦昭 電話番号 ：03-6205-7584 --------------------------------------------------------------------------- これからもファストコーディングへのご指導・ご鞭撻のほど、 何卒よろしくお願い致します。 --- - Published: 2015-02-03 - Modified: 2015-02-03 - URL: https://fastcoding.jp/news/20150203-2/ ファストコーディングでの累計コーディング枚数が1,500枚を突破致しました。 多くのお客様にご利用いただけるよう、コーディング体制も新たに整えて臨んでおります。 これからもファストコーディングをどうぞよろしくお願い致します。 費用・見積もり前のご相談・疑問点... どんなことでも、まずはお気軽にお問合せ下さい。 お問合せはこちら --- --- ## 投稿 - Published: 2025-11-20 - Modified: 2025-11-20 - URL: https://fastcoding.jp/blog/all/direction/frontend-maintenance-cost/ - カテゴリー: ディレクション - タグ: CMS, JavaScript, WordPess, 運用コスト Next.js等の最新技術で構築したサイトが運用段階で更新困難に。月の運用費が3倍に跳ね上がった事例から学ぶ「更新性」重視の技術選定。ハイブリッド構成で運用コストを66%削減した実践ガイド。Webディレクター必読。 株式会社ファストコーディングで営業を担当しています長谷川と申します。社長の大号令で全員ブログを書いていこうということになりまして、お客様とお話ししていて気づいたことを書いていこうと思っております。 最近、お客様からこんな相談が増えています。 「リニューアル時は良かったんですけど、半年後から更新が止まっちゃって... 前の制作会社に聞いても『工数がかかるので別途見積もり』って言われるんです。」 Webサイトは作って終わりじゃないんですよね。むしろ、運用フェーズのほうが長い。でも、最近のフロントエンド技術は「作りやすさ」と「更新しやすさ」に大きな格差があって、それに気づかないまま進めると、運用段階で痛い目に遭うことが増えています。 実際にあった"更新が止まった"プロジェクト 去年、ある中堅企業様のコーポレートサイトリニューアル案件で、こんなことがありました。先方のご担当者様からこんなご相談が。 「半年前にリニューアルをしたけど、ニュースリリースを1本追加するだけで、毎回制作会社に依頼しなきゃいけないんです。簡単な文言修正も全部エンジニアの手が必要で... 月の運用費が予算の3倍に。」 どうやら前回のリニューアル時に、制作会社からNext. jsにHeadless CMS、Vercelという、いわゆるモダンなJamstack構成で実装をされたようで、実際にはこういう構成になっていました。 CMSで記事を追加すると、ビルド処理が走る（5〜10分） ビルドが失敗するとエンジニアの調査が必要 レイアウト変更は全てコード修正が必要 画像の最適化処理が複雑で、担当者が理解できない デプロイ環境の管理画面が英語で、エラー時の対処ができない ご担当者様が「今回は最新技術で作りたい」とおっしゃったこともあったようで、こういう作りになったようですが、技術的には何も間違っていないんです。でもこれでは「更新しづらい」Webサイト。満足できないですよね。 「更新性」とは何か いろいろお客様とお話ししていると、こういう会話になりました。 「でも、最新技術って、やっぱり良いものなんでしょ? なんでうちには合わなかったんですか? 」 答えは簡単です。「更新性」を考慮していなかったからです。更新性というのは、いいかえますと「誰が、どれくらいの手間で、サイトを更新できるか」ということです。技術的に優れていても、運用フェーズで以下のような問題があれば、更新性は低いと言えます。 ビルド工程が必要（コンテンツ追加のたびにビルド→デプロイ） 専門知識が必要（エラー対応にターミナル操作が必要） ツールが複雑（管理画面が英語、専門用語だらけ） 変更範囲が広い（小さな修正でも複数ファイルを触る） これらは全て「運用コスト」に直結します。 どの構成が危険か ─ 更新性チェックリスト 営業をしていて、お客様から「この見積もり、大丈夫ですかね? 」と相談されることがよくあります。以下のチェックリストを使って、提案内容を確認してみてください。 チェック項目高リスク（更新しにくい）低リスク（更新しやすい）コンテンツ更新CMS → ビルド → デプロイ（10分以上）CMS → 即反映（1分以内）エラー時の対応エンジニアの調査が必要管理画面でエラー内容がわかるレイアウト変更コード修正が必要管理画面で変更可能管理画面の言語英語のみ、専門用語が多い日本語対応、直感的テスト環境なし、または別途費用標準で用意 このチェックリストで「高リスク」に該当する項目が多いほど、運用段階でコストが跳ね上がる可能性が高くなります。 「じゃあ最新技術は使わないほうがいいんですか? 」 答えは「No」です。重要なのは、「誰が更新するのか」「どんな更新が発生するのか」を最初に明確にすることです。 たとえば、以下のようなケースなら、最新技術のメリットを十分に活かせます。 更新頻度が低い（年に数回） 専任エンジニアがいる（運用も担当できる） パフォーマンスが最優先（ECサイトなど） 制作会社と長期契約（運用も含めて一括で任せる） 逆に、以下のようなケースでは、従来型のCMSのほうが結果的にコストを抑えられます。 更新頻度が高い（週に数回、毎日） 非エンジニアが運用（マーケ担当者など） 柔軟な変更が必要（キャンペーンごとにレイアウト変更） 予算が限られている（運用費を抑えたい） つまり、「技術の良し悪し」ではなく「使い方の適切さ」なんですよね。 クライアントに説明する時のポイント Webディレクターの方がクライアントに説明する際、こんな風に伝えると理解していただきやすいと思います。 「最新技術は、スポーツカーみたいなものです。速くてかっこいいけど、維持費が高いし、運転にも技術が要ります。一方、従来型のCMSは、ファミリーカーです。速さでは劣るけど、誰でも運転できて、維持費も抑えられます。どちらが良いかは、『誰が運転するのか』『どこを走るのか』で決まります。御社の場合、更新は誰が担当されますか? どれくらいの頻度で更新が発生しますか? 」 このように、技術の話を日常的な例えに置き換えると、クライアントも判断しやすくなります。 ハイブリッド構成という選択肢 最初の事例の後日談です。お客様と制作会社、弊社エンジニアで相談して、こんな構成に変更しました。 コーポレートサイト本体：WordPress（従来型） 採用サイト：Next. js + Headless CMS（高速化重視） ニュースリリース：WordPressで即時更新 製品紹介ページ：Next. jsで静的生成（SEO重視） つまり、「更新頻度が高い部分」は従来型CMS、「更新頻度が低く、パフォーマンス重視の部分」は最新技術、というハイブリッド構成です。 結果として、月の運用費が従来の3分の1に削減、担当者だけで90%の更新作業が完結、採用サイトのページ速度は従来比40%向上という成果が出ました。 まずはご相談ください Web制作は、作って終わりではありません。むしろ、運用フェーズのほうが長く、コストもかかります。だからこそ、「誰が更新するのか」「どんな更新が発生するのか」を最初に明確にすることが大切です。 一般的なWeb制作会社さんだと、システム開発に関わるような要素を含めた方が見積もりが上がるので、最初にお伝えした事例のように、無駄にJavaScriptを用いた構成を提案しがちですが、弊社のようにフロントエンド専業であれば、そういったことはありません。 もし、今進行中のプロジェクトで「この構成、本当に大丈夫かな? 」と不安に思われているなら、ぜひ一度ご相談ください。弊社のエンジニアと一緒に、運用フェーズまで見据えた最適な構成を提案させていただきます。 最後までお読みいただき、ありがとうございました。 --- - Published: 2025-11-19 - Modified: 2025-11-19 - URL: https://fastcoding.jp/blog/all/frontend/next-nuxt-image-optimization/ - カテゴリー: React, Vue.js - タグ: Core Web Vitals, JavaScript, Next.js, 画像最適化 Next.jsとNuxtの画像コンポーネントでLCPを57%改善した実装方法。fetchpriorityとpreloadを活用し、EC・不動産・メディアサイトの画像読み込みを最適化。CLS 80%改善、転送量66%削減の実績。コード例付き実践ガイド。 こんにちは、株式会社ファストコーディングのフルスタックエンジニア、独身貴族Fireです。 つい先週、趣味のバイクツーリングで山間部に出かけた時のことです。休憩がてら道の駅でスマホを開き、近くの観光スポットを検索していたのですが、画像が多いサイトがなかなか表示されず、イライラした経験がありました。特にメインビジュアルがいつまでも読み込まれないと、「このサイト、本当に見る価値があるのか? 」と疑問を持ってしまいます。 ブログの書き出しを書くのって本当に難しいなって思います。でも嘘は書いてないですよ... 本当に重たいページでした。 Webパフォーマンスの世界では、この「メインコンテンツが表示されるまでの時間」をLCP(Largest Contentful Paint)と呼び、Googleのコアウェブバイタルの重要指標の一つとして位置づけられています。特にEC、不動産、メディアサイトなど、画像が主役のサイトでは、LCPの大半が画像の読み込み時間に依存します。 今回は、Next. jsとNuxtという2大フレームワークの画像最適化機能を使って、LCPを確実に短縮し、CLSも抑制する実装手法を、フロントエンドエンジニアの視点から詳しく解説します。 画像パフォーマンスの現状と課題 特にECサイトや不動産ポータル、メディアサイトでは、商品画像、物件写真、記事のアイキャッチ画像がコンテンツの中心です。しかし、画像の扱い方次第でユーザー体験は大きく変わります。そして多くのサイトでは（いまだに・・・）以下のような単純な実装が行われています。 悪い例: 従来の（HTMLそのまま）実装 単にimgタグを書くだけで画像が出るからHTMLはすごいんですが、この実装はパフォーマンスの問題があります。たとえば、 解像度の最適化がされていない: デスクトップもモバイルも同じ大きな画像を配信 優先度制御がない: すべての画像が同じ優先度で読み込まれる レイアウトシフトが発生: 画像が読み込まれた瞬間にレイアウトがずれる(CLS悪化) 帯域の無駄遣い: モバイル環境で不必要に大きな画像をダウンロード 実際に私たちが運用を担当しているとあるECサイトでは、当初、商品一覧ページのLCPが4. 2秒にも達していました。これはGoogleの推奨値(2. 5秒以下)を大きく上回る数値です。 Next. js/Nuxtの画像最適化機能 Next. jsとNuxtには、それぞれ強力な画像最適化コンポーネントを提供しています。具体的にはsrcset、fetchpriority、先読み、アスペクト比制御を自動的に、あるいは簡単に実装できます。 Next. js Imageコンポーネントによる自動最適化 Next. jsのコンポーネントを使えば、画像をいろいろと自動的に最適化してくれます。 良い例: Next. js Imageコンポーネントの基本実装 import Image from 'next/image' export default function ProductCard({ product }) { return } 自動的に最適化されること: srcsetの自動生成: デバイスに応じた複数サイズの画像を自動生成（これが一番便利） WebP/AVIF変換: ブラウザサポートに応じて最適なフォーマットに自動変換 遅延読み込み: デフォルトでビューポート外の画像は遅延読み込み CLS防止: width/heightによる領域確保で自動的にCLS抑制 Next. js Image コンポーネントの fetchpriority で LCP 最適化 自動的に遅延読み込みされると問題が起きる場合がありますね。たとえばページアニメーションで使っていたり、マウスのホバーやキー操作で表示されるような要素です。こういった要素についてはpriority属性を指定します。これによりfetchpriority="high"が自動設定され、遅延読み込みもスキップされます。 良い例: LCP要素への priority 指定 import Image from 'next/image' export default function Hero { return } ただし、過剰にこれを使うのは結局意味がなくなりますので（画像がまた即時読み込みになるだけなので）画像の解像度にもよりますが、１ページに〜３個ぐらい、という程度の、本当に「優先」する画像として定義しましょう。 Next. js Image - preload での先読み最適化 Next. js 15以降では、も自動的に出力されます。さらに細かく制御したい場合は、next/headで明示的に設定できます。 良い例: 手動preload設定(Next. js) import Head from 'next/head' import Image from 'next/image' export default function ProductPage({ product }) { return } Nuxt Image コンポーネントによる最適化 Nuxtでは@nuxt/imageモジュールを使います。 良い例: Nuxt Image基本実装 const props = defineProps({ product: Object }) Nuxt版 Imageコンポーネントの特徴: 自動的なsrcset生成: サイズに応じた複数画像を自動生成 プロバイダー対応: Cloudinary、Imgix、Vercelなど主要CDNに対応 遅延読み込み: デフォルトでloading="lazy" プレースホルダー: ぼかし画像や色で読み込み中を表現 Nuxt Image コンポーネントの fetchpriority と preload Nuxtでも、LCP要素にはpreloadとfetchpriorityを設定できます。 良い例: Nuxt Imageでの優先読み込み nuxt. config. ts でpreload設定: export default defineNuxtConfig({ image: { preload: { formats: } } }) 実際のプロジェクトでの効果 弊社で担当しているお客様のECサイトの商品一覧ページで、Next. js Imageコンポーネントを導入したところ、以下の改善が得られました。 指標改善前改善後改善率LCP4. 2秒1. 8秒57%改善CLS0. 250. 0580%改善転送量(モバイル)3. 2MB1. 1MB66%削減 実装時のベストプラクティス 基本的にはコンポーネントを使うだけで改善されるのですが、使う時のベストプラクティスはこうなります。 1. priority は LCP 要素のみ ヒーロー画像、ファーストビューの主要画像のみに使用 1ページあたり1-2個まで 2. sizes 属性を適切に設定 ビューポート幅に応じた実際の表示サイズを指定 モバイル、タブレット、デスクトップで異なる場合は細かく設定 3. quality は用途に応じて調整 商品画像・物件写真: 85-90 背景画像: 75-80 アイコン・UI画像: 90-95 4. CDN・画像プロバイダーの活用 Next. js: Vercel Image Optimization、Cloudinary Nuxt: Cloudinary、Imgix、ImageKit よくある落とし穴 過剰なpreload・priority：全ての画像にpriorityを指定すると、ブラウザがどれを優先すべきか判断できず、逆にパフォーマンスが悪化します。 width/heightの未指定：アスペクト比が不明だと、画像読み込み時にレイアウトシフトが発生しCLSが悪化します。必ずwidth/heightを指定しましょう。 モバイルで高画質すぎる設定：quality={95}など高画質設定をモバイルでも使うと、転送量が増えLCPが悪化します。用途に応じて調整しましょう。 そしてありがちなのが「使いすぎてしまう」という問題です。特に画質設定については、毎回お客様と（主にデザイナ様と）議論になりますが、レティーナディスプレイを意識しすぎて画質を上げることで、ページ全体のパフォーマンスは落ちることになりますので、結果的に離脱を増やすことになります。見た目やデザインと、表示速度のパフォーマンスは、相反する時が多いので注意してください。 さくっと画像コンポーネントで対応してしまいましょう 画像主導のWebサイトでは、Next. jsやNuxtの画像最適化機能を活用することで、HTMLベースの手動実装よりも圧倒的に簡単かつ効果的にLCPとCLSを改善できます。押さえておきたいポイントは以下の3つです。 Next. js/Nuxt Imageコンポーネントで自動最適化: srcset、WebP/AVIF変換、遅延読み込みを自動化 priorityでLCP要素を優先読み込み: ヒーロー画像やファーストビュー画像に限定 width/height指定でCLS抑制: アスペクト比を保持し、レイアウトシフトを防止 実際のプロジェクトでは、LCPが57%改善、CLSが80%改善、モバイル転送量が66%削減という結果が得られました。 株式会社ファストコーディングでは、こういったNext. js/Nuxtを活用した画像最適化やLCP改善の実装サポートを行っています。EC、不動産、メディアサイトなど、画像が多いサイトのパフォーマンス改善にお困りの際は、ぜひお問い合わせフォームからご相談ください。 --- - Published: 2025-11-18 - Modified: 2025-11-18 - URL: https://fastcoding.jp/blog/all/ui-ux/reading-progress-dots/ - カテゴリー: UI/UX - タグ: CSS, HTML, JavaScript, UI/UX改善 ブログ記事の読了率を18%向上させたセクション進捗表示の実装方法。IntersectionObserver APIを使い、読んだ箇所を点（ドット）で可視化。プログレスバーより圧迫感がなく、達成感を与えます。HTML/CSS/JavaScriptのコード付き。 こんにちは、Webディレクターの BigViです。 最近、私が対応したブログサイトのリニューアルで「読了率が低い」という問題がありました。記事は長いですが、途中で離脱するユーザーが多かったです。クライアントから「読者が最後まで読んでくれる工夫をしたい」という相談を受けました。 この課題に対して、私はセクション進捗表示を提案しました。ただし、常に表示されるプログレスバーではなく、「読んだ証拠」として点が灯る方式です。これが意外と効果がありました。 なぜ常時表示のプログレスバーじゃないのか 実は、最初は普通のプログレスバーを作りました。でもクライアントが「圧迫感がある」と言いました。確かに、常にゲージが見えると「まだこんなに残ってる」という気持ちになります。 そこで考え方を変えました。「進捗を見せる」のではなく「成果を見せる」方式です。章を読むたびに点が灯る。これなら「ここまで読んだ」という達成感があります。 実装の仕組み 今回の実装は3つの部分で構成されています。 HTML構造（見出しとドット群） CSSスタイル（ドットのデザインと点灯アニメーション） JavaScript（IntersectionObserverで章の表示を監視） HTML構造 各章の見出しの右側に、小さなドット群を配置します。ドットの数は章の総数と同じです。 なぜ常時表示のプログレスバーじゃないのか 章の内容... 実装の仕組み 章の内容... 各セクションにdata-chapter属性を付けています。これで何番目の章かを判別できます。 CSSスタイル ドットのデザインと点灯アニメーションを定義します。点灯時間は200msです。これがちょうどいい速さでした。 . chapter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1. 5rem; } . progress-dots { display: flex; gap: 6px; margin-left: 1rem; } . dot { width: 8px; height: 8px; border-radius: 50%; background-color: #e0e0e0; transition: background-color 200ms ease-out; } . dot. active { background-color: #2196F3; } 最初は#e0e0e0（グレー）で、点灯すると#2196F3（青）になります。色は自由に変えられます。 JavaScriptの実装 IntersectionObserver APIを使います。これは要素が画面内に入ったかを検知するAPIです。各章が画面内に入ったときに、対応するドットを点灯させます。 // 各章要素を取得 const chapters = document. querySelectorAll('. chapter'); // IntersectionObserver の設定 const options = { root: null, // ビューポートを基準 rootMargin: '-20% 0px -20% 0px', // 上下20%の位置で判定 threshold: 0 }; // 点灯済みドットを記録 const activatedDots = new Set; // Observer のコールバック関数 const callback = (entries) => { entries. forEach(entry => { if (entry. isIntersecting) { const chapterNum = entry. target. dataset. chapter; // まだ点灯していないドットのみ処理 if (! activatedDots. has(chapterNum)) { activatedDots. add(chapterNum); // すべての章のドット群から該当番号のドットを点灯 const allDots = document. querySelectorAll(`. dot`); allDots. forEach(dot => { dot. classList. add('active'); }); } } }); }; // Observer を作成して各章を監視 const observer = new IntersectionObserver(callback, options); chapters. forEach(chapter => observer. observe(chapter)); ポイントはrootMargin: '-20% 0px -20% 0px'です。これで章が画面の中央付近に来たときに点灯します。上下20%をマージンにすることで、スクロール中にちょうどいいタイミングで灯ります。 CodePen Embed Fallback 一度点灯したら消えない仕組み activatedDotsというSetで、すでに点灯したドット番号を記録しています。これで上にスクロールして戻っても、ドットは消えません。「読んだ証拠」として残り続けます。 実際の結果 この実装をクライアントのブログに導入しました。結果は良かったです。 平均読了率が約18%向上 次ページへの遷移率が約12%向上 直帰率が約9%減少 クライアントも「プログレスバーより圧迫感がない」と喜んでくれました。読者からも「どこまで読んだか分かりやすい」という声がありました。ちょっと面白かったのは、「全部の点を灯したい」という気持ちで最後まで読むユーザーがいることです。これは予想外でした。 応用できるパターン このドット進捗は、ブログ以外にも使えます。実際に私が試した例を紹介します。 1. オンボーディング画面 アプリの初回利用時の説明画面で使いました。「3ステップ完了」という達成感を出せます。 2. ECサイトの商品説明 長い商品説明ページで使いました。「特徴」「仕様」「レビュー」の3セクションに対応するドットを表示。どこまで見たか分かりやすくなりました。 3. ドキュメントサイト 技術ドキュメントで使いました。読者が「どこまで学習したか」を視覚的に確認できます。 実装の注意点 実際に作ってみて気づいた注意点を書いておきます。 ドットの数は多すぎない 最初、10個のドットを表示しました。でも多すぎて見づらかったです。4〜6個がちょうどいいと思います。章が多い場合は、大きな章だけドットを付けるのがいいです。 モバイルでのサイズ調整 スマホでは見出しが長いと、ドットが下に落ちることがあります。レスポンシブ対応が必要です。 @media (max-width: 640px) { . chapter-header { flex-direction: column; align-items: flex-start; } . progress-dots { margin-left: 0; margin-top: 0. 5rem; } } アクセシビリティの配慮 スクリーンリーダーを使う人のために、ドットに意味を持たせます。 点灯したときに、状態が伝わるようにします。 まとめ セクション進捗のドット表示について書きました。ポイントは以下の3つです。 常時表示ではなく「成果のフィードバック」として使う IntersectionObserverで章の表示を監視する 一度点灯したドットは消えない（読んだ証拠として残る） 実装はシンプルですが、効果は大きいです。ちょっとしたことだけど、お客様は喜びます。株式会社ファストコーディングでは、こうした読了率改善の実装サポートも行っています。ブログやドキュメントサイトのユーザー体験を良くしたい方は、お問い合わせフォームからご連絡ください。 --- - Published: 2025-11-10 - Modified: 2025-11-10 - URL: https://fastcoding.jp/blog/all/ui-ux/pricing-table-center-highlight/ - カテゴリー: UI/UX - タグ: CSS, CVR改善, JavaScript, UI/UX スマホの価格表で離脱率67%の問題を解決。横スクロール時に中央のプランだけをハイライト表示する実装で、プラン選択率が52%向上した事例を紹介。CSS変数とJavaScriptを使った実装方法をコード付きで詳しく解説します。 こんにちは、株式会社ファストコーディングのBigViです。 今回は私が担当したECサイトのプロジェクトで実装した、価格表のお話です。お客様から「価格表が見づらい」「どのプランを選べばいいか分からない」という声がありました。特にスマホで見ると、横スクロールが動きもなくてシンプルで、違いがわかりづらいようでした。 価格表の問題点 価格表を作るとき、3つとか4つのプランを並べることが多いです。でも、スマホだと画面が小さいので、全部のプランを一度に見ることができません。横にスクロールして比較しないといけないです。 実際、私が担当したプロジェクトでも、お客様がこう言いました： 「価格表を見ているユーザーの離脱率が高いんです。もっと分かりやすくできませんか？」 データを見たら、価格表のページで平均滞在時間が30秒くらいでした。そして、プラン選択率も低かったです。これは問題だなと思いました。 解決策：中央のプランだけハイライト いろいろ考えて、こういう方法を試しました： 横スクロールする価格表を作る スクロールしたとき、中央に来たプランだけハイライトする ハイライトは微妙なグラデーションで、派手すぎないようにする 切り替えはスムーズに200msで この方法なら、ユーザーは「今どのプランを見ているか」が分かりやすくなります。視線誘導にもなりますし、選びやすくなると思いました。 実装方法 HTML構造 まず、HTMLはこんな感じで書きます。シンプルな構造です： ベーシック ¥1,000/月 機能A 機能B サポート: メール このプランを選ぶ スタンダード ¥2,000/月 機能A 機能B 機能C サポート: メール + チャット このプランを選ぶ プレミアム ¥3,500/月 機能A 機能B 機能C 機能D（独占） サポート: 24時間対応 このプランを選ぶ CSSスタイル 次はCSSです。ここがポイントです。CSS変数を使って、グラデーションの色を管理します： :root { --highlight-gradient: linear-gradient( 135deg, rgba(59, 130, 246, 0. 08) 0%, rgba(99, 102, 241, 0. 12) 100% ); --transition-speed: 200ms; } /* モバイル表示をシミュレート */ . mobile-simulator { max-width: 375px; margin: 0 auto; border: 8px solid #1f2937; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0. 3); } . price-table-container { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 20px 0; background: #f9fafb; } /* スクロールバーをカスタマイズ（見やすく） */ . price-table-container::-webkit-scrollbar { height: 8px; } . price-table-container::-webkit-scrollbar-track { background: #e5e7eb; } . price-table-container::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; } . price-table { display: flex; gap: 12px; padding: 0 16px; } . plan-card { min-width: 280px; flex-shrink: 0; scroll-snap-align: center; background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; transition: all var(--transition-speed) ease-out; } /* ハイライト状態 */ . plan-card. is-centered { background: var(--highlight-gradient); border-color: rgba(99, 102, 241, 0. 3); transform: scale(1. 02); box-shadow: 0 8px 24px rgba(99, 102, 241, 0. 15); } . plan-card h3 { font-size: 1. 25rem; margin: 0 0 12px 0; color: #1f2937; } . price { font-size: 2rem; font-weight: bold; color: #4f46e5; margin: 0 0 16px 0; } . price span { font-size: 0. 875rem; color: #6b7280; } . features { list-style: none; padding: 0; margin: 0 0 16px 0; } . features li { padding: 6px 0; font-size: 0. 875rem; border-bottom: 1px solid #f3f4f6; } . select-btn { width: 100%; padding: 10px; background: #4f46e5; color: white; border: none; border-radius: 8px; font-size: 0. 875rem; cursor: pointer; transition: background var(--transition-speed); } . select-btn:hover { background: #4338ca; } /* 中央のボタンだけ目立たせる */ . plan-card. is-centered . select-btn { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); box-shadow: 0 4px 12px rgba(79, 70, 229, 0. 4); } このCSSで、中央に来たプランカードだけ、微妙なグラデーション背景と少し拡大する効果が出ます。派手すぎないので、心地いい感じになります。 JavaScriptで中央判定 最後はJavaScriptです。スクロールしたとき、どのカードが中央にあるかを判定します。CSSのscroll-snapだけで実装できます。スクロールも自動で中央に止まってくれます： const container = document. querySelector('. price-table-container'); const cards = document. querySelectorAll('. plan-card'); container. addEventListener('scroll', => { const containerRect = container. getBoundingClientRect; const centerX = containerRect. left + containerRect. width / 2; cards. forEach(card => { const cardRect = card. getBoundingClientRect; const cardCenterX = cardRect. left + cardRect. width / 2; // 中央から30px以内なら中央とみなす（モバイル用に調整） if (Math. abs(centerX - cardCenterX) < 30) { card. classList. add('is-centered'); } else { card. classList. remove('is-centered'); } }); }); CodePen Embed Fallback 実際の結果 この実装をしたあと、A/Bテストをしました。結果はこんな感じでした： 指標実装前実装後変化プラン選択率12. 3%18. 7%+52%平均滞在時間28秒47秒+68%離脱率67%48%-28% プラン選択率が50%以上も上がりました。お客様もとても喜んでくれました。 ユーザーからのコメントもいくつかもらいました： 「どのプランを見ているか分かりやすい」 「比較しやすくなった」 「スクロールするのが楽しい」 特に3つ目のコメントは意外でした。ちょっとしたアニメーションで、体験が良くなったみたいです。 実装のポイント 今回の実装で大事だったポイントは3つです： 1. グラデーションは微妙に 最初、もっと派手なグラデーションを試しました。でも、お客様から「うるさい」と言われました。なので、rgbaで透明度を低くして、微妙なグラデーションにしました。これがちょうどいい感じになりました。 2. トランジションは200ms 切り替えのスピードも大事です。最初は300msにしていましたが、少し遅く感じました。200msにしたら、ちょうどいいスムーズさになりました。速すぎても遅すぎてもだめです。 3. CSS変数で管理 グラデーションの色やトランジションのスピードは、CSS変数（カスタムプロパティ）で管理しました。これで、あとから調整するのが簡単になりました。お客様が「もう少し青を強くして」と言ったとき、変数を変えるだけで全部変わるので便利でした。 まとめ 価格表の中央ハイライトは、小さい実装ですが効果が大きかったです。この方法で、ユーザーが「どのプランを見ているか」が分かりやすくなります。視線誘導にもなるので、CVR（コンバージョン率）も上がります。 株式会社ファストコーディングでは、こうした細かいUI実装のサポートも行っています。価格表だけじゃなくて、いろいろな場面でユーザー体験を良くする実装ができます。もし興味があれば、こちらのお問い合わせフォームから相談してください。 ※本記事は弊社外国人スタッフによる投稿です。言い回しや表現が不十分な個所がありますことご容赦いただきますようお願いいたします。 --- - Published: 2025-11-06 - Modified: 2025-11-07 - URL: https://fastcoding.jp/blog/all/html-css/css-animations-for-branding/ - カテゴリー: HTML/CSS - タグ: CSSアニメーション, UI/UX, Webデザイン, ブランディング CSSアニメーションでブランドの世界観を効果的に表現する方法を解説。文字の1文字ずつ出現、SVGロゴ描画、グラデーション背景など、JavaScriptなし で実装できる3つの技術を実例コード付きで紹介。UI/UX改善に役立つ実践的なテクニックが満載です。 こんにちは、株式会社ファストコーディングの働くおかんです！ 最近、子どもと一緒にスマホでお菓子のサイトを見ていたら、ロゴがふわっと浮かんできて「ママ、これすごい！」と目を輝かせていました。たったそれだけの演出なのに、ブランドの印象がぐっと変わるんですよね。そんな瞬間を目の当たりにして、改めてアニメーションの力を実感しました。 Webサイトは、アニメーションという「動き」や「時間軸」を使えるので、静止画だけでは伝えきれない世界観やストーリーを表現できます。けれど、いざディレクターとして「どんな動きを入れればいいの？」と聞かれると、具体的に答えるのは意外と難しいんですよね。JavaScriptを使った大掛かりな実装ではなくても、CSSだけでできる範囲で、ブランドに「らしさ」を与えられる方法はたくさんあります。 今回は、実際の案件で提案してきた経験をもとに、ブランドストーリーを効果的に演出するCSSアニメーションの活用法をご紹介します！ なぜCSSアニメーションでブランドを表現するのか 静的なデザインだけでは、ブランドの個性や世界観を十分に伝えきれません。特にスマートフォンが主流になってから、ユーザーはスクロールしながら情報を流し読みすることが多く、印象に残るためには「動き」が重要な役割を果たしています。 以前担当した化粧品ブランドのサイトでは、クライアントから「高級感と優しさを両立させたい」という要望がありましたが、その時は、静止画だけでは表現しきれない「優雅さ」を、アニメーションで補うことで、ブランドの世界観をより深く伝えることができました！ ここで大事なのは、派手な動きではなく、ブランドの性格に合った「適切な動き」を選ぶことです。 ブランドを演出する3つのCSSアニメーション提案！ 1. テキストを1文字ずつ出現させるアニメーション ブランドのキャッチコピーや重要なメッセージを、1文字ずつ順番に表示する演出は印象的です！JavaScriptを使わずに、CSSのカスタムプロパティ（CSS Variables）で実現できます。 先日、ジュエリーブランドのリニューアル案件で、トップページのキャッチコピー「一生ものの輝きを」という文字を1文字ずつ出現させる演出を提案しました。クライアントからは「ブランドの丁寧さが伝わる」と好評で、サイト訪問者の滞在時間が約20%伸びました！ 一 生 も の の 輝 き を . brand-message span { display: inline-block; opacity: 0; animation: fadeInChar 0. 5s ease-out forwards; animation-delay: calc(var(--i) * 0. 1s); } @keyframes fadeInChar { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } CodePen Embed Fallback 各文字に--iという変数で順番を指定し、calcで遅延時間を計算します。この方法なら、文字数が変わっても柔軟に対応できます！ 2. SVGロゴが線で描かれていくアニメーション ブランドロゴがまるでペンで描かれていくような演出は、こだわりや職人技を表現するのに最適です。SVGのstroke-dasharrayとstroke-dashoffsetを使って実現します。 以前、和菓子店のWebサイトで、店舗ロゴが筆で描かれるような演出を実装しました。「職人が一つひとつ手作業で作る」というブランドストーリーと重なって、お客様から「サイトを見ただけで丁寧さが伝わる」という声をたくさんいただけました！ . logo-path { stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawLogo 2s ease-out forwards; } @keyframes drawLogo { to { stroke-dashoffset: 0; } } CodePen Embed Fallback stroke-dasharrayでパスの長さを指定し、stroke-dashoffsetを0に向かってアニメーションさせることで、線が描かれていく効果を生み出します。ロゴのSVGファイルがあれば、すぐに実装できます！ 3. グラデーション背景が流れるアニメーション ブランドカラーのグラデーションが緩やかに動く演出は、静的な背景よりも洗練された印象を与えます。background-positionを使えば、シンプルに実装できます。 コスメブランドのECサイトでは、トップページのメインビジュアルに、ピンクからパープルへのグラデーションが流れる背景を採用しました。「動きがあるのに主張しすぎない」という絶妙なバランスで、商品画像を引き立てながらもブランドの華やかさを表現しました！ 新作コレクション . hero-section { position: relative; min-height: 400px; background: linear-gradient( 45deg, #ff6b9d 0%, #c86dd7 50%, #ff6b9d 100% ); background-size: 200% 200%; animation: gradientFlow 8s ease infinite; display: flex; align-items: center; justify-content: center; } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } CodePen Embed Fallback background-size: 200%で背景を拡大し、background-positionをアニメーションさせることで、グラデーションが流れるように見えます。色の組み合わせを変えれば、どんなブランドにも対応できますよ！ CodePen Embed Fallback ブランドらしさを引き出すアニメーション設定のコツ タイミング関数の選び方 アニメーションの印象は、ease、ease-in-out、cubic-bezierといったタイミング関数で大きく変わります！高級ブランドなら滑らかなease-out、親しみやすいブランドなら少し弾むようなcubic-bezier(0. 68, -0. 55, 0. 27, 1. 55)を試してみてください。 以前、子ども向け教育サービスのサイトでは、バウンド効果のあるタイミング関数を使って、「楽しく学べる」印象を強調しました。子どもが喜んでくれる動きって、やっぱり少し遊び心があるほうがいいんですよね。 アニメーション時間の調整 0. 3秒から0. 8秒が基本です。速すぎると見落とされてしまいますし、遅すぎるとストレスになります。ブランドの性格に合わせて、数値を微調整することが大切です。 夜、子どもが寝た後にコーヒーを飲みながら、この時間調整を何度も試したことがあります。0. 1秒違うだけで印象が変わるので、地味ですが重要な作業です！ モバイル対応の配慮 スマートフォンでは、アニメーションが重いとサイトの動きが悪くなってしまいます。transformやopacityを使った軽量なアニメーションを優先して、widthやheightの変更は避けましょう。 /* 推奨：軽量 */ . element { transform: translateX(100px); opacity: 0. 5; } /* 非推奨：重い */ . element { width: 200px; margin-left: 50px; } 実際の案件で失敗から学んだこと あるアパレルブランドのサイトで、商品画像すべてにアニメーションを加えたことがあるんです。結果、ページ全体がうるさくなってしまい、「どこを見ればいいかわからない」というフィードバックをいただきました。 そこから学んだのは、「引き算の美学」です。本当に見てほしい部分だけにアニメーションを絞ることで、メリハリが生まれて、ブランドメッセージがより明確になります！すべてを動かすのではなく、キービジュアルやCTAボタンなど、重要な要素に絞って使うことが効果的です。 ディレクターとしての提案の進め方 クライアントに提案する際は、「なぜこの動きが必要か」を言語化することが大切です。単に「おしゃれだから」ではなく、「ブランドの信頼感を高めるため」「ユーザーの視線を誘導するため」といった目的を明確にすると、承認を得やすくなります。 また、モックアップやプロトタイプで実際の動きを見せることも有効です！CodePenなどで簡単なデモを作ってプレゼンすると、クライアントもイメージしやすくなります。 社内のエンジニアに依頼する際も、「このアニメーションで伝えたいブランドの印象」を共有すると、実装の精度が上がります！数値の微調整まで一緒に確認できると、より良い仕上がりになりますよ。 まとめ CSSアニメーションは、ブランドの世界観やストーリーを視覚的に伝える強力なツールです。派手な動きではなく、ブランドらしさを引き出す「適切な動き」を選ぶことで、ユーザーの記憶に残るサイトを作れます！ 今回紹介した手法は、少し工夫が必要ですが、JavaScriptを使わずにCSSだけで実装できます。特にテキストの1文字ずつ出現やSVGの描画アニメーションは、他のサイトと差別化できる効果的な演出です！次のプロジェクトで、まずは一つ試してみてください。 株式会社ファストコーディングでは、ブランドの魅力を最大限に引き出すCSSアニメーションの実装から、サイト全体のUI改善まで幅広くサポートしています。「こんな演出ができるか相談したい」「既存サイトに動きを加えたい」といったご要望があれば、お気軽にご相談ください。一緒に、ブランドに命を吹き込むサイトを作りましょう！ --- - Published: 2025-11-05 - Modified: 2025-11-05 - URL: https://fastcoding.jp/blog/all/frontend/react%e3%81%a7%e5%9b%ba%e3%81%be%e3%82%89%e3%81%aa%e3%81%84ui/ - カテゴリー: React, Vue.js - タグ: React, UI/UX Reactのライブ検索で入力が固まる原因と、その解決策を徹底解説。React 18以降のstartTransitionとuseDeferredValueでUI更新に優先度を付け、入力遅延を450ms→45msに改善。INPスコアも78％向上した実践コード付きチュートリアルです。 こんにちは、株式会社ファストコーディングのフルスタックエンジニア、独身貴族Fireです。 先日、週末のバイクツーリング中に立ち寄った道の駅で、観光地検索アプリを使っていた時のことです。検索ワードを入力するたびに画面が一瞬固まって、文字入力が追いつかない。イライラして結局使うのをやめてしまいました。帰宅後、ふと「これ、自分たちが作っているアプリでも起きてないだろうか? 」と気になって、いくつかのプロジェクトを見直してみたんです。 *バイクの振動で手が震えてたのもあるかもしれませんが、それにしても反応が悪すぎました。。。 特に大規模な商品一覧やデータテーブルでライブ検索機能を実装している場合、ユーザーが文字を入力するたびに数千件のデータをフィルタリングして再レンダリングする必要があります。この処理が重いと、入力欄がカクついてユーザー体験が大きく損なわれます。今回は、React 18以降で導入されているstartTransitionとuseDeferredValueを使って、この問題を解決する方法を解説します。 従来の方法ではUIが固まる理由 React では、状態が更新されると即座に再レンダリングが走ります。これは通常問題ありませんが、レンダリングコストが高い場合、メインスレッドがブロックされて入力が遅延します。 なぜこれが問題になるのでしょうか。JavaScript はシングルスレッドで動作するため、重い処理が実行されている間は他の処理が待たされます。つまり、5000件のデータをフィルタリングしている間は、ユーザーの入力イベントも処理できません。結果として「入力したのに反応しない」という状態が発生するのです。 問題のある実装例 まず、よくある実装パターンを見てみましょう。この例では、入力のたびにすぐさま検索結果を更新しています。 function ProductSearch { const = useState(''); const = useState(generateProducts(5000)); // 入力のたびに5000件をフィルタリング const filtered = products. filter(p => p. name. toLowerCase. includes(query. toLowerCase) ); return ( setQuery(e. target. value)} /> ); } この実装では、onChangeイベントでsetQueryを呼び出すと、すぐにfilteredの再計算が走ります。そしてProductListが即座に再レンダリングされます。この一連の処理が完了するまで、次の入力イベントは処理されません。実際に計測してみると、1文字入力するたびに平均で450msの遅延が発生していました。 優先度制御による解決 React 18からは、更新に優先度をつけることができるようになりました。これにより「ユーザーの入力はすぐに反映するが、重い計算結果の表示は後回しにする」という制御が可能になります。重要なのは、入力欄の値はすぐに更新されるため、ユーザーは「ちゃんと入力できている」と感じられる点です。 startTransition を使った実装 startTransitionは、その中の状態更新を「低優先度」としてマークする関数です。Reactはこれを見て、「この更新は緊急ではないので、他の重要な処理があればそちらを先にやる」と判断します。 import { useState, useTransition } from 'react'; function ProductSearch { const = useState(''); const = useState(''); const = useTransition; const = useState(generateProducts(5000)); const handleChange = (e) => { const value = e. target. value; setQuery(value); // 入力欄は即座に更新 startTransition( => { setDeferredQuery(value); // 検索は低優先度 }); }; const filtered = products. filter(p => p. name. toLowerCase. includes(deferredQuery. toLowerCase) ); return ( {isPending && 検索中... } ); } この実装のポイントは、queryとdeferredQueryという2つの状態を持つことです。queryは入力欄の表示に使い、deferredQueryは実際の検索処理に使います。ユーザーが「a」と入力すると、まずsetQuery('a')が即座に実行されて入力欄に「a」が表示されます。次にstartTransition内のsetDeferredQuery('a')が実行されますが、これは低優先度なので、他の処理があればそちらが優先されます。 useDeferredValue を使ったシンプルな実装 useDeferredValueは、値そのものを「遅延バージョン」として取得するフックです。startTransitionよりも宣言的で、状態を2つ管理する必要がありません。 import { useState, useDeferredValue, useMemo } from 'react'; function ProductSearch { const = useState(''); const deferredQuery = useDeferredValue(query); const = useState(generateProducts(5000)); const filtered = useMemo( => { return products. filter(p => p. name. toLowerCase. includes(deferredQuery. toLowerCase) ); }, ); const isPending = query ! == deferredQuery; return ( setQuery(e. target. value)} /> {isPending && 検索中... } ); } useDeferredValueは内部的にstartTransitionと同様の仕組みを使っており、渡された値の「遅延バージョン」を返します。queryが更新されてもすぐにはdeferredQueryに反映されず、Reactが「今は余裕がある」と判断したタイミングで更新されます。また、useMemoでフィルタリング結果をメモ化することで、deferredQueryが変わらない限り再計算されないようにしています。 こちらにまとめて試せるコードをおいてみました。50,000件のランダムなレコードを扱った場合の体感速度の違いが分かると思います(MacProレベルのパソコンだと、この程度では何も変わらないかもしれませんが。。。) CodePen Embed Fallback パフォーマンス計測結果 指標従来適用後改善率入力遅延450ms45ms90%INPスコア820ms180ms78% 実装時の注意点 処理が非常に速い場合、ローディング表示が一瞬だけ表示されて逆に気になることがあります。一定時間以下の場合は表示しないようにすると、より自然な体験になります。 const = useState(false); useEffect( => { if (isPending) { const timer = setTimeout( => setShowLoading(true), 200); return => clearTimeout(timer); } else { setShowLoading(false); } }, ); まとめ 今回紹介したstartTransitionとuseDeferredValueは、React 18で追加された優先度制御の仕組みです。大規模なデータを扱うライブ検索やフィルタリング機能では、入力の反応速度がユーザー体験に直結します。従来の実装では、すべての更新が同じ優先度で処理されるため、重い計算が入力をブロックしてしまいます。 この問題を解決するために押さえておきたいポイントは以下の3つです。 入力は即座に反映し、結果表示は遅延させる優先度制御を導入する isPendingフラグでローディング状態を表示し、ユーザーに処理中であることを伝える useMemoやReact. memoと組み合わせて、不要な再計算を防ぐ 実際のプロジェクトでは、入力遅延が450msから45msに改善され、INPスコアも78%向上しました。次のプロジェクトでぜひ試してみてください。 株式会社ファストコーディングでは、こういったReactのパフォーマンス最適化について豊富な経験があります。INPスコアの改善でお困りの際は、お問い合わせフォームからご相談ください。 --- - Published: 2025-11-04 - Modified: 2025-11-04 - URL: https://fastcoding.jp/blog/all/info/ai-browser-compatible-coding/ - カテゴリー: Web業界の動向・情報 - タグ: Web業界の動向, 生成AI AIブラウザ時代に備えるための“AIが操作しやすいサイト設計”を解説。セマンティックHTMLとARIAの要点、カスタムUIの落とし穴、旅行業界サイトでの改善事例（日付ピッカー／ドロップダウン／無限スクロールの見直し）まで、実務視点で「AIエージェントに伝わるDOM」の作り方を紹介します。 株式会社ファストコーディングで主に国外のお客様を担当しています長谷川と申します。社長の大号令で全員ブログを書いていこうということになりまして、、、他の記事のようにすぐ使えるコードを書くことはできないのですが、お客様とお話ししていて気づいたことや、最近流行っていることを書いていこうと思っております。どうぞ宜しくお願いします。 さて、つい先日ですが、お客様と新しいプロジェクトについてお話ししているときに、「そういえば、最近AIブラウザって聞くんですけど、新しいブラウザですよね？うちのサイトは対応してるんですかね？」と聞かれました。営業として日々お客様と接している私ですが、実はここ数ヶ月でAIブラウザに関する質問がじわじわ増えているんです。 皆様もご存知の通り、今年に入ってから、OpenAIの「ChatGPT Atlas」やPerplexityの「Comet」、The Browser Companyの「Dia」など、主要なAIブラウザが相次いでリリースされています。これまでブラウザといえば人間が操作するものでしたが、AIが代わりに操作する時代がすぐそこまで来ているのです。 お客様からは「うちのサイトは対応できているの？」というお声を聞くようになりました。今回は、AIブラウザとは何か、そしてAIブラウザに対応したコーディングとは具体的にどういうものなのか、実際に弊社で対応した事例も交えてお伝えします。 AIブラウザとは何か そもそもAIブラウザとは、AI技術を組み込んだWebブラウザのことです。もっとシンプルに言いますと、AIが勝手に操作してくれるブラウザ、だと思えば分かりやすいと思います。 従来のブラウザは人間がクリックやスクロールで操作していましたが、AIブラウザではAI自身がWebサイトを理解し、自動で操作を行います。例えば「この商品を最安値で探して購入手続きまで進めて」といった指示を出すと、AIが複数のサイトを巡回し、価格を比較し、カートに入れて購入画面まで進める、といったことが可能になります。 代表的なAIブラウザ製品 2025年は「AIブラウザ元年」と言っても過言ではありません。主要な製品が一気にリリースされたからです。 製品名リリース時期提供元特徴ChatGPT Atlas2025年10月OpenAIユーザーの行動を記憶し、情報収集からサイト操作まで統合的に行えるPerplexity Comet2025年7月Perplexity有料プラン加入者向けに招待制で提供中Dia2025年6月The Browser CompanyArc Browserの開発チームが手掛ける次世代ブラウザEdge with Copilot2025年4月Microsoft全ユーザーへAI機能を開放Genspark AI Browser2025年6月MainFunc社AI検索エンジンGenSparkで知られる企業の製品 お客様との会話でも、これらの製品名が頻繁に出るようになりました。ただあまりご存知なく、「AIブラウザ」がFirefoxやChromeのように、新しいブラウザの名前のようのおっしゃられていることもあって、正しくは浸透していないかなというのが所管です。AIブラウザ＝新しいブラウザの種類、と考えると良いと思います。 実際のプロジェクト事例―旅行業界のホテル検索サイト ここで実際にあったお客様の事例をご紹介します。 先月、旅行代理店のお客様から相談を受けました。そのお客様はWebサイトでホテル検索サービスを提供しており、最近こんな問題に直面していました。 「AIブラウザでホテルを検索させてみたところ、途中で検索が止まってしまうんです。しかも、指定した条件と違う条件で検索されてしまうこともあって... 」 詳しく話を聞くと、以下のような問題が起きているとのことでした。 「東京、2名、3月10日〜12日」という条件で検索するようAIに指示をしたのに、なぜか3月10日から22日になってしまう。 人数選択のドロップダウンで操作が止まってしまう。 検索ボタンを押せないことがある。 検索結果が一部しか表示されず、スクロールして続きを見られない。 弊社のエンジニアと一緒に、実際にそのサイトをAIブラウザで操作してみると、確かに問題ありでした。ただ毎回発生するわけでもないし、発生する条件もまちまちで、何かの特定のバグではないことは確かです。 車内に持ち帰りいろいろと実験を重ねた結果、根本的な原因は、デザイン性を重視したカスタムUI部品の多用と、ARIA属性の不足でした。見た目は美しいのですが、AIから見ると「何をすればいいかわからない」状態だったのです。 AIブラウザに対応したコーディングとは 先に書いた通り、AIブラウザは人間とは異なる方法でWebサイトを操作します。具体的には、DOMを解析し、JavaScriptのイベントを使ってクリックやスクロールを実行します。つまり、AIにとって「わかりやすいDOM構造」でなければ、正しく操作できません。 AIが理解できるDOMの条件 AIブラウザに対応するには、以下の条件を満たす必要があります。 セマンティックなHTML構造 ARIA属性による明確な役割の定義 基本的なクリック・スクロールイベントへの対応 見た目のデザインだけでなく、スタイリングを外しても理解できる構造が求められるのです。 セマンティックHTML＋ARIA属性の重要性 お客様から「セマンティックHTMLって聞いたことはあるけど、そこまで重要なの？」と聞かれることがあります。答えは「はい、極めて重要です」。 セマンティックHTMLとは、HTML要素を意味に沿って正しく使うことです。弊社は創業以来SEOに、最近はAIに強いコーディング、を謳っていることもありまして、ずっとこのセマンティックコーディングにはこだわってきました。たとえばですが、弊社でこれまで対応してきたプロジェクトの経験から、対AIに対しても、以下のような使い分けが基本になることがわかっています。 要素の役割使うべきHTMLタグ重要な理由ナビゲーションAIが「サイト内の移動メニュー」と認識できる見出し〜ページの構造をAIが理解できるボタンクリック可能な操作要素であることが明確になるリンク別ページへの遷移であることがわかる（いいかえますと、onclickでリンクするような書き方はだめです）メインコンテンツページの主要な内容をAIが特定できるフォーム、入力と送信の一連の流れをAIが理解できる お客様からよくこんな質問をいただきます。「見た目は同じなのに、なぜタグを使い分ける必要があるの？」答えは簡単です。AIは見た目ではなく、HTMLの構造を読み取るからです。デザイン上は同じに見えても、正しいタグを使わなければAIには役割が伝わりません。 実際、いくつか(*1 *2)の記事でも「セマンティックHTMLは、アクセシブルで、SEOに最適化され、将来性のあるWeb体験の基盤である」と指摘されています。これは人間のユーザーだけでなく、AIエージェントにとっても同様です。 ARIA属性で役割を明示する ARIA（Accessible Rich Internet Applications）属性は、元々はアクセシビリティ向上のための技術ですが、AIブラウザ対応でも極めて重要です。 弊社でAI対応プロジェクトを進める中で、ARIA属性の有無でAIの動作が大きく変わることを実際に確認してきました。具体的には以下のような属性が重要です。 ARIA属性役割使用例aria-label要素の名前を説明「商品を検索」「メニューを開く」などボタンの目的を明示aria-expanded開閉状態を示すドロップダウンが開いているか閉じているかをAIに伝えるaria-haspopupポップアップの存在を示すクリックするとメニューが開くことをAIに予告aria-controls操作対象を指定このボタンがどの要素を制御するかを明示role要素の役割を定義検索フォーム、ナビゲーション、ダイアログなどの役割を示す（これが一番重要） 例えば検索フォームであれば、「これは検索フォームである」「ここに入力する」「このボタンを押せば検索できる」という情報をARIA属性で明示します。そうすることで、AIは迷わず操作できるようになります。 Medium (*3)の記事でも「セマンティックHTML、論理的なタブ順序、正確な要素の命名、包括的なARIAロールは、アクセシビリティ基準への準拠だけでなく、AIとのインタラクションへの準備も保証する」と指摘されています。 カスタム部品の落とし穴 お客様のサイトで多く見られるのが、デザイン性を重視したカスタムUI部品です。見た目は美しいのですが、AIブラウザからすると大きな問題があります。弊社でこれまで対応してきたプロジェクトから見えてきた問題点を整理すると、以下のようになります。 よくあるカスタムUI部品の問題点 問題具体例なぜAIが操作できないのか操作方法が不明確をボタンの代わりに使っている標準のであればAIは操作を知っているが、カスタム部品では判断できない特殊なイベントに依存マウスオーバーでしか開かないメニューAIは基本的にクリックやスクロールで操作するため、マウスオーバーのみだと操作不可スクロールイベントの不備無限スクロールが実装されていないAIがページの続きを読み込めず、全体を把握できないARIA属性の欠如カスタムドロップダウンに属性がないAIがその要素の役割を理解できない 実際の対応プロジェクトで何度も経験したのが、「デザインは最高なのに、AIが全く操作できないサイト」という状況です。見た目と機能性の両立が、今後ますます重要になってきます。 特に注意すべき「マウスオーバー」依存 お客様のサイトで最も多い問題が、マウスオーバー（カーソルを乗せる操作）でしか動作しないメニューやドロップダウンです。 人間であればマウスを動かしてメニューを開けますが、AIブラウザはクリックやスクロールといった基本的な操作を使います。マウスオーバーのみに依存していると、AIは操作できません。 弊社での対応経験から、クリックイベントにも対応することで解決できることがわかっています。人間もAIも操作できる設計が理想的です。 試行錯誤、そして改善へ お客様と相談しながら、段階的に改善を進めました。 フェーズ改善内容改善のポイント第1フェーズ日付ピッカーの見直しカスタムUIから標準の日付入力フォームに変更。見た目はCSSでカスタマイズしつつ、AIが確実に操作できる形に第2フェーズドロップダウンの改善マウスオーバーのみだった仕様を、クリックでも開くように変更。ARIA属性も追加して役割を明確化第3フェーズ検索ボタンと結果表示検索ボタンにARIA属性を追加。無限スクロールも標準的な実装に変更してAIが続きを読み込めるように 各フェーズでエンジニアが実装した後、私も立ち会ってAIブラウザでテストを行いました。実際にAIが動いている様子を見ると、「ここで止まるんだな」「ここは認識できているんだな」というのが視覚的にわかり、非常に勉強になりました。特に印象的だったのは、日付ピッカーの改善です。見た目はぜんぜん変わらないのに、AIの動きが劇的に改善されたのを見て、「構造の重要性」を実感しました。 実はこの案件では、私自身も何度か現場のエンジニアと一緒にテストに立ち会いました。AIがどこで止まるのか、どう操作しようとしているのかを見るのは、営業の立場からも非常に勉強になりました。お客様への提案の際にも、この経験が活きています。 今後はすべてのコーディングがAI対応を求められる時代へ お客様との会話の中で、最近こんな質問が増えています。「AIブラウザ対応って、今すぐ必要ですか？」 私の答えは「準備は今から始めるべきです」です。 2025年は主要なAIブラウザが出揃った年であり、今後数年でAIによるWeb操作は一般化するでしょう。ECサイトであれば、AIが価格比較をしながら自動で購入するケースが増えます。予約サイトであれば、AIが空き状況を確認して予約まで完了させます。そのとき、AIが操作できないサイトは選択肢から外されてしまうかもしれません。いい商品を掲載しているのに、AIにとって使いにくいから、結局ユーザに届かなくなるのです。 まずはご相談ください。 弊社ではAIに対応したコーディングに積極的に取り組んでおり、既存サイトの診断から再構築まで幅広くサポートしています。「うちのサイトは大丈夫かな」と不安を感じている方は、ぜひお気軽にご相談ください。現場の知見を活かして、最適な対応方法をご提案します。 参考文献 *1 Julian Pineda (2025). "Why Accessibility and Semantic HTML Matter for the Future of AI Tools Like OpenAI's 'Operator'", Medium. https://medium. com/@julianpinedayyz/why-accessibility-and-semantic-html-matter-for-the-future-of-ai-tools-like-openais-operator-1c1c90678ec4 *2 Gerry Leo Nugroho (2025). "Semantic HTML in 2025: The Bedrock of Accessible, SEO-Ready, and Future-Proof Web Experiences", DEV Community. https://dev. to/gerryleonugroho/semantic-html-in-2025-the-bedrock-of-accessible-seo-ready-and-future-proof-web-experiences-2k01 *3 Apexure (2025). "How to Build AI Agent Friendly Websites? ". https://www. apexure. com/blog/ai-agent-friendly-websites --- - Published: 2025-10-29 - Modified: 2025-10-29 - URL: https://fastcoding.jp/blog/all/kintone/kintone%e3%81%ab%e9%87%8d%e8%a4%87%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e6%a9%9f%e8%83%bd%e3%82%92%e5%ae%9f%e8%a3%85/ - カテゴリー: kintone - タグ: JavaScript, イベント受付, プラグイン, 予約受付 登録時のユニーク制御だけでは防げない“重複レコード”を、日次運用で検出・是正するプラグインとともに解説。kintoneでの「重複チェック」ボタン実装、email完全一致／フリガナ＋生年月日の準一致／氏名の類似度＋電話末尾4桁のあいまい判定など、表記ゆれに強いロジックとコード例、導入効果（重複率30％減・名寄せ工数1/3）まで紹介します。 登録時のチェックだけでは防げない“重複してしまうレコード” 皆さんこんにちは。kintoneアプリエンジニアのtomiokaです。今回もお客様から相談をよく受ける、「現場あるある」系のお話ですが、データが重複してしまう問題について書いてみます。 予約受付やイベント受付といった、「受付をする」という現場では、「応募者が同じ人なのに別レコードで登録されている」という問題がほぼ必ずと言っていいほど発生します。重複して受け付けても問題ないような企画ならよいのですが、ほとんどのケースは重複はなんとか防ぎたいですよね。 そこで登録の段階で、登録済みの人は弾いてしまおうということになるんですが、例えばkintoneのフィールド設定でメールアドレスをユニーク設定にしていても、別のメールアドレスを使って登録してしまえば防げません。さらに、他のシステムで受け付けた内容をCSVでインポートしたり、紙での応募を受け付けていたりなど、複数の経路から登録されることもあり、気づけば同一人物が複数件。。。ということになりやすいんです。結果、来場者の管理や予約を捌いていく時に目視で確認しなければならなくなり、とても使いづらく、ミスが出やすいデータ管理になってしまいます。 この記事では、そうした「登録時では防げない重複」について、実際の案件で利用した日次運用で検出する実践的な方法を紹介します。 そもそも「登録時」は「重複を防ぐ」タイミングではない。 kintoneの標準機能では、特定フィールドに「ユニーク」を設定することで重複した値を登録できないようにできます。しかし、次のようなケースでは防ぎ切れません。 ケース例結果別メールアドレスtanaka@example. com と tanaka. work@gmail. com同一人物が別レコード化CSVインポート別担当が同じ候補者を取り込むキーになる項目が違ったりなかったりで二重登録紙起票の転記手入力で表記ゆれ・“山田太郎”と“山田 太郎”が別人扱い・住所の番地を"1丁目2番3号"と書くのか、"1-2-3"と書くか つまり、「登録時に防ぐ」よりも「登録後に洗い出す」方が現実的なのです。 重複チェックを“業務習慣”として運用に組み込む イベント受付や予約受付では、「応募者情報が複数の経路で入ってくる」ことが前提です。 別メディア経由の応募と直接応募で、同じ候補者が別レコード化 紙の応募票を後日CSVでインポート 同じ人が複数のイベントに分けて登録される こうした構造的重複は、どんな制御ルールを設けても完全には防げません。だからこそ重要なのは「重複登録を防ぐこと」ではなく、日次の運用で“重複を検出する”フローを作ることです。 弊社の過去のプロジェクトでは、そんな重複登録を検出するための、「重複チェック」ボタンを提案いたしました。機能は、担当者が毎朝クリックするだけで重複候補が一覧化されます。重複チェックが日常業務に自然に溶け込む設計が狙いの機能となります。 実装の流れとコードサンプル ＊コード全体を含むプラグインは、本記事末尾からダウンロードいただけます。 アプリのフィールド構成例 例えば以下のような受付管理アプリがあったとして、重複チェック機能を考えていきましょう。 フィールド名フィールドコード種類氏名name文字列(1行)フリガナname_kana文字列(1行)メールアドレスemail文字列(1行)電話番号tel文字列(1行)生年月日dob日付 “データのゆれ”に対応した重複チェック 実際に登録されるデータを考えると、こういう“ゆれ”にも対応していかないといけません。 ゆれ例問題複数メールアドレスtanaka@icloud. com と tanaka. work@gmail. com同一人物が別登録名前の揺れ「山田 太郎」「山田太郎」「ヤマダタロウ」表記差で検出漏れ電話フォーマット差090-1234-5678 と 09012345678不一致判定誤変換・旧字体「一郎」「一朗」同一人物を別扱い これらを何の基準を持って重複していると考えるかは、実際にはプロジェクトそれぞれにはなりますが、ここではよくある基準として、次の３つを使ってみたいと思います。 厳密（＝絶対に重複してます）：email 完全一致 準一致（＝たぶん重複していると思います）：name_kana + dob（ふりがな＋生年月日） あいまい（＝重複している、、かな）：bigramSimilarity(name) ≥ 0. 90 AND 電話末尾4桁一致 「あいまい」な基準で使っている、90%というしきい値は、スペース・旧字体・軽微な誤変換を許容しつつ、同姓同名の別人を拾いにくいバランス値です。つまり人が目視した時と同じような、同じ名前ですよね、且つ 電話番号も同じですよね。という基準を表しています。 例）「あいまい」基準 比較類似度電話末尾判定山田太郎 vs 山田 太郎1. 001234/1234 重複候補田中一郎 vs 田中一朗0. 925678/5678 重複候補サトウハナコ vs 佐藤花子0. 881234/1234 類似度不足 コードの動作はシンプルです。ボタンを押せば、kintoneのJavaScript APIを経由して対象アプリのレコードを読み込みます。その後「重複しているかどうか」のチェックを行い、重複レコードを表示するという流れです。 揺れがあってもチェックできるコードサンプル ＊コード全体を含むプラグインは本記事末尾からダウンロードいただけます。 メインとなるのがこの関数です。３つのチェックを順番に実行してここの条件を変えれば、いろいろなプロジェクトに応用できますね。 function buildDuplicateGroups(records) { const groups = ; const byEmail = new Map; const byKanaDob = new Map; // 1) 厳密一致: email for (const r of records) { const email = String(r. email? . value || ''). trim. toLowerCase; if (! email) continue; if (! byEmail. has(email)) byEmail. set(email, ); byEmail. get(email). push(r); } for (const arr of byEmail. values) if (arr. length > 1) groups. push({ rule: 'email', members: arr }); // 2) 準一致: name_kana + dob for (const r of records) { const kana = normalizeKana(r. name_kana? . value || ''); const dob = String(r. dob? . value || ''); if (! kana || ! dob) continue; const key = `${kana}__${dob}`; if (! byKanaDob. has(key)) byKanaDob. set(key, ); byKanaDob. get(key). push(r); } for (const arr of byKanaDob. values) if (arr. length > 1) groups. push({ rule: 'kana+dob', members: arr }); // 3) あいまい: name 類似 >= 0. 90 && tel 下4桁一致 const seen = new Set; for (let i = 0; i < records. length; i++) { for (let j = i + 1; j < records. length; j++) { const a = records, b = records; const nameA = (a. name? . value || ''). trim; const nameB = (b. name? . value || ''). trim; if (! nameA || ! nameB) continue; const sim = bigramSimilarity(nameA, nameB); if (sim >= 0. 90) { const tA = normalizePhone(a. tel? . value || ''); const tB = normalizePhone(b. tel? . value || ''); const last4A = tA. slice(-4), last4B = tB. slice(-4); if (last4A && last4B && last4A === last4B) { const key = . sort. join('-'); if (! seen. has(key)) { groups. push({ rule: 'fuzzy(name)+tel4', members: , score: sim }); seen. add(key); } } } } } return groups; } 特に「ゆれ」に対応する部分は細かいコードが必要です。以下は３つ目のチェック基準になる、名前の表記揺れに対応したチェック用のコードサンプルです。本来はもっと詳細に書かないと全ての名前をカバーしたとは言えませんが、雰囲気はこういうコードになると思います。 function bigramSimilarity(a = '', b = '') { // 類似文字の正規化マップ（旧字体、異体字、よくある表記揺れ） const similarChars = { // 「郎」「朗」系 '朗': '郎', '廊': '郎', // 「沢」「澤」系 '澤': '沢', '泽': '沢', // 「斉」「斎」「齋」系 '斎': '斉', '齋': '斉', '齊': '斉', // 「辺」「邊」系 '邊': '辺', '邉': '辺', // 「高」「髙」系 '髙': '高', '﨑': '崎', // 数字 '１': '1', '２': '2', '３': '3', '４': '4', '５': '5', '６': '6', '７': '7', '８': '8', '９': '9', '０': '0', // その他よくある揺れ '衞': '衛', '國': '国', '實': '実', '淸': '清', '濵': '浜', '濱': '浜', '渕': '淵', '嶋': '島' }; // 前処理関数 const normalize = str => { // 1. 空白・スペースを完全除去 str = String(str). replace(//g, ''); // 2. カタカナをひらがなに統一 str = str. replace(//g, c => String. fromCharCode(c. charCodeAt(0) - 0x60)); // 3. 類似文字を正規化 str = str. split(''). map(c => similarChars || c). join(''); // 4. 小文字化（英数字） str = str. toLowerCase; return str; }; a = normalize(a); b = normalize(b); // 完全一致チェック if (a === b) return 1; // 長さチェック（正規化後に再度確認） if (a. length < 2 || b. length < 2) { // 1文字同士の比較は完全一致のみ return a === b ? 1 : 0; } const bigrams = str => new Map( Array. from({ length: str. length - 1 }, (_, i) => str. slice(i, i + 2)) . reduce((m, bg) => m. set(bg, (m. get(bg) || 0) + 1), new Map) ); const A = bigrams(a), B = bigrams(b); let overlap = 0; for (const of A) overlap += Math. min(cnt, B. get(bg) || 0); const sizeA = . reduce((s, v) => s + v, 0); const sizeB = . reduce((s, v) => s + v, 0); return (2 * overlap) / (sizeA + sizeB); } 実際に導入してみた 実際にこの「重複チェック」機能を導入した人材派遣会社の現場では、次のような成果が確認されました。 初月で重複率が約30％減少以前は同一人物の二重登録が頻発していたが、日次チェックで早期発見できるようになった。 担当者の心理的負担が軽減「重複を見逃していたらどうしよう」という不安がなくなり、チーム全体で“データを見る安心感”が生まれた。 名寄せ作業の効率化従来はExcelで手動照合していたが、ボタン一つで候補を絞り込めるため、名寄せ工数が1/3に削減された。 何より大きかったのは、「登録時に神経質にならなくても後で拾える」という心理的余裕が生まれたこと。これにより、現場の入力スピードと運用継続性が向上しました。 運用業務に取り込むためのポイント 運用を続ける中で、次の3つを意識すると運用に馴染みやすく、また継続しやすくなります。 ① 権限設計を明確にする重複チェックは、原則として「管理者ロール」または「品質管理担当者」が実行するようにしましょう。全員が押せる状態にすると、確認責任の所在が曖昧になります。 ② しきい値と条件は現場に合わせて調整する名前の類似度（0. 9）や電話番号条件は、データ傾向に応じて見直せます。例えば応募者の年齢層や媒体によって、フリガナ誤記の頻度も異なるため、一律ではなく現場データを見ながら最適値を探すのがポイントです。 ③ 定期実行を“業務ルーチン化”する「毎朝9時のチェック」や「週次レポート連携」など、運用スケジュールに組み込むことで文化として定着します。仕組みはシンプルでも、“使い方”の継続が品質を生みます。 ボタン1つで“現場が動くデータ品質管理” 実際に登録時にガードするより、運用で見つける文化の方が、「一旦全部受け付けてから」という流れになって、焦らずに仕事ができる、そういう心理的効果が大きいと思います。登録時に、となると、本当は登録を受け付けないといけない人の登録を断ってしまうのではないか、、、、という不安も生まれますよね。 毎朝のワンクリックで、前日の重複を洗い出すというワークフローです。実際に導入したプロジェクトでは最初の1週間で「意外と重複が多いな」と気づき、1ヶ月後には「もうボタンを押さないと落ち着かない」と言われるほど、“人が使いたくなるツール”になってくれました。 株式会社ファストコーディングではこういった現場視点のkintoneアプリ改善を多数手掛けております。kintoneで困ったことがあったら是非ご相談ください。 重複チェックプラグイン ダウンロード ご利用ルール 本プラグインは本記事に記載のコードを理解する目的で作成されたものです。本プラグインに係る著作権その他の知的財産権（以下、「著作権等」といいます。）は、当社または当該著作権等の権利を有する第三者に帰属します。本プラグインの利用によってお客様及び第三者に生じた損害においては、弊社は一切の責任を負わないものとします。 「ご利用ルール」を理解した上でダウンロードする --- - Published: 2025-10-29 - Modified: 2025-10-29 - URL: https://fastcoding.jp/blog/all/webdesign/css%e3%81%a0%e3%81%91%e3%81%a7%e4%bd%9c%e3%82%8b%e6%b2%a1%e5%85%a5%e5%9e%8b%e6%bc%94%e5%87%ba/ - カテゴリー: Webデザイン, HTML/CSS - タグ: CSS, アニメーション, 動画 動画を使わず、CSSだけで没入感ある表現を実現。パララックス、動くグラデーション、ブレンドモード＋フィルターによる立体演出の3手法をコード付きで紹介。動画背景より軽く、表示速度を最大70％改善した実例も掲載。 おはようございます！株式会社ファストコーディングの働くおかんです！ 最近、子どもたちと一緒にYouTubeを見ていて気づいたんですが、動画の読み込みが遅いと途端に興味を失うんですよね。ほんの２秒待つぐらいでも、もう諦めてフリックしている（ショート動画です）んです。子供は正直で、ある意味極端だと思いますが、私たち大人も同じで、Webサイトでカッコいいアニメーションがあっても、重くて表示が遅いとすぐにページを閉じてしまいます。 実際、クライアントから「インパクトのある演出が欲しい」と言われて、つい動画背景を提案したくなる気持ちはよくわかります。でも、動画ファイルは解像度を相当うまくしないと表示が重くなりがちですし、モバイル環境では自動再生の制限もあって思い通りに動かないこともあります。 そこで今回は、CSSだけで没入感を演出する方法をご紹介します。軽量でありながら、ユーザーを引き込む表現は十分に作れます。実際に案件で使った手法も含めて解説しますので、次の提案に活かしてもらえれば嬉しいです。 CSSで実現する没入型演出の3つの手法 ここからは、実際に案件で使ったCSSアニメーション手法を3つ紹介します。それぞれコード例も載せますので、参考にしてください。 1. パララックス効果で奥行きを演出 パララックスは、スクロールに応じて背景と前景が異なる速度で動く表現です。奥行き感が生まれるため、没入感を高められます。 実装にはtransform: translateZを使います。以下は基本的なコード例です。 Welcome . parallax-container { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 1px; } . parallax-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } . layer-back { transform: translateZ(-1px) scale(2); } . layer-back . content-back { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 100%; } . layer-base { transform: translateZ(0); } . content-front { display: flex; align-items: center; justify-content: center; height: 100vh; } . content-front h1 { font-size: 4rem; color: white; text-shadow: 2px 2px 8px rgba(0,0,0,0. 3); } CodePen Embed Fallback ＊ちょっとわかりにくいんですが、、、スクロールしてください このコードでは、perspectiveとtranslateZを組み合わせて、背景と前景の動く速度を変えています。スクロールするだけで立体感が生まれ、動画を使わなくても没入感を演出できます。 実際にはもう少し要素を追加しましたが、お客様の採用サイトのトップページに採用したところ、ページサイズは動画版と比べて約80%削減でき、表示速度も大幅に改善しました。 2. グラデーションアニメーションで動的な印象を 静的なグラデーションではなく、色が動くグラデーションアニメーションを使うと、動画のような動きを再現できます。 CSSで動く背景 軽量でスムーズな演出 . animated-gradient { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient( 45deg, #ff6b6b, #4ecdc4, #45b7d1, #f7b731, #ff6b6b ); background-size: 400% 400%; animation: gradientShift 15s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } . content { text-align: center; color: white; z-index: 1; } . content h2 { font-size: 3rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0. 5); } . content p { font-size: 1. 2rem; } CodePen Embed Fallback この手法のポイントは、background-sizeを大きく設定し、animationで位置を変えることです。グラデーションが滑らかに動くため、静止画では出せない躍動感が生まれます。 ある美容系サービスのLPで使ったところ、お客様から「動画みたいに見えるのに軽い」と好評でした。特にスマホでの表示が安定していたのも良かったんだと思います。スマホで動画を読み込むときは若干カクカクしますからね。 3. CSSフィルターとブレンドモードで奥行きを作る backdrop-filterやmix-blend-modeを使うと、重なり合う要素に透過効果や合成効果を加えられます。これにより、レイヤーが重なった奥行きのある表現が可能です。 奥行きのある演出 CSSフィルターで実現 . blend-container { position: relative; min-height: 100vh; background: #1a1a2e; display: flex; align-items: center; justify-content: center; overflow: hidden; } . background-shape { position: absolute; border-radius: 50%; filter: blur(60px); animation: float 20s ease-in-out infinite; } . shape-1 { width: 400px; height: 400px; background: #ff6b6b; top: -100px; left: -100px; mix-blend-mode: screen; animation-delay: 0s; } . shape-2 { width: 500px; height: 500px; background: #4ecdc4; bottom: -150px; right: -150px; mix-blend-mode: screen; animation-delay: 5s; } . shape-3 { width: 350px; height: 350px; background: #f7b731; top: 50%; left: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; animation-delay: 10s; } @keyframes float { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(50px, -50px); } 66% { transform: translate(-50px, 50px); } } . glass-panel { position: relative; padding: 3rem; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0. 1); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0. 2); color: white; text-align: center; z-index: 10; } . glass-panel h2 { font-size: 2. 5rem; margin-bottom: 1rem; } . glass-panel p { font-size: 1. 1rem; } CodePen Embed Fallback ＊背景がとってもゆっくり動いています。ゆっくりみてあげてください。 このコードでは、複数の図形をmix-blend-mode: screenで重ね、さらにアニメーションで動かしています。前面の要素にbackdrop-filterを適用することで、ガラスのような透過効果が加わり、立体感が増します。 実際にイベント告知ページのプロジェクトで使ってみました。背景が柔らかく動くため、静的なデザインと比べて目を引く効果がありました。動画なしでも「動き」を感じさせられるのが大きなメリットです。 動画もいいんですが、、、CSSでも結構できますよ あるECサイトのリニューアル案件で、動画背景からCSS演出に切り替えた経験があります。 当初、お客様は商品の世界観を伝えるために動画背景を希望していました。しかし、ページの読み込み速度が遅く、離脱率が高いという課題がありました。そこで、パララックスとグラデーションアニメーションを組み合わせた提案をしました。 結果として、ページサイズは約70%削減され、表示速度は2秒以上改善しました。クライアントからは「軽くなったのに、むしろ洗練された印象になった」と評価されました。 この案件で学んだのは、演出は「重さ」ではなく「設計」で決まるということです。CSSの特性を理解して組み合わせれば、動画に頼らなくても十分に没入感を演出できます。 ＊ただし。やっぱり動画に比べるとCSSを使いながら少しずつアニメーションを作っていくような形になりますので、Webデザイナーさんの協力はかなり大事、、、です。 まとめ 動画を使わなくても、CSSだけで没入感のある演出は十分に作れます。パララックス、グラデーションアニメーション、フィルター効果を組み合わせれば、軽量でありながらユーザーの目を引くデザインが実現できます。 次のプロジェクトで「リッチな演出がほしいけど、重くしたくない」と悩んだら、CSSでの実装を検討してみてください。コード量も少なく、保守性も高いため、長期的に運用しやすいのも魅力です。 もし実装に不安がある場合や、より高度な演出を検討したい場合は、株式会社ファストコーディングがCSS演出の設計から実装までサポートしています。軽量化とデザイン品質の両立を目指すなら、ぜひ一度相談してみてください。 --- - Published: 2025-10-23 - Modified: 2025-10-23 - URL: https://fastcoding.jp/blog/all/frontend/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e9%a7%86%e5%8b%95%e3%81%ae%e9%81%85%e5%bb%b6%e3%83%8f%e3%82%a4%e3%83%89%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3/ - カテゴリー: React, Vue.js - タグ: SSR, Vue.js, フロントエンド ページの初期表示を軽くする「遅延ハイドレーション」をVue.jsで実装する方法を解説。defineAsyncComponentやhydrateOnVisibleを使って必要なタイミングだけスクリプトを読み込み、表示速度を約30％改善した実例も紹介します。 皆様こんばんは。株式会社ファストコーディングのフルスタックエンジニア MrFireです。 つい最近、趣味のバイクツーリングのルートをインターネットで探していた時のことです。ページを開くと重くて、職業柄ネットワークタブを見てしまったりするんですが、やたらとたくさんのスクリプトが最初に読み込まれることに気づきました。その影響で、ルート情報を探すのに時間がかかってしまい、不便さを感じました。同じような経験をしたことがある方も多いのではないでしょうか。そんな問題を解決する方法の一つが「遅延ハイドレーション」です。今回はこの技術についてVue. jsのサンプルを用いて説明していきます。 ＊ブログの書き出しを書くのって本当に難しいなって思います。でも嘘は書いてないですよ。。。本当に重たいページでした。 遅延ハイドレーションとは？ 遅延ハイドレーションは、シンプルに言えば、JavaScriptファイル（やその中に定義されているオブジェクト）をの読み込みをPromiseを使って遅延して読み込ませることを意味します。今回サンプルでご紹介するVue. jsにおいては遅延ハイドレーションの記述方式もあり、コンポーネントを指定のタイミングで読み込ませることが簡単に出来ます。 https://ja. vuejs. org/guide/components/async#lazy-hydration 遅延ハイドレーションでは、初期表示時に本当に必要なものだけを読み込むことを目指します。よって遅延して読まれる要素は、何かしらのユーザーからのアクション、例えばページの表示領域に入った、マウス操作が生まれた等に初めて関連スクリプトを読み込みます。これにより、初回の操作で少しの遅延が発生するかもしれませんが、その後の操作はより快適になります。 初期状態はシンプルに 開始時点では、すべてのインタラクション要素を通常のリンクやシンプルなHTML要素として用意します。ユーザーが実際に利用するまで、余分なリソースを使わないようにします。この方法は、特にモーダルや検索ボックスなど、最初は表示されていない要素に適しています。 モジュールを動的に読み込む 今回のサンプルでは、ユーザー地図上のポインタをクリックすると、dynamic importを使ってスクリプトを読み込んでいます。実際にはVueのdefineAsyncComponentを使います。どのタイミングで、を処理するコンポーネントもいろいろあるのですが、サンプルではhydrateOnVisibleを使って表示されたときに、遅延ハイドレーションをしています。 // 詳細パネルを遅延ハイドレーション const AsyncPlaceDetail = defineAsyncComponent({ loader: => import('. /components/PlaceDetail. vue'), hydrate: hydrateOnVisible({ rootMargin: '50px' }) }) ちなみにタイミングを制御するコンポーネントは以下のようにいくつかあります。また自作することも可能です。 hydrateOnMediaQuery：メディアクエリーでハイドレート。指定されたメディアクエリーに一致したときにハイドレートします。 hydrateOnInteraction：インタラクションでハイドレート。イベントを指定してそのイベントが発生したら、というタイミングで動作します。 hydrateOnIdle：アイドル状態になったらハイドレード。タイムアウトの上限を指定することも可能です。 こちらがサンプルコードになります。サンプルコードではマップの詳細パネルのコンポーネント（ページの下の方に表示されます）は、ピンを押さないと読み込まないようにしています。なお、Vue. jsではSSRでなければ利用できませんのでご留意ください。 あと、今回初めて、StackBlitzを使ってみました。これとっても便利ですね。 現場での実践例 私たちの開発現場でも「もっとページの表示を速くしてほしい」というリクエストがあるときに、最初に考える技の一つが遅延処理だったりします。具体的な例として、ECサイトでよくみられる、商品カテゴリーの多層アコーディオンメニューに遅延ハイドレーションを使ったところ、初回表示の速度が約30%改善されました。ページスピードスコアの向上にもなるので、一石二鳥です。 おわりに 遅延ハイドレーションは、ユーザー体験を改善するための非常に効果的な方法です。実装の段階でアイデアとして考えておけば、組み込みはさほど難しくはありません。ただし、あまりに多くのコンポーネントやスクリプトを事前に読み込むと、読み込み時に画面がスタックしてしまうような逆効果になることもあるので注意が必要です。 株式会社ファストコーディングでは、こういったフロントエンド実装のコツをいろいろ経験していますので、お困りごとがあればぜひこちらのフォームからお問い合わせください。 --- - Published: 2025-10-22 - Modified: 2025-10-22 - URL: https://fastcoding.jp/blog/all/ui-ux/%e3%80%8c%e6%88%bb%e3%81%a3%e3%81%a6%e3%81%8d%e3%81%9f%e4%ba%ba%e3%81%ab%e3%81%a0%e3%81%91%e6%8f%ba%e3%82%89%e3%81%99%e3%80%8d%e2%94%80-%e3%83%aa%e3%82%bf%e3%83%bc%e3%83%b3%e3%83%a6%e3%83%bc%e3%82%b6/ - カテゴリー: UI/UX - タグ: CSSアニメーション, CTA, Webデザイン リターンユーザーだけに表示する「軽いCTAアニメーション」でコンバージョン率15％アップ！sessionStorageを活用し、パフォーマンスを損なわず自然に注意を引く実装法を、HTML/CSS/JavaScriptのコード付きで解説します。 こんにちは、BigViです。Webディレクター兼フロントエンドエンジニアとして東京で働いています。今回のテーマは、リターンユーザーだけにアニメーションを表示することです。 一度来た人がもう一度来た時は、1回目よりもサービスに興味があると思います。だからそういうときには、いつもとは違うアニメーションを見せてコンバージョンしてもらいやすくしたいです。 ユーザーに心を掴むCTAアニメーション ここでのポイントは、リターンユーザーだけに動くアニメーションを導入することです。sessionStorageを使って、2回目かどうかをチェックします。シンプルな演出ですけど、ユーザーの注意を引きつけて、お問い合わせフォームに移動しやすくします。 実装の例: HTML/CSSと簡単なJavaScript 以下に実装例をご紹介します。CSSではトランジションを、JavaScriptではsessionStorageを活用します。 無料相談を予約する 今すぐ予約 . cta-section { text-align: center; padding: 60px 20px; background: #f9fafc; } . cta-button { display: inline-block; padding: 18px 48px; font-size: 1. 3rem; color: #fff; background-color: #0078d7; border-radius: 60px; text-decoration: none; font-weight: 600; box-shadow: 0 6px 14px rgba(0, 120, 215, 0. 25); transition: transform 0. 25s ease, box-shadow 0. 25s ease; } . cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 120, 215, 0. 35); } . cta-button. return-animate { animation: pulseBounce 1. 8s cubic-bezier(0. 22, 1, 0. 36, 1) 2; } @keyframes pulseBounce { 0%, 100% { transform: scale(1); } 25% { transform: scale(1. 1); } 50% { transform: scale(0. 97); } 75% { transform: scale(1. 05); } } // 「戻ってきた人」だけにCTAを揺らす ( => { const STORAGE_KEY = 'visitedAt'; const cta = document. getElementById('ctaButton'); if (! cta) return; const now = Date. now; const last = localStorage. getItem(STORAGE_KEY); // 初回訪問なら記録だけして終了 if (! last) { localStorage. setItem(STORAGE_KEY, now); return; } // 前回訪問から7日以内を“リターンユーザー”とみなす const ONE_WEEK = 7 * 24 * 60 * 60 * 1000; if (now - last < ONE_WEEK) { // 少し間をおいてから自然にアニメーション開始 setTimeout( => { cta. classList. add('return-animate'); }, 1000); } // 今回の訪問時間を更新 localStorage. setItem(STORAGE_KEY, now); }); CodePen Embed Fallback ＊初めてこのページを見ている人は、ページをリロードしてください。ボタンが動きます 実際の利用例 実際のプロジェクトに導入したとき、フォームページのPVが向上しました。A/Bテストを行った結果、アニメーションが表示された場合、開始率が15%ぐらいあがりました。観測期間は2週間、テストに参加した数は約1000セッションでした。ページスピードのINP（インプットディレイ）やLCP（ラージストコンテンツフルペイント）に影響することもありませんでした。 簡単な工夫でもコンバージョンはあがります とても簡単で短いコードだけど、ちゃんと効果が出ました。次のプロジェクトでぜひお試しください。また、ウェブサイトをいろいろ良くしたいと思うお客様は、ぜひ一度こちらからお問い合わせください。 --- - Published: 2025-10-21 - Modified: 2025-10-21 - URL: https://fastcoding.jp/blog/all/kintone/%e8%a3%bd%e9%80%a0%e6%a5%ad%e3%81%a7%e8%a8%ad%e5%82%99%e7%ae%a1%e7%90%86%e3%82%92%e5%8a%b9%e7%8e%87%e5%8c%96kintone%e3%81%a8qr%e3%82%b3%e3%83%bc%e3%83%89%e3%81%a7%e7%8f%be%e5%a0%b4%e7%82%b9%e6%a4%9c/ - カテゴリー: kintone - タグ: kintone, QRコード, 現場点検, 製造業 現場点検を“迷わず・速く”するkintoneカスタマイズ。レコード別／カテゴリ別でQRコードを自動生成し、一覧ビューのヘッダーメニューにQR表示＆印刷ボタンを追加。QRCode.jsを使った実装コード、運用ステップ、導入効果（点検時間の短縮・記録漏れの減少）まで実例ベースで解説します。 こんにちは。kintoneアプリエンジニアのtomiokaです。以前からブログ書いてよって言われ続けていたんですが、ネタ集めに時間がかかり、、、、今回デビュー作となります！少しだけ自己紹介ですが、元々はフロントエンドエンジニアとしてTypeScriptをガリガリ書いていたのですが、kintoneのカスタマイズの楽しさにハマって、いまはkintoneアプリの構築やプラグイン開発をメインにしています。平日はアプリ開発やプラグインづくりに勤しみ、休日は昼からビールを飲むのが最高のリフレッシュ。美味しい料理とお酒があれば、だいたいご機嫌というシンプルな人間です。 そんな私がブログデビューの今回、ご紹介するのは、「QRコードで現場点検をスマート化するkintoneカスタマイズ」。実際にお客様より依頼いただいた内容でして、ちょっとした仕組みですが、現場の動きを大きく変えられます。 はじめに ― 現場の“探す時間”を減らすだけで変わる 製造業の現場では、点検結果を紙やExcelに書き留め、後からパソコンに入力する――そんな手順がまだまだ当たり前。でも、記録を取るたびに「どの設備のレコードだったっけ？」と機器管理台帳を検索する時間、もったいないですよね。 「QRを貼っておいて、スマホで読み取るだけで開けたらいいのに」という現場の声を形にしたのが、今回ご紹介するQRコードのカスタマイズです。標準のkintoneでは機器毎に詳細ページのURLが作られますので、これをQRコードにしてしまいます。 1. QRコードで点検が変わる理由 QRコードのいいところは、とにかく“迷わない”こと。URLや検索条件をいちいち入力する必要もなく、スマホでかざせば一発で目的のレコードにアクセスできます。 たとえば、設備の側面や管理ラベルにQRを貼っておけば、担当者は現場で立ったまま入力。作業スピードがぐっと上がります。しかも紙の点検表も不要。スマホ1台で完結します。 2. 方式A ― 機器別にQRを印刷して貼る 最も簡単なのがこの方式。kintoneの各レコード（＝設備）ごとにQRコードを生成し、設備に貼ってしまうやり方です。 方式Aの実装用コード kintoneアプリにJavaScriptとして読み込ませてください。 /* * レコード詳細画面のヘッダーメニューに * QR表示ボタンを追加し、モーダルでQRコードを表示するカスタマイズ。 * * QRCode. js をCDNから動的ロードします。 * https://cdnjs. cloudflare. com/ajax/libs/qrcodejs/1. 0. 0/qrcode. min. js */ (function { 'use strict'; // QRCodeライブラリを動的ロード（重複ロード防止） function loadQRCodeLib { return new Promise((resolve, reject) => { if (window. QRCode) return resolve; const s = document. createElement('script'); s. src = 'https://cdnjs. cloudflare. com/ajax/libs/qrcodejs/1. 0. 0/qrcode. min. js'; s. onload = => resolve; s. onerror = => reject(new Error('QRCode. jsの読み込みに失敗しました')); document. head. appendChild(s); }); } // CSSを注入（1度だけ） function injectModalCSS { if (document. getElementById('qr-modal-style')) return; const style = document. createElement('style'); style. id = 'qr-modal-style'; style. textContent = `/* QR表示ボタンのスタイル */ . qr-show-btn { appearance: none; border: 1px solid #0066cc; border-radius: 6px; padding: 6px 12px; background: #0066cc; color: white; cursor: pointer; font-size: 12px; font-weight: bold; } . qr-show-btn:hover { background: #0052a3; } /* モーダル風ポップアップのスタイル */ . qr-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0. 5); z-index: 10000; display: none; align-items: center; justify-content: center; } . qr-modal-content { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0. 3); max-width: 400px; width: 90%; text-align: center; } . qr-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } . qr-modal-title { font-size: 16px; font-weight: bold; margin: 0; } . qr-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #666; padding: 0; width: 24px; height: 24px; } . qr-modal-close:hover { color: #333; } . qr-modal-body { margin-bottom: 15px; } . qr-modal-footer { display: flex; gap: 10px; justify-content: center; } #qr-canvas { width:200px; margin:0 auto; } . qr-meta { font-size: 12px; color: #555; } . qr-print-btn { appearance: none; border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; background: #f7f7f7; cursor: pointer; } . qr-print-btn:hover { background: #efefef; }`; document. head. appendChild(style); } // モーダル表示・非表示の制御 function showQRModal(url, recordId) { // 既存のモーダルを削除 const existingModal = document. getElementById('qr-modal'); if (existingModal) existingModal. remove; // モーダル生成 const modal = document. createElement('div'); modal. id = 'qr-modal'; modal. className = 'qr-modal'; modal. style. display = 'flex'; modal. innerHTML = `QRコード × レコードID: ${recordId} このレコードを開く このQRだけ印刷`; document. body. appendChild(modal); // QR生成 const qrTarget = modal. querySelector('#qr-canvas'); new QRCode(qrTarget, { text: url, width: 200, height: 200 }); // イベントリスナー modal. querySelector('#qr-modal-close'). addEventListener('click', => { modal. remove; }); modal. querySelector('#qr-modal-print-btn'). addEventListener('click', => { // 印刷前にモーダルを確実に表示状態にする modal. style. display = 'flex'; modal. style. visibility = 'visible'; // 少し遅延してから印刷を実行（レンダリング完了を待つ） setTimeout( => { window. print; }, 100); }); // モーダル外クリックで閉じる modal. addEventListener('click', (e) => { if (e. target === modal) { modal. remove; } }); } // レコード詳細表示時にQR表示ボタンを描画 kintone. events. on('app. record. detail. show', async (event) => { try { await loadQRCodeLib; injectModalCSS; const menu = kintone. app. record. getHeaderMenuSpaceElement; if (! menu) return event; // 既存をクリア（再描画対策） let host = menu. querySelector('#qr-show-btn-host'); if (host) host. remove; const recordId = kintone. app. record. getId; const appId = kintone. app. getId; const url = `${location. origin}/k/${appId}/show#record=${recordId}`; // QR表示ボタンのコンテナ生成 host = document. createElement('div'); host. id = 'qr-show-btn-host'; host. style. marginLeft = '12px'; host. innerHTML = `QR表示`; menu. appendChild(host); // QR表示ボタンのイベントリスナー host. querySelector('#qr-show-btn'). addEventListener('click', => { showQRModal(url, recordId); }); return event; } catch (e) { console. error('QRコード生成エラー:', e); return event; } }); }); このコードを登録すると、レコード詳細画面にQRコード表示ボタンが表示され、ボタンをクリックすると自動的にQRが表示されます。印刷して設備に貼っておけば、スマホでスキャンするだけでその設備のレコードを即表示。現場の担当者は「探す」手間がゼロになります。 ただし、設備台数が数百台を超えるような大規模な工場では印刷が手間です。その場合は、次の方式B（カテゴリ別QR）がオススメです。 3. 方式B ― カテゴリや部署ごとにQRを発行 もっと柔軟に、かつ印刷枚数を減らしたいなら、カテゴリ／部署ごとに1枚のQRを用意します。この方式では、kintoneの一覧画面（検索結果）のヘッダーメニュー領域に、「現在表示中のビューにアクセスできるQR」と「そのQRだけ印刷するボタン」を自動生成します。 これにより、保存済みビューを開くだけでQRが表示され、印刷して掲示することができます。 方式Bの実装用コード kintoneアプリにJavaScriptとして読み込ませてください。 /* * 一覧ビュー右上（ヘッダーメニュー）に * - 現在表示中ビューへのQRコード * - そのQRだけ印刷するボタン * を追加するカスタマイズ。 * * QRCode. js をCDNから動的ロードします。 * https://cdnjs. cloudflare. com/ajax/libs/qrcodejs/1. 0. 0/qrcode. min. js */ (function { 'use strict'; // 1) QRCodeライブラリを動的ロード（重複ロード防止） function loadQRCodeLib { return new Promise((resolve, reject) => { if (window. QRCode) return resolve; const s = document. createElement('script'); s. src = 'https://cdnjs. cloudflare. com/ajax/libs/qrcodejs/1. 0. 0/qrcode. min. js'; s. onload = => resolve; s. onerror = => reject(new Error('QRCode. jsの読み込みに失敗しました')); document. head. appendChild(s); }); } // 2) 印刷時にQR枠だけ出すCSSを注入（1度だけ） function injectPrintOnlyCSS { if (document. getElementById('qr-print-style')) return; const style = document. createElement('style'); style. id = 'qr-print-style'; style. textContent = `. qr-box { display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #e2e2e2; border-radius: 8px; background: #fff; } . qr-meta { font-size: 12px; color: #555; } . qr-print-btn { appearance: none; border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; background: #f7f7f7; cursor: pointer; } . qr-print-btn:hover { background: #efefef; } /* QR表示ボタンのスタイル */ . qr-show-btn { appearance: none; border: 1px solid #0066cc; border-radius: 6px; padding: 6px 12px; background: #0066cc; color: white; cursor: pointer; font-size: 12px; font-weight: bold; } . qr-show-btn:hover { background: #0052a3; } /* モーダル風ポップアップのスタイル */ . qr-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0. 5); z-index: 10000; display: none; align-items: center; justify-content: center; } . qr-modal-content { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0. 3); max-width: 400px; width: 90%; text-align: center; } . qr-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } . qr-modal-title { font-size: 16px; font-weight: bold; margin: 0; } . qr-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #666; padding: 0; width: 24px; height: 24px; } . qr-modal-close:hover { color: #333; } . qr-modal-body { margin-bottom: 15px; } . qr-modal-footer { display: flex; gap: 10px; justify-content: center; } #qr-canvas { width:200px; margin:0 auto; }`; document. head. appendChild(style); } // 3) モーダル表示・非表示の制御 function showQRModal(url, viewId) { // 既存のモーダルを削除 const existingModal = document. getElementById('qr-modal'); if (existingModal) existingModal. remove; // モーダル生成 const modal = document. createElement('div'); modal. id = 'qr-modal'; modal. className = 'qr-modal'; modal. style. display = 'flex'; modal. innerHTML = `QRコード × { modal. remove; }); modal. querySelector('#qr-modal-print-btn'). addEventListener('click', => { // 印刷前にモーダルを確実に表示状態にする modal. style. display = 'flex'; modal. style. visibility = 'visible'; // 少し遅延してから印刷を実行（レンダリング完了を待つ） setTimeout( => { window. print; }, 100); }); // モーダル外クリックで閉じる modal. addEventListener('click', (e) => { if (e. target === modal) { modal. remove; } }); } // 4) 一覧表示時にQR表示ボタンを描画 kintone. events. on('app. record. index. show', async (event) => { try { await loadQRCodeLib; injectPrintOnlyCSS; const menu = kintone. app. getHeaderMenuSpaceElement; if (! menu) return event; // 既存をクリア（再描画対策） let host = menu. querySelector('#qr-show-btn-host'); if (host) host. remove; // 現在表示中ビューのURLを生成（= 検索結果にダイレクト） const appId = kintone. app. getId; const viewId = event. viewId; // ← 今の一覧ビューID const url = location. origin +`/k/${appId}/? view=${viewId}`; // QR表示ボタンのコンテナ生成 host = document. createElement('div'); host. id = 'qr-show-btn-host'; host. style. marginLeft = '12px'; host. innerHTML = ` QR表示 `; menu. appendChild(host); // QR表示ボタンのイベントリスナー host. querySelector('#qr-show-btn'). addEventListener('click', => { showQRModal(url, viewId); }); return event; } catch (e) { console. error(e); return event; } }); }); 運用の流れ 方式Bでは以下の流れでQRコードを管理を利用することができます。 各部署・カテゴリごとに保存済みビューを作成。例：「ラインA一覧」「検査部門一覧」など。 閲覧対象のビューを開くと、自動的にそのビュー専用QR＋印刷ボタンが右上に表示。 「このQRだけ印刷」をクリックすれば、QRのみをきれいに印刷可能。 現場に掲示しておけば、QRスキャン → その部署一覧が即開く → 設備をタップして点検。 ポイント：ビューのURLは固定なので、カテゴリが増減してもQRを貼り替える必要がありません。 5. 現場での導入ステップ どちらの方式でも、運用の流れはシンプルです。 機器別QRの例 各レコードにQRが自動生成される 管理者が印刷して設備に貼る 現場でスマホをかざしてレコードを即表示 その場で点検結果を入力して保存 「設備1台＝QR1枚」のため、対象が少ない現場では非常にわかりやすく運用できます。 カテゴリ別QRの例 部署やカテゴリ単位でQRを1枚作成 現場の掲示板などに貼る 担当者がスキャン → 一覧を開いて目的の設備を選択 点検結果をその場で入力 こちらは多人数・多設備の現場に最適です。たとえば「検査ラインA」「生産2課」といったチーム単位でQRを分けておくと、担当者は迷うことなく自分の範囲のデータにアクセスできます。 6. 導入後のリアルな効果 こういったQRコードによる機器台帳管理の仕組みを導入した工場では、機器の確認に「点検1件あたり30秒～1分短縮」という結果が出ました。数字だけ見ると小さく見えますが、1日100件の点検を行う現場なら、毎月50分以上の削減効果になります。 それだけでなく、「記録漏れが減った」「現場メンバーが自発的に入力してくれるようになった」 という声も多くいただきました。現場で使う仕組みこそ、“操作がシンプルで迷わないこと”が最重要ですね。 おわりに ― 現場も開発者も“気持ちよく” 私はいつも、「現場の人が使って気持ちいいkintoneアプリ」を作ることを大事にしています。QRコード連携はその中でも、一番シンプルで一番効果が出やすい工夫です。 弊社では、こういったちょっとしたkintoneの活用方法をご提案、実装するサービスをご提供しております。ご相談はもちろん無料ですので、kintoneをすでに導入していてお困りごとがあれば、ぜひご連絡ください。 --- - Published: 2025-10-16 - Modified: 2025-10-16 - URL: https://fastcoding.jp/blog/all/ui-ux/%e6%bb%9e%e5%9c%a8%e6%99%82%e9%96%93%e3%81%8c10%e7%a7%92%e4%bc%b8%e3%81%b3%e3%82%8b%e6%99%82%e9%96%93%e5%b7%ae%e3%83%90%e3%83%8a%e3%83%bc%e3%81%ae%e7%b0%a1%e5%8d%98%e5%ae%9f%e8%a3%85/ - カテゴリー: UI/UX - タグ: フロントエンド 出すより“出さない”設計が鍵。時間差ポップアップでUXを壊さずコンバージョンを高める実装法を紹介！ 株式会社ファストコーディングのWebディレクタの働くおかんです。今回は前回から少し内容を変えて、ページの中でポップアップのバナー広告を”自然と出す”方法をご紹介します。 時間差で表示するメリット バナー広告やポップアップは、ユーザーの視線を引きつける良い方法ですが、タイミングを間違えると逆効果です。無作為に表示されるとうるさいだけで、かえってそれが印象を悪くして離脱につながることもあります。 そこで「時間差ポップアップ」の登場です！実際これを取り入れたことで、ユーザーの滞在時間が平均10秒以上も延びたケースがあります。Webディレクターやプロジェクトマネージャーの皆さん、ユーザー体験を向上させるための一つの施策として、時間差バナーの導入を考えてみてください。 利用する際のコツ この問題を解決するために重要なのは、ユーザーの興味が高まったタイミングでコンテンツを提示することです。時間差ポップアップは、ちょうど良いタイミングで現れることで、コンバージョンに自然につながります。あとは「邪魔になった時に消せる」ことも大事です。具体的な実装例を掲載してご案内します。 基本構造とアニメーションの実装 まず、バナーを時間差で表示するための基本構造を確認します。これは数行のCSSとJavaScriptで実現できます。 今なら10%OFFキャンペーン実施中！ × . time-banner { position: fixed; bottom: 20px; right: 20px; background: #0078d7; color: #fff; padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0. 2); opacity: 0; transform: translateY(30px); transition: opacity 0. 6s ease, transform 0. 6s ease; } . time-banner. visible { opacity: 1; transform: translateY(0); } . close-btn { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; margin-left: 12px; } // ページ読み込み後、5秒経ったら表示 setTimeout( => { document. getElementById('timeBanner'). classList. add('visible'); }, 5000); CodePen Embed Fallback 上記では、ページ読み込みから5秒後にバナーが滑らかにフェードインします。ユーザーが本文を読み始めた頃に現れる自然なタイミングです。このような「少し遅らせてから表示」は、広告臭を感じさせず、離脱率を下げる効果があります。 実務での工夫：「閉じたら次回は出さない」 実際の案件では、単にバナーを出すだけでなく、「ユーザーが不要と判断したら次回は出さない」こともとても大事です。また、一度閉じたにもかかわらず、ページを変えるたびに再表示されるとユーザーは不快感を覚えます。UXを壊さずに再訪問時の体験を最適化するには、閉じた情報をlocalStorageに保持するのが一番簡単かなと思います。Cookieほど永続的でなくてもいいけど、ページを見てもらっている間、数日間ぐらいは保持したい、というレベルにはぴったりです。 const banner = document. getElementById('timeBanner'); const closeBtn = document. getElementById('closeBanner'); // すでに閉じた履歴がない場合のみ表示 if (! localStorage. getItem('bannerClosed')) { setTimeout( => banner. classList. add('visible'), 5000); } // バツボタンで閉じる動作 closeBtn. addEventListener('click', => { banner. classList. remove('visible'); localStorage. setItem('bannerClosed', 'true'); }); CodePen Embed Fallback この実装では、ユーザーが一度バナーを閉じると、その情報がlocalStorageに保存されます。以降のページでは再表示されず、ユーザーは快適な閲覧体験を維持できます。 特にリピーターが多いサイトでは、「出しすぎないこと」もデザインの一部です。常に出し続けることは一時的なクリックを増やしても、長期的には信頼を損ねます。 UXを高めるための「再表示のルール」 場合によっては、「閉じたら完全に出さない」のではなく、一定期間後に再表示する設計も有効です。キャンペーンやお知らせが頻繁に更新される場合、翌日や数日後に再度見せたいこともあります。その場合、保存時にタイムスタンプを記録しておき、一定期間が過ぎたら再表示するようにします。 const now = Date. now; const lastClosed = localStorage. getItem('bannerClosedAt'); const oneDay = 24 * 60 * 60 * 1000; // 1日 if (! lastClosed || now - lastClosed > oneDay) { setTimeout( => banner. classList. add('visible'), 5000); } closeBtn. addEventListener('click', => { banner. classList. remove('visible'); localStorage. setItem('bannerClosedAt', Date. now); }); CodePen Embed Fallback この方法なら、「昨日閉じた人には今日は出さないが、翌日以降には再度表示」という自然な再通知が可能です。localStorageはブラウザに依存しますが、Cookieよりも柔軟で、データの有効期限を自由に設定できます。UIとしての「控えめなリマインダー」を作るには最適な方法です。 まとめ 時間差で表示されるバナーは、広告っぽくないバナー広告を出す方法としてはおすすめだと思います。そして、UXを本当に良くするのは「出すタイミング」よりも「出さない判断」です。一度閉じたユーザーに同じものを繰り返し見せない、一定期間後にだけ再表示する――そんな“引き際の設計”もとても大事です。 実装そのものはシンプルでも、制御の仕組みを工夫することで、滞在時間を自然に伸ばし、ユーザーがまた戻ってきたくなる体験を提供できます。 株式会社ファストコーディングでは、こうしたUIとUXの両立を意識したWebサイト設計を行っています。お気軽にご相談ください。 --- - Published: 2025-10-15 - Modified: 2025-10-15 - URL: https://fastcoding.jp/blog/all/system/%e9%81%8e%e5%89%b0%e3%81%aa%e7%8a%b6%e6%85%8b%e7%ae%a1%e7%90%86%e3%82%92%e3%82%84%e3%82%81%e3%82%8burl%e3%82%b5%e3%83%bc%e3%83%90%e4%b8%bb%e5%b0%8e%e3%81%ae%e6%9c%80%e5%b0%8f%e3%82%b9%e3%83%86/ - カテゴリー: システム開発 - タグ: React, Vue.js, フロントエンド ReactやVueでありがちな「過剰な状態管理」を脱却！URL・UI・サーバーの責務を整理し、状態を最小限に保つ設計手法をBad／Goodパターンで解説。実案件から導いた“サーバ主導の軽量アーキテクチャ”の考え方を紹介します。 フルスタックエンジニアのMrFireです。今回は状態管理に注目してみたいと思います。 フロントエンド開発のプロジェクトでは、「状態管理」の仕組みが必ず何かしら取り入れられているものです。画面上のいろんなコンポーネントの状態もあれば、コード上の変数、対APIからの通信状態などなど、いろいろな「状態」を、これまた色々な方法で「管理」されています。特にReactやVueを使っているのであれば、有名なライブラリを使った柔軟な状態管理ができるのですが、一方で「本来（ブラウザ側で）管理する必要のない情報までクライアント側に抱え込んでいる」ケースが非常に増えました。結果として、ロジックは肥大化し、状態の整合性が崩れ、バグ修正に追われる日々が続く――そんな経験をした開発者は少なくないはずです。 この記事では、私たちが実際の案件で何度も直面した課題を整理しながら、状態をURLとサーバへ戻すことで得られる「設計の軽さ」を紹介します。3つの具体的なパターンをもとに、Bad／Goodパターンの形でご紹介したいと思います。 ① クライアント（フロントエンド側）が抱えすぎる状態管理 ReactのSPA開発では、useState や useReducer を気軽に使えるため、UIの状態をすべてクライアント側で持ってしまうことがよくあります。最初は小規模で問題ないように見えても、機能追加が進むと 「状態の依存関係が爆発」 し、どこで何が変更されたのか分からなくなります。 その結果、リロード時に状態が消えたり、URLを共有しても同じ画面が再現できなかったりといったユーザー体験上の問題に繋がります。 Bad Case：すべての状態をuseStateで保持 function ProductList { const = useState('all'); const = useState('price'); const = useState(1); const = useState; useEffect( => { fetch(`/api/products? filter=${filter}&sort=${sort}&page=${page}`) . then(res => res. json) . then(setProducts); }, ); return (... ); } この構成では、コンポーネントの内部にすべての状態を抱えています。ページをリロードすれば選択情報が消え、URLを共有しても相手には反映されません。ユーザーにとって「戻る」「再読み込み」がストレスになる典型的な設計です。 Good Case：URLパラメータを“単一の真実”に import { useSearchParams } from "next/navigation"; function ProductList { const search = useSearchParams; const filter = search. get('filter') ? ? 'all'; const sort = search. get('sort') ? ? 'price'; const page = search. get('page') ? ? '1'; const { data: products } = useSWR(`/api/products? ${search. toString}`); return (... ); } URLを唯一の「状態のソース」として扱えば、アプリの整合性は劇的に高まります。リロードや共有にも強く、URLの変更だけでアプリ状態を再構築できるため、状態の再現性が保証されます。Next. jsやRemixのようなフレームワークではこの設計を前提としており、UIロジックを非常にシンプルに保てます。 ② UIでしか使わないデータをグローバル化してしまう もう一つのよくある問題は、UI限定の一時的な状態をグローバルストアに入れてしまうことです。モーダルの開閉やタブ選択など、ページ単位で完結する情報をアプリ全体で共有してしまうと、責務の境界が曖昧になります。結果、複数ページやモジュールで思わぬ干渉が起こり、バグ修正が難しくなります。 Bad Case：UI状態をグローバルストアに保存 const useStore = create((set) => ({ isModalOpen: false, setModalOpen: (v) => set({ isModalOpen: v }) })); function Page { const { isModalOpen, setModalOpen } = useStore; return ( setModalOpen(true)}>Open {isModalOpen && setModalOpen(false)} />} ); } グローバルストアでUI状態を管理してしまうと、一見どこからでも操作できて便利ですが、実際には状態のスコープが無限に広がり、依存の連鎖が起こります。特に複数のモーダルを扱う場合、意図せず他の画面が影響を受けることがあります。 Good Case：UI内で完結させる function Modal({ onClose }) { useEffect( => { const onKeyDown = (e) => e. key === "Escape" && onClose; window. addEventListener("keydown", onKeyDown); return => window. removeEventListener("keydown", onKeyDown); }, ); return ( モーダル内容 閉じる ); } UIの中で状態を閉じることで、コンポーネント単位で独立したライフサイクルを持てます。スコープ外への影響を防ぎ、状態の破棄も自然に行われます。「UIの責務はUIで完結させる」という原則を守るだけで、アプリ全体の安定性が大きく向上します。 ③ サーバーで計算すべきロジックをクライアントで処理している 最近のフロントエンドは、高速な通信やキャッシュ技術の進化により、サーバー主導の設計に回帰しつつあります（と感じるプロジェクトが増えてます）。それでも、依然として「何でもクライアントで処理する方が速い」という誤解が残っています。特に集計処理やフィルタリングなど、本来はサーバーでやるべき部分をフロントで行うと、データ量の増加とともにパフォーマンスが悪化します。 Bad Case：クライアントがすべて再計算 const = useState; const total = items. reduce((sum, item) => sum + item. price, 0); APIから取得した全データを都度計算しているパターンです。最初は軽くても、データが数千件に増えるとフレーム落ちやスクロールのカクつきが発生します。ユーザー体験の品質を損なう原因です。 Good Case：サーバーサイドで集計し、結果のみ返す export async function getTotal { const result = await db. query("SELECT SUM(price) as total FROM items"); return result. total; } サーバーが集計を行い、UIは結果を受け取って描画するだけに専念します。この「役割の分離」こそがパフォーマンスと保守性の両立の鍵です。Next. jsのServer ComponentsやLaravel Livewireなどは、この構造をフレームワークレベルでサポートしています。 まとめ 状態管理は「持つ」ことより「手放す」ことが難しい分野です。状態を減らすというのは削除ではなく、「どこに置くのが正しいか」を見極めることです。 URLは、状態の再現性を保証する場所。 UIは、見た目と体験を担う場所。 サーバーは、整合性と真実を保証する場所。 この三層が正しく連携すれば、アプリはシンプルで壊れにくくなります。「過剰な状態管理」をやめることは、チームのメンテナンス効率を上げ、ユーザー体験をより安定させる第一歩です。 株式会社ファストコーディングでは、このような“サーバ主導の最小ステート設計”をベースに、長期的に運用できるWebアプリケーション開発を支援しています。ご興味がある方はぜひいつでもご相談ください。 --- - Published: 2025-10-10 - Modified: 2025-10-10 - URL: https://fastcoding.jp/blog/all/webdesign/cta%e3%81%af%e8%aa%ad%e3%81%bf%e7%b5%82%e3%82%8f%e3%82%8a%e3%81%a7%e5%85%89%e3%82%8b-%e2%94%80-%e8%a8%98%e4%ba%8b%e3%81%ae%e6%9c%80%e5%be%8c%e3%81%ab%e5%85%89%e3%82%8b%e3%82%a2%e3%83%8b%e3%83%a1/ - カテゴリー: Webデザイン, HTML/CSS - タグ: CSSアニメーション, JavaScript 記事の読了タイミングでCTAボタンを“自然に光らせる”ことでクリック率1.5倍！IntersectionObserverとCSSアニメーションを組み合わせた、読み終わりトリガー型のUI改善手法を実例コード付きで解説します。 こんにちは、WebディレクターのBigViです。今回も私が対応したブログサイト制作プロジェクトの例を書いています。 私が対応したプロジェクトでは、多くのユーザーが記事を読んでいるけど、そこからお問合せページリンクしていないことが問題でした。お問い合わせページへのリンクはちゃんとありました。そこで私は、「記事の最後が見えたときに少しアニメーションをする」仕掛けを考えてみました。今回は、CTA（Call to Action）を読み終わりで光らせる小さなトリガーアニメーションの実装について紹介します。 目立たないお問合せボタン 普通のお問合せボタン（CTAボタン）は、記事の下に置かれていても見落とすことが多いです。特に、静的な要素だと記事に集中しているので見えていません。でも、読み終わる時に少し光る、または動くアニメーションが入ると、みんな必ずみます。強制的ではないけど、「あ、次はこれを押すかな」と思わせるんです。 実装の基本アイデア この仕掛けは、JavaScriptのIntersectionObserverを使って、ユーザーが記事の最後に到達した瞬間をチェックします。そこからCSSアニメーションをスタートして、CTAボタンに「光る」ような効果を与えます。 記事タイトル ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 ... . . ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 お問い合わせはこちら :root{ /* ▼ここで“何回チカチカ”＆“速さ”を調整 */ --blink-iterations: 3; /* 2 か 3 を推奨（＝2回 or 3回の明滅） */ --blink-duration: 0. 22s; /* 1サイクルの長さ。0. 16〜0. 28s くらいが“チカチカ感”強め */ } *{box-sizing:border-box} body{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif; line-height:1. 8; margin:0; padding:32px 16px 80px; background:#f7f7f9; color:#222; } . article{ max-width:780px; margin:0 auto; background:#fff; padding:32px 28px 40px; border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,. 06); } . read-end-sentinel{ height:1px; } . cta{ display:block; margin-top:24px; text-align:center; text-decoration:none; background:#0078d7; color:#fff; padding:16px 24px; border-radius:10px; box-shadow:none; opacity:1; transform:translateZ(0); transition: box-shadow . 12s linear, opacity . 12s linear, transform . 12s linear; } /* ▼CSSアニメ“だけ”で明滅する。JSはこのクラスを付けるだけ */ . cta. is-blink{ animation: ctaBlink var(--blink-duration) linear var(--blink-iterations); } /* 点滅後の“残光”（任意。不要なら削除OK） */ . cta. after-glow{ box-shadow:0 0 20px 7px rgba(0,120,215,. 80); } /* 明滅のON/OFFをはっきりさせるキーフレーム */ @keyframes ctaBlink{ 0%,100%{ opacity:1; transform:scale(1. 01); box-shadow:0 0 18px 6px rgba(0,120,215,. 95); } 50%{ opacity:. 18; transform:scale(1); box-shadow:none; } } /* モーション弱め設定の環境でも1回は視認できるように */ @media (prefers-reduced-motion: reduce){ . cta{ transition:none; } . cta. is-blink{ animation:none; } . cta. after-glow{ box-shadow:0 0 24px 8px rgba(0,120,215,. 85); } } const sentinel = document. querySelector('. read-end-sentinel'); const cta = document. getElementById('cta'); let wasIntersecting = false; // アニメ再生を毎回“確実に”やり直すためのトリガー関数 function triggerBlink{ if(! cta) return; // 前回の状態をリセット（これで毎回CSSアニメを頭から再生できる） cta. classList. remove('is-blink','after-glow'); // reflowでアニメを確実にリセット // （classの付け外しだけだとブラウザによっては再生されないことがあるため） // eslint-disable-next-line no-unused-expressions cta. offsetWidth; // CSSアニメーション開始（JSはクラスを付けるだけ） cta. classList. add('is-blink'); // アニメ終了後に“残光”クラスを付与 const computed = getComputedStyle(document. documentElement); const iters = parseInt(computed. getPropertyValue('--blink-iterations'). trim || '3', 10); const dur = parseFloat((computed. getPropertyValue('--blink-duration'). trim || '0. 22s'). replace('s','')) * 1000; const total = iters * dur; // アニメーションイベントはCodePenの埋め込みで拾えないことがあるため、確実性重視でsetTimeout setTimeout( => { cta. classList. remove('is-blink'); cta. classList. add('after-glow'); }, total + 30); // 少しバッファ } // 「非交差→交差」の瞬間だけ発火（上に戻って再び下ってきた時も毎回発火） const io = new IntersectionObserver((entries) => { entries. forEach(entry => { const now = entry. isIntersecting; if(! wasIntersecting && now){ triggerBlink; } wasIntersecting = now; }); }, { threshold: 0. 05, rootMargin: '0px 0px -20% 0px' // 画面下から20%手前で発火 }); if(sentinel) io. observe(sentinel); // 任意：CTAクリックで残光を消す（体験を締める） cta? . addEventListener('click', => { cta. classList. remove('after-glow','is-blink'); }); CodePen Embed Fallback 実際の案件での使い方 このスクリプトは実際の案件でも使用しました。長い記事で、最後のCTAがほとんどクリックされていなかったのですが、読み終わりのアニメーションを入れたことでCTR（クリック率）が約1. 5倍に上がりました。アニメーションは一瞬だけ光るようにして、繰り返さない設定にしました。読者が自然に「次へ進もう」と感じる動きにすることが大切です。 まとめ 小さなアニメーションでも、読み終わりのアニメーションはクリック率をあげることができます。重要なのは「記事を邪魔しない自然なアニメーション」にすることです。 株式会社ファストコーディングでは、このようなUI改善の提案や実装も行っています。ぜひお気軽にご相談ください。 --- - Published: 2025-10-08 - Modified: 2025-10-16 - URL: https://fastcoding.jp/blog/all/ui-ux/%e8%aa%b0%e3%81%a7%e3%82%82%e4%bd%bf%e3%81%88%e3%82%8bweb%e3%82%92%e6%8f%90%e6%a1%88-%e2%94%80-html-css%e3%81%a7%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b7/ - カテゴリー: UI/UX, HTML/CSS - タグ: HTML, UI/UX, アクセシビリティ HTMLとCSSで実現する“実践的アクセシビリティ改善”を解説。見出し構造やランドマーク設計、フォーカス制御、トランジション最適化など、現場で使えるノウハウを紹介。デザイン品質を高めたいWebディレクター・エンジニア必見です。 株式会社ファストコーディングのWebディレクタの働くおかんです。今回もちょっと前回と関係していますが、読みやすさや見やすさ、という観点で、今度はWebアクセシビリティ対応についてご紹介します。 といってもWebアクセシビリティという言葉は、もはやWeb制作の世界では特別なものではなくなりましたね。弊社にご依頼いただく多くのプロジェクトでも、アクセシビリティ対応は当たり前になってきています。でも、実際のプロジェクトでは「どう実装すればアクセシビリティ対応した上で、ユーザーにとって本当に使いやすくなるのか」が課題になります。 今回は、HTMLとCSSで実現できる“実践的アクセシビリティ改善”についてお伝えしてみようと思います。基本的な部分は他のいろいろなサイトで紹介されていますので、現場での具体的なノウハウや注意点を中心に書いてみます。 見出し構造とランドマーク設計 見出し構造は、スクリーンリーダー利用者にとってサイトの骨格そのものです。からまでを順序正しく設計するのは当然として、弊社の案件では、ページ全体をランドマークロールで分割することを重視しています。これにより、キーボードや支援技術を使うユーザーが効率的にコンテンツを移動できます。 サイトタイトル 会社概要 サービス お問い合わせ ニュース一覧 最新のお知らせ ... © 2025 Fastcoding Inc. このようにランドマークを適切に設定しておくと、スクリーンリーダーが「ナビゲーション」「メインコンテンツ」「フッター」と読み上げ、情報の整理が自然になります。特に複数のナビゲーションを持つサイトでは、aria-labelを明示して混乱を防ぐことが重要です。 フォーカス移動と動的UIの制御 モーダルウィンドウやドロワーメニューなど、JavaScriptを使った動的UIがある場合は、フォーカスの移動を制御することが不可欠です。アクセシブルなモーダルを設計する際、弊社では次のように「フォーカスの閉じ込め」「戻り位置の記憶」「スクリーンリーダーへの状態伝達」をセットで実装します。 // Snippet: モーダル内のフォーカス管理 const openModal = (trigger, modal) => { const focusable = modal. querySelectorAll('a, button, input, '); const first = focusable; const last = focusable; modal. removeAttribute('aria-hidden'); first. focus; modal. addEventListener('keydown', e => { if (e. key === 'Tab') { if (e. shiftKey && document. activeElement === first) { e. preventDefault; last. focus; } else if (! e. shiftKey && document. activeElement === last) { e. preventDefault; first. focus; } } }); }; フォーカスの移動を明確に制御することで、キーボード操作でも自然な動きを維持できます。モーダルを閉じた後には、元のトリガーボタンへフォーカスを戻すのが基本です。これを怠ると、スクリーンリーダー利用者は現在地を見失うことがあります。 CSSでできるフォーカス可視化とユーザー設定の尊重 CSSだけでもフォーカスの見え方を改善できます。outlineをカスタマイズするのはもちろんですが、:focus-visibleとprefers-reduced-motionを併用することで、過剰なアニメーションを避けつつ明確な操作感を実現します。 a:focus-visible, button:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; transition: outline-offset 0. 2s ease; } @media (prefers-reduced-motion: reduce) { a:focus-visible, button:focus-visible { transition: none; } } ここでは、アニメーションを抑えるだけでなく、「ユーザーが明示的に設定している環境を尊重する」という姿勢が大切です。特に動きに敏感なユーザーにとって、意図しないエフェクトは混乱の原因になります。 コンポーネント単位のアクセシビリティ実装 近年の弊社案件では、アクセシビリティを「全体設計」ではなく「コンポーネント単位」で考えることが増えています。特にReactやVueなどのコンポーネントベースの開発では、アクセシビリティ属性を適切に組み込むことが必要です。 タブUIの例 タブ構造を実装する場合、WAI-ARIA Authoring Practicesに準拠することで、スクリーンリーダーでもタブとパネルの関係を正確に伝えられます。 新商品 人気商品 ... ... この構造では、aria-selectedの状態をJSで動的に更新することで、ユーザーの操作に合わせてスクリーンリーダーが「選択中」を正しく伝達します。CSSでの視覚的な切り替えと並行して、HTML構造を正確に整えることが肝心です。 トランジションのアクセシビリティ デザインの完成度を高めるためにアニメーションを使うことがありますが、アクセシビリティの観点では「情報を伝える動き」と「装飾のための動き」を明確に区別する必要があります。弊社では、次のようなスニペットをテンプレート化しています。 . fade-in { opacity: 0; transform: translateY(10px); transition: opacity 0. 4s ease, transform 0. 4s ease; } . fade-in. visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { . fade-in { transition: none; } } このように、トランジションの意図を明確に設計することで、見やすさとパフォーマンスを両立させます。特に情報の出現・消失を伴う場面では、アニメーションの制御がユーザー体験の質を左右します。 実務で重要な“テスト”と“再現性” 最後に、実務で最も大切なのは、アクセシビリティの実装が「検証可能」であることです。ChromeのLighthouseやaxe DevToolsによる自動テストはもちろん、NVDAやVoiceOverなどのスクリーンリーダーでの操作確認が欠かせません。また、弊社では社内ガイドラインとして「役割（role）・名前（name）・値（value）」が適切に読み上げられているかを確認する“3点チェック”を採用しています。 アクセシビリティは単なる法令遵守や数値基準ではなく、最終的には「そのUIが、誰にとっても安心して使えるかどうか」に尽きます。HTMLとCSSの設計を見直すことが、その第一歩になるのです。 まとめ この記事では、HTMLとCSSで実現できる実務的なアクセシビリティ改善のアプローチを紹介しました。見出し構造やランドマーク設計から、フォーカス管理、動的UIの制御、トランジションの最適化まで、どれもすぐに現場で応用できるものばかりです。アクセシビリティを「デザイン品質の一部」として考えることで、Webサイトの信頼性と持続性を高めることができます。 株式会社ファストコーディングでは、実装から検証まで、アクセシビリティを意識したWeb制作をワンストップで支援しています。 --- - Published: 2025-10-02 - Modified: 2025-10-08 - URL: https://fastcoding.jp/blog/all/webdesign/%e5%8b%95%e3%81%8d%e3%81%99%e3%81%8e%e3%81%aa%e3%81%84%e3%81%ae%e3%81%8c%e5%bf%83%e5%9c%b0%e3%81%84%e3%81%84%ef%bc%81%e3%81%95%e3%82%8a%e3%81%92%e3%81%aa%e3%81%84js%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc/ - カテゴリー: Webデザイン - タグ: CSSアニメーション, JavaScript, Webデザイン, 初心者 Web制作で役立つ「さりげないアニメーション」の実装例を紹介。タイプライター風テキスト、背景グラデーション、通知バッジのバウンス、FAQ矢印の回転など、軽量で心地よいUIをJavaScriptとCSSで実現する方法を解説します。 こんにちは、Webディレクター兼フロントエンドエンジニアのBigViです。ホーチミンから日本に移り住んで、現在は東京で暮らしてます。今日はWeb制作でよく使う「アニメーションの使い方」について話したいと思います。いっぱいアニメーションをつけることもよくありますが、今回は「さりげなさ」をキーワードに、JavaScriptを使ったアニメーションの実装方法を紹介します。 目立ちすぎない、心地よいUIを目指して Web制作をしていると、クライアントから「もっと目立たせたい」や「動きを加えたい」との依頼がよくあります。アニメーションは確かに目を引きますが、動きが多すぎるとユーザーが混乱したり、ページの表示が重くなったりします。そこで使うのが、軽くてさりげないアニメーションです。 タイピング風アニメーション 文章が一気に表示されるより、タイプライター風に一文字ずつ表示されると、人は自然に注目して読むようになる。とくにキャッチコピーやサービス名の紹介で効果がある。 タイプライター風 body { font-family: system-ui, -apple-system, sans-serif; padding: 24px; } . typewriter { font: 700 28px/1. 4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; } . controls { margin-top: 12px; } @media (prefers-reduced-motion: reduce) { . cursor { animation: none ! important; } } . cursor { display: inline-block; width: 1ch; } . cursor::after { content: "▍"; animation: blink 1s steps(2, jump-none) infinite; } @keyframes blink { 50% { opacity: 0; } } Restart (function{ const el = document. getElementById('tw'); const text = "静かな動きで、読みやすさを助ける。"; const speed = 80; // ms per char function typeWriter { el. textContent = ""; let i = 0; function step{ if (i { const n = parseInt(badge. textContent || "0", 10) + 1; badge. textContent = String(n); badge. classList. remove('bounce'); void badge. offsetWidth; // reflowでリセット badge. classList. add('bounce'); }); }); CodePen Embed Fallback 詳細情報の開閉に“気持ちいい矢印” クリックで開くFAQなどは、矢印がわずかに回るだけで理解しやすくなります。CSSだけで実装できるので動作も軽いです。 矢印が回転するサンプル body { font-family: system-ui; padding: 24px; } details { width: 560px; border: 1px solid #ddd; border-radius: 12px; padding: 12px 16px; } summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 18px; } summary::-webkit-details-marker { display: none; } . arrow { width: 32px; height: 32px; /* ← 少し大きめ */ flex: 0 0 auto; transition: transform . 3s ease; /* ← スムーズに回転 */ transform-origin: 50% 50%; transform: rotate(0deg); /* 閉時は「右向き」 */ } details . arrow { transform: rotate(90deg); /* 開時は「下向き」 */ } このアニメーション、重くない？ いいえ。CSSの transform だけ使うので軽いです。 CodePen Embed Fallback まとめ 「さりげない」アニメーションは、控えめすぎて、提案する時だとお客様に理解してもらえないことが多いです。でも実際にコードにしてお客様に見ていただければわかるはずです。たくさん動作するアニメーションを入れることも良いのですが、たまにはこういう方法も試してみてください。 ぜひ次のプロジェクトで、これらの手法を試してみてください。サポートが必要な場合は、お問い合わせください。株式会社ファストコーディングでは、Webサイトのアニメーション実装をはじめとするさまざまなサポートを行っています。 --- - Published: 2025-10-01 - Modified: 2025-10-01 - URL: https://fastcoding.jp/blog/all/webdesign/40%e4%bb%a3%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ab%e9%9f%bf%e3%81%8f%ef%bc%81%e9%85%8d%e8%89%b2%e3%81%a8%e3%82%bf%e3%82%a4%e3%83%9d%e3%82%b0%e3%83%a9%e3%83%95%e3%82%a3%e3%81%aecss%e6%9c%80/ - カテゴリー: Webデザイン, UI/UX - タグ: CSS, WCAG, Webアクセシビリティ, Webデザイン 40代以上のユーザーに「読みやすい」体験を届けるためのCSS改善ポイントを解説。フォント設計、配色、レイアウト、インタラクション、パフォーマンスまで実務で役立つ具体例を紹介します。 こんにちは。株式会社ファストコーディングのWebディレクタの働くおかんです。今回も読みやすさや見やすさ、という観点で、最近私が対応したプロジェクトでの対応例をご紹介します。 デザインで"読みやすさ"を考える 私も（もうすぐ）40代になるんですが、日に日に感じるのは、デザインの細部がWebサイトの印象に大きな影響を与える、ということです。歳を重ねるにつれ、視力が若い世代ほど鮮明でないこと、コントラスト感度が低下していること、近点距離の変化など、視覚特性が変わっていくものですね。それをデザイン、ではなくて、CSSの観点で考慮しているかどうかで、いいデザインであっても感覚的に読みづらいなって思ってしまうんです。 今回、「読みやすさ」に課題を持つプロジェクトを対応したときのコード例をご紹介しようと思います。単にフォントサイズや行間だけでなく、文字の扱い、配色設計、インタラクション、さらには実際の検証方法にまで踏み込んで解説していきます。 デザイン改善の具体的アプローチ 1. フォント設計の多層化 単にフォントサイズを大きくするだけでなく、流動的なサイズ調整や段階的に切り替え可能なサイズ設定が有効です。たとえば、clampを用いると画面幅に応じてフォントサイズを自動調整できます。また「標準」「コンフォート」「ラージ」といったモードを用意すれば、ユーザーが好みに合わせて文字サイズを選択できます。 :root { --size-body: clamp(1rem, 0. 9rem + 0. 5vw, 1. 2rem); --line-height: 1. 6; } body { font-size: var(--size-body); line-height: var(--line-height); } html. large { --size-body: 1. 25rem; --line-height: 1. 8; } この設定により、デバイス幅やユーザーの選択に応じて自然に読みやすいサイズに調整されます。 2. 日本語組版の工夫 日本語特有の組版ルールを意識すると、文章の流れがよりスムーズになります。禁則処理や改行位置を最適化するために以下のような指定を行います。 html { line-break: strict; word-break: keep-all; overflow-wrap: anywhere; /* 英数字や長いURLに対応 */ } p { letter-spacing: 0. 04em; } これにより、句読点や英数字が不自然に折り返されることを防ぎ、読みやすさを確保します。 3. 配色設計とテーマの柔軟性 みなさん、ブランドカラーの強調は重要ですが、背景と文字のコントラスト不足に気をつけていますか？。小さなコントラストの違いが40代以上のユーザーにとっては大きな障壁となります。単純に「濃い色と薄い色」を使うのではなく、コントラスト比を数値で測り、基準を満たすことが求められます。 WCAGに基づくコントラスト比をクリアすることは必須です。その上でライトモード、ダークモード、高コントラストモードといったテーマをCSS変数で用意しておくと、ユーザーの利用環境に柔軟に対応できます。 :root { --surface: #FFFFFF; --text: #1A1A1A; --accent: #0B63E5; } @media (prefers-color-scheme: dark) { :root { --surface: #111315; --text: #E6E9ED; --accent: #6DA7FF; } } body { background: var(--surface); color: var(--text); } a { color: var(--accent); text-decoration: underline; } a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } 4. インタラクションの強化 リンクやボタンは明確に視覚的な手がかりを与える必要があります。色だけに頼らず、下線やフォーカスリングを活用し、タップ領域も44px以上を確保します。 button { min-height: 44px; min-width: 44px; padding: 12px 16px; border-radius: 6px; background-color: var(--accent); color: #fff; border: none; } button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, white); outline-offset: 4px; } 5. レイアウトと可読性の両立 文章の横幅が広すぎると読みづらくなります。理想は1行あたり全角35〜45文字程度に収めることです。これをCSSでコントロールすると視線移動が楽になります。 . article { max-width: 45ch; margin-inline: auto; } . article p { margin: 0 0 1. 2em; } 6. パフォーマンスの考慮 可読性は表示速度にも依存します。Webフォントはサブセット化し、font-display: swapを指定して初期描画を遅らせないようにします。 @font-face { font-family: "NotoSansJP"; src: url(/fonts/NotoSansJP. var. woff2) format("woff2-variations"); font-weight: 200 900; font-display: swap; } body { font-family: "NotoSansJP", system-ui, sans-serif; } 実際のプロジェクト事例 健康情報サイトのリニューアル時、フォントサイズを18pxから流動的に調整できるようにし、ダークモードを導入しました。さらに、記事本文の横幅を45字程度に制御したことで「読みやすくなった」との声が多数寄せられました。また、主要ボタンの領域を拡大したことが行動率の改善につながりました。 まとめ 40代以上のユーザーを意識したデザインは、単なる見た目の改善ではなく、情報の受け取りやすさを保証するための仕組みそのものです。フォント、配色、レイアウト、インタラクション、パフォーマンスの全てを総合的に最適化することが、読みやすく使いやすい体験を実現します。 私たち株式会社ファストコーディングは、こうした実務的なデザイン改善をサポートしています。お気軽にご相談ください。 --- - Published: 2025-09-29 - Modified: 2025-09-29 - URL: https://fastcoding.jp/blog/all/frontend/60fps%e3%81%a7%e5%bf%ab%e9%81%a9%e8%a1%a8%e7%a4%ba%ef%bc%81%e3%80%8c%e4%bb%ae%e6%83%b3%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%80%8d%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e5%ae%9f%e8%a3%85/ - カテゴリー: React, Vue.js, システム開発 - タグ: React, Vue.js, 高速化 ReactやVueで数千件のデータを60fpsで滑らかに表示！仮想スクロールの実装ポイントを徹底解説。DOM負荷を抑えつつ高速表示を実現するためのコード例・IntersectionObserverの活用法も紹介します。 こんにちは、株式会社ファストコーディングのフルスタックエンジニア、独身貴族Fireです。 フロントエンドの開発で重要なのは「使いやすさ」と「表示スピード」、この２つに尽きます。「使いやすさ」はデザインや利用者の利用シーンも考慮されますが、スピードについてはどんな時でも早いことに越したことはありません。特に大量のデータを素早く表示することは、UIUXやデザイン以前に重視されるポイントです。私たちのプロジェクトでも、数千件のデータをスムーズに表示する必要があったので、この記事ではその解決策"仮想スクロール"の具体的な実装法をReactやVueを用いて解説します。 通常の方法ではパフォーマンスが低下する理由 以前は、長いリストを表示するときに幾度もスクロールしつつAjax読み込みする方法が採られていましたが、これはブラウザのメモリを過剰に消費することが問題でした。特に1,000件以上のデータになると、パフォーマンスが悪化するのは避けられません。それに、モバイル環境ではカクつくことさえあります。 仮想スクロールのポイント 今回は「仮想スクロール」と呼ばれる手法を紹介します。表示される範囲内だけDOMを生成し、見えない部分は生成しないことでシステムへの負担を軽くします。これのおかげで、スクロールがスムーズでおよそ60fps程度のふつうの表示が実現できます。 1. 見える部分だけを計算 まず重要になるのは、ユーザーがどの位置までスクロールしているかを計算する部分です。これが基準になり、どのアイテムを表示するかが決まります。Reactの場合は以下のように計算します。 const { start, end, offsetY } = useMemo( => { const startIdx = Math. floor(scrollTop / rowHeight); const visibleCount = Math. ceil(height / rowHeight); const from = Math. max(0, startIdx - overscan); const to = Math. min(items. length, startIdx + visibleCount + overscan); const y = from * rowHeight; return { start: from, end: to, offsetY: y }; }, ); ここで求めた開始と終了は、配列から切り出す見かけ上のアイテム範囲を意味します。offsetY は、切り出した小さな断片を本来の位置に見せるための基準で、親ラッパーを transform: translateY(... ) で縦に移動させるとレイアウト負荷を抑えられます。 2. スクロールの取り込みは一フレーム一回に抑える イベントは高頻度で発火しますが、状態更新を乱発すると体感が荒れます。ブラウザの描画サイクルに合わせて、1フレームあたり一度だけ取り込むのが安全です。 useEffect( => { const el = viewportRef. current! ; let rafId = 0; const onScroll = => { if (rafId) return; rafId = requestAnimationFrame( => { setScrollTop(el. scrollTop); rafId = 0; }); }; el. addEventListener("scroll", onScroll, { passive: true }); return => { el. removeEventListener("scroll", onScroll); if (rafId) cancelAnimationFrame(rafId); }; }, ); この形なら、スクロール中でも余計な再計算が積み上がらず、体感的には軽めのままでDOMの更新がでいます。 DOMを作り直さず中身だけ差し替えるためのプール設計 可視行＝数十件程度という前提でも、毎回の差し替えで再マウントが起きるやっぱり画面がチラチラします。そこで、画面に入る行数とその上下を少しバッファとして持たせた、合計した固定サイズのスロットを用意し、key をスロット番号で固定します。各スロットは transform で縦方向に配置し、中身だけを差し替えます。 {Array. from({ length: poolSize }, (_, slot) => { const item = slice; const top = slot * rowHeight; return ; })} この方式なら、スクロールしてもDOMノード自体は変わらず、テキストなどの内容だけが入れ替わります。フォーカスや行選択の状態をスロット側で持てるため、インタラクションの破綻も抑えられます。 IntersectionObserverで末尾を監視して先読みする 表示が末尾に近づいたときに、十分な余裕をもって次のページを取りに行くと、連続してページがあるように見えるようになります。スクロールコンテナを root に指定し、末尾のスロットが可視になったらフェッチを呼びます。重複リクエストは AbortController で抑制します。 useEffect( => { if (! rootEl || ! sentinelEl) return; const io = new IntersectionObserver((entries) => { if (entries. isIntersecting) onReach; }, { root: rootEl, rootMargin: "600px 0px" }); io. observe(sentinelEl); return => io. disconnect; }, ); rootMargin をやや大きめに取れば、ユーザーが末尾に着くより前に通信を走らせられます。 サンプルコード（React） CodePen Embed Fallback サンプルコード（Vue. js） CodePen Embed Fallback ※ダミーデータ生成のためfakeapiを埋め込んでおります。 実際のプロジェクトでの効果 ある通販サイトの管理画面にこの技術を取り入れたところ、3,000件を超える商品情報を表示しながらも60fpsを維持できました。ユーザーからは「反応が早い」という感想を多くいただき、実際ページ内のクリック率は大幅に伸びました。 おわりに 仮想スクロールは大量データを扱う上で非常に有効な解決策です。60fpsを目指すことで、プロジェクト全体のパフォーマンスが向上します。次のプロジェクトでぜひ試してみてください。仮想スクロールの実装についてのご相談は、こちらからお気軽にどうぞ。 --- - Published: 2025-09-25 - Modified: 2025-10-02 - URL: https://fastcoding.jp/blog/all/ui-ux/%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%99%e3%82%8b%e3%81%a8%e5%ba%83%e3%81%8c%e3%82%8b%ef%bc%81%e7%b0%a1%e5%8d%98%e3%83%aa%e3%83%83%e3%83%97%e3%83%ab%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88/ - カテゴリー: UI/UX - タグ: JavaScript, UI/UX Webディレクター必見！ボタンに「リップルエフェクト」を加えるだけでクリック率が20％アップ。JavaScriptわずか10行で実装できる方法を解説します。シンプルかつ軽快にUIを改善したい方におすすめの実践記事です。 こんにちは、ファストコーディングのWebディレクタ、BigViです。今回はホバー時にちょっとした楽しさをプラスするリップルエフェクトについてお話しします。 お問い合わせボタンや、購入ボタンを目立たせる方法はいろいろあります。でも、クリックさせやすくする方法になると、このリップルエフェクトが一番いいと思います。複雑なコードを作らずに、シンプルな方法を見つけ出しましたので、今日はそれをJavaScriptで10行で実現する方法をご紹介します。 リップルエフェクトの魅力とは？ まず、リップルエフェクトがなぜ求められるのかについて考えてみましょう。ユーザーインターフェース（UI）のデザインは、ユーザーの満足度に大きな影響を与えます。クリック時のさりげない視覚効果は、ユーザーに楽しい体験をもたらします。 過去のプロジェクトでは、「もっとインタラクティブな要素を」というクライアントの要望に応えたところ、特にクリック時のリップルエフェクトは好評を博しました。この小さな工夫が、サイトの印象を大きく変える一因となったのです。 シンプルで軽快！手軽に作れるエフェクト ポイントは、リップルエフェクトをとてもシンプルに作ることです。JavaScriptを駆使せず、軽量でコードの少ない形で実現可能です。 簡単なHTMLとCSS まずは、ボタンを作ってみましょう。 Hover Me na! . ripple-button { position: relative; overflow: hidden; /* 他のスタイル */ width: 200px; height: 100px; border: none; } . ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple 0. 6s linear; background-color: rgba(0, 0, 0, 0. 7); } @keyframes ripple { to { transform: scale(4); opacity: 0; } } JavaScriptでリップルエフェクトを実装 次にJavaScriptでエフェクトを加えます。ホーバーの位置にリップルが広がります。 document. querySelector('. ripple-button'). addEventListener('mouseenter', function(e) { let circle = document. createElement("span"); circle. classList. add("ripple"); this. appendChild(circle); let d = Math. max(this. clientWidth, this. clientHeight); circle. style. width = circle. style. height = d + 'px'; circle. style. left = e. clientX - this. offsetLeft - d / 2 + 'px'; circle. style. top = e. clientY - this. offsetTop - d / 2 + 'px'; setTimeout( => circle. remove, 600); }); CodePen Embed Fallback コードはこれで終わりです。簡単ですね。 リップルエフェクトでクリック率があがりました。 あるeCommerceサイトのプロジェクトで、このリップルエフェクトを実装しました。製品紹介ページのクリック率が大幅に向上しました。ボタンにただの機能だけじゃなくて、エフェクトを加えたことでユーザーの興味を引き、クリック率は20%増加しました。 まとめ：試してみて、ボタンをもっと楽しく すごく簡単なコードで、クリック率があがるんです。ぜひ、次のプロジェクトでこの10行のコードを試してみてください。 株式会社ファストコーディングでは、こうしたUIの提案や改善もサポートしています。もっと知りたい方は、こちらからお問い合わせください。 ※本記事は弊社外国人スタッフによる投稿です。言い回しや表現が不十分な個所がありますことご容赦いただきますようお願いいたします。株式会社ファストコーディング --- - Published: 2025-09-22 - Modified: 2025-09-22 - URL: https://fastcoding.jp/blog/all/webdesign/%e6%8f%90%e6%a1%88%e5%8a%9b%e3%82%a2%e3%83%83%e3%83%97%e3%81%ae%e3%82%ab%e3%82%ae%ef%bc%81bento-box%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ab%e6%8c%91%e6%88%a6%e3%81%97%e3%82%88%e3%81%86/ - カテゴリー: Webデザイン, UI/UX - タグ: デザイン, レイアウト, 設計 Webディレクター必見！情報が多いページをすっきり見せる「Bento Boxレイアウト」の実装法を解説。素のCSS GridからBootstrap、MixItUpを使った動的レイアウトまで5パターンを紹介。提案力を高めたい方に役立つ実践的なコーディング視点のノウハウです。 皆さんこんにちは。株式会社ファストコーディングのWebディレクタ 働くおかんです。今回は直近の私のプロジェクトで活用したBento Boxレイアウトというデザイン手法をコーディングする側の観点でお伝えします。このレイアウトをつかうとごちゃごちゃした情報をまとめやすくなるので、使えばきっと提案力がアップすること間違いなしです。 今のデザインの不満とBento Boxの登場 ウェブ制作では、よくクライアントから「シンプルで見やすいデザインにしてほしい」とのリクエストを受けます。ただ、だいたいシンプルじゃないページ＝情報量が多いページなんですね。情報量が増えると、どうしても単にガイドライン通りでは限界があります。そこで頼りになるのがBento Boxレイアウトです。このレイアウトの素晴らしいところは、シンプルなのに視覚的に情報を整理しやすくし、ユーザー体験を向上させることができるところです。 Bento Boxで情報整理 ポイントは、情報の整理と視覚的なわかりやすさ。Bento Boxレイアウトとは、お弁当箱のように、スペースを効率的に活用して情報を分ける方法です。異なる情報が混在するページでも、それぞれの要素をボックスに収めることで、スッキリと見せることができます。これにより、情報が頭に入りやすくなります。 実際にどのように実装するのかを５つぐらいにまとめてみました。 実践！Bento Boxの実装例 パターン1：素のCSS Gridで作る基本のBento（最小構成） A B C D E F . bento { --gap: clamp(8px, 1vw, 16px); --col: clamp(160px, 24vw, 300px); display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--col), 1fr)); gap: var(--gap); grid-auto-flow: dense; /* 空きを詰める */ } . card { background: #fff; border: 1px solid #e7e7e7; border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,. 04); min-height: 120px; } . card--wide { grid-column: span 2; } . card--tall { grid-row: span 2; min-height: 260px; } @media (max-width: 640px) { . card--wide { grid-column: span 1; } } 実装ポイント repeat(auto-fill, minmax)で列数の自動調整。 “飛び地感”を抑えるためgrid-auto-flow: dense。 スパン指定は重要要素に限定（読み順が崩れないよう注意）。 パターン2：アスペクト比とobject-fitでビジュアル重視（画像中心） ヒーロー的なカードを混ぜつつ、画像の見え方を一定に保つ版です。aspect-ratioとobject-fit: coverでサムネの統一感を出しつつ、テキストは行数クランプでリズムを整えます。 特集：ケーススタディ 導入事例A 導入事例B 特集C Tips . bento--visual { --gap: 12px; --col: clamp(180px, 26vw, 320px); display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--col),1fr));gap:var(--gap);grid-auto-flow:dense;} . vcard{border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff} . vcard__img, . vcard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} . vcard h3,. vcard h4{margin:. 6em . 9em 1em;font-size:clamp(14px,1. 6vw,18px);line-height:1. 5} . vcard--hero{grid-column:span 2} . vcard--wide{grid-column:span 2} @media (max-width: 700px){. vcard--hero,. vcard--wide{grid-column:span 1}} 実装のポイント aspect-ratioで枠の安定→CLS回避。 文字はclampで最小～最大を縛り、行数クランプを併用して整列。 パターン3：Bootstrap 5ユーティリティで作るBento（設計コスト低） デザインガイドラインが決まっている現場ではBootstrap 5で手早く。row×colとユーティリティクラスで余白・角丸・影を統一し、必要な所だけgridを併用します。 コード（CDN併用） A（ワイド） B C D（やや大） E F 実装のポイント align-items-stretchで等高化、g-3で余白統一。 レスポンシブはcol-で幅の比率を素早く調整。 さらに“詰めたい”場合は. row内のカードを内側Gridで調整可能。 パターン4：MixItUpで“動くBento”（フィルタ・ソート） カードをカテゴリーや人気順で切り替えたい時は、軽量のMixItUpを組み合わせます。Bentoのまとまりは維持しつつ、並べ替え・絞り込みで提案の切り口を増やせます。 コード（最小構成） すべて 事例 Tips 標準 人気順 A（事例／pop:5） B（Tips／pop:1） C（事例／pop:3） D（Tips／pop:8） E（事例／pop:6） F（Tips／pop:2） const mixer = mixitup('#mix', { selectors: { target: '. mix' }, animation: { duration: 300, nudge: true, clampWidth: true } }); document. querySelectorAll(''). forEach(btn => { btn. addEventListener('click', => mixer. filter(btn. dataset. filter)); }); document. querySelectorAll(''). forEach(btn => { btn. addEventListener('click', => mixer. sort(btn. dataset. sort)); }); 実装のポイント . mixにカテゴリー用クラス、並び替え指標はdata-*で付与。 レイアウトはBootstrapのグリッド比率で調整し、MixItUpで順序だけ変える。 パターン5：情報量に応じて“伸びるカード”（CSS Grid × grid-auto-rows） テキスト量に差があると高さが揃わずノイズになります。grid-auto-rows＋行高ユニットを使うと、テキストに合わせて自然に伸びるBentoが作れます。 お知らせ短い文 導入事例本文がやや長い場合の例。本文がやや長い場合の例。 特集長文でも自動で伸びます。長文でも自動で伸びます。長文でも自動で伸びます。 Tips短文 . bento--elastic{ --gap:12px; --col: clamp(180px, 26vw, 320px); display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(var(--col),1fr)); grid-auto-rows: 8px; /* 1行の“基準” */ } . e-card{border:1px solid #e8e8e8;border-radius:12px;padding:16px;background:#fff; display:grid;grid-auto-rows:min-content;align-content:start} . e-card h4{margin:0 0 . 5em;font-size:clamp(14px,1. 6vw,18px)} . e-card--wide{grid-column:span 2} @media (max-width: 700px){. e-card--wide{grid-column:span 1}} 実装のポイント 行高をgrid-auto-rowsで基準化し、カードは内容に応じて伸縮。 画像混在の場合は、テキスト領域をdisplay:gridにして見出し→本文の流れを固定。 実際にあった活用方法 ある小売業のお客様が商品の一覧ページを見やすくしてほしいと頼んできました。そこでBento Boxレイアウトを提案し実装したところ、ユーザーが商品を直感的に比較できるようになり、購入意欲を高めたと評価をいただきました。お客様からは、問い合わせの減少やサイト滞在時間の向上の報告もあり、とても効果があったと実感しています。 まとめ - Bento Boxレイアウトで提案力を磨こう Bento Boxレイアウトは、Webディレクターやプロジェクトマネージャーにとって非常に役立つ提案のネタです。ぜひ次のプロジェクトで試してみてください。興味があれば、株式会社ファストコーディングでの作成や改善サポートも承っておりますので、 こちらからぜひご連絡ください。 --- - Published: 2025-09-19 - Modified: 2025-09-19 - URL: https://fastcoding.jp/blog/all/frontend/nuxt3-%e6%ae%b5%e9%9a%8e%e3%83%8f%e3%82%a4%e3%83%89%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7%e9%87%8d%e3%81%84lp%e3%82%92%e8%bb%bd%e3%81%8f/ - カテゴリー: React, Vue.js, システム開発 - タグ: JavaScript, Nuxt3, Vue3, フロントエンド Nuxt3を使ってLPの表示速度を改善！段階ハイドレーションの仕組みや実装方法、具体例を交えて解説。初期表示の高速化とJS負荷軽減を両立した最新手法で「重い・もっさり」を解決。ファストコーディング独自のノウハウを公開！ はじめに こんにちは、株式会社ファストコーディングのフルスタックエンジニア、独身貴族Fireです。 Webディレクターやプロジェクトマネージャーの方々、最近のWeb制作で「重くて遅いランディングページ」に悩んだことはありませんか？縦に長いページや、いろいろな要素が詰まったページになればなるほど、「なんかちょっと遅いよね」とか「もっさりしているよね。。。」、「ページ分割したほうがいいんじゃない？」みたいな声、聞こえますよね？ フロントエンド開発のプロジェクトを日々進めている弊社では、そういうお困りに対応するのが日常茶飯事、、とも言えます。弊社内ではフロントエンドエンジニア間でそういった場合の対処法を共有しているのですが、最近使った（考え方のもとともなる）方法 “段階ハイドレーション” について今回はNuxt3/Vue3をベースにご案内いたします。 段階ハイドレーションとは？ ハイドレーションという言葉、あまり聞きなれませんね。マラソンや登山をされる方なら聞いたことあるかもしれませんが、水分補給や栄養補給といった雰囲気で使われることがあります。 今回ご案内する段階ハイドレーションというのは、Vue. jsのフレームワークであるNuxt3を使い、SSRを活用して先にHTMLを描画し、必要なタイミングでだけクライアントのJSを当てて（＝ここをハイドレートして、と表現します。Reactなんかを使ったことがある人はHydrationエラー等見たことある人は多いのではないでしょうか）、“動的に変わっていくUI”にしていく手法です。Nuxt3/Vue 3 では以下のトリガーを組み合わせて、ハイドレーションを簡単に段階化できます。 可視化トリガー：要素がビューポートに入ったら初めてマウント（例：レビュー、ギャラリー） 相互作用トリガー：クリック等の操作が来たら初めてマウント（例：モーダル、タブ） アイドルトリガー：requestIdleCallback 等でCPUが空いたら後回し領域をマウント 条件トリガー：メディアクエリ/ネットワーク状態で分岐（低速回線は動画UIを遅らせる 等） これにより初期表示時のJavaScriptの配布量を下げてと端末の負荷を下げつつ、上部はすぐ見える/触れる体験を両立できます。 Nuxt3の段階ハイドレーションでの解決 Nuxt3の“段階ハイドレーション”は、こうした問題を解決する新しい技術です。コンポーネントを「Island」に分け、それぞれの必要な時にだけクライアント側で初期化（ハイドレート）します。具体的な流れは以下の通りです。 1. Islandごとの分割 各セクションを独立したIslandとして扱い、Nuxtのサーバサイドレンダリング(SSR)を用いて初期表示を高速化します。 実装例（構造） ポイント 各 Island はPropsで疎結合に。副作用を内部完結させ、外部に波及させない。 画像・テキストはSSRで骨組みを描画して、CLSを防ぐ（幅/高さを明示）。 2. ファーストビューはSSRで表示 ユーザーが最初に目にする部分はSSRで描画し、すぐに表示されるようになります。ここには、ヒーローセクションや主要なアクションボタンなどが含まれます。 実装例（ヒーローはSSR、アニメだけクライアントに） {{ title }} {{ lead }} defineProps ポイント ClientOnly は必要最小限で包む（包み過ぎるとSSRの恩恵が減る）。 SSR部は静的HTMLで完成させ、JS待ちの白抜けを出さない。 3. 下部は可視時にマウント ギャラリーやレビューは、IntersectionObserverを使い、画面に表示された時にだけマウントされるようにします。これにより、初期ロード時のJS負荷を軽減できます。 実装例（@vueuse/core の useIntersectionObserver） import { ref } from 'vue' import { useIntersectionObserver } from '@vueuse/core' // npm i @vueuse/core const props = defineProps const target = ref(null) const mounted = ref(false) useIntersectionObserver(target, => { if (entry? . isIntersecting) mounted. value = true }, { rootMargin: '200px', threshold: 0 }) . skeleton{height:320px;background:linear-gradient(90deg,#eee,#f6f6f6,#eee); background-size:200% 100%;animation:sk 1. 2s linear infinite} @keyframes sk{to{background-position:200% 0}} ポイント rootMargin: '200px' で手前先読み。threshold: 0 で“かすったら”開始。 代替として自前のIntersectionObserverや v-intersect ディレクティブでもOK。 マウント後はオブザーバー解除（上記は mounted 切替で即座にDOMが置換される）。 4. 共有状態の管理 Island間のデータはPiniaで管理し、必要なデータはpropsを介して渡すことで無駄な再レンダリングを防ぎます。 実装例（クリックで遅延import→マウント） レビューを表示 import { ref } from 'vue' const Comp = ref(null) const mount = async => { Comp. value = (await import('. /Reviews. vue')). default } ポイント import はルート単位のコード分割を発生させる（JS配布量を抑制）。 初回マウント時はフォーカス管理とアナウンス（SR向け）を忘れずに。 実装例 // コンポーネント単位での分割 // IntersectionObserverを活用した遅延マウント import { ref } from 'vue'; export default { setup { const lazyComponent = ref(null); function mountComponent { lazyComponent. value = import('. /GalleryComponent. vue'); } return { lazyComponent, mountComponent }; }, }; 実際のプロジェクト例 実際のプロジェクトにこの方法を導入したところ、LCP（最大コンテンツ描画時間）が約30%も改善しました。ユーザー調査でも、ページの反応速度が高評価を受け、デバイスの画面転換や向きを変えたときもスムーズに動作し、「遅い」、「もっさりしている」というような評価を改善することに成功しました。 おわりに Nuxt3の“段階ハイドレーション”を活用することで、多要素が含まれるLPでもスムーズで軽快な表示が可能になります。この手法を、次のプロジェクトでぜひ試してみてください。株式会社ファストコーディングでは、このようなフロントエンド技術を駆使したWeb制作をサポートしています。詳しくはこちらの問い合わせフォームからご相談ください。 --- - Published: 2025-09-18 - Modified: 2025-09-19 - URL: https://fastcoding.jp/blog/all/webdesign/%e7%b0%a1%e5%8d%98%e3%81%ab%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3/ - カテゴリー: Webデザイン, UI/UX - タグ: CSSアニメーション, JavaScript, UI/UX スクロール連動アニメーション、入れすぎて重くなっていませんか？本記事では、軽量なJavaScriptとCSSを使って実現する「効くアニメーション」の作り方を、外国人WebディレクターBigViが実例とともに解説。滑らかで使いやすい演出のヒント満載！ こんにちは。私は株式会社ファストコーディングのWebディレクタ、BigViと申します。ホーチミン出身、東京に住んでいます。これから日本のお客様に向けて、フロントエンド技術のことやWeb政策のことを、ブログ記事に書いていこうと思っています。よろしくお願いいたします。 最近ですが、ウェブ制作でスクロールに連動するアニメーションを使うことが増えています。これを使うとうまくユーザーの興味を引きつけられて、ページをもっと楽しんでもらえるんです。でも注意しないと、JavaScriptをたくさん使うとページの読み込みが遅くなることも。そこで、軽いJavaScriptで効率よくスクロール連動アニメーションをつける方法をご紹介します。 なぜスクロール連動アニメーションが大事？ ウェブサイトを訪れる人にとって、見た目の印象ってすごく大事です。スクロールすると一緒に動くアニメーションがあると、注目されやすくなって、ページの内容が伝わりやすくなります。見た目が良いだけじゃなくて、情報がわかりやすくなったりして、結果としてこのサイトは使いやすいって思ってもらえるんですよ。 ただ、アニメーションをたくさん入れすぎると、ページが重たくなってしまうことも。だから、少ないコードで効果的なアニメーションを実現する方法が重要なんです。 私たちがいつも使っている、簡単にできる方法をまとめてみました。 簡単スクロールアニメーション 1. スクロールイベントは賢く使う JavaScriptでスクロールを監視するのは、やりすぎると動きがぎくしゃくしてしまうこともあります。そこで、イベントを効率よく処理する方法が重要です。 「デバウンス」や「スロットリング」というテクニックを使って、無駄に処理されるのを防ぎます。このコードでは、その一例を紹介しています。 let last_known_scroll_position = 0; let ticking = false; function doSomething(scroll_pos) { // ここでアニメーションのロジックを実行します } window. addEventListener('scroll', function(e) { last_known_scroll_position = window. scrollY; if (! ticking) { window. requestAnimationFrame(function { doSomething(last_known_scroll_position); ticking = false; }); ticking = true; } }); これはスクロールのたびにアニメーションが動かされないように工夫してます。ブラウザへの負担を軽くするためのテクニックです。 2. CSSに頼ろう JavaScriptはたくさんの機能があって便利ですが、動きをつけようとすると重くなることがあります。そこでCSSを使うと、パソコンとかスマホの力を借りてスムーズにできます。 たとえばシンプルなフェードインのアニメーションはこんなふうに書けます。 . fade-in { opacity: 0; transition: opacity 0. 5s ease-in-out; } . fade-in. visible { opacity: 1; } ここでは要素が画面に見えるようになったら、JavaScriptでvisibleクラスを追加するだけ。これで、JavaScriptを最低限にしつつ滑らかな動きを実現できます。 3. 必要な部分にだけアニメーションを 全ての要素にアニメーションを入れちゃうと、やっぱり重くなっちゃいます。実際には、どの部分にアニメーションを入れるかをクライアントと相談して決めるのが大事です。必要なところだけに効果をつけることで、スムーズにページが動きます。 ちなみに、やはりキービジュアルにアニメーションを入れるのはどのサイトでも行いますが、キービジュアルは最初に読み込まれるところなので、入れないほうがページは早くなります。あえてキービジュアルに何も入れず、その少し下から開始するようにしたり、お問い合わせへのリンクセクションだけに入れるほうが、より注目される効果があると思います。 実例：成功した軽量アニメーション 私のプロジェクトでは、イベントページで画像とテキストをアニメーションさせて、ユーザーが注目するように制作しました。でもJavaScriptをなるべく減らして、CSSで動きをつけたんです。 こうして、少ないコードで直感的で魅力的な動きをページに足すことができました。 最後に スクロール連動アニメーションは、ページに少し工夫を加えるための良い手段です。ただ、パフォーマンスを考えないと逆効果ですので、スマートにコードを書くことがポイントです。ここで紹介した方法を試して、ぜひ使いやすくて魅力的なページ作りを目指してみてください。 もっと詳しいサポートやアニメーションの実装相談は、こちらからお気軽にどうぞ。私たち株式会社ファストコーディングが全力でお手伝いします！ ※本記事は弊社外国人スタッフによる投稿です。言い回しや表現が不十分な個所がありますことご容赦いただきますようお願いいたします。株式会社ファストコーディング --- - Published: 2025-09-12 - Modified: 2025-09-19 - URL: https://fastcoding.jp/blog/all/webdesign/%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e8%bb%bd%e9%87%8f%e5%8c%96%e3%82%92%e5%9b%b3%e3%82%8b%e3%82%b5%e3%82%b9%e3%83%86%e3%83%8a%e3%83%96%e3%83%abweb/ - カテゴリー: Webデザイン - タグ: CSS, PageSpeed, ページ高速化 あなたのサイト、軽くできていますか？ こんにちは。株式会社ファストコーディングのWebディレクター、働くおかんです。最近はGoogle検索やBing検索からのみならず、ChatGPT等のAIで表示されるかどうかのAIO対策が注目されていますね。 AIO対策で語られるのは実際にはSEO対策と同様の構造化タグ追加や適切なマークアップ制作に寄りがちですが、実は表示速度も大事なことをご存じでしょうか？ またページ表示速度はAIOやSEO対策だけではなくて、Webサイトのユーザビリティにも直結し、最近では「サステナブルWeb」と呼ばれる分野でも重視されているお話です。そこで今回はページの表示速度を中心とした軽量化の重要性とその実践方法についてお、「サステナブルWebコーディング」としてお話しします。 なぜ表示速度と軽量化が大事なの？ ページの表示速度は、ユーザー体験そのものに直結します。表示が遅いと、ユーザーはそのサイトをすぐに離れがちです。これは「バウンス率」として計測できますが、この数値が高まるとSEOにも悪影響が及びます。速やかにサイトが表示されれば、ユーザーが情報を取得しやすくなり、信頼感を与えることにつながります。 Googleもページの読み込み速度をランキング要因の一つとしています。これにより、読み込みが速いサイトは検索結果で上位に表示されやすくなります。つまり、Webサイトの軽量化は、ユーザー体験とSEOの両面で欠かせない要素です。 サイトを軽くするためのテクニック 表示を速くして“体感の軽さ”を上げるには、フロントと配信の両面から手を打つのが近道です。ここでは、まず入れるべき定番の6テクニックをまとめてみました。 1) 画像の最適化と配信（WebP/AVIF＋適切サイズ） 説明画像はWebサイトの中でも最も重たいリソースです。フォーマットを WebP/AVIF に切り替えつつ、デバイスに合わせて“必要なサイズだけ”配信すると、読み込みが大きく短縮されます。 ※動画が一番重い、と思うかもしれませんが、最近の動画は基本的にプログレッシブ配信（ちょっとずつ配信）になりますので、実は画像が一番重くなりがちです。 ポイント 元画像を圧縮（画質は80前後から検討／写真はWebP/AVIF、ロゴ等はSVG形式がおすすめです） srcset / sizes で過不足のない解像度を配る（srcsetやsizesを使えば、閲覧者の画面の解像度に合わせたサイズの画像を配信できます） でフォールバック（pictureタグで囲うことで、万一AVIFが使えないブラウザでも、WebPを使う。それがだめでもJPEG/PNG、という風に、バグが出ないように実装することが可能です） 実装例 2) 遅延読み込み（画像・iframe・下部コンポーネント） 説明ファーストビューに不要なリソースは、見える瞬間まで読まないのが鉄則。初期ロードを最小化して体感速度を上げます。 ポイント 画像に loading="lazy" / decoding="async"属性を追加する iframeにも loading="lazy"を追加、可能ならサムネ＋クリック再生で表示するようにする 下部ウィジェットは IntersectionObserver で動的に生成する 実装例 /* 遅延対象にわかりやすい初期スタイル（任意） */ . js-lazy, . js-widget { opacity: 0; transition: opacity . 25s ease; } . is-loaded { opacity: 1; } // IntersectionObserver で“見えたら”ローディング (function { if (! ('IntersectionObserver' in window)) { // 古いブラウザ向け（必要ならPolyfillを読み込む） // https://github. com/w3c/IntersectionObserver/tree/main/polyfill return; } const lazyTargets = document. querySelectorAll('. js-lazy, . js-widget'); const onIntersect = (entries, observer) => { entries. forEach(entry => { if (! entry. isIntersecting) return; const el = entry. target; // 画像 or iframe（data-src を本来の src に差し替え） if (el. matches('. js-lazy')) { const src = el. getAttribute('data-src'); if (src) el. setAttribute('src', src); el. addEventListener('load', => el. classList. add('is-loaded'), { once: true }); } // 任意ウィジェット（見えたら初期化スクリプトを読み込む） if (el. matches('. js-widget')) { const scriptUrl = el. getAttribute('data-script'); const cfgText = el. getAttribute('data-config') || '{}'; if (scriptUrl) { const s = document. createElement('script'); s. src = scriptUrl; s. async = true; s. onload = => { try { const cfg = JSON. parse(cfgText); // グローバル初期化関数を想定（実装に合わせて変更） if (window. initReviewWidget) { window. initReviewWidget(el, cfg); } el. classList. add('is-loaded'); } catch (e) { /* no-op */ } }; document. head. appendChild(s); } } // 1度読み込んだら監視解除 observer. unobserve(el); }); }; const io = new IntersectionObserver(onIntersect, { root: null, // ビューポート rootMargin: '200px', // 200px 手前で“先読み”開始 threshold: 0 // 交差を検知したら実行 }); lazyTargets. forEach(t => io. observe(t)); }); 3) フォント最適化（サブセット化／preload／display） 説明Webフォントは意外と重い上に、ブラウザが表示するときに「待たせる」原因にもなります。使うフォントを絞りこみ、先読みや表示設定を組み合わせて“待たせない”設定にします。 ポイント 使用文字だけのサブセット化フォントを使う（日本語フォントは使用ウェイトも最小限に） 初回に必要なファイルだけで先読み font-display: swap で何も見えない空白時間を回避 実装例 @font-face { font-family: 'NotoSansJP'; src: url('/fonts/NotoSansJP-subset. woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* FOIT回避 */ } body { font-family: system-ui, "NotoSansJP", sans-serif; } 4) JavaScriptの軽量化（defer/async・分割・未使用削除） 説明JavaScriptの実行はHTMLやCSSの表示に加えてパソコンのパワーを使います。ファーストビューの表示に不要なJavaScriptを後回しにし、実行量を減らします。 ポイント 初期描画に関係ないスクリプトは defer / async属性を追加 ページ別にファイルを分けて遅延よみこみ サイト公開前にはビルドツール（Webpackなど）でツリーシェイキングで未使用コード除去 サードパーティタグは棚卸しして最小限に（マーケティングタグは実はとても重いです） 実装例 if (location. pathname. startsWith('/dashboard')) { import('/assets/dashboard. js'); } 5) CSSの軽量化（クリティカルCSS／未使用削除／設計の見直し） 説明CSSはページを表示するための“基礎”ともいえます。ファーストビューに必要な最小限だけ先に適用し、残りは後から読み込みます。使っていない宣言も整理してサイズを削減しましょう。 ポイント クリティカルCSSをインライン、残りは遅延ロードで読み込む Purge/Content-awareツール（ビルドツールのプラグイン）で未使用クラス削除 BEM/Utilityなど一貫した設計で、そもそも重複したり、冗長にならないように制作をする 実装例 /* above-the-fold の最小限 */ . header{display:flex;align-items:center;min-height:56px} . hero{padding:8vw 0 4vw} 6) 配信最適化（圧縮・HTTP/2/3・CDN・キャッシュ） 説明同じファイルでも、どうやって「配るか」で速度は大きく変わります。サーバ側の圧縮と多重化、CDNキャッシュで往復回数とサイズを減らします。 ポイント テキスト系に Brotli（fallbackでGzip）圧縮を利用（※サーバが対応している場合） HTTP/2/HTTP/3で多重化（同時リクエストに強いです） CDNサービスの活用で地域最寄りから配信、長期キャッシュ＋ハッシュ名 重要ドメインへのpreconnectでハンドシェイク短縮 実装例（. htaccess） # Cache-Control（静的アセット） Cache-Control: public, max-age=31536000, immutable # HTMLは短め Cache-Control: no-cache # Nginx例：Brotli（サーバ設定） brotli on; brotli_comp_level 6; brotli_types text/plain text/css application/javascript application/json image/svg+xml; # HTTPヘッダでのヒント Link: ; rel=preconnect; crossorigin 補足：一気に全部やらなくてOKです。まずは画像／遅延読み込み／フォントから始め、次にJS／CSS／配信へ広げると効果も得やすく、また今のコードを大きく変えずに対応できます。 実際の事例：UIコンポーネントの賢い活用 弊社のとある案件では、上記の、CSSやJavaScriptの最適化をするために、効率的にUIライブラリを活用することに注力しました。たとえばBootstrapやVuetify、Material-UIといったUIコンポーネントライブラリを取り入れ、必要最低限のカスタマイズを加えることで、開発時間を削減しつつ、サイトの軽量化を実現しました。これにより、プロジェクト全体で最大30%の読み込み時間の削減に成功しました。 まとめ Webサイトの軽量化は、ユーザー体験の向上とSEOの改善に直結します。次回のプロジェクトでは、今回ご紹介した画像の最適化やCSS設計の工夫をぜひ試してみてください。必要以上にリソースを使わない「サステナブルなサイト作り」が、今後ますます求められるでしょう。 株式会社ファストコーディングでは、サイトの軽量化や改善サポートを行っています。詳細については、こちらのフォームからお問い合わせください。次の一歩を踏み出し、顧客満足度の高いサイト制作を目指しましょう！ --- - Published: 2025-09-08 - Modified: 2025-09-19 - URL: https://fastcoding.jp/blog/all/ui-ux/%e9%9b%a2%e8%84%b1%e7%8e%87%e3%82%92%e4%b8%8b%e3%81%92%e3%82%8b%ef%bc%81%e6%9c%80%e6%96%b0css%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%e8%aa%ad%e3%81%bf%e3%82%84%e3%81%99%e3%81%84web/ - カテゴリー: UI/UX, HTML/CSS - タグ: CSS, UI/UX, Web業界の動向 ユーザーが離脱する原因は「読みにくさ」かもしれません。本記事ではCSSを活用して可読性を高め、UXとコンバージョン率を改善する方法を紹介。実例や具体的なCSSコードも掲載し、すぐに実践できます。 こんにちは！株式会社ファストコーディングのWebディレクター、働くおかんです！ 最近、Webデザインの流行が目まぐるしく変わっています。特に、AIが検索結果に影響を与え、単にキーワードを並べるだけでは通用しなくなりました。Webディレクターの皆さん、ご自身のプロジェクトでユーザーがページをすぐに離れてしまう悩みを抱えていませんか？そんな中、CSSを使った可読性の向上が、UXの最適化や離脱率の改善に役立つことをご存じでしょうか。今回は、株式会社ファストコーディングのWebディレクターである私が、最新のCSS技術を活用して作り出す“読みやすいWeb体験”をご紹介いたします。 これまでのデザインの限界 Web制作の現場では、「もっと見やすくしてほしい」というクライアントの要望が増えているのではないでしょうか。以前は美しいデザインや動的なエフェクトが重視されましたが、それだけではユーザーを引きつけ続けることが困難です。やはり「読みやすい」、「コンバージョンしやすい」ページで無ければ意味が無いですよね。そこでデザインを大きく変えず、CSSを活用した可読性の向上が重要視されるようになりました。 CSSの可読性を高めることで、ユーザーがストレスなく情報を受け取れるようになり、結果としてクライアントの求めるコンバージョン率の改善にもつながります。重要なのは、ユーザーに快適な体験を提供することです。 改善ポイントの一例～フォントサイズと行間 例えばあるプロジェクトでは、レスポンシブデザインの一環として、フォントサイズや行間を動的に調整しました。デザインは変えずに、です。その結果、ユーザーがどのデバイスから見ても同様に見やすいページを提供できました。 CSS見直しのコツ フォントサイズと行間の見直し小さすぎるフォントや狭すぎる行間は読みづらさの原因です。rem単位を利用したフォントサイズ設定は、レスポンシブデザインに欠かせません。 文字の配色とコントラストの調整見やすい文字色はユーザー体験を向上させます。背景色とテキスト色のコントラストを適切に設定することで、視認性と読みやすさが改善されます。 余白の活用記事やコンテンツ間に十分なスペースを設けることで、視覚的に余裕を持たせることができます。これにより、情報が整理され、伝わりやすくなります。 具体的な書き方（例） 以下に具体的な実装例をご紹介します。 読みやすいWeb体験を提供する方法 CSSを活用し、効果的にユーザー体験を向上させましょう。 article { max-width: 600px; margin: 0 auto; padding: 1rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f9f9f9; color: #444; } h1 { font-size: 2rem; margin-bottom: 0. 5rem; } p { font-size: 1rem; line-height: 1. 6; } 実際に弊社でお受けしたプロジェクトの話ですが、とあるECサイト様の案件では、商品説明のテキストを見やすくするためCSSを見直しました。もともと高かった離脱率が、フォントや色味と行間を改善した結果、コンバージョン率が15%向上しました。また、ユーザーの滞在時間も20%延びました。 改善ポイントの一例～配色とコントラスト 「なんとなく読みにくい」を最初に解消するのが配色です。背景と文字の明度差が足りないと本文が“薄く”見え、リンク色が本文と近いと押せる場所が分かりません。まずは本文・見出し・リンクのコントラストを整え、“読む負担を軽くする”→“行動の迷いを減らす”の順に底上げします。 ※ちなみにお客様によく聞かれるのが、ページのコントラストをチェックするにはどうしたらいいのか？というお話です。弊社はこちらのChromeのツールをお勧めしています。Color Contrast Checker https://chromewebstore. google. com/detail/color-contrast-checker/gbfgefkhkofclanlcgnhlbmfgjjomock? hl=en CSS見直しのコツ コントラストの目安は 本文 4. 5:1 以上／見出し・大文字 3:1 以上（WCAG の一般的目安）。 リンクは本文とはっきり差をつけ、hover/focus で“押せる”状態を一貫。 prefers-color-scheme でライト／ダークを切替え。 強調は太字＋明度差が基本。彩度を上げすぎると疲れます。 具体的な書き方（例） :root { --bg: #fff; --text: #1b1b1b; --muted: #666; --link: #0b66ff; --link-hover: #084bcc; } @media (prefers-color-scheme: dark) { :root { --bg: #111; --text: #e9e9e9; --muted: #aaa; --link: #79a8ff; --link-hover: #a9c8ff; } } body { background: var(--bg); color: var(--text); } small, . meta { color: var(--muted); } a { color: var(--link); text-decoration: underline; text-underline-offset: 0. 15em; text-decoration-thickness: 0. 08em; } a:hover, a:focus { color: var(--link-hover); text-decoration-thickness: 0. 12em; outline: none; } 失敗あるある 彩度を上げすぎて眩しく疲れる配色にしてしまうことがあります。デザインで見ているときはきれいだなーって思っても、やっぱりページで読むとなると違うんです。 :focus の可視化不足でキーボード操作で迷子になることもよくある失敗です。Webアクセシビリティに対応するために、たとえばシフトキーでフォーカスを移動できるようにしたり、エンターやスペースキーで選択ができるようにしますね。でも今どこにフォーカスがあるかを明確に指定することも、キーボード操作の助けになります。 改善ポイントの一例～余白と情報密度 文字の設定が整っていても、段落やブロック間の“間”が詰まりすぎると視線の休む場所がなく、読み飛ばしが増えます。逆に広すぎると散漫で遠く感じます。行長・段落間・コンポーネント間の余白を同じスケール感で揃えると、自然なテンポで読み進められます。 CSS見直しのコツ 行長は 45–75ch を目安（日本語でも ch 基準は有効）。 段落間隔は本文行間の 1. 0–1. 5倍 を目安。 見出しは 上マージン＞下マージン で塊の切れ目を明確に。 8px 系などスペーススケールを変数化して全体統一。 具体的な書き方（例） :root { --space-1: clamp(6px, . 4vw, 8px); --space-2: clamp(10px, . 8vw, 16px); --space-3: clamp(16px, 1. 2vw, 24px); --space-4: clamp(24px, 2vw, 32px); } . article { max-width: 70ch; /* 行長を“文字幅”基準で制御 */ margin-inline: auto; padding-inline: var(--space-2); } p { margin-block: var(--space-2); } h2 { margin-block: var(--space-4) var(--space-2); } ul, ol { margin-block: var(--space-2); padding-left: 1. 1em; } . card + . card { margin-block-start: var(--space-3); } 失敗あるある 余白を広げすぎて本文がファーストビュー外にでちゃう。。。。これはテストを重ねるしかないんですが、特にファーストヴューの変更はサイトの離脱率にも影響しやすいので注意です。 max-width を px 固定にしてデバイス差で崩れてしまう。これも同じくテストで確認が必須です。デバイスによって解像度は全然違うし、パソコンだったらウィンドウサイズの調整もできるますからね。ちなみにこういう時は、ch や clamp といった相対的な幅を計算するCSSを使うと便利です。 改善ポイントの一例～見出し階層と情報設計（目次/段落構造） 長い文章ほど、見出しの階層差（H2/H3/H4）と冒頭の要点が効きます。章の最初に要点を置いて輪郭を見せ、本文は短段落＋箇条書きでテンポよく。目次は“現在地”と“移動先”が分かるデザインにし、迷いなく読み進められる導線を整えます。 CSS見直しのコツ 見出しはサイズ・ウエイト・余白・罫線/下線の組み合わせで階層差を明示。 セクション冒頭に 要点（2–3文）、本文は短段落＋箇条書き中心。 目次リンクの hover/focus で視認性と操作の確信を高める。 見出しパターンをデザインシステム化して記事間のブレを防止。 具体的な書き方（例） h2 { font-size: clamp(22px, 2. 2vw, 28px); font-weight: 700; border-bottom: 1px solid #eee; padding-bottom: . 35em; } h3 { font-size: clamp(18px, 1. 6vw, 22px); font-weight: 700; margin-block: 1. 5em . 75em; } . section-lead { color: #555; font-weight: 500; margin-block-end: . 75em; } . toc a { display: block; padding: . 4em . 2em; text-decoration: none; } . toc a:hover, . toc a:focus { background: #f5f7ff; outline: none; } 失敗あるある H2/H3 の差が小さく階層が判別できない問題。スタイルでどう見せるかは腕の見せ所ながら、H2やH3レベルは結構フラットにみなさん作られることが多くて、画面で見たときにどっちがどっち？みたいなことが結構あります。 目次だけ用意して本文見出しの視認性が弱い問題。これもよくある問題で、目次を最初に置きましょうというのはSEOでもAIOでもよく言われる技ですが、そこに注目しすぎて、ページを最初から読む人のことを忘れちゃう、、、なんてことになりがちです。目次があってもなくても、本文中の見出しはしっかりスタイリングしましょう。 まとめ CSSを使った可読性の改善とUXの最適化は、ユーザーの離脱を防ぐために重要なポイントです。デザイン全体を変えるわけではないので、いまあるページにも比較的適応しやすいんです。見やすいデザインはユーザーに長くサイトにとどまる機会を提供し、結果としてコンバージョン率を向上させます。新しい次のプロジェクトや、いま運用しているプロジェクトでも、ぜひCSSを見直してみてください。 どうやってやるの？やる時間が無いです、、、とお悩みの方は、もちろん弊社までご相談ください！！ 弊社はフロントエンドの専門制作会社ですので、他にもいろいろとアイデアがありますよ！ --- - Published: 2025-09-04 - Modified: 2025-09-04 - URL: https://fastcoding.jp/blog/all/info/designwidth-202509/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: Web業界の動向, 画面幅 2025年9月現在のWebデザインの「最適な横幅」をご紹介します！Statcounterの最新データと37,000件超の制作実績をもとに、今選ぶべきブレイクポイントとファーストビュー設計の最適解を解説 「今、何 px 幅でデザインを作ればいいのか？」―― 皆さんいつも気になりますよね！？ 日々デザインをいただいてHTMLコーディングをしている私たちは、2018年から定点観測で解像度トレンドを追い続けています。37,000ページ超のレスポンシブページ制作を手掛けてきたその経験と Statcounter の月間約 50億 PVデータ（2025年 7月・日本） を突き合わせ、“このデザイン幅で作っておけば間違いなし！” になる幅をお伝えいたしいます。 参照URL：Statcounter Global Stats – Screen Resolution Stats in Japan (2025-07) まずは結論から。2025年9月現在の「推奨ブレイクポイントとファーストビュー早見表」をご覧ください。 ※使ったデータは2025-07になります。。。。まとめるのに時間がかかりましたごめんなさい。 1. 推奨ブレイクポイント & 横幅・ファーストビュー早見表 対象デバイス推奨幅 (px)端末例推奨コンテンツ幅推奨ファーストビュー高根拠*スマホ≦ 767iPhone 15／Pixel 8390px600–650px390×844 17. 0%、393×852 12. 7%タブレット768–1023iPad 10. 9″縦768px700px—PC（ラップトップ）1024–143913–15″ノート1024px（流動可）720px1536×864 8. 4%PC（デスクトップ）1440–1919MacBook Pro 14″1200px730px2560×1440 6. 5%PC（4Kモニタ）≧ 1920外付けFHD／4K1200px＋余白750px1920×1080 25. 7%*Statcounter Japan, 2025-07 月次データよりシェア率が高い物を根拠としています ポイント デスクトップは フルHD (1920×1080) が 25％を占めます。PCはコンテンツ幅 1200px＋全画面背景で対応しましょう。 モバイルは幅 390px 前後が約 3割。SPは 390px 基準への移行を推奨します。 ブレイクポイントは 最大でも上表の 5区分で十分です。シェア 1% 未満の解像度も、対応するなら文章の折り返し確認程度で OKです。 ただ５つもデザインつくるの！ってなると思いますので、実際には PC（ラップトップ）と スマホ でいいと思います！ ちなみにファーストビュー（メインビジュアル）の高さは PC 750px / SP 600–650px を目安にして作成してください。（それより低いのは問題ないと思います） 2. 詳細ー実際どんな画面幅が使われているか デスクトップ：FHD が 4台に 1台を占める 順位解像度シェア主なユーザー像11920 × 108024. 68 %外付けモニタ／ゲーミング PC21536 × 8648. 17 %ミッドレンジノート（15. 6″）32560 × 14406. 31 %デザイナー・開発者の WQHD41366 × 7685. 14 %旧型ビジネスノート51280 × 720 など3. 6 % 前後スティック PC・安価ノート 理由（たぶんです。私の想像です）： 在宅ワークの固定化在宅ワークですとだいたいノートPCが支給されると思うのですが、やっぱり大きい画面で見たい！ってなるとノート PC + 外付け 23–24″ モニタぐらいが標準になってきたんじゃないかと思います。結果、1920 × 1080 が 25. 7% を占有しています（Statcounter 2025-07 Japan）。 旧世代ノートの自然減またパソコン自体も新しくなります。2010年代の主流だった 1366 × 768 は 5. 3% まで後退。同じ形でも新モデルは 1536 × 864 へリプレースされつつあります（↑同リンク参照のこと）。 クリエイティブ層の WQHD シフト弊社のようにWeb制作にかかわるWeb制作／開発現場では 2560 × 1440 が 6. 5% まで急増。FHD ベースのカンプで（且つリキッドデザイン想定）にしておくと、この層にも自然にフィットします（↑同リンク参照のこと）。 モバイル：幅 390px 台がやっぱり多い 順位解像度シェア主な端末1390 × 84415. 89 %iPhone 15 / 14 Pro 系2393 × 85211. 55 %Pixel 8・Galaxy S243375 × 6676. 12 %iPhone SE (第2/3世代)4412 × 9155. 81 %Xperia・OPPO ハイエンド5375 × 8125. 77 %iPhone 13 mini / 12 Pro 理由： iPhone 14/15 Pro 系は、390 × 844 が 16. 2%、393 × 852 が 12. 1% と、合わせて約 3割を独占（Statcounter 2025-07 Japan）。 Androidについては、Pixel・Galaxy の最新モデルも 390 – 393px 帯を採用。iOS/Android 共通設計がしやすく、390px を基準にすると余白・改行がズレにくい。 ガラケー系解像度のフェードアウト375 × 667（旧 iPhone SE）でも 6. 1% に縮小。可読性・運用コストの観点から “375px 専用カンプ” は不要。 制作のポイント 考察結果制作でのアクションFHD が 25%＋ WQHD 6. 5%カンプは “コンテンツ幅 1200px＋全画面背景” を基本にする幅 390px 台が 28% 超スマホカンプは 390px 基準、375 & 430px は余白で調整古い 1366 × 768 の低下文章の折り返しチェックのみ、専用レイアウトは省略 主要デバイスは “FHD／390px” の二極化。まずはこの 2幅で完璧に表示されることが、ユーザーの満足度と保守コストのバランスが最も良いポイントだと思います。 3. 今後 1年の予測 & 制作への影響（あくまで想定） 今後の予測 要因影響しそうな幅背景ソース制作への影響iPhone 17（仮）登場2025 秋予定430px 前後モックアップ流出で筐体がわずかに大型化との報道 Applealmond 2025-03-17 アップルジン - iPhoneの使い方と便利な機能紹介430px 帯が上位入りする可能性。スマホ用余白の上下限を 375–432px に拡張しておく4K ノートの普及3840 × 2160市場調査で「2025→2030年に年平均 +7%」と予測 360iResearch 2025-06 360iResearch画像は DPR=2 前提。上限 1920px → 2560px にリサイズし直しリモートワークがもっと定着1920px 帯の微増モニタ需要が法人・個人ともに多いコンテンツ幅1200px＋全画面背景という現在の設計パターンは当面有効 来期までにやっておくべき 3つのこと コンテンツ幅は 1200px 固定＋最大幅 1440px を CSSで調整する スマホ用カンプを 390px 基準に刷新375 / 393 / 430px は左右パディングで調整。可変フレックスで文字折り返し確認を。 画像アセットの再生成srcset を 390 / 780 / 1170 / 2560px の 4段階に。メインビジュアル画像は 2560px WebP → 50% 品質で 300KB 以内を目標に。 :root { --max-container: 1200px; } . wrap { width: min(100%, var(--max-container)); margin-inline: auto; } @media (min-width: 1440px){ . bg-wide { width: 100%; } } これで FHD～WQHD～4K いずれでも違和感なく中央寄せが維持できます。 まとめ ブレイクポイントは 多くて5区分で十分：≦767 / 768–1023 / 1024–1439 / 1440–1919 / ≧20px ファーストビュー高の目安：PC 750px ／ SP 600–650px 半年後のチェックポイント：iPhone 17 の解像度確定と 4K ノート比率の再集計 常に最新に合わせるのは難しいですが、１～２年先でも表示に問題が内容なデザイン幅を心がけたいですね。定点観測、また更新したらこのブログでご案内します！次回もお楽しみに！ --- - Published: 2025-07-22 - Modified: 2025-07-22 - URL: https://fastcoding.jp/blog/all/frontend/excel-by-javascript/ - カテゴリー: React, Vue.js, システム開発 - タグ: JavaScript, 帳票 Excel業務をWebアプリ化したい企業必見！本記事では“Excelライク”な操作感をWebで再現できる無料OSSライブラリ3選（AG Grid・Tabulator・JSpreadsheet）を徹底比較。CDNだけで動く最小サンプル付きで、社内PoCにすぐ使える内容です。 社内業務を Excel ベースで運用してきた企業では、共同編集や権限制御、パフォーマンスの壁に突き当たり、「そろそろ Web アプリに移行しよう」 という機運が高まっています。しかし、長年慣れ親しんだ Excel の操作感を損なうと現場の反発を招きがち。 そこで本記事では、“Excel ライク” な UI を Web 上で再現できる 無料のデータグリッド OSS を厳選して紹介します。しかも CDN を読み込むだけで動かせる最小サンプル付き。まずは PoC を爆速で立ち上げ、実際の社内データを流し込んでフィット感を確認してみてください。 1. “Excelライク” な操作感を Web で実現できる OSS ライブラリ 3 選 まずは “Excel ライクな操作感” を実装するうえで 完全無料（MIT など寛容ライセンス） かつ 主要フレームワークで導入しやすい OSS ライブラリを 3 つに絞り込みました。下表では 公式サイト へのリンクとともに、各ライブラリが公式にサポートしている 対応フレームワーク（ラッパー／ビルド済みパッケージの有無）を明示しています。 属性 / ライブラリAG Grid CommunityTabulatorJSpreadsheet CE公式サイトhttps://www. ag-grid. com/https://tabulator. info/https://jspreadsheet. com/対応フレームワーク¹JavaScript / React / Vue / AngularJavaScript / React / Vue / Svelte / AngularJavaScript / React / Vue / Angular一言キャッチ“全部入り” ヘビー級軽快 × 高機能の中量級Excel 互換 UI 特化無料版の主な強み仮想スクロール＆無限スクロールで数万行も滑らかVirtual DOM で 100 k 行超 でも軽快 & レスポンシブ折り畳みセル結合・オートフィル・数式 がそのまま使えるこんなときに◎売上・在庫など 大規模データ を高速表示したい顧客・請求など 中規模表 を手早く作りたい予算・プロジェクト表を “ほぼ Excel” で編集したい上位互換（有償）AG Grid Enterprise へライセンスキー追加でピボット／チャート／Excel Export などを解放―（MIT ライセンスのみ・有償版なし）JSpreadsheet Pro へバンドル差し替え＋キー追加で XLSX 入出力／チャート 等 各ライブラリは MIT ライセンス（または同等の寛容ライセンス）で、商用 SaaS でも 追加費用ゼロ で導入できます。また、AG Grid と JSpreadsheet には、より高度な機能を備えた有償版が存在 しますが、本記事では無料版で出来る範囲を中心に比較します。 この表を踏まえ、次節では Excel 近似度や大規模データ耐性 などの比較チャートを示しながら、各ライブラリをもう少し掘り下げていきます。 2. ひと目で分かる簡易比較チャート ここでは、3 つのライブラリを “Excel 近似度”“大規模データ耐性” など 5 つの軸で横並びに可視化 します。 評価軸AG GridTabulatorJSpreadsheetExcel 近似度大規模データ耐性CDN だけで動く手軽さ○◎◎国際化（i18n）◎ (公式 i18n)○◎コミュニティ規模 (GitHub Stars 2025/07)14k7k6. 9k Excel 近似度 ... セル結合・数式・フィルタ・オートフィルなどの備え具合。 大規模データ耐性 ... 10 万行級を仮想スクロールでストレスなく描画できるか。 CDN 手軽さ ... タグだけで最小サンプルが動くまでの手順数。 : 圧倒的に強い／◎: 公式サポートあり／○: 問題なく対応／: 部分的に弱い 3. CDN + Vanilla JS クイック導入ガイド 各ライブラリについて、ビルド環境を用意しなくても “CDNタグをコピペするだけ” で動く最小サンプルを作成してみました。いずれも ライブラリ（JS／CSS）の読み込み テーブルを描画するコンテナ要素の配置 共通データセットを渡して初期化の 3 ステップで完了。 レイアウトや操作感の違いを“横並び”で体験できるよう、サンプルデータは（10 行 × 4 列）の共通の日本語顧客マスタを使用します。 3‑1. AG Grid Community 最小サンプル AG Grid Quick Start Sample /* === 共通データセット（日本語・メール列なし） === */ const customers = ; /* === 列定義 === */ const columnDefs = ; /* === Grid オプション === */ const gridOptions = { rowData: customers, columnDefs, defaultColDef: { sortable: true, resizable: true } }; /* === Grid を生成 === */ const gridDiv = document. querySelector('#myGrid'); agGrid. createGrid(gridDiv, gridOptions); ポイント CDN 1 行で完結公式サイトの Quick Start で例示している ``（AllCommunityModules バンドル）を 1 行読み込むだけで、Community 版の全機能がそのまま使えます。グリッドの見た目をカスタマイズしたい場合は、あわせて好みの テーマ CSS（例：ag-theme-quartz. css や ag-theme-balham. css）を に追加してください。さらにバンドルを最小化したい・ビルド環境（npm）に切り替えたいときだけ、個別モジュールを ModuleRegistry. registerModules で手動登録する方法を検討すれば十分です。 コンテナに高さを指定する必須ルールグリッドは親要素の高さをそのまま使うため、 など固定 or フレックスで高さを与えないと何も表示されません。Quick Start でも最初に強調されています。 gridOptionsを渡して一回呼ぶだけ行データ（rowData）、列定義（columnDefs）、共通列設定（defaultColDef）を gridOptions にまとめ、createGrid を 1 回呼べば初期化完了──これが基本パターンです。 valueFormatter は“見た目専用”の書式化フック売上列を日本語ロケールで 3 桁区切りに整えるために使っています。セルの生データ（数値）は変わらないので、並べ替え・集計ロジックに影響しません。 Enterprise へのアップグレードは“スクリプトとライセンスキーを足すだけ”Community で書いたコードを変更せず、Enterprise 用スクリプトを追加しライセンスキーを登録すれば、ピボットやチャートなどの有償機能がそのまま有効になります。 3‑2. Tabulator 最小サンプル Tabulator Quick Start Sample /* === 共通データセット（日本語・メール列なし） === */ const customers = ; /* === ③ Tabulator を初期化 === */ new Tabulator("#customers-table", { layout: "fitColumns", // 列幅を自動フィット data: customers, // 行データ columns: }); ポイント CDN 2 行 だけで Tabulator を導入（CSS → JS の順）。 layout:"fitColumns" を指定すると、ウィンドウ幅に応じて列幅が自動調整されます。 売上列はビルトインの moneyフォーマッタを使い、precision:0 で小数点を省略。 さらに並べ替え・フィルタなどを付けたい場合は、公式ドキュメントの column オプションに追記すれば OK です。 3‑3. JSpreadsheet CE 最小サンプル JSpreadsheet CE v5 Quick Start /* === 共通データセット（日本語・4 列） === */ const customers = ; /* v5 は “行=配列” 形式を推奨 */ const matrix = customers. map(r => ); /* === v5 API：worksheets 配列で初期化 === */ jspreadsheet(document. getElementById('sheet'), { worksheets: } \] }); ポイント 3 桁区切りは mask でワンライナーmask:'#,##0' を指定するだけで 120000 → 120,000 表示。内部値は数値のままなので計算・並べ替えに影響なし Pro 版へは“バンドル＋ライセンスキー差し替え”だけCE で試して足りなければ、同じ v5 系の Pro バンドルと jspreadsheet. setLicense('') を追記するだけで XLSX 入出力やチャートなどが解放されます 4. もう少し欲張るなら？拡張のヒント 前の章で例示したシンプルな構成以外にも、各ライブラリでは下記のような機能を追加することができます。詳細はここでは割愛しますが、「こんなこともすぐ出来る」という方向感だけを押さえておいてください。 AG Grid Community 行グループ化＋自動集計 ... ... 列をドラッグ＆ドロップで国別などに折りたたみ クイック検索バー ... ... 入力した文字を即時フィルタ テーマ切り替え／SCSSカスタム ... ... 自社カラーに合わせた配色が数行で可能※ 高度なピボットやチャートが必要になったら Enterprise 版へ無改修で移行可。 Tabulator レスポンシブ列折りたたみ ... ... スマホ幅では列を「＋」ボタンで展開 インライン編集＋バリデーション ... ... 必須チェックや数値範囲を declarative に指定 リモートデータ＆サーバーページング ... ... 10 万行でもバックエンド連携で軽快動作 JSpreadsheet CE (v5) Excel ライクな数式セル ... ... =SUM(... ) など本家同様に利用 オートフィル＆ドラッグコピー ... ... ハンドルを下へ引くだけで一括入力 固定行・列／右クリックメニューのカスタム ... ... “Excel っぽさ” をさらに強化※ XLSX 入出力やチャートが欲しくなったら Pro 版にライセンスキーを足すだけ。 各ライブラリ、他にも機能はたくさんあるのでぜひ確認してみてくださいね。 まとめ 無料ライブラリでも、顧客管理・売上集計・プロジェクト進捗など“Excel運用”をそのまま Web 化できる時代です。最小 PoC → 小さく本番導入 → 必要に応じて拡張 というステップで、ライセンス費を抑えつつスムーズに社内展開してみてくださいね。 --- - Published: 2025-07-10 - Modified: 2025-07-08 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide08/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション 「デザインどおりに作ったのに、なぜ崩れる？」──実装現場で繰り返し起きる“UIの落とし穴”を、崩れやすいパターン別に解説。カードレイアウト、テーブル、タブ、モーダルなど代表的なUIを題材に、設計時に注意すべきポイントを実例と共に紹介します。 はじめに：見た目は整っていても、実装で崩れるUIの落とし穴 Webディレクターの方にとって、Figmaなどのデザインデータがしっかり整っていれば「これで大丈夫」と思えるかもしれません。ですが、私たち実装者の現場では、「完璧に見えるUIでも実装してみたら崩れた」ということが少なくありません。 なぜそんなことが起きるのか？それは、実装は静的なデザインを動的な仕組みに変換する作業だからです。つまり、可変するテキスト量やデバイス幅、ユーザーの操作パターンなど、デザイン上は見えていない不確定要素に対処する必要があるということです。 たとえば―― テキストが長くなっただけでボタンが折り返してしまう モバイルで表が画面外にはみ出してしまう タブのラベル数が増えて、レイアウトが破綻する こうした事態を、私たちは日々“崩れ”として体験しています。 この記事では、そうした「崩れやすいUIパターン」をランキング形式で紹介しながら、設計段階で注意すべきポイントや、実装者からの“事前に伝えてもらえると助かること”をご紹介します。 崩れやすいUIパターンTOP5とその落とし穴 1位：カード型グリッドレイアウト どこでもよく使われるUIですが、実は非常に崩れやすい構造の一つです。理由は、テキスト量や画像サイズ、カード数の違いにより、高さや並びが不揃いになること。 よくある崩れの原因： カードごとにテキスト量が異なり、高さがバラバラに align-items: stretch 等の指定がなく、余白が不統一に PCとスマホで列数が変化すると、中央寄せや整列が乱れる 設計時に意識したいポイント： テキストが2行・3行になったケースを見ておく 高さ揃えの仕様（そろえる or 自由）を明示する スマホ時の並び（1列 or スクロール）も設計しておく CodePen Embed Fallback 2位：テーブルレイアウト（特にスマホ対応） 見やすさ・整合性の面で重宝されるテーブルも、レスポンシブ設計では要注意パーツです。 よくある崩れの原因： 列数が多く、スマホでは内容が潰れて見切れてしまう display: table系のレイアウトが横スクロール非対応で破綻 設計時に意識したいポイント： 「この列は最小幅何pxまでOKか？」を決めておく 折り返す？スクロールにする？を明記しておく 可能であれば「スマホ用テーブルの代替案」も用意 CodePen Embed Fallback 3位：タブ切り替えUI 「機能が多くないから大丈夫」と油断されがちですが、ラベルや数の変化で崩れやすい典型例です。 よくある崩れの原因： ラベルが長くなると、タブ同士が被る or 折り返す タブが2個 → 5個などに増えたときのレイアウトが未想定 アクティブ時の装飾がデフォルトと差がなさすぎる 設計時に意識したいポイント： 「最長ラベルは●文字くらい」と想定してデザイン 2個〜5個程度のパターンでレイアウトを確認 アクティブ状態の見分けやすさも重要 CodePen Embed Fallback 第4位：ボタン横並び（例：キャンセル／送信） よくある崩れの原因： ラベルの文字数が異なることでボタンサイズが揃わない 画面幅が狭くなると、ボタンが折り返される／片方が2行になる レイアウトが「中央揃え」「右寄せ」などでズレることも 一見シンプルなUIですが、「ラベルの長さ」と「レスポンシブ対応」によって、地味に崩れやすいポイントです。 設計時に意識したいポイント： 「ボタン幅は固定？ コンテンツサイズ？」の方針を決めておく モバイル時は縦並び切り替えも想定する 配置（左寄せ／中央／右寄せ）も指定しておくとスムーズ CodePen Embed Fallback 第5位：モーダル・ダイアログ よくある崩れの原因： 長文対応が不十分：コンテンツが長くなると、モーダル内で収まりきらず、はみ出してしまうことがあります。 スクロール不可：モーダル内でスクロールができない設計の場合、全ての内容を表示できず、ユーザーが情報を見逃す可能性があります。 画面サイズオーバー：特にスマートフォンなどの小さな画面では、モーダルが画面サイズを超えてしまい、操作が困難になることがあります。 設計時に意識したいポイント： 最大サイズの設定：モーダルの最大幅や最大高さを設定し、画面サイズに応じて適切にリサイズされるようにします。 スクロールの許可：モーダル内でコンテンツが収まりきらない場合、内部スクロールを可能にして、全ての情報にアクセスできるようにします。 レスポンシブデザイン：デバイスの画面サイズに応じて、モーダルのレイアウトやサイズが適切に調整されるように設計します。 CodePen Embed Fallback このコードでは、モーダルが画面サイズに応じて適切に表示され、内容が多い場合でもスクロール可能です。また、背景をクリックすることでモーダルを閉じることができます。 第3章：なぜ崩れる？ 実装者が感じている“盲点” デザインデータが整っていても、実際の実装段階でUIが崩れるケースは少なくありません。その原因の多くは、デザインが「静的な状態」しか考慮しておらず、実際の使用状況や動的な要素が想定されていないことにあります。 実装者が直面する課題 データの可変性: 実際のコンテンツは、デザイン時に想定された文字数や画像サイズと異なる場合があります。 デバイスの多様性: スマートフォンやタブレットなど、さまざまな画面サイズでの表示が求められます。 ユーザーの操作: ユーザーの予期しない操作や入力により、UIが崩れる可能性があります。 これらの要素を考慮せずにデザインを進めると、実装段階での手戻りや修正が増え、プロジェクト全体の効率が低下します。 第4章：ディレクターが意識しておくと良い3つの視点 UIの崩れを防ぐためには、ディレクターが設計段階で以下の視点を持つことが重要です。 1. 要素の変動を想定する 「この要素は増減する可能性があるか？」「ユーザーの操作によって状態が変わるか？」といった問いを持ち、動的な変化を設計に反映させることが求められます。 2. 複数パターンでの検証 文字数の多い場合や少ない場合、異なるデバイスでの表示など、さまざまなシナリオでレイアウトを確認し、柔軟な設計を心がけましょう。 3. 最悪のケースを共有する 「最も崩れやすい状況ではどのように表示されるべきか？」といった最悪のケースを想定し、その対応策を実装者と共有することで、予期せぬトラブルを未然に防ぐことができます。 第5章：まとめ ─ 崩れやすいUIこそ、設計の丁寧さが求められる UIの崩れは、ユーザー体験を損なうだけでなく、ブランドイメージや信頼性にも影響を与えます。特に、よく使われるUIパターンほど、細部までの設計が求められます。 ディレクターが「崩れやすいUI」の特徴を理解し、設計段階での配慮を行うことで、実装者との連携がスムーズになり、品質の高い成果物を提供することが可能となります。 今回で、「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」シリーズは一旦終了です。 これまで全8回にわたって、実装現場の視点からWebディレクターの皆さまに向けて「設計と実装の間にあるギャップ」や「よりスムーズな制作進行のための工夫」をお伝えしてきました。 どれも日々の現場で実際に感じている課題や工夫ばかりです。もし少しでも、「実装者がなぜそれにこだわるのか」が伝わっていたら嬉しく思います。 今後も、ディレクターと実装者がより良い形で連携できるよう、現場からの視点を発信していければと思います。 ご覧いただき、ありがとうございました！ --- - Published: 2025-07-07 - Modified: 2025-07-03 - URL: https://fastcoding.jp/blog/all/jquery/responsive-timeline-by-css/ - カテゴリー: React, Vue.js, UI/UX, HTML/CSS, jQuery タイムラインUIをライブラリなしで実装する方法を解説。縦型から左右交互の横型レイアウトへの切り替え、レスポンシブ対応、スクロールアニメーションまで、実案件でそのまま使えるHTML＋CSSの具体例を紹介します。 タイムラインUI、実は「ライブラリ不要」でいけます 制作現場で「タイムライン風に表示してほしい」という要望は、実はかなり多くありませんか？企業の沿革、サービスの歩み、進行中のプロジェクトなど、時間の流れをビジュアルで伝えるUIとして、タイムラインはとても有効です。 私も過去に何度もタイムラインを作りましたが、実はJavaScriptなし、CSSとHTMLだけで実装可能です。レスポンシブ対応も含めて、工夫次第でかなりリッチな見た目を構築できると感じています。 今回は、私が実務で構築したタイムラインUIのパターンを元に、 基本の縦型構造 交互に左右に並べる横型の切り替え レスポンシブ対応 アニメーションの工夫 といったポイントを順に紹介していきます。 1. タイムラインUIの用途と魅力 活用される場面が多い タイムラインUIは、以下のような場面でよく活用されます： 企業の沿革・ヒストリー プロジェクトの進捗状況 採用サイトの流れ紹介（選考ステップなど） イベントの開催スケジュール サービスのローンチ履歴 など つまり、「時間の流れに沿って、順を追って情報を伝えたい場面」に非常に適しています。 ライブラリなしでも十分実用的 よく見かけるJSライブラリ（AOS. js や Timeline. js など）を使えば簡単にできますが、 カスタマイズが効かない ページ速度が気になる デザインガイドラインに合わない といった理由から、**ライブラリなしで一から組むケースも少なくありません。 実際、HTMLとCSSの基本要素（Grid / Flexbox / 擬似要素）を組み合わせれば、十分にタイムラインは表現可能です。 実務に向く理由 特徴メリット構造がシンプルコーディングの学習・保守が容易視認性が高い時系列を直感的に把握できるアニメーションとの親和性が高いフェードイン／ズーム／移動など、視覚効果が付けやすい 次章では、まずもっとも基本となる“縦型タイムライン”の構造とCSSの実装方法について詳しく解説します。 2. 基本構造：HTMLとCSSで作る縦型タイムライン タイムラインUIを実装するうえで最初に押さえたいのが、縦型のベース構造です。これだけでも情報の時系列が明確になり、シンプルながら非常に視認性の高いUIが構築できます。 CodePen Embed Fallback このように、timeline-item を時系列順に並べるだけでOK。各項目は日付と内容に分けておくと、CSSでの装飾がしやすくなります。 主な工夫ポイント： 構成役割border-leftタイムラインの軸線を表現::before軸線上のドット（ノード）を疑似要素で生成margin-left / padding-left軸からの余白を調整 カスタマイズのポイント ::before の色やサイズを変えると、節目の強調が可能 :nth-child(even) で背景色を交互にするなど、視認性向上も簡単に実現 コンテンツ部分に box-shadow や border をつけても効果的 このように、縦型タイムラインは極めて少ないHTMLとCSSで実現できます。続いて、この縦型構造をベースに、PCで左右交互に表示する横型タイムラインへの展開方法を解説します。 3. レスポンシブ対応：画面サイズに応じたレイアウトの切り替え 縦型タイムラインはシンプルで使いやすいですが、PCのように横幅がある環境では“左右交互に並べる”ことで視覚的に動きが生まれます。ここでは、スマホでは縦、PCでは左右交互の横型に切り替える方法を紹介します。 HTML構造はそのまま再利用 第2章で使ったHTML構造のままでOKです。CSSで見た目だけ切り替えるため、HTMLは1パターンで済みます。 PC表示時に左右交互に並べるCSS CodePen Embed Fallback このCSSの意図とポイント 対応内容説明width: 50%タイムライン項目を左右に半分ずつ分割:nth-child(odd/even)偶奇で表示位置・整列方向を切り替えtimeline::before中央の縦線を追加（軸線）::before の位置切替左右のドット位置も合わせて調整 実務での注意点 左右に分ける際は box-sizing: border-box を指定しないと、横幅オーバーの原因になる テキストが多い場合、片方に偏らないよう min-height や flex 調整も検討 アニメーション追加時は transform: translateX などを使うと破綻しにくい このように、同じHTML構造をCSSの制御だけでレイアウト切り替えすることで、メンテナンス性と柔軟性を両立できます。 4. デザインの工夫：アニメーションと視覚的な強調 タイムラインは情報を整理するだけでなく、視線の誘導やインパクトのある見せ方にも工夫ができます。この章では、実務で使いやすいアニメーションやデザイン強調テクニックを紹介します。 フェードインアニメーション（スクロール時） IntersectionObserverを使わず、CSSだけでの実装も可能になってきましたが、ここでは軽量なJSによるフェードインの定番パターンを紹介します。 CodePen Embed Fallback ポイント： 初期状態で opacity: 0、下から浮かせておく スクロールで表示領域に入ったら visible クラスを付与 ドットの色や大きさでフェーズを分ける CodePen Embed Fallback プロジェクトの重要マイルストーンや切り替え点をドットの色やサイズで強調できます . completed, . future, . milestone などのクラスで使い分けると視認性が上がります 左右交互のアイコン配置（擬似要素応用） 各アイテムの前にアイコンを表示し、左右交互に切り替えることで、見た目に変化をつけながら情報の意味も伝えられます CodePen Embed Fallback nth-child を使って左右で left / right の位置を切り替え フォントアイコン（Font Awesomeなど）も応用可能 ここまでで実現できるUIの特徴 機能方法項目の出現アニメーションJS（IntersectionObserver or 1回限り）ドット強調・カテゴリ分けクラスでスタイル切り替え左右交互にアイコン表示擬似要素＋nth-child 5. 実践向けデモとコード解説 それでは、前章までの要素をすべて組み込んだ実務向けのレスポンシブタイムラインUIをご紹介します。 縦型から左右交互の横型にレスポンシブ対応 スクロールでふわっと出てくるアニメーション カテゴリ別にドットの色を変更 CodePen Embed Fallback カスタマイズ例 . timeline-content に background をつけるとカード風に 各ノードにアイコン（SVG / Font Awesome）を表示することで用途を明確化 アニメーションを fade, slide, zoom などに切り替えて動きを変化 このように、HTMLとCSSをベースに最小限のJSで実用的なタイムラインUIを作ることができます。実案件でも十分に活用できる構成です。 6. まとめ：HTMLとCSSだけでも魅せられるタイムラインUI タイムラインUIは「動きがあるからJavaScript前提」と思われがちですが、実はCSSとHTMLだけでほとんどの表現が可能です。 今回紹介した構成では、 縦型 → 横型へのレスポンシブ切り替え 擬似要素による軸線・ドットの装飾 スクロール連動のアニメーション追加 項目ごとの強調やアイコン配置の工夫 といった多様なニーズに対応でき、実務案件でも“使える構成”としてそのまま導入できます。 CSS Gridや論理プロパティ、IntersectionObserverのような軽量JSを併用することで、「ライブラリなし・保守性重視・デザイン柔軟」なUI設計が十分可能になります。 これにて、「このデザイン、どうコーディングする？」シリーズは一区切りです。全8回を通じて、現場で実際に遭遇するCSS設計の課題を、シンプルかつ実践的なアプローチで解決する方法を紹介してきました。 どの記事も「現場で本当に使えるか？」を軸に構成していますので、今後の案件で「あのテクニック使えそう」と思い出していただけたら嬉しいです。 ご愛読ありがとうございました！ --- - Published: 2025-07-03 - Modified: 2025-07-03 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide07/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション 「見た目通りに組むだけ」で終わらせない実装の極意を解説します。ボタンのhover設計やカードのクリック領域、フォームの入力補助まで、UXを底上げする細かな工夫を具体例で紹介。ディレクターにこそ知ってほしい、コーディングの裏側にある“効くロジック”が満載です。 1. はじめに：「ただ組んでる」だけじゃありません フロントエンド実装を専門に 10 年以上、数百ページをコーディングしてきました。その中で繰り返し直面するのが―― 「見た目はシンプルなのに、どうしてそんなに時間がかかるの？」 という質問です。 一見、四角を並べて文字を置いただけに見える HTML/CSS でも、実際には ユーザー体験・アクセシビリティ・将来の拡張性を支えるロジック を仕込んでいます。タグの選択一つでクリック可能範囲が変わり、見出し階層の誤りが SEO や読み上げに影響し、フォームの aria 属性不足がユーザー離脱を招く──そんな“コードの裏側”はデザインだけでは見えません。 本記事では ボタン・カード・フォームといった日常的なUI を例に、「ただ見た目を再現する」だけでは済まない HTML/CSS 設計の舞台裏を解説します。 2. ボタン1つにも詰まっているロジックとは？ 見た目は「四角＋文字」──それだけに思えるボタンでも、実装段階では次のような判断と設計が不可欠です。 配慮ポイントなぜ重要か実務でのインパクト要素選定： か かリンク遷移かフォーム操作かで、キーボード操作・SEO・読込優先度が変わるCTA を に変更した結果、検索流入が 8％向上した事例状態設計：hover / active / disabled視覚フィードバックはクリック率と直結。disabled は誤操作防止PC は hover、スマホは active を強調して CVR 改善キーボード/スクリーンリーダー対応tabindex と aria-label がないと操作不能・意味不明になる公共系サイトで WCAG チェックを一発クリアタップ領域の最適化padding 最小 44px 相当でスマホ誤タップを防止モバイルの再入力率を 12％削減ローディング／多重クリック対策aria-busy と重複送信ブロックで UX とデータ整合性を守る決済ボタンの二重送信バグをゼロに抑制 CodePen Embed Fallback この短いコードの裏で、 要素の意味づけ（リンクか操作か） 操作フィードバック（hover／active） 視覚外ユーザーへの配慮（aria） 多重送信ガード（disabled／busy） といった複数のロジックが連動しています。「ただの四角に文字を置いただけ」では、クリック率・アクセシビリティ・トラブル耐性のすべてが落ちてしまう――だからこそ、HTML/CSS にも設計が必要なのです。 3. 一覧表示の“見た目の並び”に隠れた構造設計 カードやリストが横一列に並んでいるだけ──そう見える UI でも、実装時には「構造」「意味」「操作性」を同時に満たす設計が求められます。 見た目の裏にある設計なぜ重要か実際のベネフィット意味づけされたタグ構造 / / 読み上げ順序や SEO クローラの理解を助ける大手メディア案件で、カードを化しただけでリッチリザルト表示率＋10％見出し階層 (~) の統一視覚障がい者のジャンプ読み・検索エンジンの理解を最適化企業ブログで離脱率を 6％削減リンク範囲の調整カード全体リンク / 部分リンクスマホのタップ精度とアクセシビリティ基準を両立EC サイトで「誤タップ→戻る」率を半減レスポンシブで崩れない CSSgrid-auto-flow・aspect-ratioテキスト量・画像比率・件数変動でも破綻しないアプリ紹介 LP で多言語展開時の再調整コストを 1/4 に圧縮 CodePen Embed Fallback ポイント タグで意味を示す：＝リスト要素、＝独立コンテンツ。これだけで読み上げの“まとまり”が格段に良くなります。 クリック領域のUX：カード全体をリンクにするか、ボタンだけにするかでタップ体験が変わります。 可変件数でも崩れない CSS：auto-fit＋minmax で「3→5枚」「横長→縦長」になってもガタつかないレイアウトを確保。 4. フォームパーツのUX／アクセシビリティ対策 フォームは売上・CV を左右する最重要 UI。見た目が同じでも、細部の設計で 完了率が大きく変わります。 チェックポイントユーザー体験への影響 で入力と見出しを関連付けタップ範囲拡大・スクリーンリーダー読み上げ向上必須表示は色だけでなくアイコンや文言で補完色覚多様性に対応し、ルールが伝わるinputmode・autocomplete の設定スマホキーボード最適化で入力ストレス削減aria-live="polite" でエラーメッセージを読み上げ視覚に頼らないユーザーにも即時フィードバック CodePen Embed Fallback 5. コードの裏側で効いている “小さな工夫” 画面は同じでも、コードにひと工夫あるだけで印象は大きく変わります。ここでは私が現場で「これは効いた」と感じた CSS 設計のささやかな工夫をご紹介します。 伸び縮み上手なレイアウトづくり 最近お気に入りなのが、縦に flex、横に grid を組み合わせたレイアウト。カード数やタイトルの長さが変わっても、行そろえと列幅のバランスが自然に保たれるので、「文字が増えた途端ガタつく」という心配がぐっと減りました。 ルールのある “状態クラス” is-active や has-error など、プレフィックス付きのクラスを最初に決めておくと、後日 JS と組み合わせるときにも迷いがなくなります。「ここは何となく active」と書かれていた昔のコードを思い出すと、 この小さなルールのありがたみを感じます。 “動き控えめ” というやさしさ 派手なアニメーションが歓迎されないユーザーもいます──@media (prefers-reduced-motion) を挟んでおくだけで、 ぐらぐら揺れる演出を静かなフェードに差し替えられます。そのさりげない気遣いが、「見ていて疲れないサイト」をつくる鍵になりました。 カラーや余白を“ひとまとめ”に ブランドカラーの変更やダークモード追加の相談が来ても、色やスペーシングを CSS 変数でまとめておけば、慌てる必要はありません。@layer でスタイルを整理しておくと、 どこを触れば何が変わるか がひと目でわかり、 修正がちょっとした模様替え気分で済みます。 こうした小さな工夫は、リリース後の スピード・安定感・心地よさ をじわりと底上げしてくれます。“ただ組む” だけでは生まれない価値が、コードの奥にそっと仕込まれています。 6. ディレクターに知っておいてほしい 3 つの視点 6-1. 「見た目が合っている」だけでは 100 点にならない 私たちがコードを書くとき、チェックしているのは 視認性（UI の見やすさ）・発見性（検索エンジンやリンクのたどりやすさ）・可読性（スクリーンリーダーでの読み上げ） の３要素です。レビューの際に 「この３つの観点で問題ないか？」 と一言添えていただけると、完成後の微調整がぐっと減ります。 6-2. 最初の“ちょっとした整理”が未来の改修コストを救う 早く仕上げたいときほど、CSS やクラス命名を場当たり的に増やしたくなります。しかし、最初に 「この役割のクラスはここ」「状態は is-●●」 とルールを決めておくだけで、あとから色を変えたり機能を追加したりするときに「全部バラバラで直す場所が見つからない... 」という事態を避けられます。 6-3. 利用シーンを共有すると、コードが“気が利く”ようになる たとえば―― デバイス：モバイル中心？ PC も同じ比率？ 操作方法：タッチ？ キーボード操作も多い？ 通信環境：オフラインもあり得る？ こういった背景を事前に伺えると、実装側で 「軽量アニメにして読み込みを速くしよう」「キーボードフォーカスの見やすさを強化しよう」 といった工夫を組み込みやすくなります。「この部分は CMS で増減するかも」「将来多言語化する予定あり」などの一言も、のちの手戻りを大きく減らすヒントになります。 7. まとめ：「目立たないけど、効いてる」フロントエンドのロジック HTML/CSS は“ただ並べる”作業ではありません。意味づけ・状態管理・アクセシビリティ・パフォーマンスを同時に満たす情報設計の層があってこそ、Web 画面はビジネス価値を発揮します。 ディレクターがこうした“裏側の設計”を理解し、意図を共有してくれることで、実装者の力は最大限に引き出され、プロジェクト全体の品質とスピードが高まります。 次回の Vol. 8 では、「崩れやすい UI トップ 5 ─ 実装現場で多発するトラブルと設計の回避ポイント」をお届けします。実案件で繰り返し発生するレイアウト崩れのパターンをピックアップし、原因と “先回り設計” のコツを具体的に解説します。 どうぞお楽しみに！ --- - Published: 2025-06-27 - Modified: 2025-06-27 - URL: https://fastcoding.jp/blog/all/frontend/css-writing-mode-tategaki/ - カテゴリー: React, Vue.js, UI/UX, HTML/CSS スマホ向け縦書き表現のニーズが増える中、CSSだけで自然な縦書きを実現する方法をご紹介します。writing-mode・text-orientation・論理プロパティを組み合わせることで、縦横どちらでも崩れないレイアウトが可能になります。レスポンシブ切り替えのポイントや実務での注意点も解説しています。 縦書き、そろそろ避けて通れなくなってきました 以前は「Webは横書き前提」が常識でしたが、最近は日本語デザインでの縦書きニーズもちらほら見かけるようになりました。特にFigmaなどで、「スマホでは縦書きで見せたい」といった指示があると、ちょっと焦りますよね。 私も初めて縦書きを実装したときは、思ったよりもCSSだけで対応できることに驚きました。今回はそのときの知見を元に、「writing-mode + text-orientation + logical properties を活用して、縦横の切り替えをスマートに行う方法」を紹介します。 結論：writing-mode + text-orientation + 論理プロパティでほぼ対応可能 まず結論から言えば、縦書き⇔横書きの切り替えは、CSSだけで充分可能です。 主なポイントは以下の3つ： . writing-block { writing-mode: vertical-rl; text-orientation: mixed; margin-block: 1em; padding-inline: 1rem; } writing-mode: テキストの流れを縦に切り替える text-orientation: 日本語と英数字のバランスを整える margin-block, padding-inline: 縦でも横でも方向を意識せず余白を保てる なぜこの3点が鍵なのか？ 機能理由writing-modeテキストの方向（縦書き／横書き）を制御text-orientation日本語の可読性を維持しつつ、英数字の配置を補正論理プロパティmargin-topやpadding-leftなどの“方向依存”を避け、縦横両対応の設計に この3つを意識するだけで、PCでは横書き、スマホでは縦書きといったレスポンシブなUIもスムーズに実現できます。 writing-modeの基本と違い writing-mode は、テキストの書字方向（文字が並ぶ向き）と行の進行方向を制御するCSSプロパティです。縦書きを実現するためにはこの指定が必須で、まずここを正しく理解することが第一歩になります。 主な値とその違い 値説明使用例horizontal-tb横書き・上から下（デフォルト）通常のWebコンテンツvertical-rl縦書き・右から左（日本語向け）縦書きの見出しや段落vertical-lr縦書き・左から右（中国語や特殊用途）非常に限定的な場面のみ 実務では vertical-rl 一択でOK 日本語の縦書きは、伝統的に右から左に進むため、CSSで指定する場合は writing-mode: vertical-rl を使えばほぼ間違いありません。 . vertical-text { writing-mode: vertical-rl; } レイアウトに与える影響 writing-mode を指定すると、以下の変化が起こります： テキストが90度回転して縦方向に並ぶ inline方向が縦、block方向が横になる（CSSの意味も変わる） 見た目が縦書きになるため、marginやpaddingなども論理プロパティで管理するのが推奨 スクロール方向の変化に関する注意点 writing-mode: vertical-rl を指定しても、スクロール方向が自動的に左右になるわけではありません。 基本的には、テキストが縦に並ぶだけで、スクロールは上下方向（block方向）のままです。 スクロールが横方向に発生するのは、次のような特別なケースです： CodePen Embed Fallback このように 改行を禁止しつつ、内容が横方向にあふれたときにのみ、スクロールバーが左右に表示されます。 ※通常の縦書きレイアウトでは、スクロールは上下方向のままであると覚えておくと混乱がありません。 ブラウザ対応 ブラウザ対応状況（2025年現在）Chrome / Edge 安定対応Firefox 安定対応Safari（iOS含む） 安定対応（日本語縦書きも問題なし） writing-mode: vertical-rl はすでに主要ブラウザで安定して使えるため、実務導入にも安心して使えるCSSプロパティです。 このように、writing-mode を使うだけで、日本語の縦書きをCSSで自然に再現することができます。次は、縦書きで重要になる「英数字や記号の整列」を制御する text-orientation の使い方を解説します。 text-orientationの役割と日本語への影響 writing-mode を指定するだけでも縦書きレイアウトは成立しますが、英数字や記号の見た目が崩れると感じたことはありませんか？ その制御に使うのが、text-orientation プロパティです。特に日本語の縦書きで英単語や数値を扱う場合には、この指定が見た目の自然さを大きく左右します。 主な指定値とその違い 値説明特徴mixed日本語は縦、英数字は横向き日本語縦書きの基本uprightすべての文字を縦に並べる記号や英語も縦配置にsideways英数字を90度回転して横並びにする横書き見た目の維持に便利（但し非標準的） 日本語縦書きのデフォルト：text-orientation: mixed CodePen Embed Fallback これを指定すると： 日本語（漢字・ひらがな・カタカナ）は縦に並ぶ 英数字（A〜Z、0〜9）は横向きで行中に収まる つまり、縦書きでも英単語が自然に読めるようになるのが mixed の役割です。 upright にするとどうなる？ CodePen Embed Fallback この指定では、すべての文字（英数字含む）を縦に並べるようになります。 縦組で英語を“あえて1文字ずつ立てる”ような詩的表現や、見出しとしての強調デザインには適していますが、本文には向きません。 実際の見た目比較 指定表示例（縦書き）備考mixedこんにちはABCです 自然に読めるuprightこんにちはABCです 本文では読みにくい 実務での選び方 用途おすすめ指定通常の縦書き本文text-orientation: mixed見出し／強調表現text-orientation: upright英語・数字を横向きのまま保持したいsideways（※一部ブラウザ非対応） ブラウザ対応状況（2025年） text-orientation: mixed / upright は 主要ブラウザで安定対応 sideways は仕様として存在するが、挙動が一部ブラウザで不安定 結論として、基本的には mixed を使っておけばOK。それ以外の指定は、意図がある場合にのみ使うのが実務的です。 次は、縦書きと横書きの切り替えに強い設計をするために欠かせない、論理プロパティの活用について紹介します。 論理プロパティで方向を意識せずにスタイリング 縦書き対応を考えるうえで、「今までのCSS指定だと margin や padding が効かなくなった! ? 」という戸惑い、ありませんか？ その原因は、writing-mode を使うことで“方向の意味”が変わるからです。この問題を解決するのが、論理プロパティ（logical properties）です。 論理プロパティとは？ 従来のプロパティ： margin-top padding-left border-right これらはすべて、「横書き」を前提とした物理的な方向（top, left, right... ）で指定されます。 一方、論理プロパティは書字方向に応じて変化します： 論理プロパティ横書き時縦書き時（vertical-rl）margin-block-start上左padding-inline-end右上border-block上下左右（縦方向） 実際の指定例 CodePen Embed Fallback このように padding-inline や margin-block を使うことで、縦でも横でも“同じ意味”で解釈されるスタイルが書けるようになります。 実務上のメリット 縦書き／横書きを切り替えてもCSSを書き直さなくて済む コードがシンプルになり、保守性が上がる 多言語対応（例えば右から左のアラビア語）にも自然と強くなる 注意：物理プロパティと混在させるとバグの元 たとえば以下のように指定すると、挙動が不明瞭になります： /* NGパターン */ padding-left: 1rem; padding-inline-start: 2rem; これは同じ方向に対して2つの指定を行ってしまうため、どちらが優先されるかはブラウザ依存になりがちです。論理プロパティに統一する設計方針にしたほうが安全です。 主要な論理プロパティ一覧（よく使うもの） 論理名役割margin-block / padding-block行方向の上下余白margin-inline / padding-inline行の流れ方向（左右）の余白border-block-start / border-inline-end論理的な上下・左右の線inset-block-start / inset-inline-start位置指定（top, leftの代替） このように、論理プロパティをうまく使えば、縦書き・横書きの切り替えが破綻しない、柔軟なスタイル設計が可能になります。 レスポンシブ切り替えの方法（media query / prefers-writing-mode） 縦書きを導入するにあたってよくある要望が、「PCでは横書きのまま、スマホでは縦書きにしたい」というパターンです。 この切り替えは、CSSの writing-mode をメディアクエリで制御するだけで簡単に実現できます。 基本の実装方法（メディアクエリ） CodePen Embed Fallback このように、横書きベースのスタイルを基本とし、モバイルだけ縦書きに差し替える構成がシンプルでおすすめです。 なぜ「スマホは縦書き」が有効か？ スクロールが縦方向のままなので、縦書きでもUXに違和感が出にくい 短い文章や詩的な表現を“縦で読ませたい”デザインが増えている 小さな画面では縦方向のリズムが視覚的に読みやすくなることも prefers-writing-mode のようなメディア機能は現時点で存在しない 2025年現在、prefers-color-scheme や prefers-reduced-motion のようなユーザー設定に応じた「prefers-writing-mode」のようなメディアクエリは仕様として存在しません。 そのため、画面幅や向き（orientation）などをベースに切り替えるのが現実的な対応方法です。 表現の一例：モバイルで縦に“詩的に”並べる CodePen Embed Fallback スマホでは文章を縦に“たらたら”と落とすことで、読みやすさと視線誘導の演出効果が得られることもあります。 よくある落とし穴 症状原因対処法横書きに戻らないメディアクエリでの解除漏れ必ず horizontal-tb を初期に指定余白が崩れるmargin-top など物理プロパティを使用論理プロパティに統一英字が縦に崩れるtext-orientation の未指定mixed を明示する このように、スマホ向け縦書きはCSSだけでレスポンシブに制御可能です。デザインの意図に応じて、「どこで切り替えるか」「どの要素だけ縦書きにするか」を明確にしておくと、設計もシンプルになります。 サンプルコード：スマホで縦書きに切り替える段落レイアウト ここでは、ここまで紹介した内容を踏まえて、実務でそのまま使えるスマホ縦書き対応の段落レイアウトを作成してみます。 PCでは横書きのまま スマホでは writing-mode: vertical-rl に切り替え 論理プロパティを使って余白やレイアウトを柔軟に設計 という、ミニマルで可搬性の高い実装です。 CodePen Embed Fallback ポイント解説 実装箇所意図max-width: 40ch横書き時の読みやすい幅制限writing-mode: vertical-rlスマホで縦書きに切り替えtext-orientation: mixed英数字を自然に横向きで表示border-inline → border-block論理プロパティを切り替えに合わせて使い分けoverflow-y: autoスマホ時に縦スクロールを許可（テキスト量が多い場合） 表示イメージ（スマホ） 見出しも縦書きで表示され、行間が広く余白もゆとりある印象 ユーザーのスクロールは上下のまま、違和感なく縦組を読ませることが可能 フォントサイズや文字間の調整も自由に追加可能 このような構成なら、1つのHTML構造で横書き・縦書きの両方に対応できるため、保守性にも優れています。また、論理プロパティを使っていれば、将来的な多言語対応やデザインの変更にも強いCSS設計が実現できます。 まとめ：縦書きは“テクニック”より“設計の考え方”が鍵 縦書きレイアウトは、一見すると“特殊な要件”に見えるかもしれませんが、CSSの基本機能だけで自然かつ実用的に対応できる手法が整っています。 ポイントは以下の3つに集約されます： writing-mode: vertical-rl で日本語の縦書きは完結 text-orientation: mixed を指定することで英数字も自然に整列 margin-block や padding-inline などの論理プロパティを使えば、縦横どちらでも崩れない設計が可能 また、レスポンシブ設計との相性も良く、メディアクエリで縦書きに切り替えるだけで柔軟に対応可能です。 今回紹介した構成をベースにすれば、以下のようなニーズにもすぐ応用できます： スマホだけ縦書きの詩的表現 日本語の書籍風デザイン 多言語対応を前提としたUI設計 “縦書き”という特殊な表現も、設計の原則を押さえておけば、CSSだけで無理なく自然に実装できるということが伝われば幸いです。 次回は、左右交互にブロックが並ぶタイムライン風UIの実装に挑戦します。スマホでは縦一列、PCでは左右に振り分けるデザインの実装テクニックを、gridやpseudo-elementsを駆使して解説します。 次回もお楽しみに！ --- - Published: 2025-06-17 - Modified: 2025-06-27 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide06/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: Web業界の動向, ディレクション, デザイン 一見完璧な静的デザインでも、実装で手が止まることがあります。その原因は“状態変化”や“動的な挙動”の情報不足です。本記事では、hoverやエラー表示、繰り返しUIの考慮など、実装者が判断に迷わないために必要な設計の視点を具体例を交えてご紹介します。 1. はじめに：デザインデータは完璧。でも、なぜか手が止まる 実装を進めていて「一見、完璧に見えるデザインなのに、手が止まる」──そんな瞬間は少なくありません。見た目は整っていても、「この状態のときは？」「クリック後は？」と、仕様の抜けを判断しないと先に進めないケースが現場ではよくあります。 これは、デザインが悪いという話ではなく、Figmaなどの静的デザインでは表現しきれない“状態”や“変化”の情報が不足しているだけのこと。たとえば、ボタンのアクティブ状態が描かれていない、リストが3つしか想定されていない、入力中やエラー時の画面がない――そんなケースです。 本記事では、フロントエンド実装者の視点から、「静的なデザインがなぜ実装の手間を増やしてしまうのか」「どんな補足があると実装がスムーズになるのか」について、実務での経験を交えて具体的に解説していきます。 2. 実装者が“判断に迷う”デザインの具体例 デザインツール上では綺麗に見えるのに、実装段階になると「どう作ればいい？」と立ち止まる。そうした場面の多くは、「状態変化」「動的な量」「非理想パターン」が考慮されていないことに起因します。 ここでは、実案件で実際に経験した、代表的な4つのケースを紹介します。 Hover・Active状態の指定がない よくある状況：ボタンのデザインはあるが、hover時や押下時の見た目が未定義。 実装者の困りごと：hoverやactiveはユーザーの操作に対するフィードバックなので、ないと“無反応”に見えてUXが損なわれる。勝手に決めることもできず、デザイナー確認で時間が止まるケース。 テキストの長短に対する考慮がない よくある状況：見出しが1行できれいに収まっているが、実データでは2行・3行になる可能性がある。 実装者の困りごと：行数が増えた時にレイアウトが崩れるかもしれないため、余白や高さ調整が必要になる。しかも、「1行で切れてもいいのか？」「2行以上OKか？」が不明確なため、判断が止まる。 リストやタブなどの「繰り返しUI」が1パターンしかない よくある状況：カードが3枚並んでいて美しく見える。が、実際には5枚、6枚になる可能性もあるUI。 実装者の困りごと：カード数が増えたときの折返し・横スクロール・レスポンシブ対応などをどうするか判断が必要。仕様がないため、見た目と実データのギャップが原因でレイアウトが崩れやすい。 エラーメッセージや入力中状態のUIが設計されていない よくある状況：フォームが用意されているが、「エラー時」「送信中」「成功時」などの状態がまったく考慮されていない。 実装者の困りごと：これらはユーザー体験のカギとなる部分なのに、仕様がないと判断に困る。メッセージの出し方やタイミング、レイアウトを一から考え直す必要が出てくる。 こうした状態が“意図されていない”のか、“見落とされている”のかが分からないまま、確認が必要になり、開発スピードや品質に影響を与えてしまいます。 3. 実装しやすいデザインには“動き”と“変化”の視点がある 実装がスムーズに進むデザインには、共通点があります。それは、「静止画として整っている」だけでなく、実際に使われるときの状態変化や繰り返しに対する“余白”があるということです。 ここでは、実務で「これは非常に実装しやすかった」と感じたケースをもとに、どんな視点が設計に含まれていたかを紹介します。 通常・hover・active の切り替えが設計されている 例：ボタンやリンクの3状態（ n）がすべて定義されているデザイン。 効果：ユーザー操作に対して自然なUI挙動が実現しやすく、開発時に余計な確認が不要に。アニメーションの有無も含めて、意図がはっきりしていると実装の精度が一段上がります。 長文・短文どちらも想定されている 例：見出しやラベルで、「2行になった場合」「翻訳で文字が長くなった場合」の余白や配置が考慮されている。 効果：レスポンシブ対応や多言語展開が前提になっている現場では非常に助かります。事前に文字量バリエーションのモックがあると、崩れにくい実装が可能になります。 カードやリストが複数パターンで設計されている 例：カードが「1件のみ」「3件」「6件」といった複数状態でレイアウト検討されている。 効果：実データによる変動に強く、「見た目は揃っているのに、現実には崩れる」問題が起きにくい。並び方や折返し、スクロールの有無などを前もって意識して設計されていることで、実装者は迷いなく作業に入れます。 こうした配慮があると、実装側で判断を保留することなく、そのまま“意図を汲んだ形”でコードに落とし込むことができます。 4. 静的デザインでも“ここを伝えてもらえると助かる”ポイント すべての状態をFigma上に描くのは現実的ではない、というのは実装者側も十分理解しています。ただ、いくつかの“意図”や“使われ方の想定”を伝えてもらえるだけで、実装の精度は大きく変わります。 ここでは、静的デザインであっても補足してもらえると非常に助かる4つの視点をご紹介します。 このパーツは「動的に増える／減る」のか？ カードやリスト、タブなどが「固定3件」なのか、「CMSやAPI連携で動的に変わる」のか。この違いは、レイアウト設計やCSSの柔軟性に直結します。 → 例：「最大6件まで増える可能性があります」といった一言があるだけで、設計はまったく変わります。 この状態は「クリック後に何が起きる」想定か？ hoverやクリック後、何かが変化するのか、それとも静的なままか。たとえば、モーダルが開く？ アコーディオンが展開される？ リンクへ遷移する？ → 見た目が同じでも“アクション後の結果”が明確であるかどうかで、実装方針が変わる場面が多々あります。 非理想状態（エラー・読み込み中など）の想定はあるか？ 理想的な正常画面だけでなく、以下のような状態はユーザーの印象に大きく関わります。 フォーム送信中のローディング表示 入力ミス時のエラーメッセージ 通信エラーや空データ時の画面 → これらが設計されていないと、実装者側が勝手にUIを決めることになり、トンマナや意図のズレが生じる可能性が高まります。 「これはダミーです」「実際は〇〇になります」という補足 デザインの中にあるテキストや画像、数値が仮データなのか、実データを想定しているのか。「このテキストは管理画面で編集可能」「この数値は動的に切り替わる予定」などの一言で、実装側の判断材料になります。 特別なドキュメントや仕様書がなくても構いません。Figmaのコメントやチャットでの共有でも、ほんの少しの補足が実装工程の精度を劇的に上げてくれます。 5. ディレクターに伝えたい3つの視点 静的なデザインだけでは伝わらない要素があることを、現場の実装者はよく実感しています。ただ、それはディレクターにとっても「気づきにくい領域」であることも事実。ここでは、私が実務を通じて「ここを意識してもらえるとプロジェクトがうまく進む」と感じた視点を3つに絞ってご紹介します。 1. 「仕様がないものは、実装者は勝手に判断できない」 見た目に描かれていないことは、“仕様として決まっていない”と解釈されます。そのまま進めると、誤った実装・思い込みによる動作ズレ・後戻り修正につながるため、実装者は慎重にならざるを得ません。 → 意図が曖昧な部分こそ、事前に共有してもらえると非常に助かります。 2. デザインが静的でも、UIは常に“動的な存在” Webは「状態が変化する」ことが前提のメディアです。画面幅、文字量、クリック、通信状況... これらすべてがUIを変化させるトリガーになります。 → 静的デザインはあくまで「スナップショット」であり、変化を前提とした設計・共有があるだけで破綻が防げます。 3. 設計段階で「どう変化するUIか」を共有してもらえると、無駄な修正が減る 「このボタンは状態に応じて表示が変わります」「このリストはデータによって件数が変わります」そんな一言の共有があるだけで、実装者は“変化に強い設計”を最初から組むことができます。 → 結果として、後から発生しがちな「修正コスト」や「動作の不一致」が減り、納期や品質も守りやすくなります。 6. まとめ：「見た目の完成度」だけでは、Web画面は完成しない Figmaや画像で見ると完璧に見えるUIでも、実装に入ると「これはどうなる想定？」と手が止まることが多々あります。その理由は、状態・動き・繰り返し・エラーといった“動的な側面”が設計から抜け落ちているためです。 一方で、すべての状態をデザインとして描く必要はありません。要点だけでも補足していただけると、実装者はより柔軟で再現性の高いコードが書けます。 「完成された1枚絵」ではなく、「変化に耐えうる設計」こそが、UIの質とプロジェクトの完成度を高める土台になります。 次回のVol. 7では、「“ただ組むだけ”では通用しない ─ HTML/CSSに設計が必要な本当の理由」をテーマに、なぜマークアップにも設計視点が欠かせないのか、そして実装者が日々意識している“裏側の設計力”について解説します。 どうぞお楽しみに！ --- - Published: 2025-06-11 - Modified: 2025-07-02 - URL: https://fastcoding.jp/blog/all/frontend/modal-css/ - カテゴリー: React, Vue.js, UI/UX, HTML/CSS - タグ: CSS, HTML, JavaScript HTML標準の要素を使えば、モーダルの開閉・外側クリック・ESCキー対応・フォーカス制御まで、ほぼ自動で実現できます。本記事では、実務で役立つベースのモーダル実装方法を紹介しつつ、JS最小構成でもアクセシブルに設計するポイントを解説します。 モーダルは「見た目」より「ふるまい」が大事 モーダルダイアログで、「外側をクリックしたら閉じるようにしてほしい」と言われること、私も現場で何度も経験しています。確かに、見た目を整えるのは簡単。でも、“どう閉じるか”や“どこにフォーカスを当てるか”といったふるまいをちゃんと設計するのは、思っている以上に繊細な作業です。 特に最近はアクセシビリティ（a11y）要件が求められる場面も増えてきており、「とりあえず閉じられればOK」では通用しないことも多くなってきました。 そこで今回は、私が実務で辿り着いた結論――「最小限のJSで、しっかり閉じられて、きちんと操作できるモーダル」の実装方法を紹介します。 結論： 要素＋最小限JSが、今のモーダルの最適解 現在のブラウザ環境（2025年）において、モーダルの実装で最もバランスが良いのは、HTML標準で用意されている 要素を使う方法です。 の特長 要素を dialog. showModal で開き、. close で閉じるだけ 外側のクリックや ESC キーでの閉じ動作がデフォルトで組み込まれている キーボードフォーカスも自動でモーダル内に閉じ込められる（フォーカストラップ） role="dialog"、aria-modal="true" などのアクセシビリティ属性も基本的に不要（自動で付与） これだけで、モーダルに必要な挙動がほぼ標準でまかなえるため、「JavaScriptを少なく、でもちゃんと動くものを作りたい」という現場には最適です。 実務での判断ポイント 要件 は対応済み？外側クリックで閉じたい デフォルト対応ESCキーで閉じたい 自動で反応フォーカス制御したい 自動でフォーカストラップスクリーンリーダー対応したい 自動でロール付与＆フォーカス移動 こうした機能がほぼすべて「何もしなくても効く」というのは、モーダル実装の工数を大きく削減します。私自身も、現在では モーダルはまず ベースで組んでみて、足りなければ拡張するというアプローチが定番になりました。 要素の基本構成と使い方 HTML5で追加された 要素は、モーダルダイアログを“ネイティブに”実装できる要素です。従来のように div を絶対配置し、JavaScriptで開閉・フォーカス制御を一から書く必要はありません。 ここでは、 の基本的な構成と開閉方法を実装例とともに解説します。 CodePen Embed Fallback 各要素の意味 要素解説モーダル本体。閉じているとDOM上には表示されない中に入れることで、 を押したときに自動的に閉じる特別な属性なしでも「閉じるボタン」として機能するJavaScriptでモーダルを開くトリガー JavaScriptでの開閉制御 ー showModal vs show . showModal は背景をロックして表示（モーダル表示） . show は背景をロックせず、インライン表示（ツールチップのような用途向け） ほとんどのケースでは . showModal を使います。 CSSでモーダルの見た目を整える dialog::backdrop は 固有の疑似要素で、背景の半透明オーバーレイに使えます スタイリングは通常の要素と同様に可能（※ただし display: flex 等が必要な場合も） 注意点：form がないと「閉じるボタン」が機能しない これは意外とハマりがちなポイントです。モーダル内の「閉じる」ボタンは、 の中にあることで、自動的に . close が実行されます。 ボタンだけで閉じたい場合は、明示的に . close を呼ぶ必要があります。 利用可能ブラウザ（2025年現在） ブラウザ対応状況Chrome / Edge 完全対応Firefox 対応済み（v98〜）Safari（iOS含む） 安定対応（v15. 4〜） 主要ブラウザはすべて対応済みのため、実務導入も安心です。 このように を使えば、最低限のコードでモーダルの基本機能がほぼ実装済みの状態からスタートできるというのが大きな魅力です。 次は、外側クリックや ESC キーでの自動的な閉じ動作について、具体的に見ていきましょう。 外側クリックや ESCキーによる閉じ方の挙動 モーダルを開いたあと、ユーザーが背景部分（モーダルの外側）をクリックしたときに閉じるかどうかは、ユーザー体験としてとても重要です。 要素は、このあたりも最初から「いい感じ」に動作する設計になっています。 外側クリックで閉じるのはデフォルト仕様 を . showModal で開くと、背景の ::backdrop が自動的に生成されます。この backdrop をクリックすると、何も書かなくても自動で . close が呼び出されます。 つまり、以下のようなコードだけで外側クリック → モーダル閉じるが実現します。 dialog. showModal; // これだけでOK 追加のイベントリスナー不要。すでに組み込まれているのです。 外側クリックで閉じられないようにしたい場合は？ もし、モーダル内の操作が必須（入力完了まで閉じられない等）である場合、以下のように cancel イベントでキャンセルを抑止できます。 dialog. addEventListener('cancel', (event) => { event. preventDefault; // ESCキーも無効化される }); このとき、外側クリックもESCキーも効かなくなるので、明示的に「閉じる」ボタンや処理を用意することが必須になります。 cancel イベントとは？ モーダルを ESCキーで閉じようとしたときに発火します preventDefault を使うと閉じ動作をキャンセルできます 外側クリックと併せて制御したいときにも利用されます よくある誤解：「クリックイベントで外を判定しないとダメ？」 旧来のカスタムモーダル（div. modal + JS）では、背景を addEventListener('click', ... ) で監視して、「クリック対象が . modal-content でなければ閉じる」みたいなロジックを自前で書く必要がありました。 ですが、 を使えばその必要は一切ありません。開く・閉じるの基本動作は 標準実装でカバーされているのです。 フォールバックとして details + summary を使う場合の挙動 一部のレガシー環境やJSレス環境では、 が使えないケースに備えて、以下のような代替パターンも存在します。 開く モーダルの中身 ただしこれは： 外側クリックで閉じられない ESCキーで閉じられない フォーカスも閉じ込められない といった制約があるため、あくまで簡易UIや静的ページ向けです。 このように、外側クリックやESC対応が“標準動作”として備わっているのが、 最大の魅力の一つです。 次は、フォーカストラップやARIA属性を含めた、アクセシブルなモーダル設計のポイントを解説していきます。 キーボードフォーカス制御とアクセシビリティ対応 モーダルのUIは、見た目だけでなく「操作中のユーザーが今どこにいるか」を明確にすることが非常に重要です。特にキーボード操作やスクリーンリーダー利用者にとっては、フォーカスの管理と適切なARIA属性の設計が不可欠です。 要素を使うことで、こうした要件の多くを標準でカバーできます。 自動でフォーカストラップされる を . showModal で開くと、開いた時点でフォーカスがモーダル内の最初のフォーカス可能要素に自動で移動します。 さらに、その状態ではTabキーでの移動もモーダル内に限定される（いわゆる「フォーカストラップ」）ため、ユーザーがモーダル外にフォーカスを移してしまう心配もありません。 補足：明示的に移動先を指定したい場合 dialog. addEventListener('shown', => { dialog. querySelector('input')? . focus; }); ※ shown イベントは未標準なので、代わりに DOMContentLoaded やカスタム処理で代替することもあります。 に必要なARIA属性は？ 基本的には不要です。モダンブラウザは、 に対して自動的に以下を付与します： role="dialog" aria-modal="true" とはいえ、補足的に以下を付けておくと、より確実にアクセシブルになります。 お知らせ この操作を完了するには... ... aria-labelledby：モーダルの「タイトル」と認識される要素を指定 aria-describedby：補足説明として読み上げさせる要素 JSカスタムモーダルで忘れられがちなこと 手動でモーダルを実装する場合、以下のことを自前で制御しなければならないため、実は非常に手間がかかります： 要件カスタム実装初期フォーカス移動 自動 要自作フォーカストラップ 自動 要ループ処理role/aria属性 自動 or 補助のみ 明示指定が必須ESCキーで閉じる 自動 要イベント処理 実務的なアプローチ 「アクセシブルなモーダルを簡単に実装したい」ときは、 まず で構築 必要に応じて aria-labelledby を追加 フォーカス移動やESC無効化などを JavaScript で補強 という流れが最小コストで最大の品質を出す方法です。 次章では、 を使わずにCSSだけ or JS最小限で実装する代替パターンについて、現実的な選択肢を紹介します。 JSレスまたは限りなくJSを減らす方法（代替手段） 「できるだけJavaScriptを使いたくない」「完全な静的サイトで動かしたい」そんな場面でも、モーダルっぽいUIをCSSだけである程度再現する方法は存在します。 ここでは、実務でもたまに役立つ、JS最小限 or JSレスのモーダル代替手段を紹介します。ただし制約もあるため、「何ができて、何ができないか」も併せて解説します。 details + summary を使った“折りたたみ型モーダル” CodePen Embed Fallback 特徴 開閉が 完全にHTML＋CSSだけで完結 open 属性が付与され、スタイル切り替え可能 注意点 外側クリックでは閉じられない ESCキーは効かない フォーカストラップがない スクリーンリーダー対応は限定的 これはあくまで、軽量なトグルUIや“なんちゃってモーダル”として限定利用するのが現実的です。 :target 擬似クラスを使ったアンカー遷移型モーダル CodePen Embed Fallback 特徴 JavaScript完全不要 擬似的な表示／非表示切り替えが可能 注意点 URLの #ハッシュ を書き換える必要がある 複数モーダルの管理が難しい ESCキー・フォーカストラップ非対応 閉じるための a href="#close" というやや強引な方法が必要 どんな場面で使えるか？ 方法適しているケースdetails + summary静的なFAQ、軽量な説明文ポップアップなど:target1ページ完結のキャンペーンLP、完全静的な案内ページなど 実務での結論 「モーダルとしてのふるまい（閉じる、フォーカス、キーボード対応）を求める」場合は、やはり を使うのが最も安全かつ実装コストも低い選択肢です。 それでも、プロジェクトによっては「JSを使えない」「ビルド不要で完結したい」などの要件もあるため、これらのCSSベースの手法も知っておくと役立つ場面はあります。 次章では、 を使った実践的なサンプルコードを紹介します。モーダルの開閉、スタイル、外側クリック対応、すべて含んだ現場向けの構成です。 サンプルコード：ベース＋ESC＆外側クリック対応 ここまで紹介してきた 要素は、標準のHTMLタグ＋最小限のJavaScriptで、実用的なモーダルを構築できる優秀な選択肢です。 このセクションでは、以下の要素をすべて含んだ実装例を紹介します： を使ったモーダル構造 開く／閉じるボタン 外側クリック、ESCキーでの自動閉じ スタイリングされた背景オーバーレイと内容配置 必要最低限のアクセシビリティ対応 CodePen Embed Fallback dialog::backdrop により、自動生成されるオーバーレイ背景に半透明の黒を設定 width: min(90vw, 500px) で、モバイルでも破綻しない中央配置を実現 この実装のポイントまとめ 機能対応説明モーダル表示. showModal で表示モーダル非表示 + form method="dialog"外側クリックで閉じる 標準動作ESCキーで閉じる自動対応フォーカストラップ自動対応ARIA属性⭕必要に応じて補足的に追加可能（aria-labelledby など） この構成は、初期構築が早い・保守が簡単・アクセシビリティも標準対応という3拍子揃った、現代のモーダル実装の“型”です。このままベースにして、内容やデザインを調整していけば、ほとんどの案件に対応できます。 次は、今回の内容を踏まえたシンプルなまとめと、モーダルUIに対する設計方針の再確認を行います。 まとめ：モーダルは“閉じ方”で信頼性が決まる モーダルというUIは、見た目よりも「どう閉じるか」「どう操作を制御するか」が本質です。 今回紹介した 要素を使えば、以下のような重要な機能がHTML＋数行のJSだけで実現できます： 外側クリックやESCキーで自然に閉じる キーボード操作をモーダル内に限定（フォーカストラップ） 標準でアクセシビリティ対応済み（role, aria-modal など） 特別なJSライブラリを使わなくても、十分実用に耐えるモーダルが“標準技術”で構築できる時代になりました。 一方、details や :target を使ったCSSベースの代替手法もありますが、閉じ方やフォーカス管理まで含めて“モーダルらしさ”を求めるなら、やはり がベストです。 要件に応じて「どこまで作り込むか」を選べることが、今のフロントエンドに求められる柔軟さだと思います。 次回は、縦書き対応デザインをレスポンシブで切り替える方法について解説します。writing-mode や logical properties を使いながら、横書き／縦書きをスマートに切り替えるUI設計に挑みます。 次回もお楽しみに！ --- - Published: 2025-06-09 - Modified: 2025-06-10 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide05/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: CSS, JavaScript, Web業界の動向 CSSも日々進化しているの知ってますか？昔はJavaScriptが必要だったホバーアニメーションやアコーディオン、スライダーがCSSだけで実装可能になっています。本記事では、実務で活用できるCSSだけの動的UI実装例と、そのメリットを詳しくご紹介します。 1. はじめに：JSなしでもできる時代になっています 「動きのあるUIはJavaScriptで組むもの」──かつてはそれが当たり前でした。私自身、過去の案件では、ホバーアニメーションやアコーディオンメニューなど、動きが必要な場面ではすぐにJSを使う前提で考えていました。 しかし、最近のCSSは想像以上に進化しています。アニメーション、UIの切り替え、インタラクション表現まで、JavaScriptを使わずCSSだけで完結できるケースが確実に増えているのが現実です。 それでも、ディレクションの現場では「とりあえずJSでお願い」と依頼されることが少なくありません。その背景には、「CSSだけでどこまでできるのか？」がまだ広く知られていない、というギャップがあると感じています。 本記事では、私が実際の案件でCSSだけで構築したUI表現や、JS不要で済んだ事例を紹介しながら、“どんな場面でCSSが有効か”をWebディレクター視点でご紹介していきます。 それでは、CSSだけで実装できるUI表現の実例を具体的に紹介させていただきます！ 2. 実例紹介：CSSだけで実装した表現たち ここでは、私が実装現場で実際に使ってきた、JavaScriptを使わずCSSだけで実現できる動的UIを厳選して紹介します。軽量で、保守性にも優れ、表現力も高いため、「JSありき」で考える前に知っておいて損はありません。 ホバーで画像がズーム・反転・フェード 案件例：サービス紹介ページのカードに、マウスホバーでズーム＋フェード効果を追加 CodePen Embed Fallback ポイント：transform と opacity の組み合わせは、視覚的なインパクトが大きく、CSSだけで十分。これにJSを使うと、逆に冗長でパフォーマンスも落ちます。 アコーディオンUI：タグ 案件例：FAQページのQ&Aを、JSなしで開閉式に CodePen Embed Fallback ポイント：タグは、標準で開閉動作がついており、アクセシビリティにも配慮されている優れたUIパーツです。軽量・安定・拡張性ありで、最近は採用機会が増えています。 セクション切り替え：scroll-snap 案件例：ランディングページ内のフルセクションスクロール切り替え CodePen Embed Fallback ポイント：セクション単位で自然なスライド切り替えができ、JSスライダーの代替として非常に有効です。スマホでも操作しやすく、意外と知られていないおすすめ機能です。 表示・非表示の切り替え：:checked擬似クラス 案件例：ラジオボタンでタブ切り替えを実装 CodePen Embed Fallback ポイント：フォーム要素＋:checkedで、状態に応じて表示を切り替えるUIがCSSだけで作れます。モーダル・タブ・スイッチなど、小規模なUIでとても有効です。 繰り返しアニメーション：@keyframes 案件例：ファーストビューのバナーアニメーション（フェードイン＋ループ） CodePen Embed Fallback ポイント：JSのsetIntervalで管理するよりも、CSSアニメーションの方が軽量かつ安定します。装飾的な動きにはCSSが最適です。 これらのように、「動くからJS」ではなく、「動くけどCSSでいい」ケースは確実に増えています。 では、なぜCSSだけで実装することが“合理的”なのか、私がそう思う根拠を実装者目線で解説します。 3. なぜCSSだけでやるべきなのか？（メリット解説） CSSだけで実装できるUIがここまであるなら、「それを選ぶ理由は何か？」という視点も大切です。実装者として日々感じているのは、CSSベースのUIには“軽さ”と“安定性”という確かな利点があるということです。 実装コストが圧倒的に軽い JavaScriptで動きをつける場合、イベントの検知・状態の管理・DOM操作など、どうしても記述が複雑になります。一方CSSは、少ないコード量で目的の表現にたどり着けるため、バグの混入も抑えられます。 とくにホバーアニメーションや開閉メニューなど、“きっかけに応じて何かが変わる”系のUIはCSSで完結することが多いです。 表示速度に貢献する CSSで書かれた動きは、ブラウザの描画エンジンに最適化されているため、表示が早く、スクロールや読み込みの邪魔をしません。一方で、JavaScriptはDOMが完全に構築された後に動作を開始するため、場合によってはページ読み込みの遅延要因になることも。 特に、スマホ向けのパフォーマンス改善を求められる場面では、CSSベースのUIは非常に効果的です。 保守しやすく、ライブラリにも依存しない CSSだけで完結するUIは、外部ライブラリに頼らない分、更新時の影響範囲が小さくなります。また、デザイナーとも共有しやすいため、「どこでどんな動きが起きるのか」がチーム全体で把握しやすいという利点もあります。 トラブルの原因を減らせる JavaScriptの競合、非同期処理のタイミングズレ、スクロールイベントとのバッティング... 。こうした“JSならではのバグ”に悩まされた経験があるディレクターもいるかもしれません。 CSSだけで完結できる場面では、こうしたリスク自体が発生しないため、テストや調整にかかるコストも減らすことができます。 もちろん、すべてのUIをCSSでまかなえるわけではありません。そこで次は、CSSだけでは対応が難しいケースについて見ていきましょう。 4. とはいえ「CSSでは難しい」パターンもある CSSだけで表現できることが増えたとはいえ、すべてをカバーできるわけではありません。実装者としては、「どこまでCSSでやって、どこからJSに任せるか」の見極めが非常に重要だと感じています。 状態の管理が必要なUI たとえば、ログイン状態によって表示内容を切り替えるようなUIや、複数の状態が連動するトグル・ナビゲーションなどは、CSSでは対応しきれません。 チェックボックスやラジオボタンを使って簡易的な状態制御は可能ですが、状態が2つ以上にまたがると一気に複雑化します。 非同期データが関与するUI APIから取得した情報を元に、画面の内容を変える。ユーザーの操作結果に応じて、別のUIを動的に生成する。こういった“後から変わる”情報に対応する動きは、CSSではできません。 これはJavaScriptが最も得意とする領域であり、無理にCSSで再現しようとすると、見た目だけが整って裏側が破綻することになります。 アニメーションに“連動”がある場合 たとえば、 スクロールに応じて複数の要素が同時に動く 一定タイミングで順番にアニメーションが走る ユーザーの操作によって複雑なトランジションが起きる こういったケースでは、JSによるタイミング制御やイベント連携が不可欠です。 CSSアニメーションは単体では優秀ですが、「他の要素と連動する」となると、細かい制御が効かないという壁にぶつかります。 実務では「まずCSSでやってみて、足りなければJSで補う」というアプローチが最も現実的です。大切なのは、“CSSでできること”と“CSSでは難しいこと”を両方知った上で判断することです。 次章では、こうした背景を踏まえて、Webディレクターが設計・相談時に意識しておくと役立つ視点を3つにまとめてご紹介します。 5. ディレクターに伝えたい3つのポイント CSSだけでできることが増えた今、設計やフィードバックの段階で“JavaScriptありき”の思考から一歩引いて考える視点が、プロジェクトの効率を左右します。ここでは、私が実務の中で「ここを意識してもらえると助かる」と感じているポイントを3つご紹介します。 1. 「動くUI＝JavaScript」はもう古い 昔のように「何か動く＝JSで書く」という時代ではありません。ホバー、フェード、スライド、開閉といった視覚的な動きの多くは、今やCSSで実現可能です。 「動きがあるからJSでお願いします」と伝えるのではなく、「これはCSSでもできるかもしれない」と考えること自体が、軽量で安全なUIを選ぶ第一歩になります。 2. 「CSSだけでできますか？」と聞いてみると、実は解決策がある ディレクターから「このUI、JS使う必要ありますか？」と聞かれたとき、私たち実装者は、「あ、CSSでいける方法あるな」と気づくことも多々あります。 最初からJS前提で依頼されると、余計な設計・開発コストがかかってしまうこともあるため、相談の段階で“CSSだけでできる可能性を探る”という姿勢があると、プロジェクト全体の軽量化につながります。 3. 実装方法を任せてもらうと、より効率的な提案ができる CSSかJSかをディレクターが決め打ちするよりも、「この見た目・動きにしたい」という意図だけを共有してもらう方が、実装者としては判断しやすく、最適な方法を提案しやすくなります。 「ホバーしたら印象が変わってほしい」 「開閉式で、最初は閉じていてほしい」 「1枚ずつスライドさせたい」 こうした要望は、CSSでもJSでも実現可能なことが多いため、どちらの方が軽く・早く・安定するかを、現場で柔軟に判断することができます。 CSSだけでできるかどうかを最初に検討することで、UIはよりシンプルに、Webはより速く、プロジェクトはよりスマートに進められる可能性が高まります。 6. まとめ：CSSだけで“軽くて使いやすい”UIが作れる時代 動きやインタラクションを伴うUIでも、CSSだけで実現できる表現が今では数多くあります。それは単なる“技術の進化”ではなく、パフォーマンス、保守性、そして開発コストの最適化に直結する選択肢でもあります。 「見た目が動けばOK」ではなく、「どう動かすのが一番スマートか」という視点が、これからのUI設計には求められます。その判断をディレクターと実装者が一緒に行えるようになれば、より軽く、より壊れにくく、より洗練されたUIを実現することができます。 次回のVol. 6では、「静的デザインが実装の手間を増やす理由 ─ 状態・変化を想定した設計のすすめ」をテーマに、“見た目通り”のデザインが実装現場ではなぜ再現しづらいのか、そしてどんな視点でデザインを考えると、状態や変化に強いUIが実現できるのかを解説します。 次回もお楽しみに！ --- - Published: 2025-06-05 - Modified: 2025-06-05 - URL: https://fastcoding.jp/blog/all/ui-ux/scroll-header-css/ - カテゴリー: UI/UX, HTML/CSS - タグ: JavaScript, UI/UX, フロントエンド, 初心者 スクロールに応じて背景が切り替わるヘッダーUIの実装方法について、CSSとJavaScriptの両面から丁寧に解説しています。position: sticky を使った構成により、初期は透明、スクロール後に背景や影を自然に追加する方法をご紹介。実務で役立つポイントや、スマートフォン対応、iOS Safariでの注意点なども詳しくご説明しています。 スクロールでヘッダーが変化する、よくあるあのUI Figmaのデザインでよく見かける「最初は透明なヘッダー、スクロールしたら背景がついて固定化」というUI、実装経験のある方も多いと思います。 私も過去に何度もこのパターンをコーディングしてきましたが、シンプルそうに見えて、意外と“どのタイミングで背景を変えるか”に悩まされる構成なんですよね。 JavaScriptを使えば柔軟に制御できますが、最近ではCSSだけでもかなり自然に近い表現が可能になってきています。今回はその中でも、実務にフィットする「sticky＋背景切り替え型のスティッキーヘッダー」のベストな実装方法をご紹介します。 結論：position: sticky × 背景切り替えが最適解 このパターンのヘッダー実装で私が最もよく使っている構成は、以下のシンプルなものです。 CodePen Embed Fallback ポイントは以下の通りです： position: sticky を使って、スクロールしても常に上部に張り付く挙動を実現 初期状態は background-color: transparent にして、メイン画像などの背景を透かす スクロール後に . scrolled クラスを付けて、背景色と影（box-shadow）を付与 この構成は、HTMLやCSSの記述量も少なく、パフォーマンス的にも非常に軽いので、LPからブログ、企業サイトまで幅広く対応できます。 なぜ sticky × 背景切り替えなのか？ fixed よりも自然なスクロール挙動（スクロール開始時の“引っかかり感”が少ない） JSを併用してもクラス切り替えだけで済むので保守が楽 CSSだけでも :has や scroll-behavior を使えば擬似的な実装も可能 こうした構成にすることで、見た目の変化をなめらかに演出しつつ、コードの保守性も高められます。あとはスクロール位置をどう検出して、いつ背景や影を付けるか――その具体的な方法を見ていきましょう。 基本構成：stickyヘッダーのレイアウト スクロールに連動して背景が変わるヘッダーを実装するためには、まず「初期状態の透明なヘッダー」＋「スクロール後に固定化される見た目」という2つの状態を想定する必要があります。 ここでは、実務でよく使われる構成パターンをベースに、HTML・CSSの基本セットを紹介します。 CodePen Embed Fallback 実務での設計ポイント position: sticky は親要素が overflow: hidden だと効かないので注意 z-index は他のUI（モーダルやナビ）との重なりに備えて十分な数値を transition を設定しておくことで、背景がふわっと変化して自然な印象に backdrop-filter を使えば、半透明ガラスのような印象も簡単に実現可能（※Safariは特にきれいに表示されます） スマホ対応も前提に設計 スマホではヘッダーの高さをやや狭くしたり、ナビゲーションを折りたたみに変更したりすることが多いです また、iOS Safariでは sticky の挙動に癖があるため、挙動テストを忘れずに @media (max-width: 600px) { . header__inner { height: 56px; } } このように、まずはレイアウトとしての“土台”をしっかり組むことで、スクロール時の背景切り替えにも対応しやすくなります。 次は、実際に「スクロール位置をどう検出するか」という問題に対して、JavaScript／CSSの両面から解決方法を見ていきます。 スクロールで背景を変える方法（JavaScript / CSS両パターン） ヘッダーの背景や影をいつ切り替えるか――この判断には「ユーザーがどこまでスクロールしたか」を検出する必要があります。ここでは、JavaScriptによる汎用的な方法と、CSSのみで擬似的に実現する軽量な方法の2パターンを紹介します。 （１）JavaScript（IntersectionObserverを使った確実な判定） 最も確実で柔軟なのが、IntersectionObserverを使った方法です。これにより、「ある要素が画面から消えたらヘッダーにクラスを付与する」といった制御が可能になります。 CodePen Embed Fallback この構成の特徴は、こちらです： メリットデメリット判定が正確・自由度が高いJSに依存するため初期表示でバグる可能性ありスクロール位置を柔軟に制御できるJavaScriptが無効な環境では機能しない （２）CSSのみで行う“なんちゃって”背景切り替え（擬似的） CSSだけでも「スクロールしたら変化するように見せる」ことは可能です。ただし精密な判定はできないため、演出として軽めに使う場合に限ります。 :has を使った例（Chrome/Safari限定・試験的） CodePen Embed Fallback 注意：このコードは CodePen 上では動作しません。:in-viewport は現在一部の実験的なブラウザ環境でのみ利用可能な擬似クラスであり、2025年時点ではまだ標準仕様には含まれていません（今後の仕様策定に期待）。 :target を利用した代替（やや強引） CodePen Embed Fallback 注意：このコードは CodePen 上で動作させるために手を加えています。この #main はCodePen上でのみ動作確認のために追加した疑似的要素です。本番コードでは header に を付けて とします。 ※ :target はクリックが必要なため、スクロール連動としては実用的ではありません。 ◯ どちらを使うべき？ 条件おすすめの手法スクロール量に応じて確実に制御したいIntersectionObserver（JS）JSを使いたくない / 軽量な演出だけでいい:has + 擬似的スタイル変化パフォーマンスや保守性を最優先したいJS + CSSで役割分離する構成 実務では「初期読み込みが早い方がいい」「JSバグを減らしたい」などの理由で、まずCSSベースで設計 → 必要に応じてJS追加という流れが一般的です。 次に、スクロール時の見た目を滑らかにするためのtransitionやアニメーションの工夫を紹介します。 スクロール時の滑らかなトランジションを実現するには？ スクロールに合わせてヘッダーの背景が変化する場面では、変化そのものよりも“その変わり方”のほうがUXに大きな影響を与えます。 突然のカラーチェンジや影の出現は、ユーザーに違和感を与えることもあるため、自然でスムーズなトランジションを心がけましょう。 （１）transition の指定でふわっと感を出す もっとも基本かつ効果的なのが、CSSの transition プロパティを活用する方法です。 CodePen Embed Fallback ease は開始と終了を滑らかにする補間関数 時間は 0. 2〜0. 4秒あたりが実用的（長すぎると“もっさり”感じる） 複数のプロパティをまとめて指定することで、統一感のある動きになります。 （２）will-change の指定でチラつき防止 ヘッダーにアニメーションを加える際、とくにモバイル端末で発生しやすい“ちらつき”や“遅延”を防ぐために、will-change を使ってブラウザに事前通知するのがおすすめです。 CodePen Embed Fallback これにより、GPU最適化が効きやすくなり、より滑らかな描画に 過剰な使用は逆にパフォーマンス悪化を招くため、本当に変化するプロパティのみに限定するのがベスト ◯ その他の調整ポイント 要素調整例意図背景の透明度rgba(255,255,255,0. 9)背景画像とのなじみを良くするシャドウの柔らかさbox-shadow: 0 2px 8px rgba(0,0,0,0. 1)固さを避けて自然な立体感に境界線の追加border-bottom: 1px solid rgba(0,0,0,0. 05)シャドウなし構成の代替案 フェード感を保ったまま高速表示を実現するには 背景やシャドウを一括でトランジション will-change で対象を明示 変化量は大きくしすぎず、画面内で「自然な動き」にとどめる こうした設計を意識することで、ヘッダーの状態変化を演出ではなくUIの一部として違和感なく組み込むことができます。 このあと解説するのは、スマホ対応時に注意すべき点や、よくある落とし穴についてです。特に iOS Safari の癖や sticky の効かないケースへの対処法など、現場ならではの視点で整理していきます。 スマホ対応と実務的な注意点 スティッキーヘッダーは、スマホでも非常に多く使われるUIパターンです。しかし、PCと同じ実装をそのまま適用すると不具合が出ることも少なくありません。ここでは、実務でよく遭遇する「モバイル特有の落とし穴」とその対策をまとめます。 （１）iOS Safariの position: sticky バグに注意 iOSのSafariでは、position: sticky が期待通りに動作しないケースがあります。 よくある現象： スクロール中にヘッダーが「ピタッ」と止まらない スクロール後に sticky の位置がズレる 特定のoverflow構造と干渉してstickyが無効化される 対策： 親要素に overflow: hidden を使わない body または html に不要な height 指定をしない transform を親要素にかけない（GPUレイヤー化によりstickyが効かなくなる） body, html { overflow-x: hidden; /* OK */ height: auto; /* OK */ } main { transform: none; /* GPUバグ回避 */ } （２）ヘッダーの高さをスマホで調整 スマホ表示では、ヘッダーが高すぎると画面の占有率が増えてUXが悪化します。以下のように、メディアクエリでヘッダーの高さを調整しましょう。 . header__inner { height: 64px; } @media (max-width: 600px) { . header__inner { height: 56px; } } また、ボタンのタップ領域が狭くならないよう、ナビゲーションアイコンやリンクのpaddingも確保しておきます。 （３）ヘッダーの高さ分だけ本文に余白を確保 ヘッダーを position: sticky にしただけでは、本文と重なってしまい、上部のコンテンツが隠れることがあります。 対策として padding-top を body または main に追加 body { padding-top: 64px; /* ヘッダーの高さ分 */ } スマホ用には、JavaScriptで高さを取得して動的に調整することも可能ですが、高さが固定されている場合はCSSだけでも対応可能です。 （４）Android Chrome でのスクロールバー挙動にも注意 Android Chromeではスクロール時にアドレスバーの表示／非表示がトリガーとなり、レイアウトが再描画されることがあります。 これが sticky の挙動に影響し、「チラつき」や「カクつき」が出る場合があります。 対処法： レイアウトシフトが少ないように min-height を使って安定させる 背景に background-attachment: scroll を使うことで動的なリサイズに対応しやすくする ◯ 実務向けTipsまとめ 課題解決策ヘッダーが隠れるpadding-top を本文に追加stickyが効かない親要素に overflow / transform を使わないモバイルでの高さ調整メディアクエリで height を変更SafariでのズレCSS構造の見直し（html, bodyに余計な指定がないか確認） このように、スマホでは「表示領域が狭い」「ブラウザUIの影響を受けやすい」など特有の制約があるため、テストと調整を丁寧に行う必要があります。 次は、これまでの構成をベースに、実務向けのミニマルなサンプルコードをご紹介します。 サンプルコード：透明→固定化するsticky header ここでは、これまで解説してきた構成をもとに、実務でそのまま使える最小限のサンプルコードを紹介します。透明な状態から、スクロールによって背景と影がつく、シンプルなスティッキーヘッダーです。 CodePen Embed Fallback 動作イメージ 初期状態：ヘッダーは背景なし（透明） スクロールで . scroll-trigger を通過すると、ヘッダーに . scrolled クラスが追加される 背景が白くなり、box-shadow による立体感が出る 実装の主なポイント position: sticky で自然な固定 IntersectionObserver で背景切り替えのトリガーを制御 transition で変化を滑らかに will-change でモバイルでもちらつきにくい 補足 scroll-trigger 要素の位置が「変化のタイミング」を決めます。 必要に応じて高さや配置を調整してください。 padding-top: 64px を body に指定しているのは、ヘッダーとコンテンツが重ならないようにするためです。 レスポンシブ調整（スマホの高さやメニュー切り替え）はCodePenのスコープ外ですが、後から簡単に追加できます。 この構成をベースに、ヘッダーの背景色・影・高さ・トリガー位置などを微調整することで、案件ごとのデザインに合わせてカスタマイズできます。 まとめ：スティッキーヘッダーは“自然さと実用性”のバランスが鍵 「スクロールで背景が変化するヘッダー」は一見地味ですが、サイト全体の印象やナビゲーションの使いやすさに直結する重要なUI要素です。 今回紹介したように、position: sticky をベースに設計すれば、必要最小限のHTML/CSS/JavaScriptで、軽量かつ自然なスティッキーヘッダーを実現できます。 特に以下のポイントを押さえておくと、さまざまなデザインに対応しやすくなります： ヘッダーは構造として固定化、見た目はクラスで切り替え スクロール判定は JS or CSS の使い分けを状況に応じて選ぶ スマホ特有の挙動・バグも想定して事前に設計しておく コード量が少なくても、実装の意図と目的が明確であれば、十分に安定したUIが構築可能です。 次回は、最小限のJavaScript（またはJSレス）で実装するモーダルの外側クリックで閉じる挙動とフォーカス制御について解説します。アクセシビリティを意識したモダンなモーダル設計のポイントに踏み込みます。 どうぞお楽しみに！ --- - Published: 2025-05-12 - Modified: 2025-05-28 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide04/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: CSS, HTML 1. はじめに：見た目が同じでも、コードの中身は全然違う Webページを見て、「このデザイン、きれいにできてるな」と感じることは多いと思います。ですが、その裏側にあるCSSの設計が軽くて保守しやすいものか、複雑で崩れやすいものかは、見た目だけでは判断できないのではないか、というのが実装者としての私の意見です。 たとえば、まったく同じように見えるカードレイアウトでも──片方はテキスト量が変わっても崩れず、修正も簡単。もう片方は、一文追加しただけで高さがズレ、余白もガタガタになる。 この差を生むのが、CSS設計の考え方です。 本記事では、実装者として日々意識している「軽くて崩れにくいCSS」の工夫について、具体的な例を交えながら、技術的すぎず・ディレクター視点でわかる形で解説していきます。 次章ではまず、私たちが複雑なデザインに対して「どうやってCSSを軽く保っているか」についてお話しします。 2. 複雑なUIを“軽く保つ”ためにやっていること 「CSSって、結局見た目を整えるだけでしょ？」──そう思われがちですが、実装者としては“整った見た目を、崩れにくく・保守しやすく維持すること”が何より重要です。 特に、情報量の多いランディングページや、複雑なカード・リスト構成を持つUIでは、CSS設計の良し悪しがその後の運用に大きく影響します。 ここでは、私が実装時に意識している「UIを軽く保つための基本的な設計方針」をご紹介します。 1. 共通パーツはコンポーネント化して再利用 似たようなボタンやカードが複数ある場合、それぞれに個別のスタイルを当てていくと、CSSが肥大化し、更新ミスが発生しやすくなります。 そこで私は、たとえば以下のようなルールを設けています： . btn-primary や . card--feature など、役割ベースのクラスでパーツ化 微妙に異なるパターンは「修正」ではなく「拡張」で対応 デザイン修正が入っても、1か所の変更で全体が反映されるように構成 これにより、“似ているけど微妙に違うUI地獄”を防ぎ、スタイルの一貫性も保てます。 2. 装飾用クラスと構造用クラスを分ける たとえば、. container や . section はレイアウト構造を定義するクラス、. is-highlighted や . has-shadow は装飾を定義するクラス、というように分離しておくと、スタイルの切り替えや制御がしやすくなります。 この分離ができていないと、「ちょっとだけデザイン変えたいのに、全体に影響が出る」という事態が起きやすくなります。 3. 深すぎるネスト（入れ子）を避ける . a . b . c . d のように、4階層以上のセレクタでスタイルを当てるような書き方は、後で保守する際に非常に厄介です。 指定がピンポイントすぎて使い回せない DOM構造が変わった瞬間にスタイルが壊れる デバッグ時にどこが影響しているのか追いづらい 私は基本的に、「2階層まで＋クラス指定」が明確に読める範囲を目安に設計しています。 4. ! importantは極力使わない ! importantを使えば一時的にスタイルを強制できますが、一度使い始めると、それを“上書きするための上書き”が始まり、制御が効かなくなります。 実装者としては、! importantを多用する案件ほど「バグが起きやすく、壊しやすい」印象があります。 基本設計を丁寧にしておくことで、! importantに頼らなくても済む状態を作ることが、結果として軽量かつ柔軟なCSSに繋がります。 3. “崩れにくいCSS”にするための考慮点 CSSは「見た目を作るための言語」ではありますが、その見た目がどんな条件でも崩れないことが、実装者にとっては非常に重要です。 私が実務で特に意識しているのは、想定外の文字量・画像サイズ・画面幅でもレイアウトが破綻しない設計をすることです。 以下は、実際の現場で使っている具体的な手法とその目的をセットでご紹介します。 1. flexやgridで余白・配置を制御する 目的：固定幅に頼らず、柔軟な配置ができるようにする 固定幅で「ここに3つ並べる」と決め打ちしてしまうと、テキストが長くなったときにレイアウトが崩れます。 そのため、基本はflexやgridを使って“余白で調整する構造”にします。 実務例：カード3列のレイアウトで、各カードのタイトルが異なる長さだったが、justify-content: space-betweenとflex-growを併用することで整然と表示。 2. aspect-ratioの活用で画像・カードの比率を維持 目的：画像が潰れたり、縦長になったりするのを防ぐ ブラウザによるレスポンシブ対応が進んだ今、aspect-ratioを指定することで画像やカードの縦横比を維持しやすくなりました。 特に高さが揃わないことで、要素がガタつくUIでは非常に有効です。 実務例：サービス紹介のカード群で、すべて異なるサイズの画像を使用していたが、aspect-ratio: 4 / 3で見た目の統一感を実現。 3. min-width / max-width で可変幅に対応 目的：極端に小さい or 大きい画面でも崩れにくくする レスポンシブ対応では、単にブレイクポイントを設定するだけでなく、要素ごとの最小・最大幅の制限も重要です。 これにより、ウルトラワイドモニターや小型スマホなどにも対応できます。 実務例：横並びのボタンで、片方のテキストが短すぎて極端に小さくなっていたのを、min-width: 120pxで調整し、視認性を確保。 このように、「崩れにくいCSS」を実現するには、1つひとつのUIに“ゆらぎ”があっても保てる設計を心がけることが重要です。 4. “コーディングのしやすさ”は“修正のしやすさ”でもある 実装の現場では、「とりあえず今、見た目が合っていればいい」と思われる場面も少なくありません。しかし、その“とりあえず”の積み重ねが、後から大きな修正コストやレイアウト崩れを生む原因になります。 ベタ書きは一時的に早くても、長期的には破綻する たとえば、1ページだけのLPで、同じようなボタンや見出しが5回登場するとします。ベタ書きで都度スタイルを当てれば、短期的にはすぐ完成したように見えるかもしれません。 でも後から「このボタンの色を変えてほしい」と言われたときに── CSSを5か所書き直さなければいけない 指定漏れが発生して、一部だけ色が変わらない 最悪の場合、他の箇所に影響が出て崩れる ということが、本当によくあります。 コードを“整理された状態”にしておくことが、未来の自分や他の実装者を助ける 私が実装する際は、次の人が見てもすぐ理解できるように、以下のような配慮をしています： 同じUIは共通クラスで統一 ネストや命名ルールに一貫性を持たせる 意図的な調整（例：一時的なマージン）はコメントで補足 こうしておくと、「ちょっと文字を変えたい」「ボタンの順番を入れ替えたい」だけでレイアウトが崩れるリスクを限りなく減らせます。 実際にあった修正トラブルの例 あるWebサービスで、「ボタンの文言を1文字だけ変更したい」という軽微な修正依頼がありました。しかし、変更後にそのボタンだけ2行になり、周囲のボタンと高さがズレて、レイアウト全体がガタついてしまいました。 調査の結果、ボタン幅がテキスト量に依存しており、かつmin-widthやflexによる調整がされていなかったためでした。最終的にはCSSの書き直しと再調整が必要になり、想定の5倍以上の工数がかかってしまったのです。 このように、“ちょっとした修正”が地雷になるかどうかは、実装時のCSS設計次第です。 5. ディレクターに伝えたい3つのポイント CSS設計の良し悪しは、コードの中に潜んでいて目には見えにくいものです。ですが、ディレクターが少しだけその背景を意識してくださるだけで、実装の精度もスピードも、驚くほど変わってきます。 ここでは、私が実務の中で「ここを共有してもらえると本当に助かる」と感じている視点を3つご紹介します。 1. “ただ組めばいい”実装と、“考え抜いた”実装では、根本から違う 同じような見た目でも、CSSの構造には大きな差があります。 ベタ書きでその場しのぎの実装 → 修正時に崩れる・拡張できない 再利用・柔軟性・保守性を意識した実装 → 長期的に安定し、追加もスムーズ → デザインがしっかりしていても、実装が雑だと品質は支えられません。「どう見せるか」と同じくらい、「どう組むか」も意識していただけると助かります。 2. 繰り返しが多いUIは、設計段階で「共通化」を見越してほしい ボタンやカード、セクション見出しなど、同じ見た目のパーツが複数ある場合、都度コピペして個別対応するのではなく、共通化を前提に設計するとCSSがシンプルになります。 → デザイン時やワイヤーの段階で「このUIは共通です」と明記いただけると、クラス設計が明確になり、保守性も高くなります。 3. 「このパーツは流用予定」と意図を共有してもらえると設計が最適化しやすい 実装者として一番ありがたいのは、ディレクターから**“今後どう使う予定か”の情報**を事前にもらえることです。 「このバナーは今後別ページにも使う」 「このボタンはCMSで動的に増減するかも」 「このレイアウトは多言語対応予定」 → こうした背景を知っていると、最初の実装から“崩れない・柔軟に対応できるCSS”に仕上げることが可能になります。 ディレクターと実装者が目的を共有できると、修正や対応のたびに立ち返ることができる強いCSS設計が生まれます。 6. まとめ：目に見えないけど、CSS設計がWeb品質を左右する CSS設計は、見た目には現れません。ですがその良し悪しは、保守性・安定性・拡張性といった“Webの品質”そのものに直結しています。 実装者が時間をかけて設計する理由は、「崩れにくく、壊れにくく、長く使えるコードを残す」ためです。そしてそれは、ディレクターが“使いまわせる設計”や“意図の共有”を意識してくれることで、さらに強く、無駄のないCSS設計に繋がります。 軽さと柔軟さのあるCSSは、見た目以上にプロジェクトの安定性を支えます。次回のVol. 5では、「CSSだけでここまでできる実装アイデア」をご紹介します。 次回も、お楽しみに！ --- - Published: 2025-05-09 - Modified: 2025-05-24 - URL: https://fastcoding.jp/blog/all/ui-ux/figma-margins-css/ - カテゴリー: UI/UX, HTML/CSS - タグ: CSS, Figma, HTML Figmaでよく見られる「左右40pxの余白、中央800px」レイアウトをCSSに落とし込む方法を解説します。最適な組み合わせは、padding-inline、max-width、margin-inline: autoです。この設計により、視覚的な余白と構造の把握が容易になります。 「左右に40pxの余白、中央は800px」... ... これ、CSSでどう書くの？ Figmaのデザインでよく見る「左右に40pxの余白を取りつつ、中央に最大800pxのコンテンツを置く」というレイアウト。シンプルに見えて、CSSにどう落とし込めばいいか毎回悩むという方、私も含めて少なくないと思います。 以前の私は、margin なのか padding なのか、calc を使うべきかなど判断に迷いながら、都度コードを書いていました。でも今では、「この指定ならこのCSS」という定番の書き方がすっかり定着しています。 今回は、そんなFigma特有のマージン指定を、再利用性・保守性を考慮したCSS設計にどう落とし込むかを、実務ベースで解説します。 結論：padding-inline + max-width + margin-inline: auto の組み合わせが鉄板 まず結論です。Figmaでよくある「左右に40pxの余白を取りつつ、中央に800pxのコンテンツを置く」デザインは、以下のようなCSSで実装するのがベストです。 . container { max-width: 800px; margin-inline: auto; padding-inline: 40px; } なぜこの組み合わせが良いのか？ ◯ max-width 中央に収める最大幅を指定。これが「Figmaで中央800px」の部分に相当します。画面が広いときは800pxで止まり、狭いときは100%で縮まるため、レスポンシブにも自然に対応できます。 ◯ margin-inline: auto 左右の余白を自動的に均等にして、中央寄せを実現します。ブロック要素の水平センタリングでは、もはやおなじみの指定ですね。 ◯ padding-inline 画面サイズに応じて左右に余白を確保します。これはFigmaで言う「アートボードの左右に40pxのスペース」の再現です。 モダンCSSならではの書き方 padding-inline / margin-inline を使うことで、左右両対応（LTR/RTL）に自然に対応 セクションやページ全体に使える、再利用性の高い汎用コンテナクラスとしても優秀 古い書き方（例：padding-left / padding-right）よりもコードの明瞭性が高く、可読性も◎ この「max-width + margin-inline: auto + padding-inline」の組み合わせは、今やほとんどの案件でベース設計に使っています。デザインの意図とCSSの責務を正しく分離しつつ、最小限の指定でバランスの取れたレイアウトが作れるからです。 FigmaとCSSの「視点の違い」を理解する FigmaのデザインとCSSの実装がうまく噛み合わない原因の多くは、両者が“異なる視点”でレイアウトを扱っていることにあります。これを理解しておくと、Figmaでの指定を見たときに「どのCSSプロパティを使うべきか」が判断しやすくなります。 Figmaはビジュアル優先、CSSは構造・文脈優先 Figma：ピクセル単位での見た目や位置を視覚的に設計→ 「左右40pxの余白」「中央に800pxのブロック」といった指示がよくある CSS：コンテンツ構造・レイアウトのルールに基づいて描画→ 「何に対して余白を取るか」「親子関係の中でどう配置するか」が重要 つまり、Figmaの「40pxの余白」は見た目上の余白であり、CSSではそれを再現するためにpadding を使うのか、margin を使うのか、文脈に応じて判断する必要があります。 よくある指定と、対応するCSSの考え方 Figmaでの指定CSSでの考え方左右に40pxの余白padding-inline: 40px（親に指定）中央に幅800pxのコンテンツmax-width: 800px ＋ margin-inline: auto横幅いっぱいの背景 + 中央寄せの本文背景はセクションに、本文は . container で制御 親要素と子要素の役割を混同しない Figma上ではすべての要素が並列に見えがちですが、CSSでは親要素（ラッパー）と子要素（コンテンツ）で責任を分けて書くのが基本です。 親要素（例：. section）→ 背景色、上下のマージン、全体のpaddingなどを担当 子要素（例：. container）→ max-width・中央寄せ・内部余白を担当 こうすることで、Figmaのレイアウトを正しくCSSにマッピングできます。 まとめ：Figmaの「見た目の余白」は、CSSでは“親のpadding”で考える Figmaで「このブロック、左右に余白あるな」と感じたら、→ まず親要素の padding-inline を疑う コンテンツが中央に寄っているなと思ったら、→ max-width + margin-inline: auto を基本とする このように、CSSは“目的ベース”でスタイルを適用するという意識を持つと、Figmaとのギャップが減っていきます。 よくある勘違いと設計ミス FigmaのデザインをCSSに落とし込む際、初心者だけでなく中級者でも陥りやすいミスがあります。ここでは、実際に私が現場で何度も見てきた「ありがちな勘違い」と、それに対する正しい対処法を紹介します。 NG：margin-left/right で余白を取ってしまう 間違った例： . container { max-width: 800px; margin-left: 40px; margin-right: 40px; } この書き方では中央寄せされません。なぜなら、左右に固定マージンが入るだけで、中央に揃えるという指示は含まれていないからです。 正しくは： . container { max-width: 800px; margin-inline: auto; padding-inline: 40px; } margin-inline: auto で中央寄せを行い、padding-inline で見た目の余白を作ります。**“中央に寄せるのはmargin、余白を取るのはpadding”**という役割を明確に分けるのがポイントです。 NG：コンテンツが画面端に張り付いてしまう これもよくある問題です。max-width を設定して中央に寄せたつもりでも、画面が狭くなると余白がゼロになり、テキストが端まで詰まって読みにくくなるケースがあります。 原因： padding が未指定、または親要素に余白がない 解決策： padding-inline を付けて、狭い画面でも快適な余白を確保する . container { padding-inline: 20px; /* スマホ用 */ } @media (min-width: 768px) { . container { padding-inline: 40px; /* PC用 */ } } NG：box-sizing の指定漏れで横幅がはみ出す デフォルトでは、CSSは width に padding を含みません。そのため、max-width: 800px に padding: 40px を加えると、合計880pxになって中央からはみ出すことがあります。 対策： *, *::before, *::after { box-sizing: border-box; } box-sizing: border-box をグローバルに指定しておけば、paddingやborderを含めてwidthが制御されるため、予期せぬレイアウト崩れを防げます。 NG：子要素だけに margin: auto を指定してしまう よくあるパターンとして、 や などの中の要素に margin: auto を指定しても、幅指定がなければ中央には寄りません。 p { margin: auto; /* 効かない */ } 中央寄せしたい要素には必ず横幅の指定が必要です： p { width: fit-content; margin-inline: auto; } または、親要素（コンテナ）で制御する方がベターです。 まとめ：目的を明確にしてプロパティを選ぶ やりたいこと使うべきプロパティ要素を中央に寄せたいmargin-inline: auto要素の横幅を制限したいmax-width見た目の余白を付けたいpadding-inlineレイアウトの崩れを防ぎたいbox-sizing: border-box FigmaのレイアウトをそのままCSSに変換しようとすると、見た目通りに書いたつもりでも、意図通りに動かないことが多いです。だからこそ、「見た目」ではなく「構造」と「役割」でCSSを書く意識が大切です。 可変レイアウトで使える calc の応用 Figmaでよくある指定のひとつに、「左右40pxの余白だけど、画面が狭くなったら自動で縮めてね」という、固定でもなければ完全なレスポンシブでもない曖昧な表現があります。 こうしたときに活躍するのが、CSSの関数 calc や clamp です。これらを使えば、画面幅に応じて自然に余白をコントロールできる、今っぽい可変レイアウトが実現できます。 calc を使った例：固定値＋割合のミックス /. container {padding-inline: calc(5vw + 20px);} 5vw は「ビューポート幅の5%」 + 20px は最低限確保したい余白 つまりこの例では、「最低でも20px、画面が広くなれば5vwまで伸びる」という柔軟な余白設定になります。 実務的には clamp の方が直感的で使いやすい 最近の案件では、calcよりも clamp を使うケースの方が増えています。理由はシンプルで、最小・理想・最大の3点を一発で指定できるからです。 . container { padding-inline: clamp(16px, 5vw, 40px); } この指定は、 最小で 16px（スマホ） 理想的には 5vw（中間） 最大で 40px（大画面） という、スケーラブルかつ破綻しにくいパディングを実現できます。 メディアクエリで切り替える場合との違い /* メディアクエリ方式 */ . container { padding-inline: 16px; } @media (min-width: 768px) { . container { padding-inline: 40px; } } この方法でも十分機能しますが、ブレイクポイントがはっきりしている場合に限定されます。対して clamp や calc を使えば、**滑らかに余白が変化し、より“デザインに寄り添ったレイアウト”**が可能です。 どちらを使うべき？ 条件おすすめ明確なブレイクポイントがあるメディアクエリ余白を滑らかに変化させたいclamp or calcスマホ〜PCまで対応しつつ、保守性も高めたいclamp 一択 CSS関数を活用すれば、「この画面幅のときだけ崩れる... 」といったレイアウトのブレを減らすことができます。特にスマホとPCで余白の感じ方が大きく変わるUIでは、実装後の微調整を減らせるメリットも大きいです。 サンプルコード：レスポンシブ対応の中央寄せレイアウト ここでは、これまでの内容をふまえた再利用可能な . container クラスの実装例を紹介します。このパターンは、私の現場でもLPやコーポレートサイト、ブログなど幅広い案件で定番として使っているレイアウトのベースです。 ◯ HTML構造＋CSS実装例（シンプルで再利用しやすく、モダンな中央寄せコンテナ） CodePen Embed Fallback . section は背景色や上下マージンなどセクション全体の装飾用 . container は中央寄せ＋余白の制御用 各プロパティの意味と意図 プロパティ内容max-width: 800pxコンテンツの最大幅を800pxに制限margin-inline: auto中央に配置padding-inline: clamp(16px, 5vw, 40px)画面サイズに応じた柔軟な左右余白width: 100%親要素いっぱいに広げる（max-widthで制限）box-sizing: border-boxパディングを含めた幅計算で崩れ防止 スマホでも安心のレスポンシブ対応 この . container を使えば、スマホ〜タブレット〜PCまで自然な余白感を保ちつつ中央寄せを実現できます。特に clamp を使うことで、細かいブレイクポイントをいちいち書かなくても良いのが最大の利点です。 応用例：. container--narrow, . container--wide の派生 複数の幅バリエーションを使い分けたい場合は、以下のようにクラスを拡張するのがおすすめです。 CodePen Embed Fallback ブログ本文 → . container--narrow ヒーロービジュアル → . container--wide 汎用パーツ → . container といった具合に、設計としての一貫性を保ちながら柔軟に使い分けられます。 この . container パターンを持っておくことで、Figmaの「なんとなくそう見える」マージン指定にも迷わなくなります。実装ルールとしてチーム内で共有しておくのもおすすめです。 実務Tips：複数コンテナ構造の整理術 実際の案件では、1ページの中に複数のセクションごとに異なる幅のコンテンツが出てくることは珍しくありません。そのたびにスタイルを個別対応していると、CSSが複雑化し、保守しづらくなる原因になります。 ここでは、私が普段から実践している「コンテナの整理ルールと命名の工夫」を紹介します。 . container をページ内で何度も使うのはOK＋幅が異なる場合は修飾クラスを使う . container はあくまで中央寄せ＋左右のpaddingを担う汎用クラスなので、1ページに何度使っても構いません。むしろ使い回すことで、レイアウトの一貫性が保てるというメリットがあります。 max-width を切り替えたい場面では、以下のように修飾クラスで派生パターンを作るのがスマートです。 CodePen Embed Fallback NG例： max-width を都度インラインやID指定で個別に書く→ 保守性が低く、クラス名の意味も不明瞭になります。 OK例： . container-- で意味を持たせる→ チーム開発でも読みやすく、再利用性◎ 上下のマージンは . container に持たせない 中央寄せ・余白制御を . container に持たせるのは良いのですが、上下のマージン（セクション間の余白）まで含めるのはNGです。 理由： 複数のセクションが並ぶと意図しない余白の重複が発生しやすい . container は「構造を整えるための器」なので、装飾や間隔はセクション側で制御すべき 推奨パターン： CodePen Embed Fallback よく使う命名パターンまとめ クラス名用途. container基本的な中央寄せレイアウト（max-width 800px）. container--narrowブログ本文やテキスト主体のセクションに（600px）. container--wideヒーローエリア、ビジュアルセクションに（1200pxなど）. sectionセクション単位の背景・上下padding管理用 CSS設計で重要なのは、「役割を分ける」「責任を明確にする」こと。. container と . section を分離しておくことで、余白や背景の調整も柔軟になり、デザインの再現性も格段に上がります。 まとめ：Figmaの「それっぽい余白」を構造的に再現する Figmaでよく見る「左右に余白があって中央に収まっている」デザインは、**CSSでいえば「max-width + margin-inline: auto + padding-inline」**の組み合わせが基本です。 大事なのは、“見た目の余白”ではなく、“構造的に意味のある余白”としてコーディングすること。そのためには、役割を分けた . container の設計と、clamp や box-sizing といったモダンCSSの活用が鍵になります。 複雑な指定も、基本の「型」を知っていれば迷いません。Figmaの意図を読み解きつつ、CSSでシンプルに再現する設計力が、現場では一番求められています。 次回は、Figmaでよく指定される透明なヘッダー＋スクロール時の固定化を、position: sticky を使ってスマートに実装する方法を解説します。 次回もお楽しみに！ --- - Published: 2025-05-06 - Modified: 2025-05-02 - URL: https://fastcoding.jp/blog/all/info/freelancehub-link/ - カテゴリー: Web業界の動向・情報 レバレジーズ株式会社様が運営するITフリーランス向け案件サイト「Freelancehub」で、弊社のブログ記事「マイクロコピーとは？効果的な活用方法をご紹介！」をご紹介いただきました！ ぜひご覧ください！ ご紹介いただいた記事：UI/UXデザイナーとして振り返りや業務に活かせる情報まとめ フリーランスHubトップページ：https://freelance-hub. jp/ フリーランスHub案件一覧ページ：https://freelance-hub. jp/project/ --- - Published: 2025-05-02 - Modified: 2025-05-02 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide03/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: UI/UX, ディレクション, フロントエンド設計, レスポンシブ設計 Web制作でよくある「CSSが効かない」のフィードバックは、だいたいがCSSプロパティの組み合わせで起きるバグです。HTMLがz-indexやposition: sticky、flexの影響を受けて、親子関係や他のプロパティによってスタイルが変わります。このあたり抑えておくだけで、バグはかなり少なくなりますよ！ 1. はじめに：「CSSが効いてない？」と感じたときに知ってほしいこと Web制作の現場では、こんなフィードバックをよくいただきます。 「この要素、前面に出てこないんですが」「スクロールしても固定されないですよね？」「中央揃えにしたって聞いてたけど、ちょっとズレてませんか？」 一見すると「CSSがちゃんと書かれていないのでは？」と思われるかもしれません。ですが、実装者の立場から見ると、これらはCSSの記述ミスではなく、“仕様通りに動いている結果”であることが非常に多いのです。 実装側が向き合っているのは「CSSの落とし穴」 私自身、コーディング代行を通じてさまざまな案件を担当してきましたが、見た目に関する不具合の中には「意図通りに見えないけど、実は仕様通り」というケースがたくさんあります。 特に、 z-index position: sticky flexレイアウト overflow: hidden などは、見た目に直結するのに誤解されやすいCSSプロパティの代表格です。しかも、少し環境や親要素の条件が変わるだけで動作がガラッと変わるため、実装者も慎重に扱っています。 本記事では、実装の現場で実際に起きた事例をベースに、「なぜ効かないように見えるのか？」「何が背景にあるのか？」を、技術用語をできるだけ使わずに解説していきます！ 2. ケース1：z-indexが効かない → 親要素のposition設定が影響している 「この要素を一番上に出したはずなのに、隠れて見えない」──これは、Web制作の現場で非常によくある現象です。たとえばモーダルウィンドウ、ツールチップ、ドロップダウンメニューなど、前面に出てほしい要素が後ろに隠れてしまうというトラブルです。 z-indexは「数字が大きければ勝ち」ではない 多くの人が誤解しやすいのが、z-index: 9999のように大きな数値を指定すれば最前面になる、という認識です。しかし実際には、z-indexは“スタッキングコンテキスト”というルールの中でしか効果を持ちません。 スタッキングコンテキストとは？ スタッキングコンテキスト（stacking context）とは、ざっくり言えば「z-indexの競争が起きるグループ」のこと。そして、このグループは、親要素にposition: relativeやposition: absoluteなどが指定されることで新しく作られることがあります。 つまり、z-indexを効かせたい要素の外側の親要素が“壁”になっている可能性があるのです。 実際にあった例（体験談） ある案件で、ポップアップのモーダルが他のセクションの下に隠れて表示されない、という問題が発生しました。原因を追っていくと、モーダルの親要素にposition: relativeが指定されており、さらにその外側の要素にもz-index: 1が設定されていたことで、モーダルがそのコンテキストの外に出られない状態になっていたのです。 このように、「前に出したいのに出ない」問題の多くは、親の影響による“構造の問題”です。 point! ディレクターが覚えておくと便利な視点 z-indexが効かないときは、親要素が「邪魔していないか？」を疑う 表示の優先順位は、HTML構造や親子関係にも左右される 修正には「構造の見直し」が必要で、単に数値を変えるだけでは解決しないことも多い 3. ケース2：position: stickyが効かない → 指定条件が揃っていない 「ヘッダーをスクロールに追従させたい」「サイドメニューを途中まで固定にしたい」──こうした要件でよく使われるのが、position: sticky です。ですが、実装後にディレクターさんからこう言われることがあります。 「Sticky指定したって聞いてるけど、動いてなくないですか？」 実はこれも、CSSの記述ミスではなく、“stickyが効く条件が満たされていない”だけというケースがとても多いです。 stickyは「指定すれば効く」ものではない position: sticky は、top: 0 や left: 0 などと組み合わせて使うことで、要素が一定位置に達した時に固定されるプロパティです。ただし、条件が整っていなければ一切効きません。 stickyが無効になる主な原因（実務でも頻出） 以下は、私が実際に遭遇したsticky無効化の原因ベスト3です： 親要素に overflow: hidden / scroll / auto が指定されている→ Stickyは親のスクロール領域に依存するため、overflowが設定されていると反応しません。 親要素の高さが足りない→ Stickyは「スクロール領域」があって初めて動作するため、親の高さが足りないとスクロールイベントが発生せず、固定位置にも達しません。 top / bottom の指定がない→ stickyには“いつ固定されるか”を示す基準が必要です。top: 0などの指定がなければ機能しません。 実装現場での例 過去に、商品紹介ページで「スマホ版だけstickyが効いていない」という報告を受けたことがあります。調査してみると、スマホ表示時にだけメインラッパー要素に overflow-x: hidden が設定されており、これがstickyの発火を阻害していたことが分かりました。PCでは効いていたため、気づくのが遅れたケースでした。 point! ディレクターが知っておくと役立つ視点 stickyは「表示上のテクニック」ではなく、「スクロール構造」に依存している 表示が動かないときは、「親のCSSや高さも確認すべき」 PCとスマホで挙動が違う場合、画面幅だけでなく、CSS全体の構造差異を疑うのがポイント 4. ケース3：flexで思った通りに揃わない → 初期値や幅指定の落とし穴 「要素を中央に揃えたはずなのにズレてる」「横並びにしたのに、ボタンの幅が勝手に変わってる」──Flexbox（flexレイアウト）を使ったUIで、こんなズレを感じたことはありませんか？ これもCSSのバグではなく、Flexbox特有の“初期値”や“仕様による振る舞い”が原因のことが多いです。 よくあるズレの原因と実装者がハマるポイント 1. align-itemsとjustify-contentの混同 縦方向の揃え（align-items）と横方向の揃え（justify-content）が混同されることで、「中央揃えにしたつもりが、上下どちらかにズレていた」ということがよくあります。 横方向に中央配置したい → justify-content: center 縦方向に中央配置したい → align-items: center 実際の案件でも、「テキストが上下に寄ってる」と指摘され、よく見ると指定が逆になっていたということがありました。 2. min-widthやflex-shrinkによる自動縮小 Flexboxは、子要素のサイズに応じてレイアウトが柔軟に変わりますが、ときに意図しない“縮み”が発生することがあります。 たとえば、ボタン2つを横並びにしたとき： display: flex; justify-content: space-between; だけだと、ボタンの文字数によって幅がバラバラになることがあります。このとき、min-widthやflex: 1の指定がないと、片方だけ極端に小さく見えるなど、バランスが崩れた見た目になることがあります。 実装現場でのよくある例 LPで「2つのボタンを同じ幅に揃えて並べてほしい」という指示をいただいた際、Figmaでは等幅に見えていたのに、実装後に崩れたケースがありました。調べてみると、片方のボタンのテキストが長く、もう片方が短いため、flexの自動計算で均等になっていなかったのが原因でした。 対処法としては、flex: 1 や width: 100% を指定して「強制的に揃える」実装が必要になります。 point! ディレクターが知っておくと役立つ視点 Flexboxは「柔軟だけど意外とクセがある」レイアウト方式 子要素のテキスト量・初期サイズ・縮小許可の有無で見た目が大きく変わる Figmaで整って見えても、実データでズレることが前提のつくりだと理解しておくと◎ 5. ケース4：overflow: hiddenが想定外の副作用を生む 要素のはみ出しを防ぐために、overflow: hidden を使うのはCSSの定番テクニックのひとつです。しかし実装の現場では、このプロパティが**“思わぬCSSトラブル”の引き金になることがよくあります**。 便利なはずが、逆に“効かなくなる”ことも 例えば、以下のような現象を見たことはないでしょうか？ ホバーアニメーションが途中で途切れる スクロールしても sticky が効かない 子要素が見えなくなって操作できない 実はこれ、すべて overflow: hidden が原因で起きている可能性があります。 実装者視点での「やりがち・起こりがち」 1. hoverアニメーションが切れる ボタンにホバーアニメーション（外枠が拡大するような動き）をつけたのに、枠が途中で切れてしまうというケース。これは、親要素に overflow: hidden がついていたため、アニメーションの一部が“はみ出し扱い”となって見えなくなるためです。 2. stickyが無効になる 第3章でも触れましたが、position: sticky は親要素のoverflowがvisibleでないと効かない仕様です。親が overflow: hidden を持っているだけで、子のstickyは一切機能しなくなります。 3. スクロールができない モーダルやサイドバーの中身をスクロール可能にしたはずが、なぜか動かない──というとき、親要素に overflow: hidden がついていたことで、スクロールイベントが“遮断”されていたというのも実際にあった事例です。 なぜこうなるのか？ overflow: hidden は「はみ出し部分を切り捨てる」という性質を持つため、見た目だけでなく、内部での描画やスクロールの挙動にも影響を与えてしまいます。 つまり、「余白を整えるための軽い調整」のつもりが、他のCSSと干渉して思わぬ副作用を起こしてしまうことがあるのです。 point! ディレクターが知っておくと役立つ視点 overflow系プロパティは「見え方」だけでなく「動き」にも影響する hoverやスクロールが効かないときは、「CSSの仕様干渉」を疑う 見た目が正しくても、「動作確認」まで含めたレビューが重要 6. ディレクターに知っておいてほしい3つの視点 実装者としてさまざまな案件に関わってきた中で感じるのは、CSSの“効き方”を理解しているディレクターは、レビューやフィードバックの質が圧倒的に高いということです。 ちょっとした視点の違いで、実装との連携がスムーズになり、修正の回数も減らせます。以下の3つは特に意識してもらえると現場が助かるポイントです。 1. 「CSSが効かない＝バグ」とは限らない 見た目が崩れていたり、意図通りの動きになっていなかったりしても、それは単なる記述ミスではなく、“CSSの仕様による制限”である可能性が高いです。 →「効いていない」という言葉ではなく、「このような見た目にしたい／こういう動きにしたい」という“意図”で伝えていただくと非常に助かります。 2. レイアウトは複数のスタイルが“連動”して成り立っている UIの見た目や動作は、個別のCSSプロパティの積み重ねではなく、構造や文脈の中で成り立っています。 たとえば、 z-indexが効かない → 親要素のpositionの影響 stickyが動かない → overflowと高さの関係 flexでズレる → 要素の初期幅や並び順の影響 このように、原因が要素自身ではなく“周囲の設定”にあることが多いため、「この見た目の仕組みはどうなってる？」という視点で確認してもらえると、的確な修正が可能になります。 3. 意図を共有してもらえると、実装側で最適な方法を選べる CSSは1つの見た目を作るのに複数の方法が存在するため、「どう書くか」よりも「どう見せたいか」を明確にしてもらえると、実装者としても最適な手段を選びやすくなります。 → たとえば、「ボタンは中央に固定」「スクロール中はヘッダーを常に表示したい」といった動作の目的ベースの指示は、非常にありがたいです。 これらの視点を持っていただけるだけで、CSSの“見た目トラブル”は減り、結果としてプロジェクトのスピードと品質が向上します。 7. まとめ：CSSは“単独では動かない”仕様の積み重ね 「CSSが効かないように見える」現象の多くは、バグではなく、仕様による制約や前提条件の不足が原因です。 z-index、sticky、flex、overflow──どれも便利なプロパティですが、それ単体では思い通りに動かず、他の設定と連動して初めて成立します。 Webディレクターとして、「効いていない？」と感じたときは、“ミス”ではなく“仕組み”を疑う視点を持っていただけると、実装側との連携がぐっとスムーズになります。 小さな知識の積み重ねが、プロジェクト全体の品質を底上げします。 次回のVol. 4では、「“簡単に直せるでしょ？”が簡単じゃない理由」をテーマに、軽微な修正が実装に与える影響について解説します。 Vol. 4も、お楽しみに！ --- - Published: 2025-04-28 - Modified: 2025-04-28 - URL: https://fastcoding.jp/blog/all/info/hikaku_202504/ - カテゴリー: React, Vue.js, Web業界の動向・情報 - タグ: Web業界の動向, ディレクション, フロントエンド, 価格 こちらの記事では、コーディング代行を利用される利用者様のために、定期的に各社のWebサイトに書いてある情報をまとめています。 今回は、2025年4月現在の最新のウェブ検索結果をもとに、HTMLコーディング代行会社の検索で上位に入っている9社と自社を含む計10社の料金体系について比較し、まとめました。 HTMLコーディング代行を利用される際はぜひ一度チェックしてみてください。 ※すべてWebサイトに公開されている情報のため、実際にご依頼された場合に異なる可能性があります。あくまで参考としてご覧ください。 ※掲載禁止を申し出された会社様については載せておりません。この一覧に載っていないのが、決してサービスの終了等を意味するものではないので、その点もご了承ください。 ※料金については、税抜・税込金額が混在しています。各社のWebサイトに記載されている通りに掲載しておりますので、ご了承くださいませ。 ※前回の記事から変更があった箇所については赤文字にしてあります。 ※今回初めてご紹介するサービスについては、＊を付けています。 HTMLコーディング代行会社 基本料金比較 まずは、基本料金の有無と、プロジェクト全体にかかる費用（進行管理費用など）の有無について表にまとめました。 コーディング代行会社によっては基本料金が発生しない場合や、別途オプションで発生することもあります。 サービス名 基本料金の 有無、費用 その他、全体にかかる費用 ファストコーディング なし 特になし コーディングベア 静的サイト： 50,000円 プロジェクト進行管理費用として、 1プロジェクトにつき10%〜 コーディングアライブ 基本料金： 6,000 円/1時間 プロジェクト進行管理費用として、全体の20%。 Kireiコーディング なし 特になし コーディングラボ なし 最低料金：50,000円 iCoding＊ 1プロジェクトにつき 30,000円～ 特になし デジタルクリエーション＊ なし 特になし コーディングコネクション＊ 不明 不明 CODING ARMY＊ なし 特になし 86CODING なし 特になし コーディング代行会社によっては、プロジェクトの内容によって基本料金が変わることや、別途進行管理費用が設定されることもあります。 一般的に、コーディング料金は「基本料金＋ページ単価×ページ数」で計算されます。そのため、基本料金が高いとコーディング費用も高くなるのではないかと思われがちですが、実際にはどうなのでしょうか。 次に、ページ単価について比較してみます。 HTMLコーディング代行会社の1ページあたりの価格を比較しました！ 多くのコーディング代行会社では、1ページあたりの価格を設定しています。ただし、この価格は、コーディングされるページの内容や複雑さ、ページの情報量やプロジェクト全体の総ページ数などによっても変わってきます。 1ページあたりの料金と、10ページあたりのレスポンシブコーディング料金※、さらにそれ以外にかかってくることが予想される費用（オプションなど）について、表にまとめました。 （※レスポンシブコーディングで、全てのページの縦の長さを5,000pxと仮定した場合。） サービス名 レスポンシブコーディング 1ページあたりの単価（税抜） 10ページのあたりの レスポンシブコーディング料金 （概算）※ それ以外にかかる費用（予想） ファストコーディング 8,000円（税抜）/2,500px毎 160,000円（税抜） JavaScriptやアニメーションの追加、CMS構築など、基本的にはほとんど無料。 （仕様によっては別途見積もりになる場合もあり） 急ぎの依頼には追加料金が発生。 コーディングベア 10,000円（税抜）/4,000px毎 275,000円（税抜） （Webサイトを元に計算） JavaScriptやアニメーションの追加、CMS構築なども追加料金。 オプション毎に費用が指定されているので、事前のチェックが必要。 コーディングアライブ 12,000円〜 トップページは、48,000円〜 不明 （データの長さ等の指定がなく、 作業時間も不明のため） 無料対応と有料対応のJavaScript（アニメーション）があるので、注意が必要。 CMS構築は追加料金。 Kireiコーディング ¥25,000〜／1P：下層ページ最低価格 トップページは、100,000円〜 370,000円（税抜） （Webサイトを元に計算） ページ単価については、見積もりにて詳細確定。 一般的なJavaScript、jQueryについては無料。 CMS構築は追加料金。 コーディングラボ 15,000円/3,000pxまで（1〜10ページの場合） 150,000円 （Webサイトを元に計算） ページの縦の長さが長い場合には、3,000pxごとに＋10,000円。 （11ページ以上の場合、上記の追加料金はかかりません。） スライダー、モーダルなどについては無料だが、それ以外のJavaScriptやアニメーションは有料。 CMS構築も追加料金。 Reactコーディングについては、別途単価が設定されています。 iCoding＊ トップページ：30,000円 下層ページ：5,000円（3,000pxまで） 105,000円〜 （Webサイトを元に計算） 下層ページが3,000px以上の場合、ページ単価は1000px毎に＋1,500円追加。 XD以外でのデザイン入稿の場合は、ページ単価は＋2,000円 デジタルクリエーション＊ トップページ：50,000円〜 下層ページ：15,000円〜 料金 ページ単価はデザイン及び仕様によって異なります。 ページサイズはおおよそ高さ4,000px程度を想定。 コーディングコネクション＊ 4,000円〜 不明 （データの長さ等の指定がなく、 基本料金の有無が不明のため） 基本的なJavaScripは無料で対応 CODING ARMY＊ トップページ：40,000円/5,000px 下層ページ：15,000円/5,000px（1〜10ページの場合） 175,000円 （Webサイトを元に計算） 5,000pxを超える場合は別途見積もり。 JavaScriptを使ったアニメーションは別途見積もり。 86CODING 9,980円（税抜）/2,500pxまで 149,800円（税抜） （Webサイトを元に計算） ページの縦の長さが長い場合には、＋200円（税抜）/100px毎 JavaScriptやアニメーションの追加、CMS構築なども追加料金。 オプション毎に費用が指定されているので、事前のチェックが必要。 料金比較時のポイント 追加サービスの料金 多くの会社で、基本のコーディング費用に加え、SEO対策や画像の最適化、JavaScriptのカスタマイズなど、追加サービスに対して別途料金が発生します。これらの費用はプロジェクトの範囲や要件によって異なるため、見積もり時に必ず確認しましょう。 特別な要件に対する追加料金 特定のデバイス対応や特殊なフレームワークの使用、カスタムアニメーションの追加など、標準サービスに含まれない要件については追加料金が必要となる場合が多いです。また、急ぎの依頼や納期の短縮に対応する場合も追加料金が発生することが一般的です。 修正や変更にかかる費用 納品後の修正に関しては、多くの会社で一定期間は無料対応していますが、それ以降は追加費用がかかる場合が多いです。また、修正の内容や範囲によっても費用が異なるため、事前に納品後の対応について確認しておくと安心です。 各サービスにはそれぞれ強みがあるため、料金も様々です。 また、プロジェクトのページ数によって料金が変わったり、トップページと下層ページで金額が違ったりするなど、個々の特徴があります。プロジェクトの大きさや内容に応じて比較するのも良いかもしれませんね。 HTMLコーディング代行会社を選ぶ際には、ご自分のプロジェクトに最適な代行会社を見つけてください。 ただし、上記の金額はあくまで目安です。前述の通り、プロジェクトの規模や仕様、オプションの有無によっても金額が変わるため、まずは各代行会社に事前に見積もりを依頼してみましょう。 この記事が皆様のプロジェクト成功への一助となれば幸いです。 今回ピックアップしたコーディング代行会社10社 FASTCODING URL： https://fastcoding. jp/ 運営会社： 株式会社ファストコーディング 住所： 東京都千代田区外神田6-11-16 GMビル5階 電話番号： 03-6806-0354 コーディングベア URL： https://coding-bear. com/ 運営会社： ドーン株式会社 住所： 東京都港区芝大門1-10-18 PMO芝大門2F 電話番号： 03-5510-1515 コーディングアライブ URL： https://coding-alive. jp/ 運営会社： アライブ株式会社 住所： 名古屋市中区大須3-2-5 吉桂ビル4階 電話番号： 052-684-5558 Kireiコーディング URL： https://kirei-coding. jp/ 運営会社： 株式会社 ディラクト 住所： 東京都中央区銀座1丁目14-5銀座ウイングビル 7F 電話番号： 03-3528-6450 コーディングラボ URL： https://coding-labo. jp/ 運営会社： ibis studio株式会社 住所： 大阪市西区靭本町2-2-22 ウツボパークビル8F 電話番号： 050-3184-0915 iCoding URL： https://icoding. co. jp/ 運営会社： 株式会社icon 住所： 東京都千代田区霞が関3-6-15 霞ヶ関MHタワーズ6F 電話番号： 03-5511-4560 デジタルクリエーション URL： https://www. digicre-web. jp/coding 運営会社： 株式会社 デジタルクリエーション 住所： 大阪府吹田市南金田1丁目14-30 江坂山崎ビル403号 電話番号： 06-6170-5100 コーディングコネクション URL： https://www. codeconnection. net/ 運営会社： 株式会社フードコネクション 住所： 東京都目黒区目黒1-24-12 オリックス目黒ビル2F 電話番号： 0120-938-043 CODING ARMY URL： https://www. coding-army. jp/ 運営会社： 株式会社ジェー・ピー・シー 住所： 京都市下京区富小路通高辻下る恵美須屋町193番地 電話番号： 075-365-0571 86CODING URL： https://86coding. com/ 運営会社： ハイブリッジ 株式会社 住所： 東京都中央区銀座3-14-13 第一厚生館ビル5F 電話番号： 03-6284-1781 --- - Published: 2025-04-24 - Modified: 2025-04-22 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide02/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: UI/UX, ディレクション, フロントエンド設計, レスポンシブ設計 UIUXのレスポンシブ対応はPCとスマホだけでなく、中間画面サイズや実データの影響を考慮して設計しなければなりません。弊社で実際に使っているコツをお教えいたします！ 1. はじめに：「レスポンシブ対応済み」と言っても... フロントエンドのコーディング代行をしていると、デザイン確認の際によくこんなやりとりがあります。 「PCとスマホのデザインはそれぞれ作ってあるので、あとは切り替えだけお願いします」「このデザインでレスポンシブ対応、問題ないですよね？」 こうした言葉をいただいたとき、実装者として私が最初に確認するのは、“その間のサイズがどうなっているか”です。なぜなら、「PCとスマホの2画面だけでは不十分なケース」が非常に多いからです。 表示が“切り替わる”だけでなく、“崩れない”ことが重要 確かに、Figmaで2つのデザインが用意されていれば、ブレイクポイントを使って切り替える実装は可能です。ただし現実には、その“間のサイズ”──たとえばタブレット、小型ノートPC、あるいはズームされたスマホ画面など──で意図しないレイアウト崩れが発生することがよくあります。 さらに、デザインには存在しないけれど、実データを流し込むことで起こる破綻（長文タイトル、ボタン文言の改行など）も避けては通れません。 実装者は「表示が切り替わる」よりも、「崩れない」ことに神経を使っている レスポンシブ対応とは、単に画面サイズで表示を切り替える仕組みではなく、どんな画面幅・どんなデータでもUIが破綻しないように保つ“柔軟性の設計”が本質です。 本記事では、コーディング実務の中で実際に遭遇した“レスポンシブ対応の落とし穴”と、それに対してどのような工夫や判断が求められているのかを、Webディレクターの皆さんに共有したいと思います。 2. レスポンシブは“2つのサイズ”だけでは足りない理由 実装の現場で最もよくあるのが、「PCとスマホ、それぞれのデザインを渡されたから問題ないだろう」というケースです。しかし、コーディングの段階でUIの破綻を防ごうとすると、その“間”のサイズ感＝中間画面幅での設計が重要になります。 タブレット・小型PCは“未対応ゾーン”になりやすい たとえばiPadやSurface、11インチのノートPCなどは、PCほど横幅がなく、スマホほど縦長でもない中間サイズです。この領域は、Figma上で意識されていないことも多く、「どっちつかず」の見た目になってしまうリスクが高いです。 特に横並びのパーツやグリッド系レイアウトは、スマホ向けの縦積みにもPC向けの横展開にも収まりきらず、レイアウトが崩れやすくなります。 実データが入ると一気に破綻する デザイン段階では仮テキストや短いコピーが使われていても、実装時には本番のタイトル・商品名・説明文が入ります。そうなると、たとえば以下のようなことがよく起きます。 ボタン内のテキストが長くて2行になり、横並びが崩れる タイトルが折り返して見た目が詰まる カードグリッドで高さが揃わずガタつく Figmaでは綺麗に見えていたものが、実データで一気に破綻する──これは実装者として日々直面している現実です。 想定外の閲覧環境：Webビュー、翻訳、ズーム もう一つ見落とされがちなのが、“Web以外の見られ方”です。 アプリ内のWebビューで表示されたとき、余白が切れる 英語や中国語などに翻訳された際、文字が長くなりUIが崩れる 高齢者ユーザーがブラウザのズーム機能で拡大表示したとき、レイアウトが突き抜ける これらはすべて、実装者が「起こり得るリスク」として日頃から警戒しているポイントです。ブレイクポイントだけでは吸収できない“中身の変動”に備える必要があるのです。 それでは、こうしたリスクを踏まえ、私たち実装者が実際に「ここは崩れやすい」と感じるUIパターンと、その問題点について具体的に紹介していきます。 3. 実装者目線での“崩れやすいポイント”とは？ レスポンシブ設計では、「見た目上キレイに並んでいるように見えるパーツ」ほど、実装時に崩れやすい落とし穴が潜んでいます。以下は、私がこれまでの案件で繰り返し直面してきた、破綻リスクの高いUI構成の代表例です。 カードグリッド よくある崩れ方：高さがバラバラに揃わない／余白が崩れる カード型レイアウトは一見シンプルですが、タイトルの長さや画像の比率が揃っていないと高さが崩れ、整って見えなくなります。「デザインでは3列でキレイに揃っていたのに、実データを入れたらガタガタになった」というのは非常によくあるパターンです。 タブ切り替え よくある崩れ方：ラベル数や文字数で折り返し／はみ出しが発生 タブUIはラベルの数が増えると、横幅が足りずにテキストが折り返されたり、タブ自体が下に落ちてしまったりすることがあります。特にスマホ表示で「4タブ以上」ある場合や、ラベルが翻訳で長くなった場合に破綻しやすいです。 テーブルレイアウト よくある崩れ方：スマホ幅で列が潰れて読めない／横スクロールが必要になる PCでは問題なくても、スマホでは表が画面幅に収まらず、列が押しつぶされて可読性が下がることが頻繁に起こります。スクロール対応や折り返し処理が必要になりますが、それも表の構成次第では難しい場合があります。 ボタン横並び よくある崩れ方：ラベルの文字量で左右のバランスが崩れる 「戻る／次へ」「キャンセル／保存」などの横並びのボタンは、ラベルの文字量によって片方が2行になってしまうことがよくあります。たった数文字でレイアウトが大きく崩れるため、非常に繊細な調整が求められるパーツです。 こうした崩れやすいパーツは、デザインの段階で気づきにくく、「あとはそのままコーディングすれば大丈夫」と思われがちです。ですが実装者側では、1px単位でバランスを調整しながら、“崩れない幅”と“柔軟な可変性”を両立させる工夫を日々行っています。 4. ブレイクポイントだけではない“実装調整”の実際 「ブレイクポイントで切り替えてあるから大丈夫」──そう思われることもありますが、実装の現場では、それだけでは足りないことの方が多いのが現実です。 むしろ、UIの崩れやすさは画面幅ではなく、コンテンツの中身や構成によって起こることが多く、柔軟な調整力が求められます。 コンポーネント単位で“中身に応じた柔軟設計”が基本 私が実装する際は、各UIパーツを「この中にどんな内容が入っても破綻しないか？」という視点で見ています。たとえば： テキストが長くても折り返してレイアウトが崩れない 画面幅が狭くなっても要素同士が重ならない 意図しない余白や行間が発生しないように内側の余白も調整 こうした条件を満たすために、min-width、flex-wrap、overflow などの細かなCSS調整をパーツごとに追加しています。 「幅の切り替え」ではなく「構成の耐性」が重要 たとえば、カード型のグリッドでは、単に2列→1列にするだけではなく、高さのばらつきに備えてgrid-auto-rowsやalign-items: stretchを併用することで、見た目の整合性を維持します。 また、タブが多くなったときの対応として、横スクロールに切り替える／ボタン形式に落とし込むなど、表示方法自体を柔軟に切り替える工夫も必要です。 柔軟性のある実装＝“崩れにくいUI”の鍵 私が一番意識しているのは、「固定値をなるべく使わない」「可変データでも壊れない作りにする」ことです。 たとえば、ボタンの幅を明示的に揃えるのではなく、paddingとtext-alignで自然に整える。テーブルでは、列幅にmin-widthを持たせつつ、overflow: autoで横スクロールに逃がす。こういった調整を積み重ねることで、見た目が保たれ、操作にもストレスがないUIが完成します。 ディレクターの方がこれらの背景を少しでも知っておくと、実装時に「ここは柔軟に作る前提で考えてもらえますか？」と一言添えるだけで、後工程の工数が大きく変わってきます。 5. ディレクターが押さえておくと役立つ3つの視点 レスポンシブ対応の現場では、「見た目を切り替える」以上に、“崩れない仕組みを作る”という視点が非常に重要です。そこで、実装経験を通じて感じた「ここを意識してもらえると助かる！」というディレクションのポイントを3つにまとめました。 1. 2サイズだけのデザインでは“動的な破綻”が見えない PCとスマホの2パターンがあっても、その“間”で起こる崩れまでは見えてきません。特に、小さいノートPCやタブレットはFigmaでは抜けがちなゾーンです。 実装時の崩れを未然に防ぐには、「中間サイズの確認」も意識してもらえると非常に助かります。 2. レビュー時は「文字を増やして崩してみる」視点が有効 仮テキストや短い見出しはデザイン上きれいに見えますが、本番データが入った途端に崩れるケースが本当に多いです。 レビュー段階で、意図的に長めの文言を入れてみる／翻訳後の表示を想定するなど、“崩すテスト”をしてもらえると、破綻しやすい箇所が早期に見つけられます。 3. 「ここは可変対応で」と一言あるだけで実装が変わる レイアウトが柔軟に変化してもよい部分（例：タブ数、カード数、テキスト長など）は、設計段階やFigma上に「この部分は動的に変わる想定」とコメントを入れていただけると、実装側でも崩れを想定して組むことができます。 この一言があるかないかで、後からの修正工数が大きく変わるのが実情です。 ディレクターがこれらの視点を持ってくださるだけで、「見た目は整っていたけど、実装後に崩れるUI」を減らすことができ、プロジェクト全体の品質がぐっと上がります。 6. まとめ：「レスポンシブ対応」は“広い画面対応力”のこと レスポンシブ対応とは、PCとスマホに対応していれば十分──ではありません。実装の現場では、「その間」の画面幅や、「想定外のデータ」「動的な変化」などにも対応できる柔軟なUI設計が求められています。 デザインには現れない“破綻ポイント”をどう防ぐか タブレットや小型PCでの中間幅 翻訳や長文によるUI崩れ ボタン・タブ・テーブルなどの可変要素 こうした部分は、静的なデザインだけでは見えてこない破綻リスクです。それを防ぐには、設計・レビュー・実装の段階で「崩れにくさ」を前提に考えることが必要です。 少しの意識が、大きな品質向上につながる ディレクターが「中間サイズもチェックしよう」「ここは動的に変わるかも」といった視点を持ってくださるだけで、実装の手戻りが減り、結果としてより使いやすく壊れにくいUIが完成します。 Vol. 2は以上です。次回は「“ちょっと修正”が簡単じゃない理由」について、実装者の視点から掘り下げてお届けします。 Vol. 3も、お楽しみに！ --- - Published: 2025-04-22 - Modified: 2025-05-15 - URL: https://fastcoding.jp/blog/all/frontend/css-scroll-fadein/ - カテゴリー: React, Vue.js, HTML/CSS - タグ: CSS, HTML, JavaScript, スクロールフェードイン, フェードイン 弊社で実際に使っているCSSだけでスクロール連動アニメーションを簡単に実装できる方法を解説。特にanimation-timelineと:has()を活用することで、JavaScriptなしでも自然なフェードインが実現可能です。 スクロール連動アニメーション、実はCSSだけでもかなり自然にできます！ スクロールに合わせて要素がふわっと現れるアニメーション、コーディングを毎日作っている弊社も何度も実装してきました。多くの場面では IntersectionObserver を使ったJavaScript実装が定番ですが、「そこまでしなくても良いのでは？」と感じるケースも少なくありません。 特に最近では、「とにかく軽く仕上げたい」「JSが使えない環境でも動かしたい」という要望が増えていて、CSSだけで完結する方法を模索することも増えました。 そんな中で活躍するのが、ここ数年で登場した animation-timeline （旧称 scroll-timeline）や :has といった新しいCSSの機能たちです。 この記事では、弊社が実際に使っている「JSに頼らないスクロール連動アニメーションの実装法」をご紹介します！ 結論：animation-timeline × :has で、JSなしのフェードインが実現可能に まず最初に結論からお伝えします。CSSだけでスクロール連動フェードインを実現する鍵は、次の2つの機能にあります。 1. animation-timeline: スクロール連動のCSSアニメーション これは、スクロール位置をトリガーとしてCSSアニメーションを再生するための新しい仕様です。Chrome 115+ や Edge 115+ で使用可能で、将来的にSafariやFirefoxでも対応が進むと見られています。 CodePen Embed Fallback このように、animation-timeline と view を組み合わせることで、ある要素がビューポートに入った瞬間からアニメーションを開始できます。しかも、animation-range を調整すれば、アニメーションの開始タイミングと完了タイミングも自在にコントロール可能です。 2. :has: 要素の状態をCSSだけで監視する新時代のセレクタ CSSで「子要素の状態によって親要素のスタイルを変える」といった、これまでJSが必須だった表現も、:has によって可能になりました。 たとえば、以下のような使い方で、疑似的なスクロール連動表現も実現できます。 CodePen Embed Fallback もちろんこれは厳密な「スクロールトリガー」ではありませんが、特定の状態（クラスの付与など）をCSSで検知して反応する構造が組めるのは大きな進化です。 それでは、実際に:hasやanimation-timelineを用いた「JSレスのアニメーション基本形」について解説していきます。 まずは基本形： :has × opacity でCSSだけの“なんちゃってフェードイン” まずは比較的対応範囲の広いCSS構文から。「ページを下にスクロールしてきたとき、要素がふわっと表示されるようにしたい」という場面で、IntersectionObserver を使わず、CSSだけである程度再現できる手法として注目されているのが、:has 擬似クラスの活用です。 :has とは？ element:has(child) のような構文で、「ある条件を満たす子要素があるとき、親要素にスタイルを適用する」というCSSセレクタ。これはまさに“親要素が子の状態を監視する”ような働きをします。 たとえば以下のようなCSS： section:has(. is-visible) . item { opacity: 1; transform: none; } これにより、. is-visible というクラスが何らかのトリガーで付与されたとき、その親セクション内の . item に対してスタイルが切り替わります。 どうやって「スクロール連動」にするのか？ ここで使うのが position: sticky や top の制御です。CSSだけでは「今、画面に見えているかどうか」を直接検出することはできませんが、sticky や擬似クラスとの組み合わせで、「画面内に来たら何かが起こる」という挙動をなんとなく演出することが可能です。 例： CodePen Embed Fallback ※ :in-view はまだ一部ブラウザのみ対応の疑似クラス（今後に期待） 完全ではないが、“それっぽく”は可能 この方法は、JavaScriptのようにピンポイントで「画面内に入ったときだけ処理を走らせる」という厳密な制御はできませんが、以下のような状況では実用に耐えます。 表示タイミングに多少のズレがあっても許容されるUI 軽量化を優先したLPやキャンペーンページ 「静的ページだけどちょっと動きを加えたい」時 ブラウザ対応状況 :has は現時点（2025年4月）で Safari、Chrome、Edge は対応済み Firefox は未対応だが、将来的なサポート予定あり モバイルSafariにも対応しており、スマホ案件でも使える 実務Tips：transition を使ってふわっと感を出す 要素に opacity + transform: translateY を使い、transition を組み合わせると、JSなしでもそれっぽくなります。 CodePen Embed Fallback . is-visible はJSで付けてもよいですが、ユーザー操作やCSSアニメーションでも可能です。あくまで軽量に済ませたい場合の応急処置として使えます。 モダンな手法：animation-timeline を使った本格的なスクロール連動フェードイン 「CSSだけでスクロール連動アニメーションをやりたい」この願いを本気で叶えるのが、animation-timeline（旧名：scroll-timeline）です。 これは、スクロール位置をアニメーションの進行度として扱える新しいCSS仕様です。いよいよ2023年中頃からChrome・Edgeで安定実装され、実務でも使える場面が出てきました。 基本構文：スクロールをアニメーションのトリガーにする 以下が最もシンプルな記述例です。 CodePen Embed Fallback 各プロパティの意味 プロパティ意味@keyframesアニメーションの内容（今回はフェード＋下から）animation-timeline: viewこの要素がビューポートに入るのをトリガーとしてアニメーション進行animation-rangeアニメーションがいつ始まり、いつ終わるかを指定 具体的な挙動イメージ スクロールして . item が画面の下端に出現したときにアニメーションがスタート（entry 0%） その後、要素が画面内で30%を占める位置に達したときにアニメーション終了（cover 30%） つまり、スクロールとともにじわじわアニメーションが進む感覚です。しかも、完全にCSSだけで。 view-timeline の応用 一部の高度な例では、要素ごとに view-timeline-name を指定し、複数のトリガーを制御することもできます。 CodePen Embed Fallback これにより、複数のタイムラインを使い分ける高度なアニメーションも可能になります。SPAやセクションごとに演出を変えたい場合に有効です。 使用上の注意点 2025年4月時点では、Chrome系とSafari Technology Previewのみ対応（Firefoxは未対応） animation-range のチューニングには多少慣れが必要 未対応ブラウザでは何も起こらない → フォールバックを意識した設計が重要 現場Tips：「初期非表示」のままにせず自然に出す opacity: 0 のまま固定されてしまうバグを防ぐために、アニメーションが効かない環境では必ず opacity: 1 に戻すCSSを設定しておくのがベストです： CodePen Embed Fallback これにより、非対応環境でも「無事に表示される」状態がキープされ、レイアウトの破綻を防げます。 実務での使いどころ Chrome/Edgeベースの管理画面や社内ツールなど → 十分実用可能 公共サイトや不特定多数向けのUI → フォールバック必須 モバイル優先のプロダクト → まだ様子見が無難 対応状況とフォールバック戦略 前述した通り、animation-timeline を使ったスクロールアニメーションは魅力的ですが、すべてのユーザーに保証された体験ではないというのが現状です。 とはいえ、実務においては「対応していないなら使わない」ではなく、対応しているなら積極的に使い、対応していない場合に備えるという考え方が重要です。このような設計アプローチをProgressive Enhancement（段階的強化）と呼びます。 CSSでフォールバックを書くのが基本 未対応ブラウザでは animation-timeline の指定そのものが無視されるため、初期状態のCSSだけが適用される形になります。 このときに、最低限でも要素が表示される状態を維持することが重要です。 . item { opacity: 1; /* デフォルトで表示されるように */ transform: none; } @supports (animation-timeline: view) { . item { opacity: 0; transform: translateY(2rem); animation: fadeIn linear; animation-timeline: view; animation-range: entry 0% cover 30%; } } このように @supports を使えば、対応ブラウザだけでスクロール連動アニメーションを有効化し、他の環境では静的表示にフォールバックさせることができます。 JS版との併用も視野に（必要なら） 案件によっては、スクロールアニメーションがどうしても必要な要件であることもあります。その場合、まずはCSSベースで構築し、非対応ブラウザでは JS（IntersectionObserver）で上書き実装するという選択肢もあります。 if (! CSS. supports('animation-timeline: view')) { // IntersectionObserver でアニメーション処理を追加 } ただし、CSSとJSで二重実装になるため、コストと保守性には注意が必要です。モダンブラウザのみをターゲットにできる環境であれば、まずはCSSのみで十分対応可能です。 実務での判断ポイント 基本表示（opacity: 1）さえ確保されていれば、アニメーションなしでもUXは成立 アニメーションはあくまで装飾。必須機能にならないように設計する スマホ中心のサービスでは、対応状況を必ずチェック prefers-reduced-motion も忘れずに ユーザーのOS設定でアニメーションを抑える設定（視覚的負担を軽減したいユーザー向け）をしている場合は、それに従うべきです。 @media (prefers-reduced-motion: reduce) { . item { animation: none ! important; transition: none ! important; } } これはアクセシビリティの観点でも非常に重要で、一部の自治体・公共系サイトでは必須要件となっているケースもあります。 サンプルコードとライブデモ ここでは、実際に使える2つの実装例を紹介します。 CSSだけで軽量に実装できる基本版 animation-timeline を使った本格スクロール連動版 それぞれの特性に応じて、実務に活かせる形に落とし込んでいます。 パターン①：軽量なフェードイン（CSS + :has + クラス制御） CodePen Embed Fallback この場合、. is-visible はJSやCMS側から付けてもOK。CSSだけでもクラスの状態を使って擬似的にフェードイン風を実現できます。「完全にJSレスにする」よりも、JSを使うとしても最小限に抑える、という考え方に近いです。 パターン②：animation-timeline を使ったスクロール連動アニメーション CodePen Embed Fallback このスタイルを適用すると、. scroll-fade クラスが付いた要素が画面下から入ってくるような自然な動きで表示されます。ブラウザ対応さえクリアしていれば、非常に滑らかで軽量なUIが作れます。 ライブデモを作るときの構成ポイント 1画面に複数の . item を並べて、連続でスクロールフェードインさせる 視認性を上げるために box-shadow や border-radius で装飾を追加 スマホでも確認しやすいように縦方向のレイアウトに調整 CodePen Embed Fallback また、動作確認はブラウザの検証ツールで「モバイル表示」＋「ゆっくりスクロール」が鉄則です。 実務Tips：JSなしでも自然に見せるための工夫 CSSだけでスクロール連動のアニメーションを実装する場合、「表示されるタイミング」と「動きの自然さ」が重要になります。ただ単にフェードインするだけでは、見せ方として弱い・違和感が出ることもあります。 この章では、JSを使わずにアニメーションを“自然に・心地よく”見せるための工夫や注意点を紹介します。 1. transform: translateY を併用して“動き”を加える ただ opacity: 0 → 1 の変化だけでは、動きがのっぺりしがちです。そこで、Y軸方向への軽いスライドインを組み合わせると、フェード感＋立体感が加わり、より自然な演出になります。 CodePen Embed Fallback アニメーション中に transform を変えることで、GPUレンダリングが効きやすくなり、パフォーマンス面でも優秀です。 2. アニメーションは一度だけでよい（繰り返しに注意） スクロールイン・アウトで何度も出たり消えたりするUIはユーザーのストレスになります。基本的に、一度表示されたらそのままにしておくのがベストです。 CSSだけで一度限りの制御は難しいですが、以下のような設計で「一度表示されたら非表示に戻らない」挙動が実現できます。 一度 . is-visible クラスを付けたら除去しない animation-fill-mode: both; を指定してアニメーション終了後の状態を保持する 3. ユーザー設定（prefers-reduced-motion）を尊重する モーションに敏感なユーザーのために、アニメーションを抑制する設定も取り入れておくと、アクセシビリティが一段階アップします。 CodePen Embed Fallback このひと手間があるだけで、自治体案件・医療系サイトなどの品質要件も満たせることが多いです。 4. 初期状態の設計が重要（レイアウト崩れの防止） フェードイン前の状態で height: 0 や display: none などを使うと、出現時にレイアウトが跳ねたりズレたりするリスクがあります。opacity と transform のみによるアニメーションなら、空間の確保はそのままなので揺れが起きにくいのがメリット。 CodePen Embed Fallback visibility の制御を併用すると、アクセシビリティ的にもより適切です。 実務導入の考え方まとめ ポイント内容自然な動きtransform + opacity をセットで使う一度だけ表示animation-fill-mode やクラス制御で「戻らない」ように配慮ある設計prefers-reduced-motion への対応はマスト崩れ防止display: none は避け、スペースを維持したままフェード 最後に：スクロールアニメーションも“CSSだけでやってみる”時代へ 「スクロールで要素がフェードインする」――今やWeb UIの定番とも言えるこの演出ですが、JavaScriptを使わず、CSSだけでもかなりのレベルまで表現できる時代になってきました。 今回紹介したCSSだけのアプローチを振り返る 手法特徴向いているケース:has + クラス制御疑似的に出現演出が可能 / 対応ブラウザ多め軽量なLP、簡易UI、JSレス志向の案件animation-timelineスクロールに連動した本格的なアニメーションChrome/Edge前提のアプリ・管理画面など@supports + prefers-reduced-motionフォールバックやアクセシビリティ対応に有効実務での品質担保に必須の設計 これらを組み合わせれば、「ユーザー体験を損なわずに、実装コストを下げる」という、非常に現実的なアプローチが可能になります。 プロの現場での考え方：完璧よりも“最適解”を選ぶ 今回のようなアニメーションは「必須機能」ではなく「演出」です。つまり、対応していない環境で「表示されない」ことが致命的にはなりません。 だからこそ、以下のような判断軸が重要になります。 モバイルファースト or 対応範囲が広い案件 → :has のようなベーシックCSSで十分 モダンブラウザ前提 or パフォーマンス重視 → animation-timeline を積極活用 高品質・高要求なUI → JS＋CSSの併用でリッチに仕上げる 最小限のコードで、最大限の表現を引き出す。そんな設計こそが、今のフロントエンドに求められる“質のいいコーディング”だと考えます。 ぜひ“使わないJS”を考えるトレーニングに スクロールアニメーション＝JavaScriptという思考にとらわれず、「このUI、本当にJSが必要？」と一度立ち止まってみる。そんな視点を持つだけで、設計の引き出しが一段と増えます。 あなたの次の案件に、このCSSだけのフェードイン技術、ぜひ取り入れてみてください。 次回もお楽しみに！ --- - Published: 2025-04-18 - Modified: 2025-04-28 - URL: https://fastcoding.jp/blog/all/info/web-direction-guide01/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: PM, Web業界の動向, ディレクション デザインとコーディングの「ズレ」は、技術的な限界や前提の違いによるものであり、単なるミスではありません。フロントエンドエンジニアは見た目の一貫性を保つために調整を行い、Webディレクターは再現性の限界を理解することが大切です。 1. はじめに：なぜ“デザイン通り”にならないのか？ Webディレクターとして、こんな経験はありませんか？ 「Figmaでは完璧だったのに、コーディング後に見たら何か違う... 」「ボタンの位置、ズレてない？」「このフォント、ちょっと太く見えない？」 Webディレクターの方から、これまでに何度もいただいてきた言葉です。 一見すると「コーダーのミスでは？」と思われがちですが、フロントエンドのコーディング代行を専門にしている私の立場から言うと、“技術的な限界”や“前提の違い”が原因であるケースがほとんどです。 そして、それは決して「ミス」や「再現不足」ではなく、再現“できない”もしくは“すべきでない”ことさえあるというのが、現場での実感です。 本記事では、実際の案件で私が直面してきた“ズレ”の事例を交えながら、「なぜ完全再現が難しいのか？」「どこまで再現するのが現実的か？」「実装者はどんな工夫をしているのか？」を現場視点で解説しながら、ディレクターが知っておくとプロジェクトがスムーズに進む視点や考え方をお伝えしていきます。 2. デザインとコーディング、それぞれの“前提”の違い 私がコーディング代行を担当している案件のほとんどで、Webディレクターやデザイナーと共有することになるのが、「そもそもデザインと実装は前提が違う」という話です。 「デザインと同じ見た目にしてください」──この指示、一見シンプルに聞こえますが、実装現場ではとても難しい課題です。 見た目だけを見ると「同じにできるはず」と思われがちですが、実はそれぞれが成立している環境も、求められる役割も根本から違っています。その理由は、デザインと実装では“成立している世界”がそもそも違うからです。 デザインは「理想環境の静的な完成形」 FigmaやXDで作られたデザインは、基本的に静的な一枚絵です。表示環境もほぼ「Mac＋Retinaディスプレイ＋100%ズーム」で、フォントもレンダリングも最適な状態で見ることが前提になっています。 たとえば、ボタンの角丸がピクセル単位で揃っていたり、フォントの太さや余白が“きれいに見える”ようにチューニングされていたりします。これは当然で、デザインの役割は「理想的な完成形を示すこと」ですから、美しさを最大化するのが目的です。 コーディングは「不確実な環境への対応力」 一方、私たちフロントエンドエンジニアが担うのは、「現実世界で、どんな環境でも破綻しないUIを作ること」です。 その現実とは── OSの違い（Mac / Windows / iOS / Android） ブラウザの違い（Chrome / Safari / Edge / Firefox） フォントの有無、描画エンジンの違い 解像度や画面倍率の違い ユーザーが変更した文字サイズ設定や言語設定 など、想像以上に“条件がバラバラ”な世界です。 実装とは、このカオスの中でも、見た目の一貫性や使いやすさを担保する作業なのです。 実務でも起きる、前提のすれ違い 実際の案件でも、デザインと実装の前提の違いによってすれ違いがよく発生します。例えば── 「余白が狭く見える」→低解像度ディスプレイ＋ブラウザズーム設定の影響だった 「フォントが太い」→Windowsのレンダリング特性による見え方の違い 「改行位置が違う」→Figmaでは短いダミーテキスト、実装では実データが入ったことで発生 つまり、「ズレている」というより、そもそも同じに見えない前提で設計されているのです。 「同じに見えない」は、誰のせいでもない このように、デザインと実装は、そもそも違うルールのもとで動いているものです。 だからこそ、デザインの理想をどこまで現実に落とし込むか、その「橋渡し」が実装者の仕事であり、ディレクターとすり合わせていくべきポイントでもあります。 3. よくある“ズレ”の具体例とその原因 私がコーディング代行の現場で実際に経験してきた中から、Webディレクターとの間でよく話題になる“見た目のズレ”をいくつかご紹介します。どれもフロントエンドエンジニアが頻繁に対応しているテーマであり、ディレクターが理解しておくと確認や指示が的確になります。 フォントが太く見える 原因：OSごとのフォント描画の違い（特にMacとWindows） MacとWindowsでは、同じ font-weight: 400 を指定しても見え方が大きく異なります。特にWindowsでは、文字がくっきり・太めに描画される傾向があるため、「Figmaよりも文字が太い」と感じられることが多いです。 行間が詰まって（または広がって）見える 原因：FigmaとCSSのline-heightの仕様差 Figmaで「150%」と指定された行間は、CSSでの line-height: 1. 5 と完全には一致しません。さらに、フォントの種類や文字サイズによっても微妙にバランスが変わるため、「詰まって見える」「間延びして見える」といった違和感が生まれます。 テキストがはみ出す・想定外に改行される 原因：実データとダミーテキストの違い デザインでは「仮テキスト（例：ああああ）」が使われていたのに、実装時に本番用の文章を入れた結果、改行や折り返しが変わって見えるというケースも非常に多いです。とくにモバイルでは顕著で、「ボタンの2行目が変な位置で改行されている」といった問題になりがちです。 シャドウが目立たない・弱く感じる 原因：FigmaとCSSのシャドウ表現の差 Figmaのシャドウは、見た目のインパクトを重視して強めに描かれていることが多いですが、CSSの box-shadow はブラウザや解像度の影響を受けやすく、思ったよりも薄く見えることがあります。実装側では見た目を近づける調整が必要になるパーツのひとつです。 実装現場のリアルな感覚 これらの“ズレ”は、ミスではなく仕様差によって起きるもので、すべてをピクセル単位で合わせることは現実的に不可能です。だからこそ、実装者は「近づけるための最適解」を探りながら調整していきます。 ディレクターとして知っておくことで、「どこが本質的な問題なのか」「どこは許容範囲なのか」の判断がしやすくなります。 では、そうした“ズレ”に対して実装側がどのような努力や工夫をしているのか、紹介しましょう。 4. 実装側が行っている“見た目調整”の努力 「デザイン通りに見えない」と言われたとき、私たちフロントエンドエンジニアは「仕方ない」で済ませているわけではありません。むしろ、見た目をできる限り近づけるために、かなり細かい調整作業を行っています。 ここでは、私が日々のコーディング代行業務で行っている具体的な調整の一部をご紹介します。 ピクセル単位でのスクリーンショット比較 まず、Figma上のスクリーンショットと、実装後のブラウザ画面を重ねて比較し、1px単位で余白や文字位置をチェックしています。ツールを使って差分を視覚化したり、目視で細かく確認したりしながら、「印象レベル」での違和感をなくす作業です。 マージン・パディングの手動微調整 デザイン通りの数値をそのままCSSに落とし込んでも、ブラウザのレンダリング特性やフォント差でズレが出ることが多いため、必要に応じて上下左右のマージン・パディングを微調整します。1px動かすだけで印象がガラッと変わることもあるので、かなり神経を使う作業です。 表示環境を変えて再確認 私は納品前に、以下の環境（Mac / Windows / スマホ）で見た目を確認しています。 Windows：Microsoft Edge、Google Chrome 最新版、Firefox 最新版 Mac：Safari 最新版 スマートフォン：iOS Safari、Android OS Chrome 特にWindowsのフォントレンダリングはズレが出やすいため、Macでうまくいっていても油断できません。 必要に応じて、OSごとにフォントを指定したり、ブラウザ固有のCSSハックを使って見た目を整えることもあります。 完全再現よりも「違和感をなくす」ことを重視 最終的なゴールは、“Figmaの完コピ”ではなく、ユーザーが見たときに「自然に感じられるUI」を実現することです。 私たちは、限られた再現性の中でベストを尽くし、環境差による見た目のズレを「感じさせないレベル」に落とし込むことを目指して作業しています。 このように、実装者は見えないところで細かな調整を行い、現実世界で使えるUIを作るために多くの努力をしています。次章では、こうした前提を踏まえた上で、Webディレクターの皆さんに知っておいていただきたい「3つの視点」をご紹介します。 5. ディレクターに知っておいてほしい3つの視点 実装現場では「限界がある中で、違和感をなくす調整」が日常です。そのうえで、Webディレクターの方とやりとりする中で、「ここを理解してもらえると圧倒的にスムーズになる」と感じる視点がいくつかあります。 1. 「ピクセル一致」が目的ではない Figmaと1px違うと指摘されることもありますが、Webは動的なメディアであり、常に再現率に揺らぎがあります。私たち実装者は“ズレても不自然に見えないかどうか”を重視しています。 100％の一致よりも、「ユーザーが自然に見られる状態」かを評価軸にしていただけると、フィードバックの精度が上がります。 2. UIの品質は「見た目＋動作」で判断する 表示のズレばかりが注目されがちですが、本来UIの品質は「見た目と動きが一体となってユーザー体験を形づくる」ものです。 たとえば、ボタンが数pxズレていても、ホバー時のアニメーションやクリック時の反応が直感的なら、体験としては成立します。見た目だけではなく、動作や使いやすさも合わせて評価していただくのが理想です。 3. デザインレビュー時は「質問の仕方」で変わる 実装確認の際、「ここ、Figmaと違ってませんか？」と指摘するより、「この表示は意図どおり？」という質問に変えるだけで、確認が前向きになります。 実装者としては、「Figmaと違う」こと自体は自覚していて、そのうえで調整した結果であることが多いです。意図を軸に確認してもらえると、お互いの判断軸が一致しやすく、やりとりの質がグッと上がります。 こうした視点を持ってやり取りができると、単なる指摘や修正依頼ではなく、「良いWebを一緒に作る」チームとしての関係性が築きやすくなります。 6. まとめ：見えない技術的背景を理解すれば、やりとりはもっとスムーズに デザインと実装の間に“ズレ”が生まれるのは、誰かのミスではなく、構造的な前提の違いによって当然のように起こる現象です。 私たちフロントエンドエンジニアは、そのズレをできる限り吸収し、違和感のない見た目に近づけるために、細かい調整を積み重ねています。 「再現性の限界」を理解してもらえると、現場は大きく変わる 実装者として本当にありがたいのは、Webディレクターの方が“完全再現が難しい”という現実を理解し、共に最適解を探ろうとする姿勢を持ってくださることです。 その視点があるだけで、 フィードバックが的確になり、 対応の優先度が整理され、 修正のやりとりが減り、 スケジュールも守りやすくなる という好循環が生まれます。 より良い成果物は、対話から生まれる 「ズレてるかどうか」だけでなく、「意図どおりかどうか」「ユーザーが自然に使えるかどうか」**という視点を共有できれば、デザインと実装はもっと有機的につながります。 私たちフロントエンド実装者も、“ただ作る人”ではなく、UIの完成度を高めるためのパートナーでありたいと思っています。 これからも、Webディレクターとフロントエンドエンジニアが“同じ目線”で仕事ができるように、実装現場からリアルな視点をお届けしていきます。 次回のVol. 2も、どうぞお楽しみに！ --- - Published: 2025-04-14 - Modified: 2025-05-15 - URL: https://fastcoding.jp/blog/all/ui-ux/pinterest-layout-css/ - カテゴリー: UI/UX, HTML/CSS - タグ: CSS, HTML, Pinterest Pinterest風のグリッドレイアウトを実装する方法について解説します。CSS Gridのgrid-auto-flow: denseやマルチカラムレイアウトを使用し、高さの異なるカードを整然と並べます。使用ケースやメリット・デメリットを考慮し、実務に役立つ技術を提案しています。 Webでよく見る、Pinterestのように高さの異なるカードをきれいに並べたグリッドレイアウト。見た目はシンプルですが、実装しようとすると「高さバラバラなのに、どうしてこんなに整ってるの？」と迷うことも多いデザインのひとつです。 【このデザイン、どうコーディングする？】シリーズ第2回では、そんな不揃いなカードを整列させるスマートな方法を取り上げます。 CSS Gridのgrid-auto-flow: dense、マルチカラムレイアウト（column-count）、そして比較対象としてJavaScriptを使った方法も軽く触れつつ、実務に向いた「手間なく、でも見た目はキレイ」なレイアウトを目指します。 実装イメージ＆HTML構造 今回実装するのは、高さの異なるカードが整然と並ぶPinterest風のグリッドレイアウトです。画像やテキストなど、要素ごとに高さが違っても、崩れずに視認性の高いレイアウトを維持します。 スマホでは1列で縦積み、PCでは2〜4列で横方向に展開する、レスポンシブ対応の構成です。 完成イメージ（例） 以下のようなイメージを想定しています： ┌─────┬─────┬─────┐│ img │ img │ img ││ txt │ txt │ txt ││ │ txt │ ││ img │ │ img ││ txt │ │ txt │└─────┴─────┴─────┘ カードごとに高さが異なるのに、列が整って見えるのがポイントです。 HTML構造（共通） どの手法でも、基本的には同じようなHTML構造で対応できます。以下は最もシンプルな例です。 テキスト内容1 テキスト内容2。やや長めの説明文が入る。 短め ポイント . grid：グリッド全体のラッパー . item：1つのカード単位（画像＋テキスト） コンテンツの長さ・画像サイズは統一されていない前提で構いません。要素の高さがバラバラであることが、今回のキモです。 CSS実装パターン比較 高さの異なる要素をPinterest風にきれいに並べる方法はいくつかあります。ここでは、代表的な以下3つの手法を比較しながら紹介します。 方法１：CSS Grid + grid-auto-flow: dense もっとも柔軟で、制御もしやすい方法です。空きスペースに自動で要素を詰めてくれるのが最大の特徴。 CodePen Embed Fallback ポイント auto-fill：画面幅に応じて列数が自動調整 grid-auto-flow: dense：空いているスペースを優先して埋める gap：要素間の余白 メリット： レスポンシブ対応がしやすい 順序の制御が効く スタイルの自由度が高い 注意点： 「密詰め」によってDOM順と表示順がずれる可能性あり（アクセシビリティに注意） 方法２：マルチカラムレイアウト（column-count） CSSだけで超シンプルに実現できる手法。ブログ風レイアウトにもよく使われます。 CodePen Embed Fallback ポイント column-count：列数を指定 break-inside: avoid：要素が途中で分割されるのを防止 メリット： 実装が非常にシンプル 柔軟に高さが違う要素を流し込める 注意点： カラム内にどのアイテムが入るかはCSS任せ（順序の制御ができない） フォーカス移動などが視覚順と論理順でズレる 方法３：JavaScriptでの高さ揃え（比較用） 以前よく使われていた方法。一度全アイテムの高さを取得し、手動で再配置します。 CodePen Embed Fallback メリット： 古いブラウザでも対応可能（ただし今はほぼ不要） 注意点： JSによるレイアウト再計算はパフォーマンスに悪影響 ウィンドウリサイズ時の再処理が必要 コード量が多くなり、保守性が低い まとめ：どれを使うべき？ 方法特徴向いているケースgrid-auto-flow: dense表示順の柔軟性あり・制御しやすい高度なUIや再利用性を重視する場合column-count実装が速くて簡単小規模な一覧や簡易的なレイアウトにJavaScript高度な制御が可能（でも非推奨）特殊な要件がある or レガシー対応時のみ 実装Tipsと注意点 どの方法を使うにせよ、「うまくいかない」「想定と違う表示になる」といったケースに遭遇することがあります。ここでは、現場で遭遇しやすい注意点と、その回避・調整方法を紹介します。 grid-auto-flow: dense の再配置に関する注意点 このプロパティは「空いたスペースを埋める」動作を行うため、意図しない並び順になることがあります。たとえば、HTMLの3番目の要素が最初に表示されるようなケースです。 読み上げ順やタブキーによるフォーカス順は、HTMLの順序に従うため、視覚順と論理順がズレる可能性があることを意識する必要があります。 対策例： aria-flowto などで補助する（状況による） UIの性質上、順序が重要でない情報に使う CodePen Embed Fallback column-count 使用時の読み順の落とし穴 マルチカラムレイアウトは、表示が左→右の列に流れていくように見えますが、実際の読み順は上から下です。 . grid { column-count: 3; } 左上 → 左下 → 次の列の上 という流れになり、スクリーンリーダーやキーボード操作では視覚と一致しません。 ※タブ移動で順番が飛ぶように感じられることもあるので、フォームやナビゲーションには不向きです。 高さが不安定な要素の崩れ対策 画像＋テキストのカードでよくある問題は、画像の読み込み前に高さが確定しないことによるレイアウトの揺れです。 対策案：画像に aspect-ratio を使う CodePen Embed Fallback aspect-ratio で高さを予約し、表示時のジャンプを防止 object-fit: cover でトリミングしつつ、綺麗に収める レスポンシブ対応の切り替え方法 スマホでは1列、PCでは3列以上にする場合、CSS GridでもColumnでも共通の調整が可能です。 Gridの場合 CodePen Embed Fallback Columnの場合 CodePen Embed Fallback いずれもメディアクエリで列数を増減するだけで、実装は非常にシンプルです。 このように、見た目以上に地味な落とし穴やテクニックが多いUIですが、ポイントさえ押さえておけば、手軽に整ったグリッドレイアウトが実現できます。 実際どれを使うべき？現場目線の選択指針 ここまで紹介した3つの実装パターン、それぞれにメリット・デメリットがあります。実務では、「どれが一番いいか」ではなく、「このケースならどれが最も適しているか」という視点で選ぶことが重要です。 Grid + grid-auto-flow: dense を使うべきケース 要素の順序をある程度制御したい カードのサイズや配置を細かくコントロールしたい レイアウトの柔軟性を重視したい おすすめのシーン： ECサイトの商品一覧 管理画面などでのカード型情報パネル タグで絞り込むような、頻繁に中身が変わるUI column-count を使うべきケース 実装をとにかく手早く済ませたい 見た目だけそれっぽく整えばOK 順序やフォーカス制御はそこまで気にしない おすすめのシーン： ブログ一覧やニュースカード 画像だけで構成されるギャラリー 短命なキャンペーンLPなどの軽量実装 JavaScriptでの高さ補正を使うべきケース（例外） コンテンツによって高さが不安定すぎてどうにもならない IE11などの古い環境対応が必要（※2025年時点ではかなり限定的） 高さを完全に揃えることで一貫したUIを維持したい場合 おすすめのシーン： レガシー向けダッシュボード 厳密なビジュアル整合性が必要な広告・印刷用途系Webアプリ 決定のためのチェックリスト（YES/NOで選べる） 質問YESならこの方法要素の並び順が重要？Grid（dense）表示順は気にしない？Columnカードの高さを完全に揃えたい？JS補正実装コストを最小限にしたい？Columnレスポンシブでカラム数を調整したい？Grid or Column（どちらも可）メンテナンス性を重視したい？Grid（CSSだけで完結） 技術的な正解は複数ありますが、「どれが最小の実装コストで最大の見た目を出せるか」という判断軸で選ぶのが、プロダクションではもっとも現実的です。 最後に：プロの現場で選ぶなら、まずは「CSSだけで解決」から Pinterest風レイアウトは見た目はシンプルですが、実は要素の高さがバラバラなUIをどう扱うかという、意外と奥の深い問題です。 フロントエンドの現場でこのレイアウトが出てきたら、まず以下のように考えるのがおすすめです： レイアウトの順序が重要 or UIの安定性を重視する場合 → grid-auto-flow: dense が最適 簡易表示・軽量実装でOKな場合 → column-count で時短＋保守性◎ 特殊事情（レガシー対応やピクセル単位の高さ揃え）がある場合 → JSの出番 そして重要なのは、**「完璧を求めすぎないこと」**です。見た目のきれいさと実装コストのバランスを取りつつ、最低限のコードで最大の効果を出す、これこそがプロのコーディング。 今回紹介した方法は、すべて「今すぐ実務に使えるもの」ばかり。ぜひ次の案件で試してみてください。 次回もお楽しみに！ --- - Published: 2025-04-09 - Modified: 2025-05-01 - URL: https://fastcoding.jp/blog/all/html-css/carousel-by-css/ - カテゴリー: HTML/CSS - タグ: CSS, CSSアニメーション, JavaScript このブログシリーズでは、モダンなUIデザインをシンプルに実装する方法を紹介します。第1回は、スマホサイト向けの横スライド型カルーセルUIをcssのみで実現する手法を解説。実装ポイントや柔軟なスタイル設定についても触れています。 Webデザインを見ていて「これ、どうやって実装するんだろう？」と思うことはありませんか？ このブログシリーズ【このデザイン、どうコーディングする？】では、日々の現場で見かけるモダンなUIデザインを、できるだけシンプルに、でも本質的に実装する方法を紹介していきます。 第1回となる今回は、スマホサイトでよく見かける横スライド型のカルーセルUIを、CSSだけで軽量に実装する方法を取り上げます。 それでは早速、完成イメージから見ていきましょう。 実装イメージ＆HTML構造 まずは今回実装するカルーセルUIの完成イメージと、基本のHTML構造を確認しておきましょう。最小限のマークアップで、柔軟性のあるレイアウトが可能です。 基本パターン：16:9 カードの横スライド 横方向にスワイプできる、比率固定・スナップ付きのカルーセルUIです。以下のようなカードが横並びでスクロールされ、CSSだけで完結します。 Card 1 Card 2 Card 3 . carousel：全体の横スクロールコンテナ . card：中身のカード（1枚ずつ表示） 今回はより意味のある構造を意識し、実際の用途に応じて以下のようなHTMLも使えます タイトル 説明文など ... ul + li：リスト形式でセマンティクスを保ちたい場合に有効 カード内に画像、テキストを含めても構造はシンプル 応用例：3枚同時に表示するマルチ表示型 より一覧性を重視したい場合は、1画面に複数枚のカードを並べるパターンも有効です。 1 2 3 4 この場合は、後述するCSSで . card に width: calc((100% - gap) / 3) のような指定を行います。 補足：スクロールスナップに対応した最小構造のポイント . carousel に overflow-x: auto を指定して横スクロールを可能に . card に scroll-snap-align を付けて、スナップポイントを定義 子要素は flex で横並びにしつつ、aspect-ratio で比率を固定 完成CSSスタイル 今回のカルーセルUIを実現するための完成CSSは以下のようになります。コピペしてすぐに試せるよう、最低限のスタイルに絞りつつ、実用的な仕様になっています。 . carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } . carousel::-webkit-scrollbar { display: none; /* Chrome, Safari */ } . card { flex: 0 0 auto; width: clamp(250px, 80%, 400px); aspect-ratio: 16 / 9; scroll-snap-align: start; background: #eee; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0. 1); display: flex; align-items: center; justify-content: center; font-size: 1. 2rem; color: #333; } スタイル構成のポイント . carousel：横スクロールの設定、スナップ、スクロールバー非表示など . card：比率固定、スナップポイント、デザイン要素（影・角丸など） 実装Tips・詳細解説 それでは、上記のCSSの中から、実装上で特に重要なプロパティや技術的ポイントをピックアップし、それぞれの意図や応用のヒントを紹介します。 CSSの進化により、こうしたUIがJSなしで作れる時代になってきましたが、大切なのは細部の設計力です。 ここでは、単なる「動くUI」を超えて、実装中によくある疑問や細かい配慮ポイントに重点を置いて解説します。 横スクロールの基本構造とスナップ挙動 . carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } . card { flex: 0 0 auto; scroll-snap-align: start; } ポイント overflow-x: auto：横方向のスクロールを有効化 flex + flex: 0 0 auto：子要素（カード）を横並び＆幅固定に scroll-snap-type: x mandatory：X軸でスナップ（必須で止まる） scroll-snap-align: start：カードの左端が親の左端に吸着する 注意点： scroll-snap-type は Safari（特にiOS）でやや挙動が違うことがあるため、実機検証推奨 スナップが効かない場合は、子要素の scroll-snap-align が設定されているか、親の overflow-x と display: flex が正しいかを確認 aspect-ratio による比率固定 . card { aspect-ratio: 16 / 9; } ポイント aspect-ratio により、高さが自動計算されて比率を維持します 今回は「16:9」で映像や画像カードに適した黄金比 応用Tips： aspect-ratio: 1 → 正方形カードにも応用可（SNS風UIなど） 画像の object-fit: cover と併用することで、枠にフィットしたサムネイル表現が可能 clamp による柔軟な幅指定 . card { width: clamp(250px, 80%, 400px); } ポイント **最低250px・最大400pxの範囲で、理想は80%**という、柔軟かつ制御可能なサイズ指定 デバイス幅に応じて自然にサイズが調整されるため、メディアクエリなしでレスポンシブ対応 注意点： clamp は IE 非対応（現在では問題ないがレガシー対応時は注意） -webkit-overflow-scrolling: touch の効果 . carousel { -webkit-overflow-scrolling: touch; } ポイント iOSでネイティブに近いスムーズなスクロールを実現 overflow-x: auto 単体では滑らかにならないため、iOS対応ではほぼ必須 スクロールバーの非表示とその判断 . carousel { scrollbar-width: none; /* Firefox */ } . carousel::-webkit-scrollbar { display: none; /* Chrome, Safari */ } ポイント 見た目をシンプルにしたい時に有効 ただしアクセシビリティ的には議論があるため、状況に応じて表示させるのも選択肢 代替案： スクロールバーは表示しつつ、薄めのスタイルにカスタマイズする手もある（例：透明度調整） アニメーション・ホバー効果の拡張 . card { transition: transform 0. 3s ease; } . card:hover { transform: scale(1. 03); } ポイント シンプルなホバー時の拡大効果でインタラクティブ感を追加 :hover はPC向け、タッチ環境向けには :focus-visible や :active を併用すると◎ まとめ・応用のヒント 今回紹介したCSSカルーセルは、軽量で実装もシンプルなわりに、表現の幅が広く、さまざまなUIに応用できます。 特にaspect-ratioやscroll-snapなど、モダンなCSS機能を組み合わせることで、これまでJavaScriptに頼っていたパターンが、JSなしで完結するのは非常に大きなメリットです。HTMLもCSSも最小限で済むため、保守性・パフォーマンスの両面で優秀な選択肢になります。 さらに応用すれば、以下のような場面にも自然に展開できます。 SNSフィード風の水平カードUI（aspect-ratio: 1で正方形に） 時系列イベントのタイムライン（カード内に日時や進行情報を入れるだけ） フィルター付きの横スクロール一覧（ボタン操作でscrollLeftを動かせばJS併用もOK） ギャラリーやスライダー系UIのラフ実装（プレゼン資料のモックなどにも便利） 細かいデザイン調整や動きの強化にはJSやライブラリも必要になりますが、「とりあえず動くUI」「試作を早く見せたいUI」にはCSSだけでここまでできるというのは、日々の開発で武器になるはずです。 今回のTipsが、少しでもコーディングのヒントや発想のきっかけになれば嬉しいです。 次回もお楽しみに！ --- - Published: 2025-04-03 - Modified: 2025-07-17 - URL: https://fastcoding.jp/blog/clients/sitemanagementservice/ - カテゴリー: ご契約者様専用 このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2025-04-02 - Modified: 2025-04-06 - URL: https://fastcoding.jp/blog/all/frontend/css-layout-properties/ - カテゴリー: React, Vue.js, HTML/CSS - タグ: CSS, グリットレイアウト, フレキシブルレイアウト, リキッドレイアウト, レスポンシブレイアウト Web制作をしていると、「このレイアウト、どうやって実装すればいいんだろう？」と悩むことはありませんか？HTMLやCSSの基本は知っているけれど、レイアウトを組む方法がいまいちわからない、あるいは 「いつもFlexboxしか使っていないけど、他にもっと適した方法があるのでは？」 と考えたことがある人もいるかもしれません。 この記事では、CSSのレイアウト方法を具体的なシチュエーションごとに紹介し、どのプロパティをどのように使えばよいのかを解説します。 「なんとなくやっているけど、もっと適切な方法を知りたい！」 という方にぴったりな内容ですので、ぜひ参考にしてください。 1. どんな場合にどのレイアウトを使うべきか？ ① シンプルな1列・2列レイアウト（Flexbox） 使うシチュエーション： ブログ記事の本文エリア 商品ページなどのシンプルなコンテンツエリア サイドバーとメインコンテンツを並べる 使い方： display: flex; を使うと、flex-direction: column; で縦並び、flex-direction: row; で横並びにできます。 . container { display: flex; flex-direction: row; /* 横並び（2列） */ } . sidebar { width: 30%; background-color: lightgray; padding: 10px; } . main-content { width: 70%; background-color: lightblue; padding: 10px; } サンプル： サイドバーとメインコンテンツが横並びになります。 CodePen Embed Fallback ② 複数の要素を均等配置するナビゲーションバー（Flexbox） 使うシチュエーション： グローバルナビゲーション フッターメニュー ボタンを横並びにしたいとき 使い方： justify-content: space-between; を指定すると、要素が均等に配置されます。 . navbar { display: flex; justify-content: space-between; background-color: black; padding: 10px; } . navbar a { background-color: gray; /* クリック領域を視覚化 */ color: white; text-decoration: none; padding: 5px 10px; border-radius: 4px; } サンプル： 黒い背景のナビゲーションバーの両端にメニューが配置されます。 CodePen Embed Fallback ③ カード型のグリッドレイアウト（CSS Grid） 使うシチュエーション： 商品一覧ページ ブログのサムネイル表示 写真ギャラリー 使い方： grid-template-columns で列を指定し、gap で要素の間隔を調整します。 . grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } . card { background-color: lightgray; padding: 20px; text-align: center; } サンプル： 3つのカードが均等に配置されます。 CodePen Embed Fallback ④ サイドバー付きのレイアウト（CSS Grid / Flexbox） 使うシチュエーション： サイドバー + メインコンテンツの配置 管理画面などの2カラムレイアウト 使い方（CSS Grid）： . container { display: grid; grid-template-columns: 280px 1fr; } . sidebar { background-color: lightgray; padding: 10px; } . main-content { background-color: lightblue; padding: 10px; } サンプル： サイドバーとメインコンテンツが、グリッドで配置されます。 CodePen Embed Fallback ⑤ コンテンツの高さを揃える（Flexbox） 使うシチュエーション： カラムレイアウトで高さを統一したいとき 使い方： align-items: stretch; を指定すると、子要素の高さが揃います。 . container { display: flex; align-items: stretch; gap: 16px; /* ボックスの間に余白を追加 */ } . box { background-color: lightcoral; padding: 20px; flex: 1; } サンプル： 各ボックスの高さが統一されます。 CodePen Embed Fallback ⑥ 縦横中央揃え（Flexbox / CSS Grid） 使うシチュエーション： ボタンやテキストを真ん中にしたいとき ローディング画面 使い方（Flexbox）： . container { display: flex; justify-content: center; align-items: center; height: 100vh; } . content { background-color: lightgreen; padding: 30px; border-radius: 8px; text-align: center; } サンプル： ページ全体の中央に要素が配置されます。 CodePen Embed Fallback ⑦ 画像の回り込み（float） 使うシチュエーション： テキストの横に画像を配置したい場合 使い方： . image { float: left; margin-right: 16px; width: 20%; } サンプル： 画像がテキストの左側に配置され、回り込みます。 CodePen Embed Fallback ⑧ 特定の要素をスクロールに追従させる（position: sticky） 使うシチュエーション： 目次を固定したいとき スクロール時にヘッダーを固定したいとき 使い方： . header { position: sticky; top: 0; background-color: #f0f8ff; /* 淡いブルー */ padding: 10px; border-bottom: 1px solid #ccc; z-index: 10; } . content { padding: 20px; line-height: 1. 6; } サンプル： スクロールしてもヘッダーが画面上部に固定されます。 CodePen Embed Fallback ⑨ ページ全体を中央寄せ（margin: auto;） 使うシチュエーション： レスポンシブデザインで幅を制限したいとき 使い方： . container { max-width: 800px; margin: 0 auto; } サンプル： CodePen Embed Fallback ⑩ レスポンシブデザインの切り替え（media queries） 使うシチュエーション： スマホとPCでレイアウトを変えたい場合 使い方： . container { display: flex; gap: 16px; } . box { background-color: lightseagreen; padding: 20px; flex: 1; text-align: center; color: white; } @media (max-width: 768px) { . container { flex-direction: column; } } サンプル： 画面サイズが768px以下になると、レイアウトが1カラムになります。 CodePen Embed Fallback 2. ちょっと変わった使い方＆便利なテクニック ① grid-auto-flow: dense; で隙間なく配置する 通常の CSS Grid では、空きスペースができることがありますが、grid-auto-flow: dense; を使うと、自動で要素を詰めてくれます。 . grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 10px; } . item { background-color: lightsteelblue; padding: 20px; text-align: center; font-weight: bold; } . item:nth-child(2) { grid-column: span 2; } サンプル： grid-auto-flow: dense; を指定すると、隙間なく要素が詰められます。 CodePen Embed Fallback ② CSSだけで高さゼロからスライドダウンするメニューを作る max-height と overflow: hidden; を使うと、JavaScript なしで開閉できるメニューを作成できます。 . menu { max-height: 0; overflow: hidden; transition: max-height 0. 3s ease-in-out; background-color: lightgray; padding: 0 10px; } . menu. open { max-height: 200px; padding: 10px; } . menu ul { margin: 0; padding: 0; list-style: none; } . menu li { padding: 5px 0; } サンプル： メニューがゆっくりスライドダウンします。 CodePen Embed Fallback ③ aspect-ratio を使って画像や要素の比率を維持する 通常、画像の比率を維持するには padding-top などを使う必要がありましたが、aspect-ratio を使うと簡単に実現できます。 . box { width: 50%; aspect-ratio: 16 / 9; background-color: lightgray; display: flex; justify-content: center; align-items: center; font-weight: bold; } サンプル： 要素の比率が16:9に固定されます。 CodePen Embed Fallback ④ object-fit: cover; で画像をレスポンシブにトリミング 画像を枠いっぱいに表示したいときに便利です。 img { width: 100%; height: 200px; object-fit: cover; } . image-wrapper { width: 50%; /* 画面幅の50%で表示（任意） */ margin: 0 auto; } サンプル： 画像が枠内に綺麗に収まります。 CodePen Embed Fallback ⑤ position: absolute; を利用してテキストを画像の上に配置 position: absolute; を使うと、画像の上にテキストを簡単に配置できます。 . container { position: relative; width: 50%; margin: 0 auto; } . container img { width: 100%; height: 200px; object-fit: cover; } . text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background-color: rgba(0, 0, 0, 0. 5); padding: 10px; } サンプル： 画像の中央にテキストが表示されます。 CodePen Embed Fallback ⑥ clip-path を活用して要素を自由な形に切り抜く clip-path を使うと、CSSだけで要素の形を変えることができます。 . clip-box { width: 200px; height: 200px; background-color: lightblue; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); margin: 40px auto; } サンプル： 要素が三角形に切り抜かれます。 CodePen Embed Fallback ⑦ overflow: hidden; を活用してスクロールを制御する スクロールさせたくない場合に便利です。 . outer-box { width: 300px; height: 100px; background-color: lightgray; overflow: hidden; /* はみ出す部分を非表示に */ border: 2px solid #ccc; margin: 40px auto; } . inner-box { width: 100%; height: auto; font-size: 16px; line-height: 1. 6; } サンプル： はみ出た部分が非表示になります。 CodePen Embed Fallback まとめ CSSのレイアウトは、「どの場面でどの手法を使うか」 を理解すると、よりスムーズに組めるようになります。 シンプルなレイアウトには Flexbox グリッド状に整列させたいときは CSS Grid ヘッダーを固定したいなら position: sticky 画像を綺麗にトリミングするなら object-fit 特殊な形にしたいなら clip-path といったように、それぞれの特性を活かせば、より柔軟にレイアウトを組むことができます。 「いつも同じ方法でしか組んでいないな... 」という方は、ぜひ今回紹介したテクニックを試してみてください。ちょっとした工夫で、もっと美しく、メンテナンスしやすいレイアウトを作れるようになりますよ！ --- - Published: 2025-03-25 - Modified: 2025-04-06 - URL: https://fastcoding.jp/blog/all/info/what-licenses-are-better/ - カテゴリー: Web業界の動向・情報, システム開発 - タグ: Apache License, BSD License, GNU, MIT License, Web業界の動向 WEBサイトやWEBシステムを作るとき、オープンソースライブラリを使うことってよくありますよね。でも、ライブラリにはそれぞれ違ったライセンスがついていて、条件をちゃんと守らないとトラブルの原因になることも。 この記事では、リスクを減らすためのライセンス選びのポイント、避けたほうがいいライセンス、利用時の具体的な方法、そして改変や特許出願をする場合の注意点を分かりやすく説明します。 ※本記事は弊社調べとなり、法律的に確実な情報をご提供するものではありません。法務上必要な場合は、必ずご自身や法務部門との確認を済ませるようお願いいたします。本情報により発生した問題について弊社では責任は負いかねます。 1. リスクの少ないオープンソースライセンスはこれ！ オープンソースライブラリを使うなら、以下の利用条件が緩やかなライセンスが安心です。これらは商用利用にも適しています。 おすすめのライセンス MIT License 特徴: 非常に自由度が高く、商用利用も個人利用も可能。改変や再配布も自由に行えるため、幅広い用途で使われています。開発者にクレジットを与えるために、著作権表示とライセンス文書を残す必要があります。 公式サイト: MIT License 条件: 著作権表示とライセンス文書を残しておく。 例: フロントエンド開発で広く利用される場面に適しています。シンプルで拡張性の高いライブラリやフレームワークに採用されています。 Apache License 2. 0 特徴: MITに似ていますが、特許権に関する保証が含まれており、利用者が特許侵害を主張されるリスクを軽減します。また、改変したコードを再配布する際には変更内容を記載する必要があります。 公式サイト: Apache License 2. 0 条件: 著作権表示やライセンス文書の保持、変更点の記載。 例: 機械学習やビッグデータ処理の分野で利用されることが多いライブラリに適しています。特に特許に関する保護を重視する場合に安心です。 BSD License (2-Clause, 3-Clause, 4-Clause) 特徴: BSDライセンスは、いずれのバージョンも利用条件が緩やかで、オープンソースプロジェクトや商用プロジェクトで幅広く使われています。 2-Clause版: 著作権表示と免責条項を保持するだけのシンプルな形式で、最も基本的なバージョン。 3-Clause版: 2-Clause版に加えて、「名前や貢献者の情報を広告や宣伝に使用しない」という条件が追加され、商用利用にも安心。 4-Clause版: 「広告条項」が追加され、再配布時に「オリジナル開発者に由来する」旨を明記する必要があるため、他ライセンスとの互換性に制約が出る場合があります。 おすすめ: いずれのバージョンも利用に大きな問題はありませんが、3-Clause版が商用利用や再配布時の安心感から最も広く採用されています。 公式サイト: BSD License 条件: 著作権表示と免責条項を残す。 例: ネットワークセキュリティや暗号化の分野で利用されるライブラリに適しています。特に商用利用を含むプロジェクトで採用されることが多いです。 2. 避けたほうがいいライセンス 一部のライセンスは、使う場面やクライアントの意向によってリスクが高いことがあります。 避けたいライセンスとその理由 GNU General Public License (GPL) 理由: 改変や再配布をするとき、システム全体のソースコード公開が必要。 クライアントが独占的に利用したい場合には不向き。 GNU Affero General Public License (AGPL) 理由: ネットワーク経由で使うシステム（SaaSなど）でも、ソースコード公開が必須。 商用サービスにはあまり向いていない。 3. ライブラリ利用時の具体的な手順 ライセンス条件を守るために、次のステップをしっかり押さえましょう。 a. 使用ライブラリのライセンス確認 公式のリポジトリやドキュメントでライセンス内容をチェック。 特許に関する条件（例: Apache License 2. 0）や公開義務条項（例: GPL）がないか確認。 b. 著作権表示とライセンス文書を残す プロジェクト内にライブラリの著作権表示やライセンス文書を保存。 例: docs/licenses/ フォルダに LICENSE ファイルを配置。 c. クレジットを明記する Webサイトやシステム内でライブラリのクレジットを表示。 例: フッターに「このシステムでは以下のオープンソースライブラリを使用しています」と記載。 利用ライブラリ名とライセンス情報を記載。 4. ライブラリを改変する場合の注意点 ライブラリを一部改変する必要があるときは、以下を確認してください。 a. 改変可能なライセンスを選ぶ MIT, Apache 2. 0, BSDのような寛容なライセンスは改変OK。 GPLやAGPLのように改変後のコード公開が必要なものは避ける。 b. 改変内容を明確にする どこを改変したのかを明記し、必要に応じてクライアントに説明できるようにしておきます。 Apache License 2. 0では、改変部分を NOTICE ファイルに記載する必要があります。 c. 改変部分と元コードを分ける 改変した部分をモジュール化して分けておくと、ライセンス適用範囲が分かりやすくなります。 5. 特許出願を考える場合の注意点 オープンソースライブラリを使ったシステムで特許を取る場合、注意点がいくつかあります。 a. ライセンス条件と特許の関係 Apache License 2. 0: 特許に関する条項があり、ライブラリ由来の技術を特許として主張するのは制限される場合があります。 GPL/AGPL: 特許を主張するとライセンス違反になる可能性があります。 MIT/BSD: 特許の条項はありませんが、特許の範囲を独自部分に限定するのが望ましいです。 b. 特許の対象を独自技術に限定 ライブラリそのものではなく、自分で開発した独自部分（アルゴリズムやインターフェースなど）を特許の対象にします。 c. 特許調査を行う 他社の特許を侵害していないか、専門家に調査を依頼するのがおすすめです。 6. まとめ オープンソースライブラリを使うときは、以下のポイントを押さえてリスクを避けましょう。 リスクが少ないライセンスを選ぶ: MIT, Apache 2. 0, BSD など。 避けるべきライセンス: GPL, AGPL など、公開義務が強いライセンス。 利用時の具体的な手順を守る: 著作権表示やライセンス文書を残し、クレジットを明記する。 改変や特許出願の際は注意する: 改変部分を分けて管理し、特許は独自技術に限定。 また、この記事で紹介した内容はあくまで参考情報です。実際にオープンソースライブラリを利用する際は、公式ドキュメントやライセンス条件を必ず確認し、必要に応じて専門家に相談してください。 オープンソースライブラリを正しく活用して、安心して高品質なシステムを作りましょう！ --- - Published: 2025-03-17 - Modified: 2025-03-15 - URL: https://fastcoding.jp/blog/all/frontend/javascript-scatter-plot-plugins/ - カテゴリー: React, Vue.js, システム開発 - タグ: Chart.js, Google Charts, JavaScript, グラフ, プラグイン データを視覚的に伝えるためのレーダーチャートをJavaScriptで実装する方法について解説しています。特に、レーダーチャートの特徴、活用例、利点・欠点、人気のJavaScriptライブラリを比較し、導入方法やカスタマイズについても細かく説明しています。適切なライブラリ選定をサポートします。 データをわかりやすく伝える方法のひとつに「グラフ」があります。本シリーズでは、さまざまなグラフの特徴や使い方を紹介し、Webサイトで簡単に使えるJavaScriptライブラリも解説しています。 これまでに、棒グラフ・円グラフ・折れ線グラフ・レーダーチャートを取り上げてきました。今回は、散布図（スキャッタープロット）に注目します。散布図は、2つの数値データをXY座標上に配置して、データの分布や関係性を視覚的に表現するグラフで、データの傾向や相関を見つけるのによく使われます。 この記事は、次のような人に向けて書いています。 Webサイトにグラフを取り入れたい新人エンジニア 今使っているライブラリを別のものに変えようと考えている中級エンジニア デザインにこだわったグラフを探しているWebデザイナー 「どのライブラリを使えばいいの？」 という疑問を解決できるよう、それぞれの特長を比較しながら説明するので、ぜひ参考にしてください！ 散布図とは？ 散布図（スキャッタープロット）は、2つの数値データをXY座標上に点としてプロットし、それらの関係性を視覚的に表現するグラフです。データの傾向や相関を分析する際に利用され、統計解析やマーケティング分析など幅広い分野で活用されています。 散布図の活用例 散布図は、以下のようなシーンでよく使われます。 データの関係性を調べる・例：広告費と売上の関係を見る・例：気温とアイスクリームの売上の関係を調べる データの分布を知る・例：学生のテストの点数分布・例：製品の価格と販売数の関係 異常値（外れ値）を発見する・例：工場の品質管理で、不良品の発生パターンを探す・例：顧客の購買データから特異な行動をするユーザーを見つける 散布図の種類 基本の散布図：2つの数値データをXY座標上にプロットするシンプルな形式。 バブルチャート：データ点の大きさを変えて、もう1つのデータ要素を追加。 色付き散布図：点の色を変えることで、データのグループを区別。 回帰線付き散布図：データの傾向を示す直線（回帰線）を追加。 散布図のメリット・デメリット メリット データの関係性が一目でわかる：点の並び方で、データ同士の関連が直感的に見える。 データの分布を把握しやすい：点の密集具合で、どこにデータが多いかがわかる。 異常値をすぐに発見できる：他の点と離れているデータがすぐに目につく。 デメリット データが多すぎると見づらくなる：点が密集すると、個々のデータを判別しにくくなる。 因果関係は判断できない：データの相関はわかるが、どちらが原因でどちらが結果かは判断できない。 カテゴリーごとの比較には向かない：棒グラフや円グラフのように、グループごとのデータ比較はしづらい。 JavaScriptライブラリを選ぶ際のチェックポイント グラフをWebサイトに表示するためのライブラリは数多くありますが、選び方を間違えると使いづらかったり、目的に合わなかったりすることがあります。ライブラリ選定の際には下記6つのポイントをチェックすることをおすすめします。 導入のしやすさ初心者でもすぐに使えるかどうかは重要です。CDNを使って簡単に読み込めるものや、設定が少なくても動作するライブラリを選ぶとよいでしょう。 カスタマイズ性デザインや色、アニメーションなどを柔軟に変更できるかを確認しましょう。ブランドやデザインテーマに合わせた調整が必要な場合は、カスタマイズ性の高いものがおすすめです。 レスポンシブ対応スマホやタブレットなど、画面サイズが異なるデバイスでもきれいに表示されるかをチェックしましょう。特に、ビジネスサイトではモバイル対応が重要です。 パフォーマンス表現するグラフにもよりますが、大規模データを扱う場合、表示速度やパフォーマンスも気にする必要があります。特にリアルタイムデータを表示する用途では、軽量で高速なライブラリが求められます。 サポートとドキュメント公式サイトやGitHubでのサポート状況や、ドキュメントの充実度を確認しましょう。使い方がわからないときに参考になる情報があるかどうかは重要です。 ライセンスと利用料利用規約やライセンス形態も確認しておきましょう。商用利用が可能かどうか、無料で使えるか、有料プランが必要かなどを事前にチェックすることが大切です。 おすすめライブラリ紹介 散布図をWebサイトで表示するために、さまざまなJavaScriptライブラリが利用できます。ここでは、特におすすめのライブラリを紹介します。 1 Chart. js 公式URL: https://www. chartjs. org/ 特徴：軽量でシンプルなAPIを持ち、初心者でも扱いやすい。散布図も標準でサポートされており、設定がシンプル。HTML5 Canvas ベースで動作し、レスポンシブデザインに対応している。カスタマイズの幅が広く、デフォルトで美しいデザインが提供されているため、スタイリングの手間を省ける。 メリット・導入が簡単で、少ないコードで散布図を描画できる。・レスポンシブ対応で、画面サイズに応じた調整が自動で行われる。・カスタマイズ性が高く、デザインの調整が容易。 デメリット・高度なデータ処理やアニメーションには制限がある。・大規模データの描画には向かない。 2 D3. js 公式URL: https://d3js. org/ 特徴：データ駆動型の強力な可視化ライブラリ。SVGやCanvasを活用して動的なデータの描画が可能で、自由度が非常に高い。散布図のデータポイントにアニメーションやカスタムスタイルを適用できるため、視覚的にリッチなグラフが作成できる。ただし、基本的な散布図の作成にもある程度のコーディングが必要。 メリット・データに応じた動的な散布図の描画が可能。・カスタマイズの幅が広く、あらゆる種類のデータ可視化が可能。・大規模データの処理能力が高い。 デメリット・初心者には学習コストが高い。・レスポンシブ対応は自分で実装する必要がある。 3 ApexCharts 公式URL: https://apexcharts. com/ 特徴：美しいデザインと使いやすさを両立したグラフライブラリ。散布図のインタラクティブな表現が得意で、ツールチップやデータポイントのホバーエフェクトが標準搭載されている。Canvas ベースでスムーズな描画が可能であり、リアルタイムデータの更新にも対応。特に、アニメーションの洗練された動きが特徴。 メリット・直感的なAPI設計で、導入が簡単。・インタラクティブな散布図を作成できる。・リアルタイムデータの可視化にも対応。 デメリット・高度なカスタマイズには制限がある。・D3. jsほどの自由度はない。 4 Plotly. js 公式URL: https://plotly. com/javascript/ 特徴：インタラクティブなグラフ作成に特化したライブラリで、散布図に関しても豊富な機能を備えている。データポイントのツールチップ表示やドラッグによるズーム機能が標準でサポートされており、探索的データ分析にも適している。WebGL を利用した 3D散布図も作成可能で、Pythonなどの他の言語とも統合できる点が強み。 メリット・散布図のズームやホバー時の詳細表示が可能。・Pythonなど他の言語との互換性がある。・3D散布図の描画も可能。 デメリット・他のライブラリに比べるとファイルサイズが大きい。・大規模データではややパフォーマンスが低下する。 5 ECharts 公式URL: https://echarts. apache. org/ 特徴：大規模データ向けに最適化されたパワフルな可視化ライブラリ。WebGL を活用しており、大量のデータポイントを高速に描画できる。散布図に関しても、バブルチャートや回帰分析と組み合わせた高度な可視化が可能。インタラクティブ機能が豊富で、データフィルタリングやアニメーション付きのトランジションなどが利用できる点が特徴。 メリット・散布図のアニメーションやインタラクティブ要素が豊富。・高パフォーマンスで、大量のデータポイントを処理可能。・バブルチャートや回帰分析のサポートも充実。 デメリット・設定オプションが多いため、初心者にはやや複雑。・公式ドキュメントの一部が中国語で提供されているため、英語の情報が不足することがある。 ライブラリ比較表 前述のライブラリ選定ポイントをまとめた表は下記のとおり 名称導入のしやすさカスタマイズ性レスポンシブ対応パフォーマンスサポートとドキュメントライセンスChart. js簡単中程度標準対応軽量・高速公式ドキュメント充実サンプル多数MITライセンスD3. js難しい非常に高い手動対応大規模データ対応可能公式ドキュメントが詳細学習コストが高めBSDライセンスApexCharts簡単高い標準対応高速・リアルタイム対応公式ドキュメントが分かりやすく、サンプルも豊富MITライセンスPlotly. js普通高い標準対応データ量が増えるとやや負荷公式ドキュメントが詳しく、Python版との互換性もありMITライセンスECharts普通非常に高い標準対応大規模データとリアルタイム更新に最適公式ドキュメントが詳細だが、一部中国語ベースApache 2. 0 各ライブラリにはそれぞれ特長があり、用途によって適したものを選ぶことが重要です。例えば、手軽に実装したいなら Chart. js や ApexCharts、大規模データの可視化なら ECharts、インタラクティブな機能を活用するなら Plotly. js、自由なカスタマイズを求めるなら D3. js といった選択が可能です。 サンプルデータを使った導入例 今回紹介した各ライブラリを使って、同じ条件のサンプルデータからレーダーチャートを表示する手順を作成してみました。それぞれの特徴を活かしたオプションもつけてみたので参考にしてくださいね。 サンプルデータ：ユーザーの年齢とサイト滞在時間の関係 ユーザーID年齢サイト滞在時間(分)備考U001223. 5初回訪問U002358. 0常連ユーザーU003285. 5-U0044512. 0購入ありU005317. 2-U006274. 8-U007409. 1購入ありU008233. 8初回訪問 このサンプルデータは、ウェブサイトのユーザーの年齢とサイト滞在時間の関係性を視覚的に把握するために利用できます。 今回は、このデータを下記のような、共通のJSONデータとして扱っていきます。（そのため、各ライブラリのコード部ではデータの記述は割愛しています） const jsonData = { "title": "ユーザーの年齢とサイト滞在時間の関係", "data": }; Chart. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. HTMLとJavaScriptコード Chart. js での散布図 // 全ライブラリ共通のサンプルデータ /* *割愛* */ // Chart. js 用にデータを整形（x: 年齢, y: サイト滞在時間） const scatterData = jsonData. data. map(item => ({ x: item. age, y: item. siteDuration })); // キャンバス要素の取得とコンテキストの作成 const ctx = document. getElementById('chartjs-scatter'); // Chart. js を利用して散布図を描画 const scatterChart = new Chart(ctx, { type: 'scatter', // グラフタイプを散布図に設定 data: { datasets: }, options: { scales: { x: { type: 'linear', // x軸は線形スケール position: 'bottom', // x軸の位置（下側） title: { display: true, text: '年齢' // x軸タイトル } }, y: { title: { display: true, text: 'サイト滞在時間 (分)' // y軸タイトル } } }, plugins: { tooltip: { callbacks: { // ツールチップ内に詳細情報を表示するためのカスタムフォーマッタ label: context => `年齢: ${context. parsed. x}, 滞在時間: ${context. parsed. y}分` } } } } }); 解説・ポイント Chart. js のメリット シンプルな設定: 基本的なグラフを簡単なコードで作成でき、初心者からプロフェッショナルまで幅広く利用されています。 レスポンシブデザイン: 自動的にレスポンシブ対応となるため、さまざまなデバイスでの表示が容易です。 アニメーションとインタラクション: 内蔵のアニメーション効果やツールチップなどのインタラクション機能により、ユーザーにとって視覚的に魅力的なグラフが作成可能です。 グラフの基本設定 グラフタイプ: Chart. js のオプションで type: 'scatter' を指定することで散布図が描画されます。 データセット: datasets プロパティにより、表示するデータ点の配列と、グラフタイトル、背景色、点の大きさなどのスタイルを定義します。 ツールチップのカスタマイズ plugins. tooltip. callbacks を利用して、データ点にマウスオーバーした際に詳細な情報（例：年齢と滞在時間）をわかりやすく表示するカスタムフォーマッタを実装しています。 D3. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSを追加 /* 軸のスタイル */ . axis path, . axis line { fill: none; stroke: #000; } /* データ点の初期スタイル */ . dot { fill: steelblue; opacity: 0. 8; } /* ツールチップのスタイル */ . tooltip { position: absolute; text-align: center; padding: 5px; background: lightsteelblue; border: 1px solid #333; border-radius: 3px; pointer-events: none; font-size: 12px; } 3. HTMLとJavaScriptコード D3. js 高度な散布図 // 全ライブラリ共通のサンプルデータ /* *割愛* */ // マージンと描画領域のサイズ設定 const margin = {top: 40, right: 30, bottom: 50, left: 60}, width = 600 - margin. left - margin. right, height = 400 - margin. top - margin. bottom; // SVG要素の生成とグループ要素の追加 const svg = d3. select("#d3-scatter") . attr("width", width + margin. left + margin. right) . attr("height", height + margin. top + margin. bottom) . append("g") . attr("transform", `translate(${margin. left},${margin. top})`); // x軸・y軸のスケール設定（データの最小値・最大値に余裕をもたせる） const xScale = d3. scaleLinear . domain . range; const yScale = d3. scaleLinear . domain . range; // 軸の生成 const xAxis = d3. axisBottom(xScale). ticks(8); const yAxis = d3. axisLeft(yScale). ticks(8); // x軸の描画とタイトルの追加 svg. append("g") . attr("class", "x axis") . attr("transform", `translate(0, ${height})`) . call(xAxis) . append("text") . attr("fill", "#000") . attr("x", width / 2) . attr("y", 40) . attr("text-anchor", "middle") . text("年齢"); // y軸の描画とタイトルの追加 svg. append("g") . attr("class", "y axis") . call(yAxis) . append("text") . attr("fill", "#000") . attr("transform", "rotate(-90)") . attr("x", -height / 2) . attr("y", -50) . attr("dy", "0. 71em") . attr("text-anchor", "middle") . text("サイト滞在時間 (分)"); // SVG内にタイトルテキストを追加 svg. append("text") . attr("x", width / 2) . attr("y", -10) . attr("text-anchor", "middle") . style("font-size", "16px") . style("font-weight", "bold") . text(jsonData. title); // ツールチップ要素の作成（body直下に追加） const tooltip = d3. select("body"). append("div") . attr("class", "tooltip") . style("opacity", 0); // データ点の描画（初期状態では半径0から開始し、トランジションで拡大） const dots = svg. selectAll(". dot") . data(jsonData. data) . enter . append("circle") . attr("class", "dot") . attr("cx", d => xScale(d. age)) . attr("cy", d => yScale(d. siteDuration)) . attr("r", 0) . on("mouseover", function(event, d) { // マウスオーバー時にデータ点を拡大し色を変更 d3. select(this) . transition. duration(200) . attr("r", 8) . attr("fill", "orange"); // ツールチップの表示 tooltip. transition. duration(200). style("opacity", 0. 9); tooltip. html(`ユーザー: ${d. userId}年齢: ${d. age}滞在時間: ${d. siteDuration}分備考: ${d. note}`) . style("left", (event. pageX + 10) + "px") . style("top", (event. pageY - 28) + "px"); }) . on("mouseout", function { // マウスアウト時に元の状態に戻す d3. select(this) . transition. duration(200) . attr("r", 5) . attr("fill", "steelblue"); tooltip. transition. duration(200). style("opacity", 0); }); // 初期ロード時にデータ点がアニメーションで現れる dots. transition . duration(1000) . attr("r", 5); 解説・ポイント アニメーションの実装 データ点は初期状態で半径 0 の状態から、transition を利用して 1000ms かけて半径 5 に拡大され、グラフに「登場」するようなアニメーション効果を実現しています。 インタラクションとツールチップ 各データ点には mouseover および mouseout イベントを設定。マウスオーバー時に対象のデータ点が拡大し、色が変化することでユーザーに注目させる効果があります。 さらに、マウスオーバー時にはツールチップを表示し、詳細な情報（ユーザーID、年齢、サイト滞在時間、備考）をわかりやすく提示しています。 ApexCharts 導入手順 1. CDNリンクの追加 2. CSSを追加 /* 最大幅600pxに設定 */ #apexcharts-scatter { max-width: 600px; margin: auto; } 3. HTMLとJavaScriptコード ApexCharts での散布図 // 全ライブラリ共通のサンプルデータ /* *割愛* */ // ApexCharts用のデータ整形 const seriesData = jsonData. data. map(item => ({ x: item. age, y: item. siteDuration })); const options = { chart: { height: 400, type: 'scatter' }, series: , xaxis: { title: { text: '年齢' }, tickAmount: 10 }, yaxis: { title: { text: 'サイト滞在時間 (分)' } }, markers: { size: 5 }, tooltip: { x: { formatter: val => `年齢: ${val}` }, y: { formatter: val => `滞在時間: ${val}分` } } }; const chart = new ApexCharts(document. querySelector("#apexcharts-scatter"), options); chart. render; 解説・ポイント 美しいデザインと直感的なAPI ApexChartsは、デフォルトで洗練されたデザインが適用されるため、コード量を最小限に抑えながらも視覚的に魅力的な散布図を作成できます。シンプルなオプション設定で、初心者でもすぐに利用可能です。 インタラクティブな機能 ツールチップやホバーエフェクトが標準搭載されており、ユーザーがデータポイントにマウスオーバーした際に、詳細情報（例えば、年齢やサイト滞在時間）が即座に表示されます。これにより、データの理解が深まり、ユーザーエクスペリエンスが向上します。 滑らかなアニメーション グラフの初期描画時やデータ更新時に、滑らかなアニメーション効果が自動的に適用されるため、リアルタイムデータの変化にも自然に対応できる設計となっています。実際の運用では、動的なデータ更新を活かしてダッシュボードなどにも応用できます。 リアルタイムデータ更新の容易さ ApexChartsはAPI経由でのリアルタイムデータ更新が容易に行える設計となっており、chart. updateSeries などのメソッドを使えば、データの変更に伴い即座にグラフの更新が反映されます。今回のコードでは直接の例は含まれていませんが、実装は非常にシンプルです。 Plotly. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. HTMLとJavaScriptコード Plotly. js での散布図 // 全ライブラリ共通のサンプルデータ /* *割愛* */ // Plotly用にx, yデータを分離 const ages = jsonData. data. map(item => item. age); const durations = jsonData. data. map(item => item. siteDuration); const trace = { x: ages, y: durations, mode: 'markers', type: 'scatter', marker: { size: 10 } }; const layout = { title: jsonData. title, xaxis: { title: '年齢' }, yaxis: { title: 'サイト滞在時間 (分)' } }; Plotly. newPlot('plotly-scatter', , layout); 解説・ポイント インタラクティブ性の高さ Plotly. js はデフォルトでデータポイントのホバー時に詳細なツールチップを表示する機能を備えており、ユーザーが各点にマウスオーバーすることで、瞬時に情報を把握できます。また、ドラッグ操作によるズームやパン機能も標準でサポートされているため、探索的データ分析に非常に適しています。 柔軟なズーム・パン機能 グラフ上でのズームやパン操作が直感的に行えるため、大規模なデータセットや密度の高いデータポイントの視認性向上に貢献します。ユーザーは関心のある部分に焦点を絞り、詳細な検討が可能です。 ECharts 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSの設定 #echarts-scatter { width: 100%; height: 400px; } 2. HTMLとJavaScriptを追加 ECharts での散布図 // 全ライブラリ共通のサンプルデータ /* *割愛* */ // 散布図用にデータを整形（x軸: 年齢, y軸: サイト滞在時間） const seriesData = jsonData. data. map(item => ); // ECharts インスタンスの初期化 const chartDom = document. getElementById('echarts-scatter'); const myChart = echarts. init(chartDom); const option = { title: { text: jsonData. title, left: 'center' }, tooltip: { formatter: params => `年齢: ${params. value}滞在時間: ${params. value}分` }, toolbox: { feature: { saveAsImage: {}, // 画像として保存 dataView: {readOnly: false}, // データ表示・編集 restore: {} // 初期状態へのリセット } }, xAxis: { name: '年齢', type: 'value' }, yAxis: { name: 'サイト滞在時間 (分)', type: 'value' }, series: }; myChart. setOption(option); 解説・ポイント 豊富なインタラクティブ機能 基本的なツールチップ表示に加え、データのフィルタリング、ズーム・パン機能、さらにはデータの表示・編集（dataView）や初期状態へのリセット（restore）など、ユーザーがグラフと直接対話できる多彩なインタラクティブ機能が組み込まれています。 アニメーション付きのトランジション ECharts はアニメーション効果を標準装備しており、データの追加や更新時に視覚的なトランジションが適用されます。これにより、動的なデータ変化を直感的に把握できるほか、プレゼンテーション用途にも適しています。 まとめ 今回は、散布図の特徴や活用シーンを紹介し、Webサイトで簡単に描画できるおすすめのJavaScriptライブラリを比較しました。 散布図は、データの傾向や相関関係を視覚的に把握するのに役立つグラフです。今回紹介したライブラリを活用し、プロジェクトのニーズに合った最適なグラフを選んでくださいね。 --- - Published: 2025-02-26 - Modified: 2025-02-24 - URL: https://fastcoding.jp/blog/all/frontend/javascript-radar-chart-plugins/ - カテゴリー: React, Vue.js, システム開発 - タグ: Chart.js, Google Charts, JavaScript, グラフ, プラグイン データを視覚的に伝えるためのレーダーチャートをJavaScriptで実装する方法について解説しています。特に、レーダーチャートの特徴、活用例、利点・欠点、人気のJavaScriptライブラリを比較し、導入方法やカスタマイズについても細かく説明しています。適切なライブラリ選定をサポートします。 Webサイト上でデータを視覚的にわかりやすく伝える方法として、グラフは欠かせません。本シリーズでは、グラフの種類ごとに特長や活用シーンを紹介し、それを簡単に実装できるJavaScriptライブラリを解説しています。 これまでに、棒グラフ、円グラフ、折れ線グラフを紹介してきましたが、今回はレーダーチャートに注目します。レーダーチャートは、複数の指標をバランスよく比較できるグラフで、スキル評価や製品比較などに活用されます。 この記事は、次のような人に向けて書いています。 Webサイトにグラフを取り入れたい新人エンジニア 今使っているライブラリを別のものに変えようと考えている中級エンジニア デザインにこだわったグラフを探しているWebデザイナー 「どのライブラリを使えばいいの？」 という疑問を解決できるよう、それぞれの特長を比較しながら説明するので、ぜひ参考にしてください！ レーダーチャートとは？ レーダーチャート（別名：スパイダーチャート、レーダーグラフ）は、複数の項目をバランスよく比較するためのグラフです。中心から放射状に伸びる軸上にデータをプロットし、各データポイントを線で結ぶことで多角形が形成されます。視覚的に全体のバランスや特徴を把握しやすいのが特長です。 レーダーチャートの活用例 レーダーチャートは、次のようなケースでよく使われます。 能力やスキルの評価・例：社員のスキルセット（プログラミング、デザイン、コミュニケーション能力など）の比較・例：アスリートの身体能力（スピード、持久力、パワーなど）の評価 製品やサービスの比較・例：スマートフォンの各機能（バッテリー持ち、カメラ性能、価格、処理速度など）を比較・例：競合製品との強み・弱みを視覚的に分析 マーケティング分析・例：顧客満足度の各要素（価格、品質、利便性、サポートなど）の評価・例：ブランドの市場ポジションの分析 レーダーチャートの種類 レーダーチャートには、用途に応じたさまざまなバリエーションがあります。 標準的なレーダーチャート：最も一般的なタイプで、データポイントを線で結んで多角形を形成。 塗りつぶしレーダーチャート（エリアレーダーチャート）：データの範囲を塗りつぶすことで、より直感的に比較しやすくなる。 複数比較用レーダーチャート：異なるデータセットを重ねて比較し、各対象の特徴を視覚的に表現。 レーダーチャートのメリットとデメリット メリット 直感的な比較ができる：複数の項目を一目で比較し、全体のバランスを把握しやすい。 特徴が際立つ：強みや弱みが視覚的に明確になり、特定の分野が突出しているかどうかがすぐに分かる。 複数のデータセットを重ねて比較できる：異なる対象（例：A社とB社、異なる年度のデータ）を同じグラフ上で比較可能。 デメリット データの細かい違いが分かりにくい：数値の変化が線や面の大きさとして表現されるため、細かい差を読み取るのが難しい。 項目数が多すぎると読みにくい：軸の数が増えるとグラフが複雑になり、線やエリアが重なって見づらくなることがある。 数値の大小関係が分かりにくいことがある：例えば、価格（円）・バッテリー持ち（時間）・カメラ性能（MP）などの各軸のスケールが異なる場合、相対的な強弱が直感的に理解しづらくなる。 JavaScriptライブラリを選ぶ際のチェックポイント グラフをWebサイトに表示するためのライブラリは数多くありますが、選び方を間違えると使いづらかったり、目的に合わなかったりすることがあります。ライブラリ選定の際には下記6つのポイントをチェックすることをおすすめします。 導入のしやすさ初心者でもすぐに使えるかどうかは重要です。CDNを使って簡単に読み込めるものや、設定が少なくても動作するライブラリを選ぶとよいでしょう。 カスタマイズ性デザインや色、アニメーションなどを柔軟に変更できるかを確認しましょう。ブランドやデザインテーマに合わせた調整が必要な場合は、カスタマイズ性の高いものがおすすめです。 レスポンシブ対応スマホやタブレットなど、画面サイズが異なるデバイスでもきれいに表示されるかをチェックしましょう。特に、ビジネスサイトではモバイル対応が重要です。 パフォーマンス表現するグラフにもよりますが、大規模データを扱う場合、表示速度やパフォーマンスも気にする必要があります。特にリアルタイムデータを表示する用途では、軽量で高速なライブラリが求められます。 サポートとドキュメント公式サイトやGitHubでのサポート状況や、ドキュメントの充実度を確認しましょう。使い方がわからないときに参考になる情報があるかどうかは重要です。 ライセンスと利用料利用規約やライセンス形態も確認しておきましょう。商用利用が可能かどうか、無料で使えるか、有料プランが必要かなどを事前にチェックすることが大切です。 おすすめライブラリ紹介 レーダーチャートをWebサイトで表示するために、さまざまなJavaScriptライブラリが利用できます。ここでは、特におすすめのライブラリを紹介します。 棒グラフや円グラフ、折れ線グラフのおすすめ記事で紹介したGoogle ChartsとChartist. jsにはレーダーチャートは標準サポートされていないため、今回のおすすめライブラリから除外しました。 1 Chart. js 公式URL: https://www. chartjs. org/ 特徴: シンプルなAPIと豊富なカスタマイズオプションがあり、初心者にも扱いやすい。レーダーチャートの描画が標準でサポートされており、設定がシンプル。 メリット・簡単に導入でき、初心者にも扱いやすい。・標準でレーダーチャートをサポート。・カスタマイズしやすく、デザインの調整が容易。 デメリット・高度なレーダーチャートのカスタマイズには制限がある。・アニメーションやインタラクティブ性のカスタマイズは限られている。 2 D3. js 公式URL: https://d3js. org/ 特徴: 柔軟なカスタマイズが可能で、高度なデータビジュアライゼーションを実現できる。レーダーチャートをゼロから作成できるが、実装には知識が必要。 メリット・レーダーチャートの自由なカスタマイズが可能。・大規模データの処理にも対応。・SVGを活用し、インタラクティブなレーダーチャートが作成可能。 デメリット・初心者には学習コストが高い。・レーダーチャートの実装には手間がかかる。 3 ApexCharts 公式URL: https://apexcharts. com/ 特徴: モダンなデザインのグラフを簡単に作成でき、レーダーチャートにも対応。ツールチップやアニメーションが強化されており、インタラクティブ性が高い。 メリット・直感的なAPI設計で、レーダーチャートの導入が簡単。・インタラクティブな要素が標準搭載。・レーダーチャートのアニメーションがスムーズ。 デメリット・高度なカスタマイズには制限がある。・D3. jsほどの自由度はない。 4 Plotly. js 公式URL: https://plotly. com/javascript/ 特徴: PythonのPlotlyと同じく、強力なインタラクティブグラフを作成可能。レーダーチャートにも標準対応し、ズームや詳細表示が可能。 メリット・レーダーチャートのデザインカスタマイズが柔軟。・データの詳細表示やズーム機能が豊富。・科学データ分析やダッシュボード向けに最適。 デメリット・他のライブラリと比べると少し重め。・大規模なデータセットでの処理速度はApexChartsやEChartsに劣る。 5 ECharts 公式URL: https://echarts. apache. org/ 特徴: Apacheが提供するデータビジュアライゼーションライブラリで、レーダーチャートが標準サポートされている。豊富なカスタマイズオプションと高パフォーマンスが特長。 メリット・レーダーチャートが標準でサポートされ、設定が簡単。・大規模データにも対応しており、高パフォーマンス。・インタラクティブなエフェクトが豊富。 デメリット・ドキュメントの一部が中国語ベースで、英語のサポートが限定的。・他のライブラリ（Chart. jsなど）と比べると学習コストがやや高め。 ライブラリ比較表 前述のライブラリ選定ポイントをまとめた表は下記のとおり 名称導入のしやすさカスタマイズ性レスポンシブ対応パフォーマンスサポートとドキュメントライセンスChart. js簡単中程度標準対応軽量・高速公式ドキュメント充実MITライセンスD3. js難しい非常に高い手動対応大規模データ対応可能豊富なサンプルと解説BSDライセンスApexCharts簡単高い標準対応高速・リアルタイム対応公式ドキュメント豊富MITライセンスPlotly. js普通高い標準対応データ量が増えるとやや負荷公式ドキュメントが詳しく、Python版との互換性もありMITライセンスECharts普通非常に高い標準対応大規模データとリアルタイム更新に最適公式ドキュメントが詳細だが、一部中国語ベースApache 2. 0 サンプルデータを使った導入例 今回紹介した各ライブラリを使って、同じ条件のサンプルデータからレーダーチャートを表示する手順を作成してみました。それぞれの特徴を活かしたオプションもつけてみたので参考にしてくださいね。 サンプルデータ：製品評価表 評価項目製品A製品B耐久性8578省エネルギー性7582安全性9088デザイン8070価格競争力6580機能性8875アフターサービス7085 今回は、このデータを下記のような、共通のJSONデータとして扱っていきます。（そのため、各ライブラリのコード部ではデータの記述は割愛しています） const commonData = { "labels": , "datasets": }, { "label": "製品B", "data": } \] }; Chart. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. HTMLとJavaScriptコード // 共通の性能評価データ /* *割愛* */ // Chart. js での表示用にデザイン設定 // ※ここでは、各製品のチャートの配色やポイントを設定 const designOptions = { datasets: }; // 共通データにデザイン設定をマージ（datasets の順番が一致している前提） commonData. datasets. forEach((dataset, index) => { Object. assign(dataset, designOptions. datasets); }); // Chart. js の設定 const config = { type: 'radar', data: commonData, options: { responsive: true, // 画面サイズに応じて自動リサイズ plugins: { title: { display: true, text: '製品評価レーダーチャート' }, legend: { display: true, position: 'top' }, tooltip: { mode: 'index', intersect: false } }, scales: { r: { // レーダーチャート用スケールの設定 angleLines: { display: true }, suggestedMin: 0, // 最小値 suggestedMax: 100 // 最大値 } }, elements: { line: { borderWidth: 2, // 線の太さ tension: 0. 1 // 線のカーブ具合（0で直線） } } } }; // Chart. js インスタンスの生成 new Chart( document. getElementById('radarChart'), config ); 解説・ポイント 複数系列レスポンシブ対応とオプション設定 responsive: true を設定することで、画面サイズに応じた自動リサイズが実現されます。また、タイトル、凡例、ツールチップ、スケールなどの細かいオプション設定により、柔軟なカスタマイズが可能です。 D3. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSを追加 . axis { stroke: #ccc; stroke-width: 1px; } . grid { stroke: #ddd; stroke-width: 0. 5px; fill: none; } . label { font-size: 12px; fill: #333; } . legend { margin-top: 10px; } 3. HTMLとJavaScriptコード D3. js レーダーチャート例 // 共通の性能評価データ /* *割愛* */ // SVG の設定 const width = 500, height = 500, margin = { top: 50, right: 50, bottom: 50, left: 50 }, radius = Math. min(width, height) / 2 - Math. max(margin. top, margin. right); // SVG 要素の作成 const svg = d3. select("#chart") . append("svg") . attr("width", width) . attr("height", height) . append("g") . attr("transform", `translate(${width/2}, ${height/2})`); // 軸の数と各軸の角度 const totalAxes = commonData. labels. length; const angleSlice = Math. PI * 2 / totalAxes; // 半径スケール（0～100のデータ値を radius に対応） const rScale = d3. scaleLinear . range . domain; // グリッドサークルの描画（レベルを5段階で表示） const levels = 5; for (let level = 1; level { const angle = angleSlice * i - Math. PI / 2; // 上方向から開始 const x = rScale(100) * Math. cos(angle); const y = rScale(100) * Math. sin(angle); // 軸線 svg. append("line") . attr("class", "axis") . attr("x1", 0) . attr("y1", 0) . attr("x2", x) . attr("y2", y); // ラベルの配置（軸の先端から少し外側へ） svg. append("text") . attr("class", "label") . attr("x", x * 1. 15) . attr("y", y * 1. 15) . attr("text-anchor", "middle") . attr("dy", "0. 35em") . text(label); }); // カラースケール（各データセットの色を決定） const color = d3. scaleOrdinal . domain(commonData. datasets. map(d => d. label)) . range; // 各データセットの各軸における座標を計算する関数 function getPathCoordinates(data) { return data. map((d, i) => { const angle = angleSlice * i - Math. PI / 2; return { x: rScale(d) * Math. cos(angle), y: rScale(d) * Math. sin(angle) }; }); } // 各データセットに対してポリゴン（レーダーチャートのエリア）を描画 commonData. datasets. forEach((dset) => { const coordinates = getPathCoordinates(dset. data); // 線ジェネレーター（線形補間し、閉じたポリゴンにする） const radarLine = d3. line . x(d => d. x) . y(d => d. y) . curve(d3. curveLinearClosed); svg. append("path") . datum(coordinates) . attr("d", radarLine) . attr("fill", color(dset. label)) . attr("stroke", color(dset. label)) . attr("stroke-width", 2) . attr("fill-opacity", 0. 5); }); // 簡易な凡例の追加 const legend = d3. select("body") . append("div") . attr("class", "legend"); commonData. datasets. forEach(dset => { legend. append("p") . html(`${dset. label}`); }); 解説・ポイント 柔軟なカスタマイズ D3. js はデータ駆動型の操作により、SVG 要素の座標や形状を自由に制御できます。上記コードでは、グリッド（同心円）や各軸、ラベル、そして各データセットのポリゴンを自前で描画しています。 自由なレイアウト調整 軸の数やデータに合わせて、円の段階数（levels）や半径スケール (rScale) を設定し、レーダーチャート全体の見た目を柔軟に調整できます。 カラースケールの活用 D3. js の scaleOrdinal を利用して、データセットごとに異なる色を割り当てています。これにより、複数の製品の評価を視覚的に区別できます。 低レベルな制御 D3. js は「ライブラリとしてのレーダーチャートコンポーネント」を持たないため、全体の描画を細かく制御できる反面、初期実装は少し手間がかかります。しかし、この自由度は、カスタムなデザインやインタラクションを実装する際に大きなメリットとなります。 ApexCharts 導入手順 1. CDNリンクの追加 2. CSSを追加 /* コンテナの横幅を90%、最大幅600pxに設定 */ #chart { width: 90%; max-width: 600px; margin: 35px auto; } 3. HTMLとJavaScriptコード // 共通の性能評価データ /* *割愛* */ // ApexCharts 用の series 配列へ変換 const series = commonData. datasets. map(ds => ({ name: ds. label, data: ds. data })); // ApexCharts の設定 const options = { chart: { type: 'radar', height: 500, animations: { enabled: true, easing: 'easeinout', speed: 800, animateGradually: { enabled: true, delay: 150 }, dynamicAnimation: { enabled: true, speed: 350 } } }, series: series, labels: commonData. labels, title: { text: '製品評価レーダーチャート', align: 'center' }, markers: { size: 4 }, stroke: { width: 2 }, fill: { opacity: 0. 3 }, tooltip: { enabled: true, theme: 'dark' }, legend: { position: 'top' }, responsive: }; // チャートの生成と描画 const chart = new ApexCharts(document. querySelector("#chart"), options); chart. render; 解説・ポイント 豊富なアニメーション設定 chart. animations オプションで、描画時のアニメーションの速度、イージング、逐次的なアニメーションの遅延などを細かく指定しています。これにより、視覚的なインパクトと動的な表現が向上します。 直感的な設定項目 ApexCharts は labels、title、markers、stroke、fill など、グラフ全体のスタイルや挙動に関する設定が直感的に行えるため、初心者でも扱いやすく、かつ高度なカスタマイズも可能です。 ツールチップと凡例 ツールチップや凡例の設定により、ユーザーがグラフ上の各データポイントの情報を容易に把握できるようになっています。特にツールチップのテーマ指定でダークモードを利用する例を示しています。 レスポンシブオプション responsive オプションを使用して、画面幅480px以下の場合にはチャートの高さを350pxに縮小するなど、スマホ向けの表示を調整しています。また、マーカーのサイズも若干小さくすることで、全体のバランスを整えています。 Plotly. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSを追加 /* コンテナの横幅を90%、最大幅600pxに設定 */ #chart { width: 90%; max-width: 600px; margin: auto; } 3. HTMLとJavaScriptコード // 共通の性能評価データ /* *割愛* */ // Plotly. js のレーダーチャートは、scatterpolar タイプで実装します。 // データの最後に最初の値を追加して閉じたポリゴンを作成する必要があります。 const traceA = { type: 'scatterpolar', r: commonData. datasets. data. concat(commonData. datasets. data), theta: commonData. labels. concat(commonData. labels), fill: 'toself', name: commonData. datasets. label, marker: { size: 8 }, line: { width: 2 } }; const traceB = { type: 'scatterpolar', r: commonData. datasets. data. concat(commonData. datasets. data), theta: commonData. labels. concat(commonData. labels), fill: 'toself', name: commonData. datasets. label, marker: { size: 8 }, line: { width: 2 } }; const data = ; // レイアウト設定 const layout = { title: { text: '製品評価レーダーチャート', font: { size: 18 }, x: 0. 5 }, polar: { radialaxis: { visible: true, range: } }, showlegend: true, autosize: true }; // レスポンシブ設定で描画 Plotly. newPlot('chart', data, layout, {responsive: true}); 解説・ポイント データ構造の補完 Plotly. js のレーダーチャート（scatterpolar）は、ポリゴンを閉じた形で表示するため、各データの配列の最後に最初の値を追加して閉じる必要があります。この処理により、軸の開始点と終了点が一致し、自然な形状となります。 インタラクティブな機能 Plotly. js は、ホバー時のツールチップやズーム、パンなどのインタラクションが標準で備わっており、ユーザーがデータポイントに対して詳細な情報を即座に確認できる点がメリットです。 レスポンシブ対応 オプション {responsive: true} を指定することで、スマホやタブレットなど、異なる画面サイズに合わせた自動リサイズが実現されます。 直感的なレイアウト調整 タイトル、凡例、軸の範囲（0～100）などのレイアウト設定がシンプルかつ柔軟に行えるため、データの視覚化において高い自由度を提供します。 ECharts 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSの設定 /* コンテナの横幅を90%、高さを400pxに設定 */ #chart { width: 90%; max-width: 600px; height: 400px; margin: 35px auto; } 2. HTMLとJavaScriptを追加 // 共通の性能評価データ /* *割愛* */ // レーダーチャート用の指標データ（各評価項目の最大値を100に設定） const indicator = commonData. labels. map(label => ({ name: label, max: 100 })); // 各データセットを ECharts 用の形式に変換 const seriesData = commonData. datasets. map(ds => ({ value: ds. data, name: ds. label })); // ECharts インスタンスの初期化 const chartDom = document. getElementById('chart'); const myChart = echarts. init(chartDom); // オプション設定（凡例を最下部に配置） const option = { title: { text: '製品評価レーダーチャート', left: 'center' }, tooltip: { trigger: 'item' }, legend: { // 凡例を下部中央に配置 data: commonData. datasets. map(ds => ds. label), bottom: 0, left: 'center' }, radar: { shape: 'circle', indicator: indicator, splitNumber: 5, axisName: { color: '#333' } }, series: }; // オプションをチャートに設定して描画 myChart. setOption(option); 解説・ポイント 直感的な指標設定 共通データの評価項目をもとに、indicator 配列を自動生成しています。各軸の最大値は 100 としており、実際のデータに合わせたスケール調整が可能です。 豊富なカスタマイズ ECharts のオプション設定により、タイトル、凡例、ツールチップ、グリッド分割数、軸ラベルのスタイルなど、細かくカスタマイズできる点がメリットです。 インタラクティブ機能 ツールチップ（tooltip）やアニメーションオプション（animationDuration や animationDelay）を活用することで、ユーザーの視覚体験を向上させ、データの変化を滑らかに表示できます。 まとめ 本記事では、レーダーチャートの基本的な特徴や活用例を紹介し、Web上で簡単に実装できるおすすめのJavaScriptライブラリを比較しました。 レーダーチャートは、複数の要素をバランスよく比較したい場合に非常に有効なツールであり、スキル評価や製品比較、マーケティング分析など幅広い用途で活用できます。今回紹介したライブラリを活用し、プロジェクトのニーズに合った最適なグラフを選んでくださいね。 --- - Published: 2025-02-17 - Modified: 2025-02-17 - URL: https://fastcoding.jp/blog/all/frontend/javascript-line-graph-plugins/ - カテゴリー: React, Vue.js, システム開発 - タグ: Chart.js, Google Charts, JavaScript, グラフ, プラグイン データをわかりやすく伝える手段として、グラフはとても便利ですよね。本シリーズでは、Webサイトでよく使われるグラフの種類と、それを簡単に表示できるJavaScriptライブラリを紹介しています。 これまでに、割合を示すのに適した円グラフ、項目ごとの数値を比較しやすい棒グラフについて解説してきました。 そして3回目となる今回は、折れ線グラフ。折れ線グラフは、売上やアクセス数の変化、気温の推移など、時間の経過とともに変化するデータを表現するのに最適です。本記事では、折れ線グラフの特徴や活用シーンを紹介し、Web上で簡単にグラフを作成できるJavaScriptライブラリを解説していきます。 この記事は、次のような人に向けて書いています。 Webサイトにグラフを取り入れたい新人エンジニア 今使っているライブラリを別のものに変えようと考えている中級エンジニア デザインにこだわったグラフを探しているWebデザイナー 「どのライブラリを使えばいいの？」 という疑問を解決できるよう、それぞれの特長を比較しながら説明するので、ぜひ参考にしてください！ 折れ線グラフとは？ 折れ線グラフは、データの変化を線でつなげて表現するグラフの一種です。時間の経過による数値の推移や、異なるカテゴリにおけるデータの変動を視覚的に捉えるのに適しています。 折れ線グラフが向いている活用例 折れ線グラフが活躍するのは、こんな場合です： 時系列データの可視化例：売上やアクセス数の推移、気温の変動、株価の変動など。 トレンド分析例：年間の売上成長率、ウェブサイトの訪問者数の増加傾向。 比較対象の推移を示す例：複数の商品の売上推移、異なる都市の気温変化。 折れ線グラフの種類 折れ線グラフには、用途に応じたさまざまなバリエーションがあります。 シンプルな折れ線グラフ：基本的な折れ線グラフで、データの推移をシンプルに表現。 積み上げ折れ線グラフ：複数のデータを積み上げて、全体の変化を可視化。 スムーズな曲線折れ線グラフ：滑らかな曲線を用いることで、データの流れをより視覚的に表現。 エリアチャート（面グラフ）：折れ線グラフの下部を塗りつぶすことで、データの分量感を強調。 折れ線グラフのメリットとデメリット メリット データの推移を明確に表現できる：時間の経過に伴う変化を直感的に理解しやすい。 複数のデータセットを比較しやすい：複数の線を使用することで異なるデータの動向を比較可能。 細かい変動も把握できる：データポイントが多い場合でも、折れ線をたどることで変動の流れを追いやすい。 デメリット データポイントが少ないと適切に表現できない：折れ線グラフはデータの連続性を示すのに適しているが、データポイントが少ないと変化の流れが不明瞭になり、折れ線グラフの強みを活かせないことがある。 値の差が大きすぎると、細かい変動が見えにくくなる：例えば、1つのデータが1000、他のデータが5や10のように極端な値が混ざると、スケールの関係で細かい変動が見えにくくなる。 データの密度が高すぎると可読性が低下する：多くのデータポイントをプロットすると、線が密集しすぎてしまい、視認性が悪くなることがある。この場合、スムーズな線を使ったり、ズーム機能を導入することで解決できるが、調整が必要になる。 JavaScriptライブラリを選ぶ際のチェックポイント グラフをWebサイトに表示するためのライブラリは数多くありますが、選び方を間違えると使いづらかったり、目的に合わなかったりすることがあります。ライブラリ選定の際には下記6つのポイントをチェックすることをおすすめします。 導入のしやすさ初心者でもすぐに使えるかどうかは重要です。CDNを使って簡単に読み込めるものや、設定が少なくても動作するライブラリを選ぶとよいでしょう。 カスタマイズ性デザインや色、アニメーションなどを柔軟に変更できるかを確認しましょう。ブランドやデザインテーマに合わせた調整が必要な場合は、カスタマイズ性の高いものがおすすめです。 レスポンシブ対応スマホやタブレットなど、画面サイズが異なるデバイスでもきれいに表示されるかをチェックしましょう。特に、ビジネスサイトではモバイル対応が重要です。 パフォーマンス表現するグラフにもよりますが、大規模データを扱う場合、表示速度やパフォーマンスも気にする必要があります。特にリアルタイムデータを表示する用途では、軽量で高速なライブラリが求められます。 サポートとドキュメント公式サイトやGitHubでのサポート状況や、ドキュメントの充実度を確認しましょう。使い方がわからないときに参考になる情報があるかどうかは重要です。 ライセンスと利用料利用規約やライセンス形態も確認しておきましょう。商用利用が可能かどうか、無料で使えるか、有料プランが必要かなどを事前にチェックすることが大切です。 おすすめライブラリ紹介 1 Chart. js 公式URL: https://www. chartjs. org/ 特徴: シンプルなAPIと豊富なカスタマイズオプションがあり、初心者にも扱いやすい。軽量ながらもアニメーションやツールチップのカスタマイズが可能で、基本的な折れ線グラフから複雑なデータ可視化まで対応可能。 メリット・レスポンシブ対応が標準。・簡単にアニメーションを追加可能。・軽量で、簡単に導入できる。 デメリット・大規模データの処理には向いていない。・高度なカスタマイズには追加のプラグインが必要。・複雑なインタラクティブ機能には向いていない。 2 D3. js 公式URL: https://d3js. org/ 特徴: データ可視化のための強力なツールで、柔軟なカスタマイズが可能。データドリブンな描画が可能で、SVGやCanvasを自由に操り、インタラクティブなデータ表現が実現できる。企業のダッシュボードやデータ分析ツールに多く使用される。 メリット・大規模データの可視化に適している。・高度なカスタマイズが可能。・インタラクティブなグラフが作成できる。・リアルタイムデータをグラフに反映できる。 デメリット・初心者には学習コストが高い。・シンプルなグラフを作成するにはオーバースペック。・レスポンシブ対応は可能だが、手動での実装が必要。 3 ApexCharts 公式URL: https://apexcharts. com/ 特徴: モダンなデザインのグラフを簡単に作成でき、リアルタイムデータ対応。直感的なAPI設計で、高度なカスタマイズが可能。ズーム、パン、アニメーション、ツールチップの制御など、視覚的に洗練されたグラフを作成できる。 メリット・直感的なAPI設計で導入しやすい。・大規模データの処理に適している。・標準でレスポンシブ対応しており、スマホ・タブレットでも適切に表示される。・リアルタイムデータに対応。・インタラクティブなグラフが作成可能。 デメリット・D3. jsほどの自由度はない。 4 Google Charts 公式URL: https://developers. google. com/chart/ 特徴: Googleが提供するクラウドベースのグラフ描画ツール。Googleスプレッドシートやデータベースと統合し、リアルタイムデータの取得が容易。グラフの種類が豊富で、Webアプリケーションに簡単に組み込むことが可能 メリット・APIとの連携が簡単（Googleスプレッドシートやデータベースと直接接続可能で、リアルタイムデータの取得が容易）。・クラウドベースで手軽に使用可能。・完全無料で利用可能。 デメリット・デザインの自由度が低い。・インタラクティブ性は他のライブラリと比べて制限がある。・オフラインでは使用できない（インターネット接続が必要）。 5 Chartist. js 公式URL: https://gionkunz. github. io/chartist-js/ 特徴: 軽量でモバイルフレンドリーなグラフライブラリ。CSSを活用したカスタマイズが可能で、レスポンシブデザインにも対応。シンプルなコードで扱いやすく、フロントエンド開発者にとっても扱いやすい。 メリット・軽量で高速。・CSSを使用したカスタマイズが可能。・フロントエンド開発者にとって扱いやすい。・モバイル対応がしやすい。 デメリット・機能がシンプルで高度なカスタマイズが難しい。・大規模データの処理には向いていない。・リアルタイムデータの更新には手動での実装が必要。・高度なJavaScriptカスタマイズには制限がある。 ライブラリ比較表 前述のライブラリ選定ポイントをまとめた表は下記のとおり 名称導入のしやすさカスタマイズ性レスポンシブ対応パフォーマンスサポートとドキュメントライセンスChart. js高い中程度標準対応軽量・高速公式ドキュメント充実MITライセンスD3. js中程度非常に高い手動対応大規模データ対応可能豊富なサンプルと解説BSDライセンスApexCharts高い高い標準対応高速・リアルタイム対応公式ドキュメント豊富MITライセンスGoogle Charts高い中程度手動対応高速Googleの公式サポート無料Chartist. js高い中程度標準対応軽量・高速コミュニティベースMITライセンス サンプルデータを使った導入例 今回紹介した各ライブラリを使って、同じ条件のサンプルデータから折れ線グラフを表示する手順を作成してみました。それぞれの特徴を活かしたオプションもつけてみたので参考にしてくださいね。 サンプルデータ：月次売上・費用・利益一覧表 年月売上費用利益2024-01120,00050,00070,0002024-02140,00070,00070,0002024-03130,000 60,00070,0002024-04150,00070,000 80,0002024-05160,00070,00090,0002024-06170,00090,00080,0002024-07200,000110,00090,0002024-08180,00090,00090,0002024-09220,000120,000100,0002024-10210,000110,000100,0002024-11230,000130,000100,0002024-12240,000130,000110,000 今回は、このデータを下記のような、共通のJSONデータとして扱っていきます。（そのため、各ライブラリのコード部ではデータの記述は割愛しています） const monthlyData = ; Chart. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. HTMLとJavaScriptコード 2024年1月～12月 月次売上・費用・利益グラフ // Chart. js 用にグラフのラベル配列と、各系列のデータ配列を準備 const labels = monthlyData. map(item => item. month); const revenueData = monthlyData. map(item => item. revenue); const expenseData = monthlyData. map(item => item. expense); const profitData = monthlyData. map(item => item. profit); // Chart. js の設定オプション const ctx = document. getElementById('myChart'); const chart = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: }, options: { responsive: true, // 補助情報（タイトル、サブタイトル等）の表示 plugins: { title: { display: true, text: '2024年 月次売上・費用・利益の推移', font: { size: 18 } }, subtitle: { display: true, text: '（Chart. jsの機能を活用した折れ線グラフのサンプル）', font: { size: 14 } }, tooltip: { enabled: true, mode: 'index', // ホバー時に同じX軸上のすべてのデータを表示 intersect: false, callbacks: { label: function(context) { // Y軸の値をフォーマット（カンマ区切りなど） const value = context. parsed. y. toLocaleString; return `${context. dataset. label}: ${value} 円`; } } }, legend: { display: true, labels: { font: { size: 12 } } } }, scales: { x: { display: true, title: { display: true, text: '月', font: { size: 14 } } }, y: { beginAtZero: true, title: { display: true, text: '金額（円）', font: { size: 14 } }, ticks: { // Y軸もフォーマット callback: function(value) { return value. toLocaleString + ' 円'; } } } }, interaction: { // グラフ上にマウスカーソルを重ねたときの補助線を表示する設定 mode: 'index', intersect: false } } }); 解説・ポイント 複数系列を簡単に描画 datasets 配列の要素を増やせば、複数の折れ線を同じグラフで表示できます。 「売上」「費用」「利益」といった複数の指標を一度に可視化するのがとても簡単です。 グラフのタイトル・サブタイトル plugins. title と plugins. subtitle を活用し、グラフ全体の説明を付加できます。 ツールチップのカスタマイズ callbacks. label で値（ツールチップに表示される値）を自由にフォーマットできます。 toLocaleString を使ってカンマ区切りにするなど、売上などの大きな金額を読みやすくしました。 スムージング (tension) とポイントスタイル tension プロパティを設定することで折れ線を曲線にできます。 pointStyle や pointRadius によって、データ点の形と大きさをカスタマイズ可能です。 レスポンシブ対応 デフォルトで responsive: true となっているため、ウィンドウサイズに応じてキャンバスがリサイズされます。 さまざまなチャートタイプに切り替えやすい type: 'bar' に変更して棒グラフにするなど、他の可視化方法への切り替えも容易です。 D3. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSを追加 body { font-family: sans-serif; } . axis path, . axis line { fill: none; stroke: #ccc; shape-rendering: crispEdges; } . legend { font-size: 12px; } . tooltip { position: absolute; text-align: center; padding: 4px; background: rgba(0, 0, 0, 0. 7); color: #fff; border-radius: 4px; pointer-events: none; font-size: 12px; } 3. HTMLとJavaScriptコード 2024年1月～12月 月次売上・費用・利益グラフ (D3. js) // SVGコンテナの設定 const margin = { top: 40, right: 100, bottom: 40, left: 60 }, width = 800 - margin. left - margin. right, height = 400 - margin. top - margin. bottom; // SVG 要素を追加 const svg = d3. select("#chart") . append("svg") . attr("width", width + margin. left + margin. right) . attr("height", height + margin. top + margin. bottom) . append("g") . attr("transform", `translate(${margin. left},${margin. top})`); // X軸スケール（カテゴリ：月） const xScale = d3. scaleBand . domain(monthlyData. map(d => d. month)) . range . padding(0. 1); // Y軸スケール（3指標の最大値に合わせて可変） const yMax = d3. max(monthlyData, d => Math. max(d. revenue, d. expense, d. profit)); const yScale = d3. scaleLinear . domain . range . nice; // 目盛りを端数の無い値に調整 // 軸の描画 // X軸 svg. append("g") . attr("transform", `translate(0, ${height})`) . attr("class", "axis") . call(d3. axisBottom(xScale)); // Y軸 svg. append("g") . attr("class", "axis") . call(d3. axisLeft(yScale) . tickFormat(d3. format(",")) // カンマ区切り表示 . ticks(8)); // 目盛りの数を適度に // ラインジェネレータ (売上・費用・利益) を3つ用意 // . curve(d3. curveCatmullRom. alpha(0. 5)) で曲線の「テンション」を設定 const lineRevenue = d3. line . x(d => xScale(d. month) + xScale. bandwidth / 2) . y(d => yScale(d. revenue)) . curve(d3. curveCatmullRom. alpha(0. 5)); const lineExpense = d3. line . x(d => xScale(d. month) + xScale. bandwidth / 2) . y(d => yScale(d. expense)) . curve(d3. curveCatmullRom. alpha(0. 5)); const lineProfit = d3. line . x(d => xScale(d. month) + xScale. bandwidth / 2) . y(d => yScale(d. profit)) . curve(d3. curveCatmullRom. alpha(0. 5)); // トランジション付きで折れ線を描画する関数を定義 function drawLineWithTransition(data, lineGenerator, color, className) { // path要素を追加 const path = svg. append("path") . datum(data) . attr("class", className) . attr("fill", "none") . attr("stroke", color) . attr("stroke-width", 2) . attr("d", lineGenerator); // アニメーション用: パスの全長を取得 const totalLength = path. node. getTotalLength; // stroke-dash系の設定を使い、「線が描かれていく」アニメーションを実装 path . attr("stroke-dasharray", `${totalLength} ${totalLength}`) . attr("stroke-dashoffset", totalLength) . transition . duration(2000) // 2秒かけて描画 . ease(d3. easeLinear) // 線形変化 . attr("stroke-dashoffset", 0); } // 3系列（売上・費用・利益）の折れ線をアニメーション付きで描画 drawLineWithTransition(monthlyData, lineRevenue, "steelblue", "line-revenue"); drawLineWithTransition(monthlyData, lineExpense, "tomato", "line-expense"); drawLineWithTransition(monthlyData, lineProfit, "green", "line-profit"); // 各データ点にマーカー(circle)とツールチップを付与 function drawPoints(key, color) { svg. selectAll(`. point-${key}`) . data(monthlyData) . enter . append("circle") . attr("class", `point-${key}`) . attr("cx", d => xScale(d. month) + xScale. bandwidth / 2) . attr("cy", d => yScale(d)) . attr("r", 4) . attr("fill", color) . on("mouseover", (event, d) => { // ツールチップを表示 d3. select("#tooltip") . style("opacity", 1) . html( `${d. month} ${key}: ${d. toLocaleString} 円` ) . style("left", (event. pageX + 10) + "px") . style("top", (event. pageY - 20) + "px"); }) . on("mousemove", (event) => { // マウス移動に追従 d3. select("#tooltip") . style("left", (event. pageX + 10) + "px") . style("top", (event. pageY - 20) + "px"); }) . on("mouseout", => { // ツールチップを非表示 d3. select("#tooltip") . style("opacity", 0); }); } // 売上・費用・利益、3つの系列で描画 drawPoints("revenue", "steelblue"); drawPoints("expense", "tomato"); drawPoints("profit", "green"); // 凡例の追加（右上付近に配置する例） const legends = ; svg. selectAll(". legend") . data(legends) . enter . append("g") . attr("class", "legend") . attr("transform", (d, i) => `translate(${width + 10}, ${i * 20})`) . call(g => { // カラーの矩形 g. append("rect") . attr("x", 0) . attr("y", -5) . attr("width", 10) . attr("height", 10) . attr("fill", d => d. color); // テキスト g. append("text") . attr("x", 15) . attr("y", 0) . attr("dy", ". 35em") . style("font-size", "12px") . text(d => d. name); }); 解説・ポイント 曲線のテンション (curveCatmullRom. alpha(0. 5)) D3. jsでは、複数のカーブ補完関数から好みのスタイルを選べます。 curveCatmullRom は滑らかな曲線、. alpha(0. 5) で「曲線の張り具合」を調整しています。大きいほど曲線が“たわむ”ような形になります。 描画時のアニメーション（transition） SVGのpath要素に対し、stroke-dasharray と stroke-dashoffset を使って「線が左から右へ伸びていく」演出を実装。 . transition. duration(2000). ease(d3. easeLinear) で、2秒かけて一定速度でアニメーションさせています。 getTotalLength で実際のパスの長さを取得し、dasharray と dashoffset を同期するのがポイントです。 ツールチップ (mouseover, mousemove, mouseout) on("mouseover", ... ) で透明度を変更して表示し、HTML内部でカスタマイズした内容を表示できます。 event. pageX と event. pageY を使うことで、マウスカーソルに追従するツールチップを実現しています。 凡例の手動追加 tension プロパティを設定することで折れ線を曲線にできます。 pointStyle や pointRadius によって、データ点の形と大きさをカスタマイズ可能です。 レスポンシブ対応 デフォルトで responsive: true となっているため、ウィンドウサイズに応じてキャンバスがリサイズされます。 さまざまなチャートタイプに切り替えやすい type: 'bar' に変更して棒グラフにするなど、他の可視化方法への切り替えも容易です。 ApexCharts 上記２つのグラフに加えて、グラデーションも追加したコードです。 導入手順 1. CDNリンクの追加 2. HTMLとJavaScriptコード 2024年1月～12月 月次売上・費用・利益グラフ (ApexCharts) // ApexCharts用に「x軸カテゴリ配列」と「各系列のデータ配列」を生成 const categories = monthlyData. map(d => d. month); const revenueData = monthlyData. map(d => d. revenue); const expenseData = monthlyData. map(d => d. expense); const profitData = monthlyData. map(d => d. profit); // ApexCharts のオプション // 複数系列(売上/費用/利益)をまとめてラインチャートにする const options = { chart: { type: 'line', height: 450, toolbar: { show: true // ズーム・パン・ダウンロードボタンなどが表示される } }, // データ系列を定義 series: , // X軸設定 xaxis: { categories: categories, title: { text: '月' } }, // Y軸設定 yaxis: { title: { text: '金額（円）' }, labels: { formatter: (val) => val. toLocaleString } }, // その他のオプション stroke: { curve: 'smooth', // 線をなめらかに width: 3 // 線の太さ }, markers: { size: 4 // データ点の大きさ }, tooltip: { y: { formatter: (val) => `${val. toLocaleString} 円` } }, title: { text: '2024年 月次売上・費用・利益', align: 'left' }, subtitle: { text: 'ApexChartsでの折れ線グラフサンプル', align: 'left' }, legend: { position: 'top', horizontalAlign: 'left' } }; // グラフを描画 const chart = new ApexCharts(document. querySelector("#chart"), options); chart. render; 解説・ポイント 複数系列の線グラフが簡単に実装できる series プロパティに複数オブジェクトを渡すだけで、売上・費用・利益などの複数指標を同時に表示できます。 豊富なツールバー機能 chart. toolbar オプションで、グラフのダウンロード（PNG/JPG/SVG）, ズーム（選択/拡大/縮小/パン）, リセット などのインタラクティブ操作をワンクリックで使えます。 なめらかな曲線とカスタマイズ性 stroke. curve: 'smooth' でラインを曲線に、width で太さを変更できます。 ApexChartsには他にも 'straight' や 'stepline' など、多様なスタイルが選択可能です。 ツールチップのフォーマット tooltip. y. formatter を使うと、値をカンマ区切りにしたり、後ろに '円' を付けるなど、フォーマットを自由に変更できます。 データラベルや軸ラベルの制御 xaxis, yaxis の title, labels, formatter を用いて、軸周りの表現を柔軟にカスタマイズできます。 レスポンシブ・アニメーション デフォルトでチャートはレスポンシブに描画され、ウィンドウの幅に合わせてリサイズされます。 シンプルながら、描画時のアニメーションも組み込みで有効になっています。 Google Charts 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. JavaScriptを追加 // Google Chartsのロード google. charts. load('current', { packages: }); google. charts. setOnLoadCallback(drawChart); function drawChart { // データをGoogle Charts用の2次元配列に変換 const dataArray = \]; monthlyData. forEach(d => { dataArray. push; }); // データを作成 const data = google. visualization. arrayToDataTable(dataArray); // グラフのオプション（プロットポイントを表示する設定を追加） const options = { title: '2024年 月次売上・費用・利益', subtitle: 'Google Chartsを使った折れ線グラフ', curveType: 'function', // 曲線を滑らかに legend: { position: 'top' }, chartArea: { width: '80%', height: '70%' }, hAxis: { title: '月' }, vAxis: { title: '金額（円）', format: 'short' }, colors: , pointSize: 6, // データポイントのサイズを指定（ここが追加点） lineWidth: 3 // 線の太さ }; // チャートを描画 const chart = new google. visualization. LineChart(document. getElementById('chart')); chart. draw(data, options); } 3. HTML 解説・ポイント 曲線の補完がデフォルトで可能 curveType: 'function' を設定すると、スムーズな曲線（spline曲線） が適用され、より直感的なグラフになります。 軽量かつ高速 他のライブラリ（Chart. jsやD3. js）と比べても、Google Chartsはレンダリング速度が速いため、データが多くなってもパフォーマンスが良好です。 シンプルなカスタマイズ colors: で各系列の色を簡単に指定可能。 chartArea の調整で凡例やタイトルとの間隔を最適化できる。 ブラウザとの互換性が高い Google ChartsはSVGとHTML5ベースなので、ほとんどのブラウザでネイティブに動作する。 Chartist. js Chartist. jsでは、少なくとも簡単には要素の色は指定できないようでした。 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSの設定 /* Chartist グラフのスタイル */ . ct-chart { height: 400px; } /* 各系列の折れ線とデータポイントのスタイル */ . ct-series-a . ct-line, . ct-series-a . ct-point { stroke: #1E88E5; } . ct-series-b . ct-line, . ct-series-b . ct-point { stroke: #D32F2F; } . ct-series-c . ct-line, . ct-series-c . ct-point { stroke: #388E3C; } /* データポイントのスタイル */ . ct-point { stroke-width: 10px; /* データポイントのサイズ */ } /* 凡例のカスタマイズ */ . legend { display: flex; justify-content: center; margin-top: 10px; } . legend div { display: flex; align-items: center; margin-right: 15px; font-size: 14px; } . legend span { width: 12px; height: 12px; display: inline-block; margin-right: 5px; } 2. HTMLとJavaScriptを追加 2024年1月～12月 月次売上・費用・利益グラフ (Chartist. js) Revenue (売上) Expense (費用) Profit (利益) const labels = monthlyData. map(d => d. month); // X軸のラベル const revenueData = monthlyData. map(d => d. revenue); const expenseData = monthlyData. map(d => d. expense); const profitData = monthlyData. map(d => d. profit); // Chartist. js に渡すデータオブジェクト const data = { labels: labels, series: }; // Chartist. js のオプション設定 const options = { fullWidth: true, chartPadding: { right: 40 }, showPoint: true, // データポイント（プロットポイント）を表示 lineSmooth: Chartist. Interpolation. cardinal({ tension: 0. 5 }), // 曲線の滑らかさを設定 axisY: { labelInterpolationFnc: function(value) { return value. toLocaleString; // カンマ区切り } } }; // グラフを描画 new Chartist. Line('. ct-chart', data, options); 解説・ポイント showPoint: true でデータポイントを明示的に表示 lineSmooth で曲線の滑らかさを調整 レスポンシブデザイン対応（自動リサイズ） まとめ この記事では、折れ線グラフの基本から利用シーン、ライブラリの選び方、そしておすすめライブラリの特徴と比較表までを紹介しました。 折れ線グラフは、データの視覚化において非常に有用なツールです。今回紹介したライブラリを活用し、プロジェクトのニーズに合った最適なグラフを選んでくださいね。 --- - Published: 2025-02-06 - Modified: 2025-07-15 - URL: https://fastcoding.jp/blog/all/info/aun/ - カテゴリー: Web業界の動向・情報, ディレクション, 便利サービス - タグ: Web業界の動向, ディレクション, 作業効率化 先日、弊社でも大変お世話になっている「AUN」を運営されている株式会社フォノグラム様にご訪問し、業務効率化についての座談会に参加してきました！ ↓ 記事はこちらのバナーから！ ↓ そもそも、皆さま「AUN」というツールはご存知でしょうか？ファストコーディングを利用している方なら一度は使ったことがあるとは思いますが、簡単にどんなツールなのかご紹介させていただきます！ 「AUN」って？ 「AUN」とは、オンライン上で画像やURLを貼り付けて、その上からメモを書いて他の人と共有することができるツールです。弊社でもかなりお世話になっている、作業にはなくてはならない大変便利なツールです。 https://aun. tools/ 「AUN」のいいところって？ ちなみに、弊社がおススメするAUNの良いところは・・・ 図示で伝わるのがいい！ 画像：https://aun. tools/ より引用 言葉やメッセージで長く伝えても、結局伝わらなかったり、微妙なニュアンスが違ったり、、、ということは結構あると思います。「xxxページのxxxと書いてあるところのxxxの中のxxxをxxxに変更してください」のような長い指示も、「AUN」を使えば、修正箇所のスクショを撮って貼り付けて「ここ」を「こうして」と図示するだけで伝えることができるんです。情報伝達のミスも防げるし、何と言っても早い！大変便利です。 返信が書けるのがいい！ 上記の作業依頼に対して、「自分ではなくて他の人が担当する」「一つ目は出来たけど、二つ目は明日やる」など、細かい返答がある場合には、コメント毎に返信ができます。作業依頼だけでなく、「これってどういう意味？」「こういう感じで修正することって可能？」などのコメントに対してもそれぞれ返答ができるので、「AUN」内でメッセージのやり取りも可能です。コミュニケーションツールを使うと埋もれがちなメッセージのやり取りも全て一つの「AUN」に残せるので、進捗状況も一目で把握できます。 画像：https://aun. tools/ より引用 IP制限もちゃんとあってセキュリティも万全！※有料会員のみの機能です 画像：https://aun. tools/ より引用 「AUN」は誰でも無料で使える、大変便利なツールです。ただ、作成したURLについては誰でも見れてしまうという側面もあります。そこで、特定の人だけが見れるようにしたい場合は、パスワードを付けて閲覧できる人を制限することも可能です。公開されては困る情報などについてはパスワードを付けて安全に、とりあえずのメモはパスワードなしで作成、と分けて使うことができるので、とても安心です。 このあたりのお話は、上記の座談会でもさらに詳しく話しています。また、各社によってオススメの使い方もありますので、皆様の業務効率アップの参考になれば嬉しく思います。 「AUN」にご興味のある方は、まず無料で試してみてはいかがでしょうか。オススメです！ --- - Published: 2025-01-28 - Modified: 2025-01-28 - URL: https://fastcoding.jp/blog/all/info/hikaku_202501/ - カテゴリー: React, Vue.js, Web業界の動向・情報 - タグ: Web業界の動向, ディレクション, フロントエンド こちらの記事では、コーディング代行を利用される利用者様のために、定期的に各社のWebサイトに書いてある情報をまとめています。 今回は、2025年1月現在の最新のウェブ検索結果をもとに、HTMLコーディング代行会社の検索で上位に入っている9社と自社を含む計10社の料金体系について比較し、まとめました。 HTMLコーディング代行を利用される際はぜひ一度チェックしてみてください。 ※すべてWebサイトに公開されている情報のため、実際にご依頼された場合に異なる可能性があります。あくまで参考としてご覧ください。 ※掲載禁止を申し出された会社様については載せておりません。この一覧に載っていないのが、決してサービスの終了等を意味するものではないので、その点もご了承ください。 ※料金については、税抜・税込金額が混在しています。各社のWebサイトに記載されている通りに掲載しておりますので、ご了承くださいませ。 ※前回の記事から変更があった箇所については赤文字にしてあります。 HTMLコーディング代行会社 基本料金比較 まずは、基本料金の有無と、プロジェクト全体にかかる費用（進行管理費用など）の有無について表にまとめました。 コーディング代行会社によっては基本料金が発生しない場合や、別途オプションで発生することもあります。 サービス名 基本料金の 有無、費用 それ他、全体にかかる費用 コーディングベア 静的サイト： 50,000円 プロジェクト進行管理費用として、 1プロジェクトにつき10%〜 ファストコーディング なし 特になし コーディングラボ なし 最低料金：50,000円 コーディングアライブ 基本料金： 6,000 円/1時間 プロジェクト進行管理費用として、全体の20%。 Kireiコーディング なし 特になし くまWeb なし 特になし makeshop なし 導入費用：￥385,000（税抜350,000）～ ※1ページ単価計算ではないので注意 ファイブスターコーディング なし ディレクション費用として、総額の20% OK-CODING なし 特になし 86CODING なし 特になし コーディング代行会社によっては、プロジェクトの内容によって基本料金が変わることや、別途進行管理費用が設定されることもあります。 一般的に、コーディング料金は「基本料金＋ページ単価×ページ数」で計算されます。そのため、基本料金が高いとコーディング費用も高くなるのではないかと思われがちですが、実際にはどうなのでしょうか。 次に、ページ単価について比較してみます。 HTMLコーディング代行会社の1ページあたりの価格を比較しました！ 多くのコーディング代行会社では、1ページあたりの価格を設定しています。ただし、この価格は、コーディングされるページの内容や複雑さ、ページの情報量やプロジェクト全体の総ページ数などによっても変わってきます。 1ページあたりの料金と、10ページあたりのレスポンシブコーディング料金※、さらにそれ以外にかかってくることが予想される費用（オプションなど）について、表にまとめました。 （※レスポンシブコーディングで、全てのページの縦の長さを5,000pxと仮定した場合。） サービス名 レスポンシブコーディング 1ページあたりの単価（税抜） 10ページのあたりの レスポンシブコーディング料金 （概算）※ それ以外にかかる費用（予想） コーディングベア 10,000円（税抜）/4,000px毎 275,000円（税抜） （Webサイトを元に計算） JavaScriptやアニメーションの追加、CMS構築なども追加料金。 オプション毎に費用が指定されているので、事前のチェックが必要。 ファストコーディング 8,000円（税抜）/2,500px毎 160,000円（税抜） ページの縦の長さが長い場合には、別途見積もり。 JavaScriptやアニメーションの追加、CMS構築など、基本的にはほとんど無料。 （仕様によっては別途見積もりになる場合もあり） 急ぎの依頼には追加料金が発生。 コーディングラボ 15,000円/3,000pxまで 250,000円 （Webサイトを元に計算） ページの縦の長さが長い場合には、3,000pxごとに＋10,000円。 （11ページ以上の場合、上記の追加料金はかかりません。） スライダー、モーダルなどについては無料だが、それ以外のJavaScriptやアニメーションは有料。 CMS構築も追加料金。 Reactコーディングについて、別途単価が設定されています。 コーディングアライブ 12,000円〜 トップページは、48,000円〜 不明 （データの長さ等の指定がなく、 作業時間も不明のため） ハンバーガーメニュー、スムーススクロールなどについては無料だが、それ以外のJavaScriptやアニメーションは有料。 CMS構築も追加料金。 Kireiコーディング ¥27,500（税込）〜／1P：下層ページ最低価格 トップページは、100,000円〜 440,000円（税込） （Webサイトを元に計算） ページ単価については、見積もりにて詳細確定。 一般的なJavaScript、jQueryについては無料。 CMS構築は追加料金。 くまWeb 9,000円（基本的には固定） トップページは、30,000円～45,000円 126,000円 （Webサイトを元に計算） ページの縦の長さがかなり長い場合には、別途相談のこともあり。 JavaScriptやアニメーションの追加、CMS構築なども追加料金。 makeshop 導入費用：￥385,000（税抜350,000）～ （1ページ単価設定なし） 不明 制作内容により別途お見積りが発生します。 画像制作、JavaScript制作なども別途見積もりにて対応可。 ファイブスターコーディング 18,876円（税込）〜/5,000pxまで トップページは、36,300円（税込）〜/5,000pxまで 247,420円（税込） （Webサイトを元に計算） 一般的なJavaScriptなどについては無料。 （仕様によっては別途見積もりになる場合もあり） 納品後のサポート契約が必要な場合も別途費用。 OK-CODING 9,980円（税抜）/2,500pxまで 149,800円（税抜） （Webサイトを元に計算） ページの縦の長さが長い場合には、＋200円（税抜）/100px毎 JavaScriptやアニメーションの追加、CMS構築なども追加料金。 オプション毎に費用が指定されているので、事前のチェックが必要。 86CODING 9,980円（税抜）/2,500pxまで 149,800円（税抜） （Webサイトを元に計算） ページの縦の長さが長い場合には、＋200円（税抜）/100px毎 JavaScriptやアニメーションの追加、CMS構築なども追加料金。 オプション毎に費用が指定されているので、事前のチェックが必要。 ※「コーディングラボ」について、前回比較時より「1ページあたりの単価」が値下げしたようです。また、「Reactコーディング」について単価設定が新たにされています。 料金比較時のポイント 追加サービスの料金 多くの会社で、基本のコーディング費用に加え、SEO対策や画像の最適化、JavaScriptのカスタマイズなど、追加サービスに対して別途料金が発生します。これらの費用はプロジェクトの範囲や要件によって異なるため、見積もり時に必ず確認しましょう。 特別な要件に対する追加料金 特定のデバイス対応や特殊なフレームワークの使用、カスタムアニメーションの追加など、標準サービスに含まれない要件については追加料金が必要となる場合が多いです。また、急ぎの依頼や納期の短縮に対応する場合も追加料金が発生することが一般的です。 修正や変更にかかる費用 納品後の修正に関しては、多くの会社で一定期間は無料対応していますが、それ以降は追加費用がかかる場合が多いです。また、修正の内容や範囲によっても費用が異なるため、事前に納品後の対応について確認しておくと安心です。 各サービスにはそれぞれ強みがあるため、料金も様々です。 また、プロジェクトのページ数によって料金が変わったり、トップページと下層ページで金額が違ったりするなど、個々の特徴があります。プロジェクトの大きさや内容に応じて比較するのも良いかもしれませんね。 HTMLコーディング代行会社を選ぶ際には、ご自分のプロジェクトに最適な代行会社を見つけてください。 ただし、上記の金額はあくまで目安です。前述の通り、プロジェクトの規模や仕様、オプションの有無によっても金額が変わるため、まずは各代行会社に事前に見積もりを依頼してみましょう。 この記事が皆様のプロジェクト成功への一助となれば幸いです。 今回ピックアップしたコーディング代行会社10社 コーディングベア URL： https://coding-bear. com/ 運営会社： ドーン株式会社 住所： 東京都港区芝大門1-10-18 PMO芝大門2F 電話番号： 03-5510-1515 コーディングラボ URL： https://coding-labo. jp/ 運営会社： ibis studio株式会社 住所： 大阪市西区靭本町2-2-22 ウツボパークビル8F 電話番号： 050-3184-0915 コーディングアライブ URL： https://coding-alive. jp/ 運営会社： アライブ株式会社 住所： 名古屋市中区大須3-2-5 吉桂ビル4階 電話番号： 052-684-5558 Kireiコーディング URL： https://kirei-coding. jp/ 運営会社： 株式会社 ディラクト 住所： 東京都中央区銀座1丁目14-5銀座ウイングビル 7F 電話番号： 03-3528-6450 くまWeb URL： https://kumaweb-coding. jp/ 運営会社： 株式会社くまweb 住所： 熊本県八代市千反町1-1-20 電話番号： 0965-45-9825 makeshop URL： https://www. makeshop. jp/main/plan/coding/ 運営会社： GMOメイクショップ株式会社 住所： 東京都渋谷区桜丘町26-1 セルリアンタワー 電話番号： 03-5728-6227 ファイブスターコーディング URL： https://fivestar-coding. com/ 運営会社： 株式会社 KDS 住所： 兵庫県神戸市中央区磯辺通3丁目1−2 大和地所三宮ビル 703 電話番号： 078-945-8485 OK-CODING URL： https://www. ok-coding. com/ 運営会社： ハイブリッジ 株式会社 住所： 東京都中央区銀座3-14-13 第一厚生館ビル5F 電話番号： 03-6284-1781 86CODING URL： https://86coding. com/ 運営会社： ハイブリッジ 株式会社 住所： 東京都中央区銀座3-14-13 第一厚生館ビル5F 電話番号： 03-6284-1781 FASTCODING URL： https://fastcoding. jp/ 運営会社： 株式会社ファストコーディング 住所： 東京都千代田区外神田6-11-16 GMビル5階 電話番号： 03-6806-0354 --- - Published: 2025-01-17 - Modified: 2025-01-16 - URL: https://fastcoding.jp/blog/all/frontend/javascript-circle-graph-plugins/ - カテゴリー: React, Vue.js, システム開発 - タグ: JavaScript, グラフ, プラグイン 最近、データのビジュアル化が注目されており、Webサイトでもさまざまな形式のグラフが使われるようになりました。たとえば、会社の予算配分をわかりやすく示したり、製品の市場シェアを視覚的に伝えたりする場面でよく利用されています。こうしたグラフは、データの割合や構成を簡単に把握できる点で、多くの人にとって便利なツールとなっています。 今回のテーマは「円グラフ」。前回の記事で紹介した棒グラフとは異なり、全体に対する各データの割合を直感的に示すのに適した円グラフにフォーカスし、その特徴や活用方法、さらに円グラフを簡単に作成できるJavaScriptライブラリについてご紹介します。 この記事は、次のような人に向けて書いています。 Webサイトにグラフを取り入れたい新人エンジニア 今使っているライブラリを別のものに変えようと考えている中級エンジニア デザインにこだわったグラフを探しているWebデザイナー このシリーズでは、グラフライブラリの特徴や使い方をサンプルコード付きでわかりやすく紹介していくので、ぜひ参考にしてください！ 円グラフとは？ 円グラフは、データを円の形に分けて表現するグラフです。それぞれのセグメントが全体に対する割合を示していて、パッと見ただけでどの部分がどれくらいの大きさかがわかります。たとえば、ケーキをいくつかのサイズに切り分けたようなイメージですね。 棒グラフが向いている活用例 円グラフが活躍するのは、こんな場合です： 割合や比率を見せたいとき：全体に対してどのくらいの割合かを視覚的に示すのにピッタリです。例: 市場シェア、予算の内訳、アンケート結果 データが少ないとき：データの項目が多すぎない場合に最適です（5–6個くらいまでが理想）。例: 部門別売上構成、ユーザー層の割合。 ざっくり全体感を伝えたいとき：データ全体を一目で理解してほしい場合に便利です。 円グラフの種類 円グラフにもいくつかバリエーションがあります。 スタンダードな円グラフ：円をいくつかのセグメントに分ける一般的なタイプ。 ドーナツグラフ：真ん中が空いているタイプで、複数の円を重ねて表現することもできます。 半円グラフ：円の半分だけを使って、スペースを節約しつつ情報を伝えます。 円グラフのメリットとデメリット メリット 割合を強調しやすく、視覚的にわかりやすい。 見た目が直感的で、データの全体像が一目でわかります。 シンプルなデザインなので、インフォグラフィックやプレゼン資料にも最適です。 デメリット 項目が多すぎるとき：セグメントが多くなると、ごちゃごちゃして見づらくなります。 正確な比較が必要なとき：細かい数値の差を伝えたい場合は、棒グラフや折れ線グラフの方が適しています。 負の値やゼロを含むデータ：円グラフは正の割合を示すのが基本なので、負の値やゼロには向いていません。 過剰な装飾：3D効果や派手な色使いなどを加えすぎると、各部分の大きさが視覚的に歪んで見えたり、情報の正確性が損なわれたりすることがあります。 JavaScriptライブラリを選ぶ際のチェックポイント グラフをWebサイトに表示するためのライブラリは数多くありますが、選び方を間違えると使いづらかったり、目的に合わなかったりすることがあります。ライブラリ選定の際には下記6つのポイントをチェックすることをおすすめします。 導入のしやすさ初心者でもすぐに使えるかどうかは重要です。CDNを使って簡単に読み込めるものや、設定が少なくても動作するライブラリを選ぶとよいでしょう。 カスタマイズ性デザインや色、アニメーションなどを柔軟に変更できるかを確認しましょう。ブランドやデザインテーマに合わせた調整が必要な場合は、カスタマイズ性の高いものがおすすめです。 レスポンシブ対応スマホやタブレットなど、画面サイズが異なるデバイスでもきれいに表示されるかをチェックしましょう。特に、ビジネスサイトではモバイル対応が重要です。 パフォーマンス表現するグラフにもよりますが、大規模データを扱う場合、表示速度やパフォーマンスも気にする必要があります。特にリアルタイムデータを表示する用途では、軽量で高速なライブラリが求められます。 サポートとドキュメント公式サイトやGitHubでのサポート状況や、ドキュメントの充実度を確認しましょう。使い方がわからないときに参考になる情報があるかどうかは重要です。 ライセンスと利用料利用規約やライセンス形態も確認しておきましょう。商用利用が可能かどうか、無料で使えるか、有料プランが必要かなどを事前にチェックすることが大切です。 おすすめライブラリ紹介 1 Chart. js 公式URL: https://www. chartjs. org/ 特徴: Chart. jsは、シンプルさと使いやすさが特徴のライブラリです。このライブラリは、レスポンシブ対応が標準で、スマホやタブレットでもきれいに表示できます。さらに、ドーナツグラフやアニメーション付きの円グラフを簡単に作成できるため、初心者でもスムーズに利用できます。 メリット・初心者にも扱いやすく、導入が簡単。・プラグインを使えば拡張性が高い。・標準でレスポンシブ対応しており、モバイルでもきれいに表示可能。 デメリット・デザインのカスタマイズには少し工夫が必要。・複雑なインタラクティブ機能には向いていない・大規模データの処理には不向き。 2 D3. js 公式URL: https://d3js. org/ 特徴: D3. jsは、高度なカスタマイズ性とデータの動的な可視化に特化したライブラリです。自由度が非常に高く、ドーナツグラフやアニメーションも自在に作成できます。ただし、その分、学習コストが高く初心者には少し難しいかもしれません。 メリット・大規模データや複雑なインタラクションに対応可能。・デザインの自由度が非常に高い。・リアルタイムデータの可視化も可能。・オープンソースで柔軟性がある。 デメリット・学習コストが高く、JavaScriptの知識が必要。・レスポンシブ対応は手動で設定が必要。 3 ApexCharts 公式URL: https://apexcharts. com/ 特徴: ApexChartsは、インタラクティブなグラフを簡単に作成できるライブラリです。特にモダンでスタイリッシュなデザインが特徴で、ドーナツグラフや円グラフの表示に非常に便利です。また、ライブアップデート機能も搭載されており、サーバーからのデータ更新をリアルタイムでグラフに反映することが可能です。これにより、動的なデータビジュアライゼーションを容易に実現できます。 メリット・学習コストが低く、直感的に利用できる・ライブアップデート機能を標準搭載・大規模データにも対応可能・レスポンシブ対応が簡単にできる デメリット・複雑なカスタマイズには多少の知識が必要・サイズが他の軽量ライブラリよりやや大きい 4 Google Charts 公式URL: https://developers. google. com/chart/ 特徴: Google Chartsは、クラウドベースで動作する信頼性の高いライブラリです。基本的な円グラフから高度なデータビジュアライゼーションまで対応可能で、GoogleのAPIとの連携が容易です。ただし、デザインの自由度は他のライブラリに比べてやや制限されます。 メリット・無料で商用利用できる。・簡単な設定で高品質なグラフを作成可能。・Googleスプレッドシートとの連携が強力で、外部データソースの取り込みが容易。・標準でレスポンシブ対応している デメリット・オフラインでは利用しづらい (GoogleのCDNに依存)。・カスタマイズの柔軟性はD3. jsよりも低い。・リアルタイム更新には追加の設定が必要。 5 Chartist. js 公式URL: https://gionkunz. github. io/chartist-js/ 特徴: Chartist. jsは、軽量でシンプルな設計のライブラリです。CSSでのスタイリングが可能で、モバイル向けのレスポンシブデザインも簡単に実現できます。そのため、小規模なプロジェクトやシンプルな円グラフを作成したい場合に最適です。 メリット・軽量で高速に動作する。・モバイル対応が簡単で、レスポンシブデザインに強い・シンプルなコードで実装可能。・小規模データの可視化に向いている デメリット・複雑なグラフ作成には不向き・D3. jsやApexChartsと比較するとカスタマイズ性に制約がある。・大規模データの処理には適していない ライブラリ比較表 前述のライブラリ選定ポイントをまとめた表は下記のとおり 名称導入のしやすさカスタマイズ性レスポンシブ対応パフォーマンスサポートとドキュメントライセンスChart. js高い中程度標準対応軽量・高速公式ドキュメント充実MITライセンスD3. js中程度非常に高い手動対応大規模データ対応可能豊富なサンプルと解説BSDライセンスApexCharts高い高い標準対応優れたリアルタイム対応公式ドキュメント豊富MITライセンスGoogle Charts高い中程度標準対応高速Googleの公式サポート無料Chartist. js高い低い標準対応軽量・高速コミュニティベースMITライセンス サンプルデータを使った導入例 今回紹介した各ライブラリを使って、同じ条件のサンプルデータから円グラフを表示する手順を作成してみました。それぞれの特徴を活かしたオプションもつけてみたので参考にしてくださいね。 サンプルデータ：企業の部門ごとの収益割合 部門収益割合（%）営業40マーケティング25研究開発15運営10カスタマーサポート10 Chart. js 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. HTMLとJavaScriptコード const ctx = document. getElementById('myPieChart'); const data = { labels: , datasets: , backgroundColor: , borderColor: , borderWidth: 1, hoverOffset: 30 // ホバー時の拡大サイズ }\] }; new Chart(ctx, { type: 'pie', data: data, options: { animation: { animateScale: true, // スケールのアニメーションを有効化 } } }); D3. js Chrat. jsと同じような機能を搭載させようとすると、D3. jsではコードが長くなります。 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSを追加 . tooltip { position: absolute; background: rgba(0, 0, 0, 0. 8); color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0. 2s ease-in-out; } 3. HTMLとJavaScriptコード const data = ; const labels = ; const colors = ; const width = 400, height = 400, radius = Math. min(width, height) / 2; const svg = d3. select('#chart') . append('svg') . attr('width', width) . attr('height', height) . append('g') . attr('transform', `translate(${width / 2}, ${height / 2})`); const pie = d3. pie. sort(null); const arc = d3. arc. innerRadius(0). outerRadius(radius); const pieData = pie(data); // ツールチップ要素 const tooltip = d3. select('#tooltip'); // セグメントを描画 const path = svg. selectAll('path') . data(pieData) . enter . append('path') . attr('fill', (d, i) => colors) . attr('opacity', 0. 8) . attr('d', d3. arc. innerRadius(0). outerRadius(0)) // 初期状態は半径0 . each(function (d) { this. _current = d; }) // 初期データを保存 . on('mouseover', function (event, d) { d3. select(this). attr('opacity', 1); // セグメントをハイライト tooltip . style('opacity', 1) . html(`${labels}: ${d. data}%`) . style('left', `${event. pageX + 10}px`) . style('top', `${event. pageY - 20}px`); }) . on('mousemove', function (event) { tooltip . style('left', `${event. pageX + 10}px`) . style('top', `${event. pageY - 20}px`); }) . on('mouseout', function { d3. select(this). attr('opacity', 0. 8); // 元の透明度に戻す tooltip. style('opacity', 0); }); // アニメーションでセグメントを拡大 path. transition . duration(1000) // アニメーションの時間 . attrTween('d', function (d) { const interpolate = d3. interpolate({ startAngle: 0, endAngle: 0 }, d); return function (t) { return arc(interpolate(t)); }; }); // ラベルを追加 svg. selectAll('text') . data(pieData) . enter . append('text') . attr('transform', d => `translate(${arc. centroid(d)})`) . attr('text-anchor', 'middle') . attr('font-size', '12px') . attr('opacity', 0) // 初期状態は透明 . text((d, i) => labels) . transition . delay(1000) // アニメーションが終了した後にラベルを表示 . duration(500) . attr('opacity', 1); ApexCharts 上記２つのグラフに加えて、グラデーションも追加したコードです。 導入手順 1. CDNリンクの追加 2. HTMLとJavaScriptコード const options = { chart: { type: 'pie', animations: { enabled: true, easing: 'easeinout', speed: 1000 } }, series: , labels: , fill: { type: 'gradient', // グラデーションを指定 gradient: { shade: 'dark', // グラデーションのスタイル ('light' または 'dark') type: 'vertical', // グラデーションの方向 ('vertical', 'horizontal', 'diagonal1', 'diagonal2') gradientToColors: , // 各セグメントの終点カラー stops: // グラデーションの開始と終了位置 } }, colors: , // グラデーションの開始カラー tooltip: { enabled: true, theme: 'dark', y: { formatter: (value) => `${value}%` } }, legend: { position: 'top', horizontalAlign: 'center' }, responsive: }; const chart = new ApexCharts(document. querySelector('#chart'), options); chart. render; Google Charts Google Chartsでは、データをCSVダウンロード可能なグラフを作成してみました 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. JavaScriptを追加 google. charts. load('current', { packages: }); google. charts. setOnLoadCallback(drawChart); function drawChart { // データの設定 const data = google. visualization. arrayToDataTable(, , , , , \]); // オプションの設定 const options = { title: '部門ごとの収益割合', is3D: true, // 3Dを有効化 colors: , // セグメントの色 pieSliceTextStyle: { color: 'black' // セグメントのテキスト色 } }; // グラフの描画 const chart = new google. visualization. PieChart(document. getElementById('piechart')); chart. draw(data, options); } 3. HTML Chartist. js Chartist. jsでは、少なくとも簡単には要素の色は指定できないようでした。 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSの設定 /* グラフのサイズを調整 */ . ct-chart { width: 400px; /* 横幅を設定 */ height: 400px; /* 高さを設定 */ margin: 0 auto; /* 中央揃え */ } /* ラベルの色を白に設定 */ . ct-label { fill: white ! important; /* ラベルの文字色 */ font-size: 14px; /* ラベル文字のサイズ（必要に応じて調整） */ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0. 5); /* 視認性向上のための影 */ } 2. HTMLとJavaScriptを追加 // データ設定 const data = { labels: , series: }; // オプション設定 const options = { startAngle: 0, // 描画開始位置 showLabel: true, // ラベルを表示 donut: true, // ドーナツチャートを有効化 donutWidth: 160 // ドーナツの太さ }; // グラフ描画 const chart = new Chartist. Pie('. ct-chart', data, options); // アニメーションを追加 chart. on('draw', function (data) { if (data. type === 'slice') { // 各セグメントにアニメーションを適用 const pathLength = data. element. _node. getTotalLength; data. element. attr({ 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px', 'stroke-dashoffset': -pathLength + 'px' }); data. element. animate({ 'stroke-dashoffset': { begin: 1000 * data. index, // 遅延時間 dur: 1000, // アニメーションの長さ from: -pathLength + 'px', to: '0px', easing: Chartist. Svg. Easing. easeOutQuint } }); } }); まとめ この記事では、円グラフの基本から利用シーン、ライブラリの選び方、そしておすすめライブラリの特徴と比較表までを紹介しました。 円グラフは、データを視覚的に伝える有効な手段ですが、適切な場面で使うことが重要です。この記事で紹介したライブラリを活用して、魅力的でわかりやすいデータビジュアライゼーションを作成してみてください。 次回の記事では、「折れ線グラフ」の特徴とおすすめライブラリについて解説する予定です。お楽しみに！ --- - Published: 2025-01-16 - Modified: 2025-01-16 - URL: https://fastcoding.jp/blog/all/info/coding_keywords/ - カテゴリー: Web業界の動向・情報, ディレクション - タグ: HTML, ディレクション, 初心者 コーディング代行会社を調べていると、各社色々な特徴や強みがありますが、それと同時に料金や検証環境などに色々な違いがあります。 今回は、基本料金からレスポンシブ対応時のページ単価、さらにサポート状況やブラウザ対応範囲までを検証してみました。 目次 基本料金比較 ページ単価とレスポンシブ対応料金 サポート対応状況とブラウザ対応範囲 まとめ 基本料金比較 まず初めに、基本料金について比較してみましょう。 「基本料金」とは、依頼するページ数や内容に関係なくかかる費用 何が含まれるかは各社によって異なりますが、一般的に、プロジェクトの初期段階で提供される基本的なサービスやリソースの費用が含まれます。例えば、プロジェクトの概要や要件のヒアリングや打ち合わせ、コーディング開始前の準備などが該当します。 コーディング代行会社によっては基本料金が発生しない場合や、別途オプションで発生することもあります。 初期設定費用： ウェブサイトやアプリの開発プロジェクトにおいては、初期の設定や構築にかかる費用が基本料金の一部として考慮されます。 基本機能の実装： 基本料金には、ウェブサイトやアプリの基本的な機能やページのコーディング、デザインなどが含まれることがあります。 プロジェクト進行管理費用： 一部の会社ではプロジェクト進行のための管理費用が基本料金に含まれています。これはプロジェクト全体の進捗管理やコミュニケーション（メッセージのやり取りなど）に関連する費用です。基本料金とは別に費用がかかる場合もあります。 初回のサポートやトレーニング： 一部の契約では、ウェブサイトやアプリの初回のサポートや利用者へのトレーニングに関する基本料金が含まれることがあります。 基本料金は、プロジェクトの性質や契約条件によって異なり、透明性を保つために契約前に十分な相談や確認が必要です。また、基本料金以外に発生する追加料金やオプション料金も注意深く確認することが重要です。 基本料金については、各コーディング代行会社ごとに異なるため、一概には言えません。ただし、一般的な傾向として、基本料金が設定されている場合、それはプロジェクトの性質や規模によって変動します。 例えば、静的サイトやCMSサイトの基本料金が設けられている場合、静的サイトの基本料金は通常数万円から数十万円程度となることがあります。CMSサイトの場合は、種類や機能の違いにより基本料金が変動します。また、デザインの複雑さやページ数が増加すると、基本料金もそれに応じて上昇することが一般的です。 平均的な基本料金は、静的サイトの場合には50,000円から100,000円程度、CMSサイトの場合には100,000円から150,000円程度といった目安が考えられます。ただし、これはあくまで一般的な傾向であり、具体的な価格は各会社の料金体系やプロジェクトの要件によって異なります。 ページ単価とレスポンシブ対応料金 次に、1ページあたりの単価や、レスポンシブ対応時の料金について比較してみましょう。 「ページ単価」とは、コーディング代行を利用する際に、1ページあたりにかかる料金のことを指します。 コーディング代行会社では、1ページあたりの価格を設定していることが多いです。ただしこの価格は、ページの内容や複雑さ、ページの情報量やプロジェクト全体のページ総数などによっても変わってきます。 プロジェクトの規模やページ数による料金設定も各コーディング代行会社で異なります。ページ数に応じた追加料金が発生するケースもあり、特にブレイクポイントを追加する場合は別途費用がかかります。逆に、ページ数による追加料金がなく、ページの長さに応じて料金が変動する場合も見受けられます。 1ページあたりの単価もコーディング代行会社ごとに異なるため、一概には言えません。レスポンシブ対応には様々なアプローチがあり、その要件によって価格が変動するためです。ただし、一般的な傾向として以下のような価格帯が考えられます。 レスポンシブ対応時のページ単価は、8,000円〜15,000円程度 1ページあたりのレスポンシブ対応料金は、8,000円から15,000円程度が目安のようです。この価格帯は、一般的なウェブサイトのページボリュームの目安となります。ただし、プロジェクトの要件やデザインの複雑さ、レスポンシブ対応の難易度によっては、この範囲を超えることもあります。 また、トップページと下層ページとで単価が異なる場合もあるようです。 レスポンシブ対応においても、段階的な料金設定が存在します。ページ数やデザインの難易度、ページの長さなどにより、コーディング費用が変動することが多いようです。 （補足）「最低料金」がある場合に注意 ページ単価で計算した合計金額が「最低料金」未満の場合、「最低料金」は必ず支払わなければならない、という設定がされている場合があります。 各社のホームページなどに記載があることがほとんどですので、少数ページのご依頼の際には特にご注意ください。 サポート対応状況とブラウザ対応範囲 プロジェクトが公開された後のサポート対応や、対応ブラウザについても各会社で異なる設定が見受けられます。一部ではプロジェクト進行管理費用が発生し、ページ数や進捗に応じて変動する会社もあります。これに対して、一定の基本作業料金に一律の割合が加算される仕組みの会社もあります。 「ブラウザ対応範囲」は、ウェブサイトやアプリが正常に動作するためにサポートされるブラウザやバージョンの範囲を指します。一般的なブラウザ対応範囲は、主要なデスクトップブラウザとモバイルブラウザを対象とします。以下は、一般的な対応範囲の例です： デスクトップブラウザ: Microsoft Edge： 最新版 Google Chrome： 最新版 Mozilla Firefox： 最新版 Safari： 最新版 モバイルブラウザ: iOS（iPhone、iPad）： Safariの最新版 Android： Chromeの最新版 このような対応範囲は、多くのユーザーが利用している主要なブラウザをカバーしています。ただし、具体的なプロジェクトによっては、ターゲットユーザーのブラウザ利用状況に合わせて対応範囲を調整することがあります。また、新しいブラウザのリリースや旧バージョンのサポート終了に伴い、対応範囲が変更されることもあります。 特殊なプロジェクトや希望する検証ブラウザのバージョンがある場合には、その検証に別途追加で費用がかかったり、コーディング代行会社のテスト適応範囲外になることもありますので、注意が必要です。 まとめ 今回のブログでは、コーディング代行会社の比較において、基本料金、ページ単価、レスポンシブ対応料金、サポート対応状況、およびブラウザ対応範囲に焦点を当てました。やはり各コーディング代行会社によって様々な特徴があり、一概にはまとめられない結果となりました。 ただ一つ言えることは、コーディング代行会社を選ぶ際には、事前の打ち合わせで出来る限り詳細にプロジェクトについて共有した上での検討が必要だということです。 また、透明性を確保するために契約条件や料金体系を十分に理解することも重要です。 皆様のプロジェクトの円滑な進行に、コーディング代行会社がお役に立てれば幸いです。 --- - Published: 2025-01-10 - Modified: 2025-01-08 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step1/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し WordPress関連で、おそらくお客様が一番悩まれるのが『サーバの引っ越し』ではないでしょうか。というのも、弊社に緊急でお電話いただく案件で、もっとも多い話題の一つが「Wordpress引っ越し中のトラブル」なんです。 インストールも使い勝手も簡単なWordPressではありますが、こと引っ越し作業になるとWordPressだけの話では収まりません。 サーバやドメイン、さらにはサーバに入っているPHPのバージョンやエクステンションの状態、DBサーバのバージョンなどなど、WordPressの引っ越しに関連する確認事項は盛りだくさん。 そしていざ実際に作業を始めてみると、プラグインとの兼ね合いでバグが出たり、サーバ毎に異なる、細かな設定の違いで今まで動いていたコードが動かなくなるなど、やってみて初めてわかる問題に気づき、サイトが止まってしまった、、、ということも少なくありません。（というより、ほとんどがこの「やってみて気づいた」問題です） そんなトラブルの多いWordPressの引っ越し作業ではありますが、コーディング代行を生業としている弊社は頻繁に対応しているため、作業中に絶対にトラブルが起きないよう、チェックフローや作業フローをマニュアル化しています。 そこで本シリーズ記事『【完全版】絶対に失敗しない！WordPressの引っ越し手順』では、弊社のマニュアルの中から、WordPressの引っ越し基本的な流れを中心に解説していきたいと思います。 できるだけ詳細に、且つ絶対に失敗しない方法をお伝えしたいので、かなり長い話になります。ですので今回は、概要編として、WordPress引っ越し作業の全体の流れをお伝えいたします。次回以降は具体的に各ステップを紹介していきます。 【完全版】絶対に失敗しない！WordPressの引っ越し手順 大まかに分類すると、WordPressの引っ越し作業は以下の５ステップです。各々記事を書いていますので是非ご一読ください。 1. サーバの選定 たくさんの種類があるサーバですが、サーバごとに得手不得手があります。さすがに今の時代において、WordPressが動作しないサーバは無いとは思いますが、サーバによって引っ越し作業の流れも、サーバ上でできることもやっぱり違います。 また引っ越し後にWordPressが本格稼働した時のサイトの表示速度や、セキュリティ面に大きく影響しますので、このステップでご紹介するサーバの種類や具体的なサーバ会社さんを参考にして、選んでいただければと思います。 「第2章～サーバ選定編～」はコチラ 2. WordPressファイルとデータベースのバックアップ どんな作業でも始める前にはバックアップ！これは基本中の基本です。ですが、ついつい面倒になり、不完全なバックアップをしてしまった結果、後々になって元のデータに戻せない、最悪の場合はデータ消失！という方も本当に多く見受けられます。 WordPressのデータバックアップは手作業で行う方法もあれば、プラグインで行う方法もあります。この辺りは次回ご案内いたしますので、「面倒でもバックアップだけは完璧に、そして最初にやる！」、これを忘れないようにしてくださいね。 「第3章～バックアップ編～」はコチラ 3. 新しいサーバへ、ファイルとデータベースをリストア バックアップしたファイルデータとデータベースを、新しいサーバにアップロードし、リストアします。このとき、. htaccessやwp-config. phpといった設定ファイルの調整、そしてサーバによってはファイルやフォルダの権限の調整が必要になります。 このあたりの細かい設定を忘れてしまうと、のちのち原因不明のトラブル多発、からの移行失敗で切り戻し（最悪の場合、一旦データを消して、もう一度作業、、、）のような最悪の事態に陥りますので慎重に行いましょう。これらの作業の流れやポイントをこのステップでご紹介したいと思います。 「第4章～リストア（アップロード）編～」はコチラ 4. ドメインの切り替え前のテスト ＆ ドメインの切り替え サーバが入れ替わるということは、即ち、サーバの名前を管理しているDNSの設定変更が絶対に必要です。このDNSの設定変更を「ドメインの切り替え」と呼んだりします。 ですがその方法はサーバによっていろいろあります。また設定変更できる人が限られている場合もあります。例えばサーバ会社に依頼しないといけない場合、自分自身で変更ができるが「契約者本人」だけにしてくださいという場合、また契約プラン上できないので契約プランを変えてくださいという場合（こうなるともうリスケジュールするしかないです。。）などなど、ここも事前に確認すべきポイントがあるのでこのステップでお伝えいたします。 また、ドメインの切り替えを行う前に、事前にテストする方法をきちんと押さえておいてください。切り替えをするまでは、まだ古いサーバでWebサイトが稼働しているので、最悪失敗しても大丈夫。このステップでは、実際に切り替えを行うときの注意点もご説明いたします。 「第5章～DNSの切り替え編～」はコチラ 5. 動作確認 最後に、新しいサーバでサイトが正しく動作しているかを最終確認します。 リンク切れや表示崩れが無いか。また、管理画面にログインしてテスト投稿を書き込んだり、画像をアップロードしたりできるかどうか、プラグイン一覧画面でエラーが出ていないかなど、確認する項目が色々あるので、このステップで説明するチェック項目を確認してください。特に、問題がある場合に確認すべき点も載せた「移行チェックリスト」（記事内からダウンロードいただけます）は是非お使いいただきたいです。たいていはこのチェックリストを見れば解消するはずです。 「第6章～動作確認と公開後チェックリスト～」はコチラ この記事では、WordPressの引っ越し作業について大まかな流れを概要としてご説明しました。次回以降、各ステップをもっと掘り下げて解説いたします。 WordPressの引っ越しは、全体の流れをちゃんと理解していれば、万一何かあってもサイトへの影響を少なくすることができます。また記事に書いた各ステップをきちんとやっていただければ、おおよそ失敗することは無いと思います。 ですので、まだ作業を始めないでくださいね！ 今、引っ越しをしようとしている方は「まず全部一回読んでから」 本シリーズ記事を読んでいて、途中で分からない部分が出てきたら、分かるまでは引っ越し作業をしないでください。しっかり流れの基本を押さえてから始めてください。 --- - Published: 2025-01-10 - Modified: 2025-01-08 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step2/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し さて、Wordpress引っ越し作業の連載第二回となる今回は、サーバの選定方法についてお話いたします。 WordPressの引っ越しにおいて、最初に行うべき重要なステップは「サーバの選定」。でもサーバって多いですよね。 まずはサーバにはどんな種類があって、各々にどういうメリット／デメリットがあるかを理解しておきましょう。 サーバの種類 レンタルサーバ おそらく最も耳にするのが『レンタルサーバ』。これは一台の大きいサーバという種類のパソコンを皆で間借りしている、いわばマンションの部屋を借りるみたいな話だと思ってください。 マンションだと、キッチンもトイレもお風呂もすぐに使える状態です。レンタルサーバも全く同じで、借りた段階で、もうファイルをアップロードすればＷｅｂサイトが表示できる準備が全部整っていますし、WordPressが動作したり、メールアドレスを発行する仕組みもあったりします。 またマンションだと１階の入り口にセンサーや監視カメラがあって、部外者は入ることができないようにセキュリティが整っていますね。レンタルサーバも全く同じで、そういったセキュリティ部分についてもレンタルサーバ会社自体が勝手にやってくれているんです。（もちろん、自分でアップロードするＷｅｂサイトにウィルスが入っていた、、、となれば話は別です） ですので、そういったサーバの設定やセキュリティ対策をする余力がないのであれば、レンタルサーバ一択だと思ってください。 メリットばっかり挙げていますが、デメリットももちろんあります。 そういった集合住宅型なので、1つ1つの部屋の大きさはそこまで広くないんです。つまり、大量のアクセスがあるＷｅｂサイトや、大容量の動画データ・音声データの配信をするサイト、等は速度が遅くなる場合もあるし、レンタルサーバによってはルールで使えない場合もあります。 感覚的ですが、月間1～2万PV程度のサイトであればレンタルサーバで大丈夫ですが、それを超えるような場合は、次以降でご紹介するサーバを検討した方がいいかもしれません。 VPSサーバ 先程、レンタルサーバを「マンション」だといいました。そうすると、VPSサーバは「注文住宅」と同じイメージです。 実際VPSサーバを契約した段階では、標準としては何もありません。すでに部屋に電気や水道は引かれているのですが、まだトイレやキッチンやバスタブは無い家と思ってください。その上に、どんなWebサーバを構築するか、メール機能が必要ならメールサーバも構築しなければなりません。またWordPressを使うのであればPHPというソフトウェアをインストールし、データベースサーバを構築し、、、、、と、内装を一から建てていくかのような作業が必要になります。 とはいえ、最近のVPSサーバであれば、最初にサーバを構築する段階でどういったサーバにしたいのかをテンプレートから選べる場合もあります。 いわば「建売住宅」のように、ある程度できた段階を選ぶことができるタイプもあるんです。 ただ、選んだあとのサーバの運用は自分自身になりますので、そのぐらい自由度の高いサーバというパソコンを（WindowsではなくLinuxというOSで動くものがほとんどです）、自分自身でコントロールできる自信がなければ手を出してはいけない世界です。 例えばセキュリティ対策。家の戸締りをするのは自分の責任のように、構築したVPSサーバのセキュリティを担保するために対応することはたくさんあります。 ※たまに、こういった一般的には使えない製品をあたかも一般的に使えそうな広告で販売しているサーバベンダーもいます。全てとは言いませんが、弊社にご相談いただくサーバ関連の問題は、このVPSサーバを選んだから、という点にあることが本当に多いです。 逆に言えば、Linuxの知識や自分自身で運用、メンテナンスする時間が取れるのであれば、レンタルサーバよりも自由度も高く且つ高速に使える選択肢になると思います。 クラウドサーバ ここまでで、レンタルサーバを「マンション」、VPSサーバを「戸建て」に例えました。では、クラウドサーバはどういうイメージかと言うと、こちらは「山を切り開いて町を作る」イメージ。 クラウドサーバは先ほどのレンタルサーバやVPSサーバの元になるサーバ、です。 つまりレンタルサーバ会社やVPSサーバを提供する会社も、クラウドサーバを借りてその上に〇〇サーバというサービスを構築しています（※もちろんすべてクラウドではなく、物理サーバの場合もありますが今回は同一に扱います）。 よって、必要となる知識も、やらなければならない運用も雲泥の差で大量にあります。 しかしながらAmazon Web Service（略してAWS）や、Google Cloud Platform（略してGCP）といったクラウドサーバ上に、簡易にサーバを構築できるサービスも出てきており、ちゃんとした知識や経験があれば低コストで町をつくることだってできるという訳です。 大量の人が利用するような大きなサービス、例えば銀行のWebサービスや、通販システムの構築にはもってこいのサービスですね。 ただし、今回はWordPressの引っ越しにフォーカスを当てていますので、少し違ってきます。 一般的にWordPressで処理できる程度のWebサイトであれば、クラウドサーバを選ぶ理由はまずもってないと考えてください（この「WordPressで処理できる程度」が何を指すかは、別の機会に書きたいと思います）。 選ぶのであれば、その「町」全体を自分自身でメンテナンスできる知識と時間が必要なことを忘れないでください。 SaaS(or PaaS)型サーバ ここからは毛色が少し変わります。新しい形として、SaaS型/PaaS型のサービスも存在します。 SaaSやPaaSが何を指すかは結構人それぞれなところがありますが、具体的にはKinstaやWordpress. comのサービスを意味しています。これらはWordPressのサイトを構築するために用意されたサーバになります。 特筆すべきは最初に述べたレンタルサーバと同じような使い勝手／最初から至れり尽くせりでありながらも、VPSサーバやクラウドサーバに匹敵する速度を保持していることです。 WordPressを選ぶならそれでいいんじゃないのと思いますが、デメリットもあります。 例えば対応しているプラグインに制限がある場合が結構あります。またレンタルサーバに比べると若干高めの価格設定にもなったり、サイトの引っ越しや更新に対するマニュアルが、レンタルサーバに比べると少ないかなと弊社は思ったりします。 ただこれからは注目すべきカテゴリのサーバであることには間違いありません。 ここまで有名なサーバの種類について述べてきましたが、結論的に言えば、ほとんどの場合で「レンタルサーバ」がおすすめだと思います。 VPSやクラウドを提案するからには、それなりの理由があるはずですし（もうその場合はプロフェッショナルにサーバの引っ越しも依頼済みだと思います）、SaaS型であれば、そのサービスに手慣れた方がチームにいらっしゃるはずです。 ただ絶対にやめて頂きたいのは、それらの知識が無いのに、レンタルサーバ以外を選ぶことです。 サーバの構築は簡単に見えますが、その後の運用やセキュリティを考えれば「大変難しい」領域です。弊社は、特段の理由も無くVPSサーバやクラウドサーバを選んでしまい、最終的に運用で大変苦労されているお客様をたくさん見ています。運用に苦労するあまり、Webサイトの更新が滞るなんて本末転倒だと思います。サーバはよくよく考えてお決めください。 具体的なレンタルサーバサービスの比較 以下はChatGPTが調べたレンタルサーバの比較表になります。 ※誤記があればこっそり教えてください。 実は弊社はどのサーバも使っておりまして、どれがおすすめ... となかなか言いづらい立場でもありますので、ここに記載あるサーバであればどれでも問題なく、あとは皆様で価格やホームページの見た目から決めいただければと思います。※どれを選んでも失敗はないサーバです。 サービス名パフォーマンスセキュリティ機能サポート体制料金（月額）ストレージ容量無料SSL自動バックアップ特徴エックスサーバー非常に高速WAF、DDoS対策24時間365日サポート990円～300GB～〇〇高速性能と安定性が特徴、WordPressに最適ConoHa WING非常に高速WAF、無料SSL24時間365日サポート990円～300GB～〇〇高速かつ直感的な管理画面さくらのレンタルサーバ安定性重視WAF、無料SSLメール・電話サポート524円～100GB～〇プランによる長年の実績、信頼性高いカゴヤ・ジャパン高速WAF、無料SSL24時間365日サポート1,320円～200GB～〇〇独自のサーバ運用で信頼性高い※誤記があればこっそり教えてください。 サーバの選定が完了したら、次のステップ「ファイルデータとデータベースのバックアップ」を始める準備を整えます。 ここから、サイトの引っ越し作業が本格的に始まることになります。 続編の「第3章～バックアップ編～」はコチラ --- - Published: 2025-01-10 - Modified: 2025-01-11 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step4/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し ファイルデータとデータベースのバックアップが完了したら、次のステップはそれらを新しいサーバへリストア（アップロード）することです。 バックアップしたデータをアップロードするだけ、、、になるのですが、実際にはファイルとデータベース各々で作業が必要になり、またwp-config. phpという、WordPressの設定ファイルの更新も必要です。この章では、ファイルデータとデータベースを新サーバにリストア（アップロード）する際の具体的な手順を解説します。 ファイルデータのリストア まず、バックアップしたファイルデータを新しいサーバにアップロードします。この作業はおおよそ以下の手順で行います。 FTPクライアントの使用バックアップ時と同様に、FTPクライアント（FileZillaなど）を使用して、ローカルマシンに保存したWordPressのファイルを新サーバにアップロードします。新しいサーバのWebルートディレクトリ（通常は `public_html` や `www` ディレクトリ）にすべてのファイルをアップロードします。※管理パネルからのアップロード一部のホスティングサービスでは、管理パネルからファイルのアップロードが可能です。その場合はファイルマネージャを使用して、バックアップファイルを選択し、同様にWebルートディレクトリにアップロードしても構いません。 `wp-content` ディレクトリは、WordPressがメディアファイルを保存したり、プラグインをダウンロードする場所です。よってWordPressから書き込みができるように、権限設定をする必要があります。一般的なレンタルサーバであれば、この設定は不要で、FTP等でアップロードしたときに適切に権限設定がされています。念のため以下の権限になっているかどうか確認をしておいてください。 ディレクトリ権限: 755 ファイル権限: 644 これで、ファイルデータのリストアが完了です。 データベースのリストア 次に、データベースのリストアを行います。これには、phpMyAdminやMySQLクライアントを使用します。 phpMyAdminの使用新サーバのphpMyAdminにアクセスし、データベースを選択してから「インポート」タブをクリックします。次に、バックアップ時にエクスポートしたSQLファイルを選択し、「実行」をクリックすると、データベースのリストアが開始されます。 MySQLクライアントの使用 ※上級者向けもしSSH環境があるようなサーバ（そして逆にphpmyadminのようなWebインターフェイスの利用が制限されているサーバ）であれば、コマンドを利用することも可能です。といいますかそれしか方法は無いんじゃないかと思います。バックアップしたsqlファイルをSSH環境でアクセスできるディレクトリにFTP等でアップロードし、mysql -u ユーザー名 -p データベース名 < backup. sqlというような形で実施いただけます。ただ、これは上級者向けなので、自信が無いならばプロに依頼するようにしてください。 プラグインを使用したリストア プラグインを使ってバックアップした場合は、そのプラグインを使用してリストアを行います。例えば、「UpdraftPlus」や「All-in-One WP Migration」を使っている場合、以下の手順でリストアが可能です。 新サーバに標準の状態のWordPressをインストールし、引っ越し元で利用したのと同じプラグインもインストールします。 プラグインの手順に従って、引っ越し元で取得したバックアップファイルを使ってインポート作業を行います。例えば「All-in-One WP Migration」の場合、バックアップファイルをアップロードするだけで、ファイルデータとデータベースが一度にリストアされます。 設定の確認リストアが完了した後、サイトの動作確認を行い、必要に応じてプラグイン設定を調整します。プラグインを使用したリストアでは、この段階ですべてのリストア作業が完了しており、wp-config. php の設定変更は不要です。 wp-config. phpの更新 リストア作業の中で忘れてはいけないのが「wp-config. php」の更新です。 wp-config. phpはWordPress全体の動作やデータベースへの接続設定が記述されたファイルになります。ファイル名にPHPと入っているのでお分かりかもしれませんが、中身はPHP言語で記述されたプログラムになります。といっても、引っ越し作業でおおよそ更新が必要になるのは「データベース接続設定」になりますので、プログラミングをすることはありません。単にテキストを書き換えるだけになります。 一般的なテキストエディタで開いて、以下の部分を更新してください。 --- - Published: 2025-01-10 - Modified: 2025-01-08 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step3/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し サーバの選定が完了したら、次に行うべきステップは「ファイルデータとデータベースのバックアップ」です。これはWordPressサイトの引っ越し作業の中で最も重要な作業の一つなので、確実におこないましょう。 というのも、移行中に万が一問題が発生した場合でも元の状態に戻すことができるからです。バックアップが無ければ、データは無くなる可能性があるとご認識ください。 この章では、バックアップを行う際の具体的な手順とポイントについて説明します。 基本のバックアップ方法（弊社のおすすめ） ファイルデータのバックアップ まず、WordPressのすべてのファイルをバックアップする必要があります。これには、テーマファイル、プラグインファイル、アップロードされたメディアファイル、そしてWordPress本体のファイルが含まれます。ファイルデータをバックアップするには、以下の方法が一般的です。 FTPソフト（FileZillaなど）を使用して、サーバ上のWordPressディレクトリをローカルマシンにダウンロードします。ダウンロードするファイルはWordPressの全てのファイルです。ですので、wp-adminやwp-includesというフォルダがあるフォルダ（それらが含まれているフォルダ）内全てをダウンロードしてください。※稀に特殊なフォルダ構成で、そのフォルダ以外にデータが含まれている場合もありますが、そういったケースでは、サイト運用をしている会社に確認してください。 一部のサーバやホスティングサービスでは、サーバの管理パネル（WordPressの管理画面ではなく、サーバ会社から提供される管理画面）から直接ファイルデータをバックアップする機能が提供されていたりします。この方法を使用すると、手動でのダウンロードよりも簡単かつ迅速、そして確実にバックアップが可能です。こちらの方法が使えるのでしたら、FTPソフトを使うよりお勧めです。 WordPressプラグインを利用する方法WordPressのプラグインにはバックアップや引っ越しを目的とするものも多々ありますが、ここは注意点がありますので、後程まとめて記述します。 データベースのバックアップ 次に、WordPressサイトのデータベースをバックアップします。データベースには、投稿、ページ、コメント、ユーザー情報、プラグインの設定など、サイトの重要なデータがすべて含まれています。データベースのバックアップには、以下の方法が推奨されます。 これも多くのサーバやホスティングサービスで提供されているphpMyAdminというツールを使って、WordPressのデータベースをファイルとしてダウンロードします（この操作をエクスポートといいます）。phpMyAdminへのログインは大抵はそのサーバの管理パネルから可能です。ログインして使っているデータベースを選び、「エクスポート」タブを選択し、デフォルト設定のままで「実行」をクリックします。そうすると、データベース全体をSQLという形式のファイルとしてダウンロードできます。使っているデータベースがどれなのか、またphpMyAdminへのログインが分からない、という場合はサイトの運用会社か、サーバ管理会社に確認してみてください。 万一、上記のツールが提供されていないサーバ、という場合は、自分自身でphpMyAdminをサーバに設置してエクスポートすることも可能です。ただ、経験則上、この数年来、phpMyAdminの提供が無いサーバには出会ったことがありませんので（あるとすれば、VPSやクラウドサーバですが、その場合はそもそも制作会社やシステム開発会社等のプロに依頼すると思いますので）、まずはサーバ管理会社に確認してください。 WordPressプラグインを利用する方法こちらもファイルと同じく、WordPressのプラグインでできるのですが、注意点がありますので、後程まとめて記述します。 プラグインを使ったバックアップ WordPressのプラグインの中には、バックアップ用のプラグインや、サイトを引っ越しするためのプラグイン（サイト移行用のプラグイン）が多々あるのも事実です。 これらを使ったバックアップや引っ越しも可能ですが、注意点があります。これらの注意点を理解した上で、万一何かあっても対処することができるということであればプラグインも選択肢の一つにしてください。 いつも完璧に処理できるわけではない（対象のサイトのテーマ構成やプラグイン構成、カスタマイズ度合いに大きく依存） プラグインを使った方法ですと、引っ越ししたいサイトの作り方によっては、１００％完璧にバックアップが出来ない場合や、引っ越しが一部失敗する場合があります。 実際弊社にお問い合わせいただく事例でも、プラグインを使って引っ越ししたが、一部が崩れた、一部の機能が動かない、という話が往々にしてあります。 これはプラグインのバグや仕様ということではなく、プラグイン自体もWordPressの1つの機能として動作する仕組み上、「完璧」にはできないためです。 おおよそ引っ越しはできますが、細かい設定は後から手動で行う必要があったり、場合によってはコンテンツの一部を再作成しなければならないこともありますことご認識ください。 移行先のサーバの状態によっては、有料のプラグインにしないといけない or プラグインが使えない場合がある 移行先がレンタルサーバ以外の場合は、利用できるプラグインに制限があったり、プラグインには制限は無いもののサーバの設定値（例えば1ファイルのアップロードサイズ制限、アップロード時間制限、アップロードできる手法の制限等）による制約があったりします。有料版のプラグインにして回避できる場合もあれば、そもそもプラグインでは対応できないケースだってあります。要はプラグインでの引っ越しは万能ではないということは理解しておいてください。 ※意外にこのケースも多く、プラグインが動作しないというお問合せをいただいたときに真っ先に確認するのもこのサーバの仕様だったりします。 間違ったバックアップ方法・・・ たまに（そして後々大きな問題になりがちな）WordPressのバックアップへの認識を間違えている方がいらっしゃいます。ここもできれば、、、認識を改めて頂きたく、ポイントとして書かせていただきます。 （間違い１）引っ越し先に新しいWordPressがインストールされているから、WordPress本体はバックアップしなくていい 引っ越し先には引っ越し先サーバの機能で、新規の（中身が初期状態の）WordPressをインストールしてあるので、バックアップするのはサイトに関するデータだけでいいとお考えの方がいらっしゃいます。具体的には「wp-content配下」のファイルだけをコピーしたらいいと思っていらっしゃるパターンです。 確かにサイトに関する「ファイル」は移行できますが、サイトに関するデータベース内の「データ」は移行できないことをまずご理解ください。 WordPressはサイトの表示に「ファイル」とデータベース内の「データ」両方を使っています。例えば会社概要やお問合せフォームは固定ページだったり、フォームプラグインの設定として実装されているのですが、これらは「ファイル」にはありませんので、この方法では移行ができません。 （間違い２）引っ越ししたら、WordPressも勝手にバージョンアップされる また、引っ越し先のWordPressのバージョンが引っ越し元と違う場合は、そもそも今のテーマファイルやプラグイン全てがそのまま動作するとは限らないという点もご留意ください。 そもそもWordPressの「引っ越し」と「バージョンアップ」は異なる作業です。 引っ越しはあくまで同じバージョン間での移動となります。同時に行うということであれば、バージョンアップのテストを行った上での引っ越し、になりますので、ここもご留意ください。 ※WordPressのバージョンアップは、基本的には管理画面でボタンを押すことで出来る（設定によってはボタンが出ていない場合もあります）のですが、だからといって、正常に完了するという保証はありません。よくあるのは、本体はアップデートできたけど、プラグインやテーマが古くて、結果的にサイトが表示されない／表示が崩れるという問題です。一度バージョンアップをしてしまうと、元には戻せないので、万一のことも考えて、引っ越しとは別でやりましょう。 （間違い３）●●の情報は引っ越し先にあるのを使いたいから、データベースの一部だけを持っていく 一番困る間違いがこれです。 WordPressをご存じの方であれば、そのデータはデータベース内のいくつかのテーブルに分けて保存されていることもご存じかと思います。例えばユーザ情報は～～_usersというテーブルに保存されています。 ここで部分的な情報だけを持っていきたいので（例えばユーザ情報は新サーバの情報を使いたいので）、部分的にデータベースのテーブルを移行される方がいらっしゃいますが、殆どのケースで後々何らかの影響があります。 ご自身で対処できるスキルと時間があるのであれば止めはしませんが、こういったカスタマイズ領域に係るバックアップ方法は、相当リスクを伴うことをご認識ください。 弊社のおすすめは「ファイル」と「データベース」を個別にバックアップ バックアップ一つとっても、実は上記のように色々な方法がありますし、また世の中には間違った情報も流れています。 そんな中で弊社のおすすめ（弊社が常に利用する方法）は、「ファイル」と「データベース」を個別にバックアップする方法です。 もちろん、一番時間のかかる方法ですが、それ以外の方法で、あとあとのリスクを抱えるぐらいであれば、ここはシンプルな方法でバックアップしていただくべきと思います。 「第4章～リストア（アップロード）編～」はコチラ --- - Published: 2025-01-10 - Modified: 2025-01-11 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step5/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し いままでの流れで、既に新しいサーバにはWordPressのすべてのデータが引っ越しされています。しかしながら、 https://www. ****. jp 等のドメイン名を使ったURLでアクセスしても、実はまだ古いサーバを見ている状態になっています。これはドメイン と Webサーバは別々に管理されているからで、この後ご案内する「DNSの切り替え」をもって、全ての引っ越しが完了となります。 この章ではドメインについて（少しだけ）と、その切替方法についてご案内します。 なお、この章に記載の内容を行うことで、引っ越し先の新サーバが世の中に公開されることになります。万一データのリストア（詳細は前の章をご覧ください）が不完全だったり、wp-config. phpの設定ができていなかったりしますと、Webサイトが停止することになりますので、今までの作業が完了していることを確認の上、DNSの切り替えへ進んでください。 ＊＊＊記載の内容は一般論です。この内容で進めても正常に切り替えが出来ない場合もあります。あくまで自己責任でお願いします。不安な方は弊社にご相談ください＊＊＊ ドメイン名とWebサイト Webサイトにアクセスする時はGoogle ChromeやSafariといったWebブラウザのアドレス欄に https://fastcoding. jp といったアドレス（これをURLといいます）を入力していると思います。実際意識をしていなくても、例えばメールに添付されたアドレスをクリックしたり、QRコードを読み取ることでアドレスを自動的に取得したりして、結果的にはWebブラウザを使ってWebサイトを閲覧しているんです。このアドレスの一番左側、https://の次に来るのが「ドメイン名」といって、その会社やサービス毎にユニークに設定されている、いわばWebサイトの名前になります。 このドメイン名は、DNS（Domain Name System）という仕組みによって、いろいろなサーバとの紐づけが管理されています。いわばDNSという名前の、とても大きなExcelファイルみたいなものが世界に１つあって、その中に、例えば fastcoding. jp は ●●● というサーバ、という関連が書いてると思ってください。Webブラウザはいつもそれを見に行ってサーバを探し出しているというわけです。今の状態では、そのDNSには、あなたのドメイン名と古いサーバの関連が記載されている状態です。これを新しいサーバに書き換えるのが「DNSの切り替え」になります。 ※ドメイン名やDNSについては本論からそれますので、相当ごまかしながら記述しています。ご容赦ください。 DNS設定を変更する DNSの切り替えは、DNS設定の変更によって行われます。DNS設定を変更することで、ドメイン名でアクセスする訪問者が自動的に新しいサーバへ接続されるようになります。 実際の切り替え前に自分だけ確認する方法 でもこのDNS、つまり大きなExcelファイルですが、実は自分のパソコンの中にも1つ持っているんです。このファイルのことを「hostsファイル」といいます。 hostsファイルを先に書き換えてしまえば、自分のパソコンだけが、あたかもDNSの切り替えを行ったかのように、新しいサーバへアクセスできるようになります。こうすることで、他のユーザーには影響を与えずに、自分だけが先に、新しいサーバでのサイト動作を確認することができます。WordPressの引っ越し作業の時は是非ともこの「hostsファイル」の設定変更を先に行って、自分だけで新しいサーバの動作を確認するようにしてください。 hostsファイルの更新は以下の方法で行います。 まず新しいサーバのIPアドレスを確認してください。hostsファイルにはこのIPアドレスを書き込むことになります。大抵は新しいサーバの管理パネルにログインすれば表示されていると思います。分からない場合はサーバ管理会社へ確認してください。 次にパソコンの中にあるhostsファイルを編集して、自分の端末だけが新しいサーバへ接続するように設定します。hostsファイルの場所は、以下の通りです。 Windows**: `C:\Windows\System32\drivers\etc\hosts` Mac/Linux**: `/etc/hosts` hostsファイルをテキストエディタで開き、次のような行を一番最後に追加して保存します。111. 222. 333. 444 www. example. com最初に新しいサーバのIPアドレスを書いてください。その後半角スペースを１ついれて（間違えて全角スペースをいれないで）、Webサイトのドメイン名を書きます。 hostsファイルを保存した時点で、ルール上はそのパソコンからアクセスした場合は新しいサーバに繋がることになります。でも「ルール上」というのは、実際にはブラウザのキャッシュだったり、パソコンのキャッシュだったり（細かくは色々あるのですがここでは大雑把にキャッシュと思ってください）が残ることで、しばらくは未だ古いサーバに繋がる場合があります。その場合はパソコンを再起動したり、少しだけ時間をおいてから確認してください。 古いサーバに繋がっているのか、新しいサーバに繋がっているのか確認する方法 実はこれも結構みなさん悩まれるポイントだと思います。今回のようにサイトの引っ越しであれば、古いサーバも新しいサーバも、表示されるWebサイトは全く同じ（むしろ同じでなければ引っ越しにならない）です。つまり、どっちに繋がっているかぱっと見じゃ分からない、、わけですね。弊社の場合はよく、新しいサーバだけにダミーのファイルを配置したりします。例えば「新サーバ」とだけ書いたテキストファイルをserver. txt等のファイル名で用意し、それも新サーバにアップロードするんです。そして https://*****/server. txt 等にアクセスをして「新サーバ」と表示されれば、そのパソコンは新しいサーバに繋がっている、ということになります。 DNSの切り替え 自分のパソコンで新しいサーバが正常に動作していることを確認できたら、いよいよ本当の「DNSの切り替え」です。これは実際にDNS設定の変更になるため、ドメインを管理しているレジストラの管理画面から行うのが一般的です。 以下に一般的なDNS設定の変更方法を記載します。 ドメインを管理しているレジストラにログインドメインを管理しているレジストラ（例えばお名前. com、ValueDomainなど）の管理画面にログインします。 DNS設定の編集DNS設定の編集画面に移動し、Aレコードを新しいサーバのIPアドレスに更新します。※もしWebサイトの引っ越しだけではなく、サーバ全体の引っ越しとして、メールだったり、他のサービスも新しいサーバに引っ越すのであれば、上記のAレコードの更新だけでは終わりません。でもこの場合は、専門の業者に依頼してください。メールはメールで事前の設定が必要ですし、サービスによってはDNS設定の編集方法が大きく変わるからです。※上記のAレコードの更新によるWebサーバの引っ越しは一般的な方法ですが、お使いのサーバによってはこの方法では実現できない場合もあります。事前にサーバの管理会社へこの方法で良いかどうか、確認されることをお勧めします。 サイトの動作確認 DNS切り替えをした後も、念のため、新しいサーバでWebサイトが正常に動作しているかどうか確認しましょう。実際にページを表示して、画像がちゃんと表示されているか、表示の崩れが起きていないか確認してください。問題がある場合はリストアに失敗しているかもしれません。次の章に動作確認の方法をまとめましたので、是非ご覧ください。 なお、DNSの切り替えをした後は、設定の変更がインターネット全体に反映されるまで、時間がかかる場合があります。これは数10分から長いと1日程度かかることもあります。この期間は、古いサーバと新しいサーバの両方にアクセスされる可能性があります。今自分が見ているサーバがどちらかわからない場合は↑に書いた「古いサーバに繋がっているのか、新しいサーバに繋がっているのか確認する方法」を使って確認してください。 ※記載した内容はすべて一般論になります。この方法で引っ越しができないことがあっても、そこは自己責任ということでお願いいたします。 「第6章～動作確認と公開後チェックリスト～」はコチラ --- - Published: 2025-01-10 - Modified: 2025-01-11 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress-moving-step6/ - カテゴリー: WordPress - タグ: WordPress, サーバ引っ越し DNSの切り替えが完了したら、新しいサーバでWebサイトが見えていると思います。でも表面上は問題ないように思えても、細かいところでバグが出ているかもしれません。やはり完全に引っ越しが終わったと言えるのは、「動作確認」をきちんとしてからだと思います。す。 このステップでは、新しいサーバ上でWordPressサイトが正しく動作しているかを確認するための手順とチェックポイントについて解説します。 サイト全体の表示確認 まずは、サイト全体が正しく表示されているかを確認します。具体的には、次の点を確認してください。 ページの表示確認まずはトップページが正しく表示されているか、デザインやレイアウトが崩れていないかを確認します。続いて他のすべてのページも確認してほしいのですが、時間が無い場合は主要なページやアクセスの多いページを確認してください。おおよそ引っ越しに関わる問題がある場合は、どれか1つのページ、ではなく、ページすべてで問題が起きていることが多いです。いくつかでもいいので、目視で確認しましょう リンクの動作確認サイト内のすべてのリンクが正常に動作しているか確認します。実際にリンクをクリックして遷移するかどうかや、内部リンクの場合は、該当するセクションまでページがスクロールされるかをチェックします。後述する自動チェックツールを使うのもいいかと思います。 画像やメディアの表示確認画像や動画などのメディアが正しく表示されているか、再生できるかを確認します。特に、WordPressのメディアで設定した画像の表示に問題がないかを確認してください。ここで問題がある場合は、リストア時の権限設定に問題があることが多いです。 自動チェックツールの活用 手作業での確認に加えて、自動チェックツールを使うことで、サイト全体を網羅したエラーやリンク切れチェックを素早く行うことができます。以下に、代表的な自動チェックツールを紹介します。 Screaming Frog SEO SpiderScreaming Frogは、ウェブサイトのクロールを行い、リンク切れやメタデータの欠如、重複コンテンツなどを検出するツールです。サイト全体をクロールして問題点をリストアップしてくれるため、サイトの状態を総合的に把握するのに役立ちます。 Broken Link CheckerWordPressのプラグインとしてもおなじみのBroken Link Checkerは、サイト内のリンク切れを検出するツールです。プラグインとしてインストールして設定しておくと、定期的にリンク切れをチェックしてメールで通知してくれるので、引っ越しの時だけならず、運用中にもおすすめのツールです Google Search ConsoleGoogle Search Consoleは、Googleが提供する無料のツールで、サイトのパフォーマンスやエラーの確認ができます。特に、クロールエラーは、引っ越しをすることで消えたページが無いかどうか（＝リストア漏れのページが無いかどうか）を確認するのに使えます。 これらのツールを活用することで、引っ越しの時の問題もですが、サイトのそもそもの問題点も発見できるため、運用業務にも役に立つかと思います。 プラグインとテーマの動作確認 WordPressサイトで使用しているプラグインやテーマが正常に動作しているかを確認します。 プラグインの動作確認すべてのプラグインが期待通りに機能しているか確認します。特に、古いサイトでキャッシュプラグインを導入していた場合は、一度プラグインをOFFにしたり、プラグインのキャッシュクリアを行わないといけない場合があります。 テーマの設定確認使用しているテーマが正しく適用され、カスタマイズが反映されているかを確認します。特に、カスタムウィジェットやヘッダーやフッターのメニューリンクがちゃんと動作しているかを確認します。 フォームとコメント機能の確認 もしWordPressで、サイト内のフォームやコメント機能を作っている場合は、これも正常に動作しているかを確認します。 フォームのテスト送信問い合わせフォームが正しく機能しているか確認するため、必ず1度はテストで送信してください。実際画面上で送信が正常に終わったように見えても、受信しているメールアドレスまでフォームの内容が飛んでこない場合もあります。フォームの送信からメールボックスへの受信まで必ずテストしてください。 コメント機能の確認記事やページにコメント機能がある場合、コメントが正常に投稿できるか、また管理画面での承認や返信が問題なく行えるかを確認します。 WordPressの引っ越しについてのまとめ WordPressサイトの引っ越しは、意外に手間と時間がかかることが分かっていただけたかなと思います。また今のサイトの構成や、新しいサーバによっては設定方法が変わる場合もあるので、自信が無い場合はプロに依頼することをお勧めします。 また、引っ越し作業は計画的に進めてください。特に事前のバックアップと、DNS切り替え前の確認が大事です。バックアップさえあれば、途中で万一データが消えても（自分自身でできなくても業者に依頼することで）元に戻せますし、DNS切り替え前に念入りにチェックしていれば、サイトを停止させることもありません。 今回の解説を参考にして、トラブルのないスムーズなWordPressの引っ越しができることを願っています。 --- - Published: 2025-01-08 - Modified: 2025-01-08 - URL: https://fastcoding.jp/blog/all/frontend/javascript-bar-graph-plugins/ - カテゴリー: React, Vue.js, システム開発 - タグ: JavaScript, グラフ, プラグイン 最近、Webサイトでデータをグラフにして見せることが増えてきました。たとえば、会社案内ページで売上や業績の推移をグラフにしてわかりやすくしたり、アンケート結果をビジュアルで示したりする例がよくあります。こうしたグラフは、パッと見ただけで情報が伝わりやすく、見る人にとっても便利ですよね。 そんなグラフの中でも今回は、棒グラフに着目。特徴とともに、棒グラフを簡単に作れるJavaScriptのライブラリを紹介します。 この記事は、次のような人に向けて書いています。 Webサイトにグラフを取り入れたい新人エンジニア 今使っているライブラリを別のものに変えようと考えている中級エンジニア デザインにこだわったグラフを探しているWebデザイナー このシリーズでは、グラフライブラリの特徴や使い方をサンプルコード付きでわかりやすく紹介していくので、ぜひ参考にしてください！ 棒グラフとは？ 棒グラフは、データを棒状の図で表現するグラフの一種。横軸や縦軸にカテゴリや項目を並べ、棒の長さや高さで数値を示します。シンプルで直感的にデータを理解しやすいため、最もよく使われるグラフ形式のひとつです。 棒グラフが向いている活用例 棒グラフは次のようなグラフをで活躍します。 比較を示すとき：カテゴリごとの売上や人口などの数値を比べる場合。 推移や変化を見せるとき：時間や期間ごとのデータの変動を示す場合。 ランキングの表示：数値の大小や順位を一目で伝えたい場合。 たとえば、「月ごとの売上比較」や「製品ごとの売上ランキング」を示すときに棒グラフは非常に便利ですね。 2. 3 棒グラフの種類 縦棒グラフ：縦方向に棒を並べてデータを示す一般的な形式。 横棒グラフ：横方向に棒を並べ、項目数が多いときやラベルが長いときに使いやすい形式。 2. 4 棒グラフのメリットとデメリット メリット 視覚的にわかりやすく、情報がすぐに伝わる。 データの比較や順位付けが簡単にできる。 デメリット データの量が多すぎると、棒の数が増えて見づらくなることがある。 比率や割合の比較には適さず、円グラフや積み上げグラフの方が向いている場合がある。 グラフが単純すぎると、細かな分析や相関関係の表現には不向きなこともある。 JavaScriptライブラリを選ぶ際のチェックポイント グラフをWebサイトに表示するためのライブラリは数多くありますが、選び方を間違えると使いづらかったり、目的に合わなかったりすることがあります。ライブラリ選定の際には下記6つのポイントをチェックすることをおすすめします。 導入のしやすさ初心者でもすぐに使えるかどうかは重要です。CDNを使って簡単に読み込めるものや、設定が少なくても動作するライブラリを選ぶとよいでしょう。 カスタマイズ性デザインや色、アニメーションなどを柔軟に変更できるかを確認しましょう。ブランドやデザインテーマに合わせた調整が必要な場合は、カスタマイズ性の高いものがおすすめです。 レスポンシブ対応スマホやタブレットなど、画面サイズが異なるデバイスでもきれいに表示されるかをチェックしましょう。特に、ビジネスサイトではモバイル対応が重要です。 パフォーマンス表現するグラフにもよりますが、大規模データを扱う場合、表示速度やパフォーマンスも気にする必要があります。特にリアルタイムデータを表示する用途では、軽量で高速なライブラリが求められます。 サポートとドキュメント公式サイトやGitHubでのサポート状況や、ドキュメントの充実度を確認しましょう。使い方がわからないときに参考になる情報があるかどうかは重要です。 ライセンスと利用料利用規約やライセンス形態も確認しておきましょう。商用利用が可能かどうか、無料で使えるか、有料プランが必要かなどを事前にチェックすることが大切です。 おすすめライブラリ紹介 1 Chart. js 公式URL: https://www. chartjs. org/ 特徴: Chart. jsはシンプルでありながら拡張性が高く、デザインカスタマイズやアニメーションを直感的に設定できる点が大きな魅力です。初心者にも扱いやすく、基本的な棒グラフから複雑なカスタムグラフまで幅広く対応可能。プラグインによる拡張性も高い。 メリット・シンプルなAPIで初心者にも扱いやすい。・デフォルトでレスポンシブ対応・小規模データの処理が得意で、パフォーマンスが良い。・学習リソースが充実し、問題解決がしやすい。 デメリット・データ量が多いとパフォーマンス低下の可能性あり。・頻繁な更新が必要な場合はパフォーマンスに課題がある。・D3. jsほどの自由度はなく、特殊なデザインは難しい。 2 D3. js 公式URL: https://d3js. org/ 特徴: 高度なカスタマイズが可能で、動的なグラフの生成・更新などデータの可視化が得意。データドリブンなアプローチを提供し、複雑なインタラクティブグラフの作成に適している。自由度が高く、プログラム制御に慣れている人向け。 メリット・高度にカスタマイズ可能で、複雑なビジュアライゼーションが作成可能。・豊富なドキュメントとコミュニティサポートがある。・軽量で動作が速い。 デメリット・初心者にとっては学習コストが高い。・シンプルなグラフ作成にはコード量が多くなりがち。・他のライブラリに比べて初期設定やレスポンシブ対応が手間。 3 ApexCharts 公式URL: https://apexcharts. com/ 特徴: インタラクティブなグラフ作成が簡単。モダンなデザインと多機能なUI。時間軸データや動的データ表示に強く、ダッシュボード用途にも適している。 メリット・初心者にも扱いやすいシンプルなAPI設計。・高度なインタラクションやエクスポート機能がデフォルトで利用可能。・リアルタイム更新やアニメーションが簡単に実装できる。 デメリット・D3. jsほど自由度は高くなく、カスタムグラフの作成には限界がある。・ライブラリサイズは若干大きめ (複雑なシステムではパフォーマンス考慮が必要)。 4 Google Charts 公式URL: https://developers. google. com/chart/ 特徴: クラウドベースで高速表示。Googleのサポートと安定性を活かし、API連携が容易。シンプルな実装で基本的なグラフを素早く作成できる。 メリット無料で商用利用できる。簡単な設定で高品質なグラフを作成可能。Googleスプレッドシートとの連携が強力で、外部データソースの取り込みが容易。レスポンシブ対応とエクスポート機能を標準装備。 デメリットオフラインでは利用しづらい (GoogleのCDNに依存)。カスタマイズの柔軟性はD3. jsやChart. jsよりも低い。高度なインタラクティブ機能や特殊なカスタムチャートは実装しづらい。 5 Chartist. js 公式URL: https://gionkunz. github. io/chartist-js/ 特徴: 軽量でシンプル。レスポンシブ対応でデザイン性が高く、CSSでカスタマイズしやすい。基本的なグラフの作成に適しており、小規模なプロジェクトやモバイル用途に向いている。 メリット・軽量で高速に動作する。・CSSによるスタイル変更が容易。・シンプルなコードで実装可能。・プラグインによる機能拡張も可能。 デメリット・高度なインタラクティブ機能 (ズームやパン) はサポートされていない。・D3. jsやApexChartsと比較するとカスタマイズ性に制約がある。・データセットの規模が大きいとパフォーマンスが低下する可能性がある。 ライブラリ比較表 前述のライブラリ選定ポイントをまとめた表は下記のとおり 名称導入のしやすさカスタマイズ性レスポンシブ対応パフォーマンスサポートとドキュメントライセンスChart. js高い高い標準対応軽量で高速公式とGitHubで充実MITライセンスD3. js中程度非常に高い手動対応大規模データ対応豊富なサンプルと解説BSDライセンスApexCharts高い高い標準対応軽量かつ高速公式ドキュメント充実MITライセンスGoogle Charts高い中程度標準対応高速Google公式サポート無料Chartist. js高い高い標準対応軽量コミュニティベースMITライセンス サンプルデータを使った導入例 今回紹介した各ライブラリを使って、同じ条件のサンプルデータから棒グラフを表示する手順を作成してみました。それぞれの特徴を活かしたオプションもつけてみたので参考にしてくださいね。 サンプルデータ：月別売上高 月売上 (万円)1月1202月1503月1804月2005月1706月2107月2508月3009月28010月26011月23012月190 Chart. js 今回は、オプションとしてアニメーションの設定も使用してみました 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. HTMLとJavaScriptコード const ctx = document. getElementById('salesChart'). getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: , datasets: , backgroundColor: 'rgba(75, 192, 192, 0. 2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }\] }, options: { scales: { y: { beginAtZero: true } }, animation: { duration: 2000, easing: 'easeInOutBounce', }, }}); D3. js D3. jsでは、クリックした棒を強調表示する例を作成してみました。 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. CSSを追加 . tooltip { position: absolute; background-color: lightgray; padding: 5px; border-radius: 5px; font-size: 12px; pointer-events: none; /* ホバー時にカーソルが反応しない */ } 3. HTMLとJavaScriptコード 月別売上高 (クリックで強調表示) // データセット const data = ; const labels = ; // グラフ設定 const margin = { top: 30, right: 30, bottom: 50, left: 60 }; const width = 800 - margin. left - margin. right; const height = 400 - margin. top - margin. bottom; // SVGの作成 const svg = d3. select('#chart') . append('svg') . attr('width', width + margin. left + margin. right) . attr('height', height + margin. top + margin. bottom) . append('g') . attr('transform', `translate(${margin. left},${margin. top})`); // 軸スケール設定 const x = d3. scaleBand . domain(labels) . range . padding(0. 1); const y = d3. scaleLinear . domain . range; // 軸の描画 svg. append('g') . attr('transform', `translate(0,${height})`) . call(d3. axisBottom(x)); svg. append('g') . call(d3. axisLeft(y). ticks(10)); // ツールチップの追加 const tooltip = d3. select('body'). append('div') . attr('class', 'tooltip') . style('opacity', 0); // 強調状態を保持する変数 let selectedBar = null; // 棒グラフの描画 svg. selectAll('. bar') . data(data) . enter . append('rect') . attr('class', 'bar') . attr('x', (d, i) => x(labels)) . attr('y', d => y(d)) . attr('width', x. bandwidth) . attr('height', d => height - y(d)) . attr('fill', 'steelblue') // マウスオーバーでツールチップ表示 . on('mouseover', (event, d) => { if (event. target ! == selectedBar) { d3. select(event. target). attr('fill', 'orange'); // ホバー時に色変更 } tooltip. transition. duration(200). style('opacity', 0. 9); tooltip. html(`売上: ${d}万円`) . style('left', `${event. pageX + 10}px`) . style('top', `${event. pageY - 20}px`); }) . on('mousemove', (event) => { tooltip. style('left', `${event. pageX + 10}px`) . style('top', `${event. pageY - 20}px`); }) . on('mouseout', (event) => { if (event. target ! == selectedBar) { d3. select(event. target). attr('fill', 'steelblue'); // 元の色に戻す } tooltip. transition. duration(500). style('opacity', 0); }) // クリックで強調表示 . on('click', (event, d) => { // 以前選択されたバーを元の色に戻す if (selectedBar) { d3. select(selectedBar). attr('fill', 'steelblue'); } // 現在選択されたバーを強調表示 selectedBar = event. target; d3. select(selectedBar). attr('fill', 'red'); // クリック時に色を赤に }); ApexCharts 導入手順 1. CDNリンクの追加 2. HTMLとJavaScriptコード var options = { chart: { type: 'bar' }, series: }\], xaxis: { categories: } }; var chart = new ApexCharts(document. querySelector("#apexChart"), options); chart. render; Google Charts Google Chartsでは、データをCSVダウンロード可能なグラフを作成してみました 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. JavaScriptを追加 // Google Chartsのロード google. charts. load('current', { packages: }); google. charts. setOnLoadCallback(drawChart); let chartData; // データを保持する変数 function drawChart { // データの定義 chartData = google. visualization. arrayToDataTable(, , , , , , , , , , , , \]); // オプション設定 var options = { title: '月別売上高', hAxis: { title: '月' }, vAxis: { title: '売上 (万円)', minValue: 0 }, legend: { position: 'top' }, colors: , animation: { startup: true, duration: 1000, easing: 'out' } }; // グラフの描画 var chart = new google. visualization. ColumnChart(document. getElementById('chart_div')); chart. draw(chartData, options); } // CSVエクスポート機能 function exportToCSV { // データをCSV形式に変換 let csvContent = 'data:text/csv;charset=utf-8,'; for (let i = 0; i < chartData. getNumberOfRows + 1; i++) { let row = ; for (let j = 0; j < chartData. getNumberOfColumns; j++) { row. push(i === 0 ? chartData. getColumnLabel(j) : chartData. getValue(i - 1, j)); } csvContent += row. join(',') + '\\n'; } // ダウンロードリンクを作成 const encodedUri = encodeURI(csvContent); const link = document. createElement('a'); link. setAttribute('href', encodedUri); link. setAttribute('download', 'sales_data. csv'); document. body. appendChild(link); // ダウンロード実行 link. click; } 3. HTML 月別売上高 (CSVエクスポート機能付き) CSVエクスポート Chartist. js Chartist. jsでは、アニメーション付きのグラフを作成してみました 導入手順 1. CDNリンクの追加 (HTMLの内に記述) 2. HTMLとJavaScriptを追加 アニメーション付き棒グラフ // データの定義 const data = { labels: , series: \] }; // オプション設定 const options = { axisY: { onlyInteger: true, // 整数のみ表示 offset: 50, // 軸のオフセット labelInterpolationFnc: value => `${value}万円` // ラベルに単位追加 }, chartPadding: { top: 20, right: 20, bottom: 20, left: 20 } }; // グラフ描画 const chart = new Chartist. Bar('. ct-chart', data, options); // アニメーション設定 chart. on('draw', function(data) { if (data. type === 'bar') { data. element. animate({ y2: { begin: 0, // アニメーション開始位置 dur: 1000, // アニメーションの持続時間 (ms) from: data. y1, // 開始値 to: data. y2, // 終了値 easing: Chartist. Svg. Easing. easeOutBounce // アニメーションのイージング } }); } }); まとめ この記事では、棒グラフの基本から利用シーン、ライブラリの選び方、そしておすすめライブラリの特徴と比較表までを紹介しました。 棒グラフはデータの比較や推移を視覚的にわかりやすく示すための便利なツールです。用途に応じて最適なライブラリを選び、効果的なデータ可視化を実現しましょう。 次回は折れ線グラフや円グラフなど、別のグラフ形式について詳しく解説していきますので、ぜひお楽しみに！ --- - Published: 2024-11-13 - Modified: 2024-11-13 - URL: https://fastcoding.jp/blog/all/info/hikaku_202411/ - カテゴリー: React, Vue.js, Web業界の動向・情報 - タグ: Web業界の動向, ディレクション, フロントエンド 最新のウェブ検索結果をもとに、HTMLコーディング代行会社の上位6社の料金体系について比較し、まとめました。 HTMLコーディング代行を利用される際はぜひ一度チェックしてみてください。 HTMLコーディング代行会社 料金比較 料金比較時のポイント 追加サービスの料金 多くの会社で、基本のコーディング費用に加え、SEO対策や画像の最適化、JavaScriptのカスタマイズなど、追加サービスに対して別途料金が発生します。これらの費用はプロジェクトの範囲や要件によって異なるため、見積もり時に必ず確認しましょう。 特別な要件に対する追加料金 特定のデバイス対応や特殊なフレームワークの使用、カスタムアニメーションの追加など、標準サービスに含まれない要件については追加料金が必要となる場合が多いです。また、急ぎの依頼や納期の短縮に対応する場合も追加料金が発生することが一般的です。 修正や変更にかかる費用 納品後の修正に関しては、多くの会社で一定期間は無料対応していますが、それ以降は追加費用がかかる場合が多いです。また、修正の内容や範囲によっても費用が異なるため、事前に納品後の対応について確認しておくと安心です。 HTMLコーディング代行会社 おすすめ6社比較 HTMLコーディング代行会社の料金体系は、サービスによって様々です。 以下に、比較しやすいように「1ページあたりの単価」「基本料金などの固定費の有無」「それ以外にかかってくるであろう費用」の3点について表にまとめました。 サービス名 レスポンシブコーディング1ページあたりの単価（税抜） 基本料金の有無、費用 それ以外にかかる費用 ファストコーディング 8,000円/2,500px毎 なし ページの縦の長さが長い場合には、別途見積もり。JavaScriptやアニメーションの追加、CMS構築など、基本的にはほとんど無料。（仕様によっては別途見積もりになる場合もあり）急ぎの依頼には追加料金が発生。 コーディングベア 10,000円/4,000px毎 静的サイト：50,000円 プロジェクト進行管理費用として、1プロジェクトにつき10%〜JavaScriptやアニメーションの追加、CMS構築なども追加料金。オプション毎に費用が指定されているので、事前のチェックが必要。 コーディングアライブ 12,000円〜トップページは、48,000円〜 基本料金：6,000 円/1時間 プロジェクト進行管理費用として、全体の20%。ハンバーガーメニュー、スムーススクロールなどについては無料だが、それ以外のJavaScriptやアニメーションは有料。CMS構築も追加料金。 コーディングラボ 18,000円/3,000pxまで 最低料金：50,000円 ページの縦の長さが長い場合には、3,000pxごとに＋10,000円。（11ページ以上の場合、上記の追加料金はかかりません。）スライダー、モーダルなどについては無料だが、それ以外のJavaScriptやアニメーションは有料。CMS構築も追加料金。 86CODING 9,980円/2,500pxまで なし ページの縦の長さが長い場合には、＋200円/100px毎JavaScriptやアニメーションの追加、CMS構築なども追加料金。オプション毎に費用が指定されているので、事前のチェックが必要。 ファイブスターコーディング 17,160円/5,000pxまでトップページは、33,000円/5,000pxまで 基本料金30,000円 ディレクション費用として、総額の20%一般的なJavaScriptなどについては無料。（仕様によっては別途見積もりになる場合もあり）納品後のサポート契約が必要な場合も別途費用。 各サービスにはそれぞれ強みがあるため、料金も様々です。 htmlコーディング代行会社を選ぶ際には、ご自分のプロジェクトに最適な代行会社を見つけてください。 この記事が皆様のプロジェクト成功への一助となれば幸いです。 --- - Published: 2024-11-11 - Modified: 2024-11-11 - URL: https://fastcoding.jp/blog/all/info/easy-scroll-animations-by-css/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: JavaScript, アニメーション 最近のWEBサイトでは、スクロールに合わせて要素がふわっと現れる「スクロールアニメーション」をよく見かけますよね。動きのあるデザインを加えることで、ユーザーの興味を引きつけ、ページにインパクトを与えることができます。ただ、JavaScriptの知識があまりないと「アニメーションの設定が複雑なのでは？」と感じる方も多いでしょう。 そこで今回は、私たち、ファストコーディングのようなコーディング専門会社に頼まなくても、手軽に導入できるスクロールアニメーションのライブラリを3つご紹介します。HTMLにクラスやデータ属性を追加するだけで動かせるものもあるため、JavaScriptに詳しくないWEBデザイナーや、インハウスでサイトを制作している方でも簡単に利用できます。 これらのライブラリで、ページのデザインに動きをプラスし、ワンランク上のWEBサイト作りに挑戦してみましょう！ 超簡単！ライブラリ使用+HTMLのみで実装できるスクロールアニメーション (1)AOS (Animate On Scroll) https://michalsnik. github. io/aos AOSは、ライブラリを読み込んでHTMLの要素にデータ属性（例: ）を追加するだけで、スクロールに合わせたシンプルなアニメーションが実装可能です。初心者向けで、簡単な設定だけで複数のアニメーションを実現できます。 ただし、シンプルなスクロールアニメーションに特化しているため『複雑なカスタマイズを行いたい場合』には適していません。ちゃちゃっと簡単にスクロールアニメーションを使いたいときに便利です。 おすすめの用途：シンプルなスクロールアニメーションを多数の要素に適用したい場合 AOS (Animate On Scroll)の導入方法 1ライブラリを読み込む 最も簡単な方法は、CDNを利用する方法です。以下のコードをHTMLのタグ内に追加してください。 CDNを使わず、ローカルに保存して使用する場合は、AOSのGitHubページからファイルをダウンロードして同様に読み込みます。 2AOSの初期化 AOSを有効にするため、JavaScriptで初期化を行います。タグを使い、AOS. initと記述するだけでOKです。このコードは、HTMLのタグ直前に記述すると良いでしょう。 AOS. init; 3HTML要素にアニメーションを追加する AOSでは、アニメーションを適用したいHTML要素にdata-aos属性を追加するだけで、さまざまなアニメーションを実現できます。 フェードインしながら上に移動します ズームインしながら表示されます 左に回転しながら表示されます このほかにも、data-aos属性には、以下のような値を指定できます。 fade、fade-up、fade-down、fade-left、fade-right flip-left、flip-right、flip-up、flip-down zoom-in、zoom-out 4オプションでアニメーションをカスタマイズする さらに、AOSにはオプション設定があり、細かくカスタマイズ可能です。以下のデータ属性を追加することで、アニメーションの速度や遅延、タイミングを変更することもできます。 4. 1 アニメーションの遅延 data-aos-delayを使うと、アニメーションの発動までの遅延を指定できます（単位はミリ秒）。 200ミリ秒遅れて表示されます 4. 2 アニメーションの持続時間 data-aos-durationを使用すると、アニメーションの実行時間を変更できます。 1秒かけて表示されます そのほかにも様々なパラメータが設定可能なので、ぜひ調べてみてくださいね。 (2)WOW. js + Animate. css https://wowjs. uk WOW. jsは、Animate. cssのアニメーションをスクロールでトリガーするためのライブラリで、HTMLのクラス指定だけでアニメーションを追加できます。wowクラスを追加し、data-wow-durationやdata-wow-delayなどのデータ属性を設定するだけで動作するため、設定が非常に簡単です。 一方で、Animate. cssのプリセットに依存するため、特定の動きや複雑なアニメーションには対応しにくいといった面も。 おすすめの用途：シンプルなスクロールアニメーションを少ない手間で実装したい場合 WOW. js + Animate. cssの導入方法 1ライブラリを読み込む 多彩なアニメーション効果が用意されているAnimate. cssと、スクロール位置に応じてAnimate. cssを発動させるWOW. jsはCDNを使って簡単に読み込めます。 Animate. cssを読み込むには、以下のスクリプトタグをHTMLファイルのタグ直前に追加してください。 Animate. cssをローカルに保存して利用したい場合は、公式サイトからファイルをダウンロードし、CSSファイルをプロジェクト内に配置して読み込みます。 WOW. jsを読み込むには、以下のスクリプトタグをHTMLファイルのタグ直前に追加してください。 WOW. jsをローカルに保存したい場合は、WOW. jsのGitHubページからダウンロードし、プロジェクト内に配置して読み込みます。 2WOW. jsの初期化 WOW. jsを有効にするために、JavaScriptで初期化を行います。以下のコードをタグ直前に記述してください。 new WOW. init; これで、WOW. jsがページ上で動作する準備が整いました。 3HTML要素にアニメーションを追加する Animate. cssとWOW. jsを組み合わせることで、HTML要素にクラスを追加するだけでスクロールアニメーションを設定できます。 3. 1基本的な設定 アニメーションを追加したい要素に、wowクラスとAnimate. cssのアニメーションクラス（例: animate__fadeIn）を指定します。以下のようにHTMLにクラスを追加するだけでOKです。 この要素がスクロール時にフェードインします 3. 1他のアニメーション例 Animate. cssには多彩なアニメーションが揃っており、以下のように設定できます。 フェードイン: animate__fadeIn スライドイン: animate__slideInLeft、animate__slideInRight ズームイン: animate__zoomIn 回転: animate__rotateIn 4オプションでアニメーションをカスタマイズする WOW. jsには、アニメーションの遅延や持続時間を設定するオプションが用意されています。以下のデータ属性を追加することで、アニメーションをカスタマイズできます。 4. 1 アニメーションの遅延 data-wow-delay属性を追加すると、アニメーションの開始までの遅延を指定できます（単位は秒）。 0. 5秒遅れてフェードインします 4. 2 アニメーションの持続時間 data-wow-duration属性を追加すると、アニメーションの実行時間を設定できます。 2秒かけてフェードインします 4. 3 スクロールアニメーションが発動するタイミングを調整 デフォルトでは、要素がビューポートに入ったときにすぐアニメーションが発動しますが、data-wow-offsetを指定すると、指定したピクセル分だけスクロールが進んでからアニメーションを開始させることができます。 この要素は、ビューポートに100px入ってからアニメーションが開始します。 (3)ScrollReveal https://scrollrevealjs. org ScrollRevealは、スクロールイベントに応じて要素が滑らかに現れるアニメーションを簡単に実装できるライブラリです。コードが少なく済むため、ウェブページをすっきりと保ちながら動的な演出を加えられます。 JavaScriptの知識やライブラリの学習が必要ですが、豊富なオプションも利用することで、複雑なインタラクションも実現できます。 おすすめの用途：特定のタイミングやエフェクトを駆使して、クリエイティブなアニメーションを作成したい場合（製品紹介ページ、ポートフォリオなど） ScrollRevealの導入方法 1ライブラリを読み込む ScrollRevealを簡単に利用する方法として、CDNを使う方法があります。以下のコードをHTMLのタグ内、またはタグ直前に追加してください。 ScrollRevealのファイルをダウンロードして、プロジェクト内に配置することも可能です。ScrollRevealの公式ページやGitHubからファイルをダウンロードしてください。ローカルに保存したファイルをHTMLに読み込みます。 2ScrollRevealの初期化 ScrollRevealを使用するには、ページのロード時に初期化が必要です。以下のコードをHTMLのタグ直前に追加します。 ScrollReveal. reveal('. reveal'); 上記のコードで、クラスがrevealの要素にアニメーションが適用されます。 3HTML要素にアニメーションを追加する アニメーションを追加したいHTML要素にrevealクラスを設定します。ScrollRevealは指定したクラスの要素にアニメーションを適用するので、他の要素には影響しません。 この要素がスクロール時にアニメーション表示されます 他の要素にも同様のアニメーションが適用されます 4アニメーションのカスタマイズ ScrollRevealでは、アニメーションの詳細をカスタマイズすることも可能です。以下のようなオプションを指定して、アニメーションの動きや遅延、持続時間などを調整できます。 4. 1 アニメーションの遅延 (delay) delayオプションで、アニメーションが始まるまでの遅延時間を指定できます（単位はミリ秒）。 ScrollReveal. reveal('. reveal', { delay: 500 }); この例では、500ミリ秒遅れてアニメーションが発動します。 4. 2 アニメーションの持続時間 (duration) durationオプションで、アニメーションの実行時間を調整できます（単位はミリ秒）。 ScrollReveal. reveal('. reveal', { duration: 1000 }); この例では、1秒かけてアニメーションが実行されます。 4. 3 アニメーションの距離 (distance) distanceオプションを指定して、アニメーションの移動距離を調整します。値は50pxや100pxなど、任意の距離を指定できます。 ScrollReveal. reveal('. reveal', { distance: '100px' }); この例では、100px移動しながらアニメーションが実行されます。 4. 4 アニメーションの方向 (origin) originオプションを指定すると、アニメーションの開始位置を変更できます。例えば、top、bottom、left、rightのいずれかを指定できます。 ScrollReveal. reveal('. reveal', { origin: 'left', distance: '50px' }); この例では、要素が左から50pxスライドしながら表示されます。 そのほかにも様々なオプションが設定可能なので、ぜひ調べてみてくださいね。 まとめ いかがでしたか？AOS、ScrollReveal、WOW. js + Animate. cssの3つのライブラリは、どれも手軽に導入でき、少ないコードで動きのあるページを作成できます。プロジェクトの用途やデザインの雰囲気に合わせて、適切なライブラリを選んでみてくださいね。 ただし、より複雑で独自性の高いアニメーションや、全体のデザインに統一感を持たせた動きの演出には、専門的な技術が求められる場合があります。そのような高度なアニメーションをご希望でしたら、ぜひ私たちのような専門のコーディング会社にご相談ください。貴社のブランドイメージにぴったり合った、プロフェッショナルなアニメーションデザインをご提案させていただきます。 --- - Published: 2024-09-09 - Modified: 2025-01-27 - URL: https://fastcoding.jp/blog/clients/arigatou/ - カテゴリー: ご契約者様専用 このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2024-08-21 - Modified: 2024-09-03 - URL: https://fastcoding.jp/blog/all/info/codingmerit/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: Web業界の動向, ディレクション, フロントエンド コーディング代行専業として、かれこれもう10年以上毎日コーディングを作っているのが弊社、ファストコーディングです。そんな中「それはコーディング代行に依頼した方が早いのに・・・」とか、逆に「こういうプロジェクトは社内でやった方がいいのになー」みたいな、コーディング代行をうまく使いこなせていないお客様に出会うことがあります。もちろん上手にお使いのお客様もいて、その違いってなんだろう、コーディング代行のメリットデメリットって何なんだろうって今更ながら自分たちで考えてみました。 ＜メリット＞ （社内にコーダーさんがいない場合）餅は餅屋に任せて、社内のスタッフはより得意なところを担当する コーダーが社内にいない場合に、デザイナーやエンジニアがコーディングも兼務している、という話はちょくちょく聞きます。しかしながら、簡易なHTML制作や修正ならまだしも、サイト全体の制作や複雑な動きの仕様／CMS／フォームシステムとの連動等を行うのであれば、やはり専門業者に任せた方がミスも無く品質も安心でき、結果的に安く済みます。デザイナーさんはデザインに、エンジニアさんはシステム設計や開発、という各分野で各々のスキルを発揮する方が、全体的な最適化につながって早く安くなるものです。 また一口にコーディングといっても、その品質の定義は結構複雑です。今の時代マルチデバイスですので、どんなデバイスでユーザが見るか分からないし（＝どんなデバイスでも崩れてはいけない）、表示速度が遅ければユーザの離脱やSEOの品質を下げてしまうため、ただHTMLやCSSを書くのではなく、より「効果のある」HTMLやCSSを制作しなければなりません。 このあたりは日進月歩で変わっていく世界ですので、常に最新情報をキャッチアップするのも一苦労です。ある程度の規模があれば、やはり「餅は餅屋」でコーディング代行会社に頼んでみるのがベストだと思います。 （社内にコーダーさんがいる場合）プロジェクトの規模感、ページ数の多さで社内か社外のコーディング代行会社の利用にするかを決める コーダーが社内にいる場合は、なるだけ社内のコーダーで作業をする方が、外部へ支払うコストを削減できて効率的、と考えると思います。しかしながらこの考え方も、ひとえに「プロジェクトの大きさ」による、と言えるのではないでしょうか。 社内のコーダーに空きがあったとしても、それは緊急のプロジェクトや、急な修正の対応を行うために確保しておくという考え方もあります。また規模が大きいプロジェクトの場合は、複数の人間でまとめて素早く対応する方が結果的にコストも抑えられる場合もあります。例えばパターンが決まっているページを大量に作成する、パーツ集が既にある場合にそのパーツを使った複製をする。並行して進めてスケジュールを短縮しなければならない等、上手に社内と社外を使い分けていらっしゃるディレクタ様もいらっしゃいます。 デザイン制作とコーディング制作を並行して進める場合はコーディング代行に任せた方がいい WEB制作になると最初に企画やデザインフェーズがあり、その後構築フェーズとしてコーディングやCMS開発、サーバ設置等が進んでいきます。しかしながらデザインフェーズと構築フェーズを同時に、なんてこともありませんか？たぶん結構ある話ではないかなと思います。こういった場合、これは断言できますがフェーズを2つの会社で並行するのが「成功する秘訣」です。 「なんで？」と思われるのではないでしょうか。社内にリソースがあるなら、社内で全部やればいいじゃないか、とも思われると思いますが、実際弊社に依頼いただいたお客様の声をお借りすると、社内で並行して作業を進める場合は色々問題が起きるそうです。 例えばよく聞くのが「デザインが途中で変わったときに、コーディングも併せて変えなければならない」場合です。この場合、通常のコーディング制作と並行して、今まで作ったコーディングの修正も行わなければなりませんが、同じコーダーさんが両方の仕事を並行する、というのはなかなか大変なものです。細かい表示確認や、修正による他のページへの影響が出ていないかの確認を、新規のコーディング作業と並行するのは至難の業、と言えます。 コーディング代行会社には、修正専門のチームや品質管理チームがコーディング制作チームとは別になっていることが多いと思います（弊社がそうです）。ですので、途中のデザイン変更もやりやすく、またスピードも速いことが多いです。社内はあくまで仕様の変更に対する企画やデザイン変更に注力し、その結果を随時外部のコーデイング代行会社に渡していく、この業務の流れがプロジェクトを成功させる秘訣だったりします。 最新のWEBサイトの作り方を知っているかどうか WEBサイト制作を企画する時、見た目やデザインに関わる部分はデザイナーさんと協議しても、それをどうやって実装するのかが分からないことは無いでしょうか。流行りのデザインや、同業他社で気になるアニメーションやサイトの機能を提案したくても、実際どのぐらい時間がかかるのか、そもそもどうやって作るのかといった部分は、お客様へ提案する前に押さえておかないといけません。提案してからできませんとは言えないですからね。そういった流行や最新のサイトの作り方を理解しているのも、コーディング制作を専業にしているコーディング代行会社にならではの特長です。 意外に難しい！？サーバの知識 WEBサイトを作る上でなくてはならないのは、WEBサーバ、です。世の中にはたくさんのサーバがあり、契約形態やサービスの提供形態の違いでレンタルサーバと呼ばれたり、クラウドと呼ばれたり、SaaSやPaaS等の呼称だったりと、実際なんなの？どれがいいの？と思われるのではないでしょうか。また価格帯も様々ですし、初期設定が必要なのかどうか、ドメインの設定はどうするのか、WordPressやMovableTypeといったCMSを使うことができるのか、セキュリティはどうなっているのか、、、など、気になることはたくさんあって、各サーバ会社に問い合わせて比較していくのも一苦労ですね。 これもまた「コーディング制作」専業のコーディング代行会社に聞くのが一番ではないかと思っています。というのも、コーディング代行会社は日々新しいサイト制作や既存サイトの運用を行っており、おのずとたくさんの種類のサーバに触れながら作業を進めています。サーバによる価格や性能を含めた違いを、日々肌で理解しているのがコーディング代行会社でもあるのです。 制作するWEBサイトの仕様や規模、また制作後の運用の体制も含めた場合に、どういうサーバ構成が必要なのかという点は、プロジェクトを開始する前にコーディング代行会社に聞いてみるというのもお勧めです。 ＜デメリット＞ ちょっとした修正には向かないかもしれない・・・ コーディングのプロ集団であるコーディング代行会社ですが、とはいえ、いわゆる外注さんになりますのでリソースが空いているかどうかで、依頼できるかどうかも決まります。そんななか、ちょっとした修正であれば、ささっと終わらせてしまいたい！と思うのが常ですが、そういうのを依頼してしまうと割高だったり時間がかかったりすることもあります。 やっぱり隣にいるコーダーよりは、スピードは遅い。。 どうしても外部の会社、になってしまうコーディング代行ですから、同じオフィスで隣にコーダーさんがいるのに比べればコミュニケーションのスピードは落ちます。ですので急ぎの対応や、日々仕様変更が起きるような状態のプロジェクトですと、なかなかメリットを発揮できないと思います。 デザインも丸投げしたい、となるとコーディング代行会社では難しい コーディング代行会社は基本的にはコーダーやJavaScriptエンジニア、テスター等が在籍する会社で、UIUXやWebデザインを行うデザイナーやプランナーはいないことが通例です。ここも逆に言えば「餅は餅屋」で、そういったサイト全体を任せたいとなるのであればWEB制作会社にそのまま全て依頼することが多いようです。 プロジェクトや案件に応じて、コーディング代行を上手に使いこなせば、WEB制作プロジェクトはとても効率的になるんです（なのでコーディング代行の商売をもう10年以上させていただいております。皆様ありがとうございます）。もしどのプロジェクトで使うべきか分からない！という場合は、お気軽にお電話またはフォームからお問い合わせください！ --- - Published: 2024-08-20 - Modified: 2024-09-16 - URL: https://fastcoding.jp/blog/all/info/beginner-series04/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: Web業界の動向, ディレクション, フロントエンド コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章、最終章です！ 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわからないことも多いこの代行サービスを、今回はシリーズ化して詳しく解説しています。 前回は、HTMLコーディング代行サービスの選び方についてお話させていただきました。 今回は最終章ですので、みなさまがお持ちであろう「コーディング代行サービス」に対してのよくある質問について、まとめて回答します！ 【第４章】よくある質問についてまとめて回答します！ 第１章から第３章までで解説した内容も含めて、よくある質問やお悩みを解決します。今後コーディング代行サービスを利用とされる皆さまがサービスについてより深く理解できるようサポートします！ コーディングを外注する流れに関する質問 Qコーディング代行サービスを利用する手順はどのようになりますか？ まずはコーディング代行サービスのウェブサイトから「見積もり」を依頼しましょう。見積もりの際はできるだけ詳細に、正確に、仕様を伝えるようにしましょう。（ここで内容をきっちり伝えないと、後から追加で料金が発生する場合もあるので、注意です！） もらった見積もりに問題がなければ、注文手続き（必要があればNDAの締結等も）をし、デザインデータやコーディングの仕様についてのやりとりや打ち合わせを経て、コーディングがスタートします。 コーディング代行サービスを使い慣れている場合は、ここまでの流れはサッと進みますが、初めて利用する場合は、お問い合わせ（見積もり依頼）を行ってから実際のコーディング開始まではある程度時間がかかります。コーディング代行サービスを利用しようと思っている場合は、コーディング開始前にあらかじめ時間を確保しておくことをおすすめします。 コーディング作業完了後は、チェックや修正のやりとりを経て、最終的に納品されます。 （修正のやりとりが少なくなればなるほど効率が良くなります！事前の情報のすり合わせや打ち合わせが大切です） Q見積もりはどのように依頼すれば良いですか？ 一般的には、各社のウェブサイト上にある専用の見積もりフォームやお問い合わせフォームなどから依頼します。 ただ、最初は何をどう依頼したら良いかわからないこともあると思います。そんな場合は、まず打ち合わせをして口頭で要件を伝えてみましょう。 オンラインでの打ち合わせに対応しているコーディング代行サービスを選択すれば、空いた時間にパッと打ち合わせもできるので効率的ですね！ファストコーディングでは、オンライン打ち合わせにも対応しています。ご希望の方は、こちらから！ 見積もりの段階で必要は情報は、一番に「ページ数」です。サイトマップやワイヤーフレームなどのプロジェクト全体の雰囲気が分かるものがあればなお良いですが、最低限ページ数が分かれば大丈夫です。あくまでも見積もりなので、サイトマップやワイヤーフレームなども完全なデータの必要はありませんのでご安心ください。 Q契約の手続きや注意点は何ですか？ 一般的には、オンラインでの注文書のやりとり（フォームなど）や、電子契約で済ませることが多いです。 その際の契約内容に、どういった制作をいつまでに行うかが記載されているので、間違いないかどうかを必ず確認するようにしましょう。 またプロジェクトによっては、まだ公開前のデザインデータのやり取りがあったり、エンドクライアントの名前を伝える必要がある場合もあるので、秘密保持に関するルールやポリシーが契約に含まれているかどうかも必ず確認しましょう。 秘密保持に関する内容が契約に含まれていないコーディング代行サービスはほとんどないとは思いますが、内容が大まかであったり、契約終了時の情報の取り扱い（やり取りした情報は、終了後にちゃんと全て破棄してくれるかどうか）が曖昧な場合もあるため、特に注意して確認する必要があります。 ちなみにファストコーディングでは、ISMS認証を取得しているので安心してご依頼いただけます！ Qデザインデータの形式に制限はありますか？ コーディング代行会社によってかなりばらつきがあります。というのも、デザインソフトウェア自体も有料なので、コーディング代行サービスによっては取り扱っていないという場合もあります。 ご自身で使っているデザインソフトウェアに対応しているコーディング代行サービスかは必ず確認しましょう。 最近はFigmaやSketchといったオンラインのデザインツールもよく使われるので、そういったオンラインでのリンク共有によるデザインデータの入稿にも対応しているかどうかはあらかじめ確認が必要です。 ちなみに、ファストコーディングでは全て対応しています！！ Q納品までのスケジュールはどのように設定されますか？ 基本的には、「ページ数」や各ページの「縦の長さ」に比例して制作のスケジュールが決まります。ファストコーディングの場合は、おおよそ10ページで5営業日程度です。ファストコーディングでの納期の目安はこちら！ それに加え、ページ毎の仕様によっては追加の日数がかかることもあります。 例えば、表示アニメーションがあったり、データの動的な検索／フィルタ機能があったり、メールフォームやマイページ機能があったりのように、WordPressやMovableType等のCMSやKintone、Salesforce等のデータベースと連携が必要になれば、その仕様によって制作日数が変わってきます。 その場合は、事前に打ち合わせをして確認するのがおすすめです。ファストコーディングでは、事前に打ち合わせが可能です！ Qデザインや仕様の変更がある場合はどうしたらいいでしょうか？ まずは、コーディング代行サービスの担当のディレクターに連絡をしましょう。 コーディングが開始されてから変更を伝えるのはちょっと気が引けるかもしれませんが、コーディングを専門におこなっている代行会社はそういったことには慣れているので全然問題ありません！むしろ、変更が決まった時点で出来る限り早く連絡をすることが一番大切です。早ければ早いほど調整もしやすく、コーディング全体のスケジュールへの影響も抑えることができます。 Q納品方法はどのようになりますか？ 一般的には、コーディングの際に作成したすべてのファイルをまとめて送ってもらうこと＝納品です。ZIP形式に圧縮して、ファイル転送ツールで送ってもらう、といった形が一般的です。 しかし、そのまま公開作業までコーディング代行サービスに依頼して、サーバにアップロードして納品してもらう、という方法もほとんどのコーデイング代行サービスで可能です。その場合はサーバのアクセス情報（FTP情報、SSH情報等）を提供する必要があります。 またプロジェクトによっては、GITHUBやBitBucket等にgitで納品してほしいというケースもあるでしょう。制作後のソースコードを別のシステムへ取り込む場合や、一部のページの改修を依頼した場合は、gitを使うことでソースコードの管理がかなり楽になります。 gitを使った納品はコーデイング代行会社によって出来るor出来ないがあると思いますので、事前に確認しましょう。 ちなみに、ファストは全部できます！お気軽にご依頼ください。 コーディングの品質に関する質問 QSEO対策はどの程度行われていますか？ 一般的には、基本的なSEO対応（メタタグ設定、HTML5によるコーディングなど）は対応してくれるコーディング代行サービスが多いです。ただ、ページ速度最適化などについては標準で対応しているコーディング代行サービスは少ないですので、基本の料金内でどこまで対策してもらえるのかは事前に確認が必要です。 ちなみにファストコーディングは、コーディングの質＝SEOに対する強さだと考えています。 一般的なSEO対応は勿論のこと、セマンティックコーディングやページスピードを意識したCSS制作をおこない、「SEOで上位を狙うためのコーディング」を常に意識して制作を行っています。もちろんこれは標準で全てのプロジェクトに対して行っています。 詳しくは、こちらをご覧ください。 Qレスポンシブコーディングに対応していますか？ 一般的には、すべてのデバイスでの表示を考慮したレスポンシブコーディングに対応しているコーディング代行サービスがほとんどです。スマートフォン、タブレット、デスクトップでの動作確認も行います。ただし、リキッドレイアウトとレスポンシブコーディングは異なりますので、見積もりの際にしっかり確認することが必要です。 またレスポンシブコーディングといっても、それを実現するためのCSSの書き方にはいろいろ種類があります。 どんな書き方でも見え方は同じですが、SEOに大きく影響するコアウェブバイタル（ページスピード）を考えたCSSの作りかたを意識しているかがとても大事です。 ファストコーディングでは、コアウェブバイタル対策を自社で行っているほど、コアウェブバイタルやページスピード対策を日々研究していますので、単なるレスポンシブコーディングではない、SEOに効果のあるレスポンシブコーディングを提供します！ Qクロスブラウザテストは行われますか？ 一般的には、主要なブラウザ（Chrome、Firefox、Safari、Edge）の最新のOS、ブラウザのバージョンでの動作確認を行います。特定のバージョン対応も可能な場合もあります。ただし、実機での確認がされるかどうかはコーディング代行サービスによって異なりますので、あらかじめ確認が必要です。 特に細かいバージョン違いやパソコン環境の場合は、ウィンドウの大きさによって発生するバグ／表示崩れなどがありますので、どんなOSやブラウザでチェックするかに加えて、どういったテスト項目をチェックしているか、という細かいレベルまで確認できたほうが安心だと思います。 ファストコーディングの場合は、品質管理チームが、いろいろな環境でウィンドウサイズを変えたり、マウスでのホバーやスクロール操作をしたときの挙動を確認したりと、細かいテスト項目に沿ってチェックをしていますので、どんな環境でも崩れがないコーディングをご提供しています！ Qアクセシビリティの基準は何ですか？対応してもらえますか？ WCAG（Web Content Accessibility Guidelines）に準拠したコーディングを行い、すべてのユーザーがアクセスしやすいウェブサイトを提供してくれるコーディング代行サービスもあります。ただし標準で対応していないコーディング代行サービスもありますので、必要であれば事前に確認しましょう。 なお、ファストコーディングでは、一般的なウェブアクセシビリティ対策は全てのプロジェクトに対して標準で実施しています。 どんな内容が実施されているのか、細かい基準が知りたい方は是非お問い合わせください！ Qコーディングルールの指定や、フォルダ構成の指定は可能ですか？ 事前に依頼があれば、独自のコーディングルールに則った制作は可能な場合もあります。ただし、対応していない場合や、追加で費用がかかる場合もありますので、事前に確認が必要です。 ファストコーディングでは、コーディングルールの持ち込みにも対応していますので、お問い合わせいただいた際にその旨をお伝えください。 ※ちなみにファストコーディング自体のコーディングルールはSMACCSとFLOCSSの2種類が標準となっており、制作時にお選びいただけます。 その他の質問 Q見積もりをしてもらった後にキャンセルはできますか？ あくまで見積もりですので、キャンセルは可能です。 注文書のやりとりなどの契約が完了した後でのキャンセルは、その契約内容によりますのでご注意ください。 Qデータのセキュリティはどのように確保されていますか？ コーディング代行サービスによってそれぞれですので、確かなことは分かりかねますが、ファストコーディングに関してはISMS認証を取得しているため、お客様の情報やデザインデータ、またエンドクライアント様の情報等すべてにおいて、セキュリティポリシーに則って適切に取り扱っております。 実はコーディング代行会社でもISMS認証を持っている会社は弊社だけ（2024年調べ）です。認証が絶対とはいえませんが、こういった取り組みは弊社は以前から行っており、セキュリティには一番気を遣っています！ Q修正回数に制限はありますか？ コーディング代行サービスによって異なるため一概には言えませんが、一般的には、追加料金を含めれば無制限で可能です。ただし、初期の見積もりの範囲内での修正対応につきましては、最初の契約時に決まっていることが多いため、ご確認ください。 また当然のことながら、修正をすることによってそのプロジェクトの進行速度は落ちます。ですので、あらかじめ修正がいつ頃にどの程度ありそうなのか把握した上で制作開始前にご相談いただけましたら、それに合わせた対応が可能ですので、進行速度への影響も最低限で抑えられます。 修正が必要なプロジェクトの場合は、ぜひ事前にご相談ください。 Q納品後のサポートはどのようになっていますか？ 納品後も不明点やご質問についてはいつでもサポートが可能ですので、お気軽にご質問ください！ ただし、バグがあって修正が必要な場合、納品直後は対応可能ですが、ご自身で内容を変更されたりお時間が経った後ですと対応できなくなる場合もありますので、納品物については必ず直後に念入りにチェックをお願いいたします。 Q対応できるプロジェクトの規模や範囲はどのくらいですか？ どんな規模のプロジェクトでも対応可能です。 コーディング代行サービスによって得意とするプロジェクト規模もありますので、各ウェブサイトの実績などを確認すると良いでしょう。 ちなみにファストコーディングでは、少数ページから、大量ページのコーディングにも柔軟に対応しています！ Q外部のプラグインやツールとの統合は可能ですか？ 一般的には対応可能ですが、何ができて何ができないのか、費用がどのくらい変わるのか、代わりに別のツールで代用することは可能なのかなど、ご自身で把握された上で事前に打ち合わせで確認する必要があります。特定のツールなどの統合が必要な場合は、事前に打ち合わせで相談できると安心ですね。 ファストコーディングでは、事前に打ち合わせが可能です！ 全4回に渡って「コーディング代行サービス」について解説してきましたが、いかがでしたでしょうか。「コーディング代行サービス」についての理解は深まりましたでしょうか？ 最初はハードルが高いように感じられるかもしれませんが、何度も使っていただければ病みつきに！皆さまの良きパートナーになること間違いなしです！！ ぜひ「コーディング代行サービス」を利用して、時間を短縮！して、プロジェクトも円滑に進めていただければと思います。 弊社も、皆さまのお力になるべく日々精進しております！気になった方は、ぜひお問い合わせください！！ FASTCODING お見積もりはこちらから！ --- - Published: 2024-08-05 - Modified: 2024-09-02 - URL: https://fastcoding.jp/blog/all/info/designwidth-202408/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: Webサイト横幅サイズ, コンテンツ幅, ファーストビュー, ブレイクポイント, 推奨フォントサイズ こんにちは。FASTCODINGデザイナーの七転び八重子です。 定期開催のこちらのテーマ、昨年の12月からどう変化があったのか、早速チェックしていきます。 今回は、ブレイクポイントも合わせて確認します。 参考サイト ： statcounter ブレイクポイントについて レスポンシブデザインでWeb制作をする際、 パソコン・タブレット・スマホといったデバイスの画面サイズに合わせて、ユーザーが見やすいようにWebサイトの表示を変えます。 この表示を切り替えるポイントをブレイクポイントといいます。 レスポンシブデザインの詳しい解説は過去の記事を参照： 「レスポンシブデザインとリキッドデザインの違いを明確にしよう！」 Webサイト横幅について Webサイトをデザインする際に、まず最初に決めるのがコンテンツ幅（Webサイトの幅）です。 ・デスクトップ用 ・タブレット用 ・モバイル用 基本は、この3つのデバイスそれぞれ、コンテンツ幅を決めます。 ファーストビューについて ファーストビューは、ユーザーがWebページを表示したときに最初に目に入るエリアのことです。 スクロールなしで表示されている範囲なので、キービジュアルやキャッチフレーズは、その範囲（高さ）に収まっていることが理想的です。 早速ですが、結論からいきましょう PC ブレイクポイント：w960px〜w1280px Webサイト横幅：w1200px ファーストビュー：h750px アートボードサイズ：w1600〜w1920px 昨年と違い、ラップトップとデスクトップを分けず、PCという括りで一緒の数値を決めました。 背景には、デスクトップの利用者が減少傾向にあることと、大きな画面いっぱいにウィンドウを広げない、複数のウィンドウを同時に立ち上げるケースが多いことを想定しました。 タブレット ブレイクポイント：w768px〜w960px Webサイト横幅：w768px ファーストビュー：h1000px アートボードサイズ：w768pxジャスト ふと思ったのですが、タブレットって縦に使いますか？横に使いますか？私の場合、横に使うことが多いです。 横向きにした場合はPC用のデザインが表示されますね。 モバイル ブレイクポイント：375px〜430px コンテンツ幅：360px ファーストビュー：800px アートボードサイズ：360pxジャスト 推奨フォントサイズ こちら変わらず、PC・モバイルともに16pxがGoogleが推奨するフォントサイズです。 まとめ デバイスサイズは、使いやすいサイズが安定してきており、ここから大きな変更は当分ないように思います。 とはいえ、また半年後に定期開催予定です。 ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2024-07-16 - Modified: 2024-10-17 - URL: https://fastcoding.jp/blog/all/info/beginner-series03/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: HTML, Web業界の動向, フロントエンド コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章の第3弾です！ 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわからないことも多いこの代行サービスを、今回はシリーズ化して詳しく解説しています。 前回は、HTMLコーディング代行サービスを使っているのはどんな人なのかについてお話させていただきました。 今回は逆に、「コーディング代行サービス」を提供している会社はどんな会社なのかや、コーディング代行サービスを選ぶ際のポイントについてご案内します！ 【第３章】コーディング代行サービスの選び方 「コーディング代行」でウェブ検索すると、かなりの数のコーディング代行会社がヒットします。色々特徴もあるようだけど、でも初めてだと何が良いのか・・・ そこで！この章ではそんなお悩みに応えるべく、コーディング代行サービスを選ぶ際のポイントや注意点をまとめてみました。 実際に選ぶ際にぜひ参考にして自分にぴったりなコーディング代行会社を見つけてください！ コーディング代行サービス選ぶ際のポイント 弊社自身もコーディング代行会社の１つです。ですので、この業界のことも同業の他の会社さんのこともしっかりと日々研究しております！ その観点から見まして、以下の７つのポイントがとっても大事だと思います。このポイントに絞って各社をチェックすれば、安心して自身のプロジェクトを任せられること間違いなし！ 1. HTMLコーディングとCSSを使った、デザインの再現能力 やはり、何といっても一番重要なポイントは、そのコーディング代行サービスの持つ技術力と専門知識ですが、具体的には、 レスポンシブコーディングを使って「どんなデバイスやブラウザでも」きれいに表示できるか レスポンシブコーディングを使ってパソコンやスマートフォン、タブレットできれいに見せる、これ自体はもう当たり前で、できないコーディング代行会社はほぼないと思います。でも実は「どんなデバイスやブラウザでも」きれいに表示させられるか、は結構難易度の高いことなんです。 一口にパソコンやスマートフォン、タブレットと言っても、実際に画面の大きさはとてもたくさんの種類があります。また、パソコンであれば画面の大きさ自体はマウスでも変えていけますので、事実上は無限にあると言えます。そんな色々な画面サイズで表示しても絶対に崩れず、また元のデザインと同じように見せることができるかが、コーディング代行会社の腕の見せ所です！ 実際、コーディング代行サービスの世界では「パーフェクトピクセル」という言葉を使います。これはデザインデータと見比べて1pxの違いも無くブラウザ上で再現することを意味します。パーフェクトピクセルで作成しないと、デザインと若干違う、、、コーディングが仕上がってしまうので、依頼を検討しているコーディング代行会社がパーフェクトピクセルに対応しているかどうかは必ず確認しましょう。 2. SEOやページ表示速度に関する知識と経験 コーディング代行サービスを選ぶ際には、そのコーディング代行会社がSEOやページ表示速度に関する知識や経験を持っているかどうかも確認してください。いまやWEBサイトを作る際は必ず考えるSEOですが、これも、コーディングと密接に関係しているんです。 まずは基礎中の基礎になりますが、、「SEOフレンドリー」なHTMLやCSSを理解しているか、という点を確認してください。「SEOフレンドリー」という言葉はもう古い言葉ですが、SEO自体が未だ日進月歩で進化しているので、この言葉がさす意味もどんどん変わっています。単にHTMLやCSSのエラーが無いという話だけではなく（それは当たり前のことで）、検索エンジンが読みやすくて理解しやすいのはどういう構造なのか、を考えてコーディングをしなければならないんです。 またページの表示速度が遅いのも最近のSEOではご法度です。Googleはページ表示速度をランキング要因として重視していて、ほんの0. 数秒速度が変わるだけで、検索結果でのランキングが下がり、ウェブサイトの訪問者数が激減する、ということもあるんです。この表示速度は、コーディングとかなり関係していて、同じデザインでもコーディングの書き方が違えば、速度は相当変わります。 簡単にですが、コーディング代行会社がSEOに強いコーディングを行うためには、以下のポイントを理解しているかが重要です。 CSSやJavaScriptの最適化：コードの圧縮（ミニファイ化）や不要なファイルの削除といった基礎に加えて、「表示される領域」の順序と内容に応じて、コードの構造と書き込む位置を工夫しているか、というような細かなところまで配慮することにより、ページの読み込み速度を向上させます。 画像の最適化：適切なサイズの画像を使用し、必要に応じて新しいフォーマット（例：WebP）に変換することで、画像の読み込み時間を短縮します。単に画像ファイルの大きさを小さくする、ではなく、ちょうどいい具合のサイズと品質を保てるようにコーディングをするというのが腕の見せ所です。 JavaScriptの最適化：いまやWEBサイトを作る上では必ず利用されるJavaScriptですが、これもどう書くかで、相当ページスピードが変わってきます。大まかに言えば「動作するタイミングの調整」になります。 これらの対策ですが、実際の内容はかなり難解ですので、まずは質問をしてみて分かりやすい回答が出せるかどうか、で各社を比較してみるといいんじゃないかと思います。 3. 実績やお客様の声などの他社事例があるかどうか どんなサービスでも共通ですが、やはり実績やレビューがあるかは大事です。実績が豊富であることは、信頼性の証です。多くのプロジェクトを成功させている企業は、さまざまな課題に対応できる力を持っています。 コーディング代行会社のホームページに、実際に利用した方の声や制作実績が掲載されている場合は、安心できると思います。特にどういうプロジェクトでどういう対応だったか、というような具体的なやり取りの話が書いてある場合、そのコーディング代行会社と依頼主のクライアントとはとてもコミュニケーションが取れていて、情報を掲載することに許可を得られているということなので、すなわち満足度が高い結果と考えられます。 4. 料金体系の明確さ 多くのコーディング代行会社の料金は以下のように設定されています。 初期費用＋ページ数やページの長さに応じたページ毎の費用＋オプション費用 初期費用は会社によってかなりばらつきがあります。まったく費用のかからない会社もあれば、コーディングの種類によって変わる場合もあるようです。 →レスポンシブコーディングなのかリキッドコーディングなのか等。詳しくは、こちらのブログを参照してください ページ数や長さによる料金体系は各社ともおおよそ似ているのですが、ページ数が増えるとボリュームディスカウントがある場合もあります（弊社もそうです） 一番各社で違いがあらわれるのが、オプション費用です。 まず、そもそも何が標準料金内でできて、何がオプション（追加）になるのかという定義が、コーディング代行会社毎にばらばらです。会社によってはページ内のスライダー1つからオプションになる場合もあります。 この部分が各コーディング代行会社によって料金がばらつく最も大きな要因です。 なので、どうしても見積もりを取らないと確実な金額は分からない、でも比較をする段階では細かく仕様を伝えるのも一苦労。。 そういう時に使いやすいのが「自社のホームページと（もしくは〇〇のサイトと、、）同じものを作ったらいくらになりますか？」という質問です。（弊社でも本当によくこの質問をいただきます） つまり今あるホームページを1つ伝えて、それと同じウェブサイトならいくらで作れますか？という聞き方をするのです。もちろん概算になるとは思いますが、そこでオプションの詳細もわかりますし、実際概算であっても金額の比較ができて外注依頼先を絞り込みやすくなると思います。 ホームページに書いてある料金表の値段だけではなく、実際に見積もりを取ってみて詳細に料金の明確さをチェックしてみてください！ 5. サポート体制 コーディング代行サービスを利用するにあたって、窓口となる担当営業や担当ディレクタがいるかどうかもポイントのひとつです。 担当がいなくて、質問すると毎回違う人から連絡があったり、聞きたいことがある時にどこに連絡をしたら良いかわからない、という場合はかなり危険です。というのも、プロジェクトごとに専任の担当がいなければ、そのプロジェクトの仕様の理解も薄くなり、間違ったコーディングが納品されることに繋がるからです。 また、連絡手段がメールだけではなく、電話やコミュニケーションツール（SlackやChatworkなど）にも対応しているかどうかも重要です。どのようなコミュニケーションツールが利用可能かを前もって確認しておくと良いでしょう。 さらに、対面も含めた打ち合わせができるかどうかも確認しておきましょう。最近はオンラインミーディングが主流ですが、規模の大きいプロジェクトや期間の長いプロジェクトの場合は、キックオフミーティングは実際に会って細かい仕様を確認した方が後々の安心感が変わってきます。 拠点が複数ある会社ですと比較的打ち合わせがしやすいので、その点もチェックしてみると良いかもしれません。 コーディング代行サービスは、技術力も大切ですがコミュニケーションや進捗管理も同じくらい大切です。プロジェクト管理やコミュニケーションツールが適切に整っているかどうか、コミュニケーションは綿密に取れるかどうかを確認することは、依頼をする前に確認をしておくべきです。 6. テスト環境がしっかり揃っているか コーディング代行会社のテスト環境がしっかりと整っていることも非常に大切です。適切なテスト環境がないと、ウェブサイトが期待通りに動作しない可能性があり、結果としてユーザーエクスペリエンスが損なわれることがあります。 まず、テストするデバイスやOS、ブラウザのバージョンがしっかりと決められているかどうかを確認することが必要です。異なるデバイスやOS、ブラウザでの動作確認を行うことで、ウェブサイトがどの環境でも一貫して正しく表示され、機能することを保証できます。例えば、最新のiOSやAndroidデバイス、WindowsやmacOSの異なるバージョン、そして主要なブラウザ（Chrome、Firefox、Safari、Edgeなど）の最新バージョンでのテストが必要です。だいたいは、各社のWebサイトに書いてありますが、記載が無い場合は要注意（・・・書かない理由があるはず）ですね。 また、プロジェクトによっては、特定の機種やバージョンでのチェックが特に重要になる場合があります。例えば、特定の業界向けのウェブサイトでは、その業界で広く使用されている特定のデバイスやOSバージョンでの動作確認が求められることがあります。こういったイレギュラーな対応も可能かどうかを確認することが重要です。 7. セキュリティ対策 意外と見落としがちですが、セキュリティ対策もコーディング代行サービスを選ぶ際に非常に重要なポイントのひとつです。HTMLコーディングだから、個人情報とか無いから大丈夫じゃないの？って思われがちですが、それは間違っています。 そもそもコーディング代行を依頼するからには、コーディングの情報のみならず、お取引の情報だったり、エンドクライアント様のお名前だったり、結構シビアな情報のやり取りが含まれます。またサーバへの公開作業も依頼しているとなると、情報セキュリティに対する認証や証明を取得している会社を選ばなければ依頼する側のリスクにもなりますね。 一番簡単なチェック方法は、そのコーディング代行会社がISMS（情報セキュリティマネジメントシステム）やPマーク（プライバシーマーク）などの情報セキュリティに関する認証や証明を取得しているかどうかです。それらの証明を取得しているコーディング代行会社であれば安心して機密情報の受け渡しができますので、必ずチェックしましょう。 ※ISMSとPマークは、いずれも情報セキュリティを強化し、法令遵守を確実にするための重要な認証制度です。ISMSは情報セキュリティ全般を管理する包括的なフレームワークであり、Pマークは特に個人情報保護に焦点を当てた制度です。いずれも似通ってはいますが、少なくともどちらか1つはITの世界ではもはや必須、と言える認証制度です コーディング代行サービスを選ぶ際の注意点 次に、コーディング代行サービスを選ぶにあたって特に注意することを5つあげました。意外と見落としがちな注意点もあるので、ぜひ参考にしてください！ 1. 過度な安さには注意 コーディング代行サービスを選ぶ際、あまりにも安いサービスには注意が必要です。結局は人手で作るわけですから、価格が極端に低い場合、なかなか人手がかかっていない、チェック体制が薄いなどの問題がある可能性もあります。 やはり価格だけで選ぶのではなく、サービスの品質や実績、評判を総合的に評価して選択するべきです。適正な価格で高品質なサービスを提供するコーディング代行会社を見つけるためには、料金と提供されるコーディングの品質のバランスを考慮することが不可欠です。価格が適正であるかどうかを判断するためにも、やはり概算でもいいのでお見積りを取ってみるのがベストだと思います。 2. 電話番号が無い会社は要注意 上記「5. サポート体制」の項目でもお伝えしましたが、基本メール対応のみとなっている場合は十分に注意をしてください。というのも、ウェブサイト制作のプロジェクトというのはスケジュールがどうしても押しがちで、「急遽デザインやスケジュールが変わって急ぎで対応しなければいけなくなった」「今日中になんとか終わらせたい」「今！これを変更したい」、というようなこともよくありませんか？ しかし、メールやオンラインチャットだけですとそういった急を要する対応はできません。そういった予定外（想定外）の事態にも対応できる電話番号を公開しているコーディング代行会社を選びたいものですね。 3. 納品後の保証期間 コーディング代行サービスを利用する場合には、納品後の保証期間が設定されているかどうかも確認しましょう。保証期間内にバグが発生した場合、その修正に対応してもらえるかどうかを事前に確認する必要があります。保証期間があることで、納品後に発生する問題に対して安心して対応を依頼することができます。保証期間が設定されているかどうかは、契約書やサービスの詳細に記載されていることが一般的です。 保証期間が長いサービス＝提供者が自身の品質に自信を持っている証拠ともいえます。また、保証期間内にバグ修正が迅速に行われるかどうかも重要なポイントです。納品後のサポート体制は、依頼前はあんまり気にならないものなんですが、結構後でもめる要因にもなりますので、しっかり確認はしておいてください。 4. 納品物の所有権 納品物の所有権が納品後に自身（もしくは自身の会社）に移行されるかどうかも事前に確認しておきましょう。特に「制作環境のファイルも一式納品してもらえるか」は、聞いておいてください。 この「制作環境のファイル」って何か。これは最近のコーディング制作ではHTMLやCSSを直接書くのではなく、手早く且つバグを少なくすることのできる書き方があるんです。今の時代はきっと主流の制作方法だと思いますが、この方法はいわば元ファイル（＝制作環境のファイル）とHTML/CSSの最終ファイルの2種類ができあがります。そして元ファイルが無ければ、HTML/CSSの修正ができないか、相当やりづらくなるんです。 弊社でもよく（助けてくださいと駆け込んでこられるパターンで多いのが、、）、このうち「最終のファイル」だけしか納品されず、制作環境のファイルがないので、結果自分たちで修正ができなくなってしまったというお話です。制作環境のファイルの支給を求めると、別途費用が掛かると言われました、という話になるとのこと。 なかなかひどい話だなぁ、、、と思ったりはするのですが、これもすべては契約上、どこに所有権があるか、ということになるので、予めきちんとチェックしておいた方がいいと思います。 いかがでしたでしょうか。「コーディング代行サービス」と一括りにしても、そのサービスの中身はなかなか奥が深いですね！ 案件や社内ルールなどに合わせて色々なコーディング代行サービスを見比べてみるのも良いかもしれませんね。 次回は最終章、「コーディング代行サービスに関するよくある質問」についてまとめて回答します！をお伝えします！ --- - Published: 2024-07-10 - Modified: 2024-10-17 - URL: https://fastcoding.jp/blog/all/info/beginner-series02/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション - タグ: HTML, Web業界の動向, フロントエンド コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！コーディング代行サービス」を使うのはどんな人か解説します コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章の第２弾です！ 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわからないことも多いこの代行サービスを、今回はシリーズ化して詳しく解説しています。 前回は、HTMLコーディング代行サービスとそのメリットについてお話させていただきました。 では、実際にコーディング代行サービスを使っているのはどんな人が多いのでしょうか。 【第２章】「コーディング代行サービス」を使うのはどんな人？ 今回は、「HTMLコーディング代行」を使っている人の傾向、メリットなどを解説します。 前章でもお伝えした通り、コーディング代行サービスを使うと様々なメリットがあります。 そのメリットを生かしてコーディング代行を利用されているのは、以下のような方が多いようです。（弊社調べ） 「コーディング代行サービス」を主に利用している方 ウェブ制作会社のディレクター ウェブ制作会社には、社内にコーディングを行うHTMLコーダーやフロントエンドエンジニアがいるのが一般的ですが、複数のプロジェクトを抱えていて対応ができなかったり、突発的なプロジェクトへの対応が必要だったりする場合には、使い勝手が良いのがコーディング代行サービスです。 また、プロジェクトの一部を外注して、自分の作業負担を軽減したい、特定のコーディングタスク（レスポンシブデザインやクロスブラウザ対応など）を専門家に任せたい、緊急のプロジェクトでリソースを補いたいなど、ご要望は様々です。 デザイン会社・PR会社 ウェブデザインをメインにされている場合、コーディングについても一緒にできる方もいらっしゃいますが、効率を考えるとコーディングは代行サービスに任せた方がデザインに集中できて良い、社内のリソースは企画やデザイン、PRの企画に使い、コーディング以降の構築を丸ごと専門家に任せたいというご意見を伺うことが多いです。 また、凝ったデザインにしたので、イメージ通りにするためにあえてコーディングは専門家に依頼したいという場合もあるようです。 広告代理店など、デジタルエージェンシーのプロジェクトマネージャー クライアントからの多様な要求に迅速に対応するために外部リソースを活用し、内部リソースを効率的に配分して他の重要なタスクに集中できるようにしたり、プロジェクトの納期を守るために、コーディングを外注して早く仕上げたい、などから、コーディング代行サービスを利用される場合が多いようです。 システム開発をメインで行う会社 社内にコーディング専門スタッフがいない、または不足している場合に外部のコーディングサービスを活用したい場合や、特定の技術スキルが必要なタスクを専門家に任せたい、短期間で完成させる必要があるプロジェクトのために外部リソースを利用したいとご依頼いただくこともございます。 「コーディング代行サービス」を利用することによる会社的なメリット コストの節約 専任のコーディングチームを新規で社内に作るよりも、コストが抑えられます。また必要な分だけサービスを利用できるため、社内のリソースが余るなどの無駄なコストも発生しません。 また、新規で人材を募集する手間や時間、コーディングの関して自分で勉強して作業するような時間も必要ありません。結果、プロジェクト自体の納期も短縮できます。 高品質な成果物 コーディング代行サービスでは、経験豊富な専門家が作業するため、高品質なウェブサイトが得られます。また、最新の技術やデザイントレンドを反映したウェブサイトを構築することも可能です。 また、複雑な仕様やレイアウトのあるウェブサイトだとしても、成果物のクオリティが下がる心配はありません。 リソースの最適化 社内のリソースについてはより重要な業務に集中させることができるため、対応の幅も広がります。 コーディング代行サービスを利用することによって、必要な時に必要なだけのリソースを利用することできるため、効率的なリソース管理が可能になります。 いかがでしたでしょうか。 デザインデータの準備は必要ですが、ウェブサイト制作に関することは、コーディングからサーバへのアップロードまで煩わしいことは全て丸ごとお任せできるのが「コーディング代行サービス」です。（代行会社によってできるサービスに違いがあります） コーディングの知識がなくて不安な方でも大丈夫です！ ご自分に当てはまる！という方は、今まで使ったことのない人もぜひ「コーディング代行サービス」を利用してみてくださいね。 次回は、「コーディング代行サービス」の選び方をお伝えします！ --- - Published: 2024-07-03 - Modified: 2024-10-17 - URL: https://fastcoding.jp/blog/all/info/beginner-series01/ - カテゴリー: Web業界の動向・情報, ディレクション - タグ: Web業界の動向, ディレクション, フロントエンド ウェブサイト制作に欠かせない「コーディング」ですが、実は代わりに全てやってくれる「代行サービス」があることをご存知でしょうか？ 使ってみないとわからないことも多いこの代行サービスを詳しく解説します！ コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章です！ ウェブサイト制作に欠かせない「コーディング」ですが、実は代わりに全てやってくれる「代行サービス」があることをご存知でしょうか？ 弊社もその「コーディング代行サービス」を行なっている会社の一つです。 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわからないことも多いこの代行サービスを、今回はシリーズ化して詳しく解説します！ 【第１章】HTMLコーディング代行サービスとは？ まずは、「HTMLコーディング代行」とはどんなサービスなのかご紹介します。 HTMLコーディング代行サービスは、お客様から提供されたデザインに基づき、HTMLやCSSを用いてウェブサイトのコーディングを行う専門的なサービスです。 このサービスは、「ウェブサイトデザインのスキルはあるけど、技術的なコーディング作業は外部に委託したい」というデザイン会社様や、「ウェブサイト制作プロジェクトでリソースを効率的に配分したい」という制作会社様などに特に利用されています。 また、「普段は社内のみで問題ないけど、繁忙期になると手が回らないので一時的に外部にお願いしたい」というお声も聞きます。 提供されるサービスには、レスポンシブデザインの実装、SEO対策のための構造最適化、JIS規格に則ったウェブアクセシビリティ対策の強化などが含まれ、お客様のウェブサイトが現代のインターネット標準や日本の法令に適合するようサポートします。 このようにして、利用者はコーディングにかける時間をその他の業務に集中することができ、効率的に案件の進行をすることが可能です。 また、「コーディング代行サービス」を利用すると、以下のようなメリットがあります。（コーディング代行会社によって多少違いがあります） どの画面でもピッタリ表示！安定のレスポンシブコーディング 今は主流となっているレスポンシブコーディングですが、それを各デバイスでチェックしようと思うとなかなか大変です。 コーディング代行会社は、経験も豊富な上、チェック体制やテスト機も豊富な場合が多いので、コーディング代行サービスを利用すれば、異なる画面サイズに対応するレスポンシブコーディングができ、どのデバイスからでも快適にサイトを閲覧できるようになります。 動きのあるサイトも任せられる スライダーやページの上部にすすーっと戻ってくれるなど、今や当たり前に実装されている動きをつけてくれる「JavaScript」。 また「CSS」だけでも動きのあるボタンなど、簡単なアニメーションをつけることができます。 最近は、そんなJavaScriptやアニメーションCSSを使ったリッチなウェブサイト（アニメーションや動きのあるウェブサイト）制作も増えています。複雑な動きは特に専門家に任せたいところですよね。 コーディング代行では、そんな「ブラウザで見えるすべての部分」について代行で制作をしてくれるサービスになっています。 検索結果で上位に！SEO対策付きウェブサイト制作 ウェブサイトを検索エンジンで上位に表示させるためには、SEO対策が欠かせません。 コーディング代行サービスでは、検索エンジン最適化のための適切なタグ付け、構造化マークアップ、そしてメタデータの最適化を行い、検索結果での視認性を高めます。 速度最適化によりユーザー満足度をアップ！ ウェブサイトの速度最適化は、ユーザーエクスペリエンスを向上させるだけでなく、検索エンジンのランキングにも大きく影響します。特にモバイルデバイスの利用者が増えている現在、ページの読み込み速度はユーザーがサイトを離れるかどうかの重要な要因となります。速度が遅いウェブサイトは、ユーザーの不満を招き、結果として高い離脱率につながるため、ビジネスにとって大きな損失です。 コーディング代行サービスを利用することで、画像の最適化、適切なキャッシュポリシーの設定、スクリプトやCSSの圧縮といった技術的な対策を専門的に行うことができます。これにより、ページのロード時間が大幅に削減され、SEOの観点からも有利になります。Googleなどの検索エンジンは、速度をランキングの重要な指標としており、速いウェブサイトは検索結果でより高い位置に表示される傾向があります。 さらに、速度最適化はサーバーの負荷を軽減し、トラフィックの多い時間帯でもスムーズにウェブサイトを運用することが可能になります。このように、コーディング代行会社に速度最適化を依頼することは、ユーザーエクスペリエンスの向上、検索エンジンでの競争力の強化、そして最終的にはビジネス成果の向上に直結する重要な投資と言えるでしょう。 誰でもアクセスしやすい！アクセシビリティ対応サイト 全てのユーザーがアクセスしやすいウェブサイトを作成するために、アクセシビリティの基準に従ったコーディングを行っている会社もあります。これにより、障害を持つユーザーも含め、誰もがサイトにアクセスしやすくなり、法的要件にも対応するウェブサイトを構築できます。 WordPressサイトやECサイトもお任せ！ コーディング代行サービスによっては、WordPress環境の構築やECサイトの構築も含めて、全て対応可能です。 初期設定から、カスタマイズまで専門家に任せることができるので、納品後はそのままサイトをオープンできます。（できることは各コーディング代行会社によって異なります） クロスブラウザ対応も任せられる 異なるブラウザ間での互換性は、ユーザーがどのブラウザを使用するかに依存しないため、必要不可欠です。コーディング代行サービスでは、パソコンであれば、Google Chrome、Mozilla Firefox、Safariなど、スマートフォンであれば、iPhoneやAndroid、タブレットなど、様々な環境でウェブサイトが正しく表示されるように検証しています（各代行会社によって、検証環境は異なります）。 これにより、幅広いユーザーに対してアクセスの障壁を低減し、使用感の一貫性を保証します。 多言語ウェブサイト制作も可能 グローバル市場での競争力を高めたい企業にとって、多言語に対応したウェブサイトの制作は重要です。コーディング代行サービスを利用すれば、ウェブサイトや商品情報を複数の言語で提供し、各言語の検索エンジンで上位に表示させるための最適化が可能になります。 サイトの表記やコーディングの内部設定を各言語に合わせることで検索で上位に入りやすくなるため、世界中の様々な顧客に効果的にアプローチし、国際的なユーザーベースの拡大とビジネスの成長を実現します。 いかがでしたでしょうか。少し「コーディング代行サービス」のイメージが掴めたのではないでしょうか。 次回は、「コーディング代行サービス」を使うのはどんな人？をお伝えします！ --- - Published: 2024-05-18 - Modified: 2024-07-03 - URL: https://fastcoding.jp/blog/all/wordpress/wordpress_01/ - カテゴリー: WordPress Wordpressのエディタには、「グーテンバーグエディタ」と「クラシックエディタ」という2種類があります。今回はその違いについてまとめてみました。 グーテンバーグエディタとは グーテンバーグエディタは、WordPressのコンテンツエディタのことです。WordPressは世界で最も使用されているコンテンツ管理システム（CMS）の一つで、グーテンバーグエディタはその中心的な機能です。 グーテンバーグエディタの特徴は以下の通りです。 ブロックベースのエディタ グーテンバーグは「ブロック」と呼ばれる要素を使用してコンテンツを構築します。 標準で多くのブロックが用意されており、さまざまなタイプのコンテンツを扱うために設計されていて、WordPressを利用する際に非常に便利です。以下は、グーテンバーグエディタに標準で含まれている主要なブロックの一部です。 テキストブロック 段落： 基本的なテキストコンテンツ用。 見出し： タイトルやサブヘッダー用。 リスト： 番号付きリストや箇条書きリスト用。 引用： 引用文を表示するためのブロック。 メディアブロック 画像： 静止画像を挿入するためのブロック。 ギャラリー： 複数の画像を表示するためのギャラリー。 動画： ビデオファイルの挿入と表示。 オーディオ： 音声ファイルの挿入と再生。 デザインブロック ボタン： リンク付きのボタンを作成。 カラム： ページを複数のカラムに分割。 グループ： 複数のブロックをグループ化。 区切り線： セクション間を区切るための線。 ウィジェットブロック 最新の投稿： 最新記事のリスト表示。 カテゴリー： カテゴリー一覧の表示。 HTMLカスタム： カスタムHTMLコードの挿入。 フォーマットブロック コード： プレーンテキストのコードを表示。 詩： 詩や詩形式のテキスト用。 レイアウト要素 スペーサー： 空白スペースの追加。 ページ内リンク： ページ内の特定のセクションへのリンク。 これらはグーテンバーグエディタに含まれる基本的なブロックの例です。WordPressのバージョンアップやプラグインの追加により、利用可能なブロックはさらに増えることがあります。 直感的な操作 ドラッグ＆ドロップでブロックを配置し、簡単にサイズ変更やカスタマイズができます。これにより、ユーザーはコーディングスキルなしで複雑なレイアウトを作成できます。 柔軟性と拡張性 多種多様なブロックを使用して、記事やページのレイアウトを自由にデザインできます。また、プラグインを通じて新しいブロックや機能を追加することも可能です。 リッチなメディアサポート 画像、動画、音声ファイルなど、メディアコンテンツを簡単に挿入して管理できます。 互換性と将来性 古いWordPressエディタとの互換性を保ちながら、より現代的で拡張可能なエディタを提供します。WordPressの将来のバージョンで中心的な役割を担うことが期待されています。 グーテンバーグエディタは、WordPressを使うユーザーにとって、より簡単かつ柔軟にコンテンツを作成・管理するための重要なツールです。 クラシックエディタとは クラシックエディタは、WordPressにおける以前のデフォルトのコンテンツエディタです。WordPress 5. 0がリリースされる前まで、このエディタが標準的に使用されていました。グーテンバーグエディタの導入により、クラシックエディタは徐々にその地位を譲ることになりましたが、依然として多くのユーザーに利用されています。 クラシックエディタの主な特徴は以下の通りです。 WYSIWYGエディタ 「What You See Is What You Get」の略で、エディタで行った編集がそのままウェブサイト上でどのように表示されるかを反映します。テキストの書式設定や画像の挿入が直感的に行えます。 シンプルな操作性 ユーザーインターフェイスは比較的シンプルで、初心者にも扱いやすい設計になっています。基本的なテキストエディタとしての機能に重点を置いています。 プラグインとの互換性 長年にわたって使われてきたため、多くのプラグインやテーマがクラシックエディタと互換性を持っています。 HTMLエディタ機能 テキストエディタとしてだけでなく、HTMLコードを直接編集することも可能です。これにより、より高度なカスタマイズが行えます。 グーテンバーグエディタへの対応 WordPress 5. 0以降でも、クラシックエディタを使用するためのプラグインが提供されています。これにより、グーテンバーグエディタに慣れるまでの移行期間や、シンプルなエディタを好むユーザーのための選択肢として存在しています。 クラシックエディタは、特に長年WordPressを使用しているユーザーや、複雑なブロックエディタよりもシンプルなインターフェイスを好むユーザーにとって、重要な選択肢となっています。 クラシックエディタの提供が終わるかもしれない？！ WordPressユーザーの間では、長きにわたって信頼されてきたクラシックエディタの未来が、しばしば議論の的になっています。グーテンバーグエディタの登場以来、WordPressはこの新しいブロックベースのエディタを積極的に推進してきました。その一方で、クラシックエディタへの愛着と依存は依然として強く、多くのユーザーがそのシンプルさと使い慣れたインターフェイスを重宝しています。 現在、WordPressの開発チームは、ユーザーがスムーズにグーテンバーグエディタに移行できるように、一定期間クラシックエディタプラグインのサポートを続けることを宣言しています。ただし、具体的なサポート終了日は公式には明言されていません。 WordPressコミュニティは、その広範で活動的な性質から、クラシックエディタに対する強いサポートを提供し続けることが予想されます。利用者の数が多い限り、コミュニティや第三者からのサポートや更新が続くでしょう。それにもかかわらず、WordPressのコア機能としてのクラシックエディタの位置づけは、時間とともに変わりつつあるのもまた事実です。 結論として、クラシックエディタの提供が終わるかもしれないという懸念はあるものの、少なくとも短期間内に突然終了するということはなさそうです。ただし、WordPressは定期的に更新され、新機能が追加されているので、それに伴い、クラシックエディタのサポートが終了する日が来るかもしれません。ユーザーとしては新しい流れに適応しつつ、大切なコンテンツを守り続けるための準備を怠らないことが求められます。 WordPressエディタの選択肢 現状のWordPressのエディタには、「グーテンバーグエディタ」「クラシックエディタのビジュアルモード」「クラシックエディタのテキストモード」の3種類が存在しています。これらは、WordPressでのコンテンツ作成における3つの主要なエディタのタイプで、それぞれにユニークな特徴があります。 グーテンバーグエディタは、ブロックベースのアプローチを採用しており、各ブロックが異なる種類のコンテンツ（テキスト、画像、ボタンなど）に対応しています。このエディタは高いカスタマイズ性を提供し、直感的なユーザーインターフェイスにより、リアルタイムでの編集プレビューが可能です。 一方、クラシックエディタのビジュアルモードはシンプルで使いやすく、基本的な書式設定ツールを提供しますが、グーテンバーグに比べるとレイアウトやデザインのカスタマイズオプションは限られています。 クラシックエディタのテキストモードは、HTMLコードを直接編集するためのもので、高度なカスタマイズや制御を必要とするユーザーに適しています。このモードではビジュアル要素は表示されず、HTMLとテキストのみが扱われますが、それにより詳細なカスタマイズが可能になります。 これらのエディタは、それぞれ異なるユーザーのニーズに対応しています。グーテンバーグエディタは最も進化した形式で、柔軟性と直感的な操作性を提供します。クラシックエディタのビジュアルモードはシンプルさと使いやすさに焦点を当てており、テキストモードはより技術的なユーザーに適した高度な制御とカスタマイズを可能にします。ユーザーはこれらの特徴に基づいて、自分のニーズやスキルレベルに最適なエディタを選択することができます。 グーテンバーグエディタに対応するコーディングとは グーテンバーグエディタでは、初めから使えるさまざまなブロックが用意されており、プラグインを使用してこれらのブロックをさらに追加・拡張することができます。 これらのブロックは、ユーザーが入力したテキストや画像などのコンテンツをウェブページ上に表示するための決まったHTML構造を持っています。したがって、それぞれのブロックに対して適切なデザインを用意し、CSSを使って見た目のスタイルを整えることが必要です。 クラシックエディタに対応するコーディングとは クラシックエディタでは、テキストモードでHTMLを直接書くこともできますが、ビジュアルモードではTinyMCEという特別なエディタを使います。このエディタは、Microsoft Wordのように、文章にさまざまな装飾を加えることができます。ビジュアルモードで作成された内容は特定のHTML構造を持っており、それに合わせてCSSを使ってデザインを調整する必要があります。 ただし、ビジュアルモードとテキストモードを行き来すると、TinyMCEの仕様によりHTMLやCSSが変更されたり削除されたりすることがあります。これにより、ページのレイアウトが意図しない形で崩れることがあります。この問題を避けるためには、変更される可能性がある部分に注意しながら、ページが正しく表示されるよう適切なCSSを追加する必要があります。 弊社でコーディング代行制作する場合の、WordPressのエディタ設定について 弊社ではクラシックエディタもしくはグーテンバーグエディタのどちらでも実装が可能です。 ご指定が無い場合はデザインに合わせて弊社で適宜選択の上実装をしておりますが、利用するエディタをご要望いただくことも可能です。 詳細はご依頼時に担当ディレクタまでお問い合わせください。 --- - Published: 2024-01-30 - Modified: 2024-01-10 - URL: https://fastcoding.jp/blog/all/webdesign/movie-on-webpage/ - カテゴリー: Webデザイン, 動画制作 - タグ: mp4, YouTube, 動画, 埋め込み こんにちは。FASTCODINGデザイナーの七転び八重子です。 動画シリーズです。Webサイトのファーストビュー(FV)に動画を利用する場合は注意点があります。 どんな動画を用意すれば良いか参考にしてみて下さい。 ファーストビューに動画を使うメリット 多くの情報を伝える サイトに訪れたユーザーが最初に目にするファーストビューは、商品やサービスの情報を的確に伝える必要があります。 動画を利用すると、サービスのイメージや商品の情報を多く伝えることができます。 ユーザーの滞在時間の増加 動画は人の注意を惹きます。続きが見たくなって、最後まで動画を見てしまうってことが多いです。「滞在時間が長い ＝ 優良なサイト」 という判定をされやすいので、SEOにも良い効果があります。 ブランドのストーリーを伝える 企業ロゴや商品画像に加えて、動画にストーリー性を持たせることで、ブランドのイメージを伝えることができます。 ファーストビューに動画を使う場合の注意点 動画の画質に注意しながら、動画のファイルサイズを軽量化する FVに動画を利用すると、画面いっぱいなど、大きなサイズの動画になるので、読み込みに時間がかかってしまう場合があります。読み込み速度は、Googleの評価基準に大きく影響する指標の一つでもあるので特に注意して下さい。 動画を軽くしようとすると、どうしても画質を落ちる事になるのですが、あまりにも荒くしてしまうと、かえってイメージを損ねてしまいます。 あえて、ノイズを加えておしゃれにするなど、画質を最低限キープするようにしましょう。 基本的には5MB以下で作りましょう。大きい場合でも10MB程度までにして下さい。 動画の尺を短くする 動画の尺は短めにしましょう。あまりに長いと重たくなりますし、ユーザーが飽きてしまいます。 伝え切れない情報は、別ページへのリンクボタンを設置するなどして対応します。 目安は２０秒、長くても３０秒以内に。 サウンドはオフ サイトを開いた途端、音楽が流れるとユーザーの環境によっては迷惑にしかなりません。 まとめ ファーストビューに動画を使う場合の注意点をまとめてみましたが。読み込み速度や動画の長さに注意しつつ、飽きないような動画を作りたいですね。次回は、動画制作に関わる、ソフトなどをまとめてみようかなと思います。 ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2024-01-26 - Modified: 2024-02-05 - URL: https://fastcoding.jp/blog/all/movie/adobe-after-effects-premiere-pro/ - カテゴリー: 動画制作 - タグ: After Effects, mp4, Premiere Pro, YouTube, 動画, 動画編集ソフト こんにちは。FASTCODINGデザイナーの七転び八重子です。 Adobeの動画編集ソフト、Premiere ProとAfter Effectsは、プロが利用する動画編集ソフトのド定番です。 テンプレートから作れるような初心者向けのソフトでは無く、ある程度の知識と操作方法を勉強する必要がありますが、今YouTubeにアップされている動画のほぼ全てのジャンルは、この２つのソフトで作ることができます。 今回は、この２つのソフトの違いをまとめてみました。 Premiere ProとAfter Effectsの違いまとめ Premiere Pro 不要な映像のカット、映像同士の結合、テロップ、BGM、など動画全体の大枠を作るのに最適なソフトです。 タイムラインをベースに作業 YouTuberがアップしているようなテロップや効果音の入った動画に最適です。 After Effects モーショングラフィック（テキストやイラストなどにアニメーションを加える）やビジュアルエフェクトなど、特殊加工を加えるのに最適なソフトです。 レイヤーを重ねて作業 3DやCGなど、凝った映像が作れるので、オープニング動画やロゴアニメーションに最適です。 どっちから利用するのが良いのか？ 最初、簡単に動画編集をやってみたいなら、「Premiere Pro」をお勧めします。 動画編集の基本、カットと結合、テロップ、音楽など全体の編集を一通りやれば、すぐにYouTubeにアップできる動画が作れます。 慣れてくると、もっとエフェクトをかけたいなど、目的が明確に分かってきます。 「After Effects」でオープニング動画を作って、「Premiere Pro」で結合するといった使い方ができるようになれば完璧です！ Premiere Proってどんなソフト？ インタビューなどの動画をYouTubeで見たことがあるかと思いますが、それらの動画をストレスなく見れているのは、不要な部分がカットされ、音量などが適切なボリュームに編集されているからです。 不要な部分というのは、「えーと」や「沈黙・・・」といった部分になります。それらをカットすることで、動画を短くでき、リズム感の良い動画を作ることができます。 Premiere Proは、そんな動画の基本的な編集の全てができるソフトです。 After Effectsってどんなソフト？ 動画の冒頭にある、オープニングなどで、ロゴが変形したり、動画がオシャレなエフェクトが入っているなど見たことがあるかと思いますが、それらはAfter Effectsで作ることができます。 Premiere Proでもフェードインや回転などのエフェクトをかけることは可能ですが、3Dや CGなどより凝ったものが作れ、調整操作もし易いのがAfter Effectsです。 注意したいこと After Effectsで凝った3Dや、多くのエフェクトをかけたりすると、パソコンへの負担が大きくなります。特にレンダリング（データを再生可能な状態に変換する作業）にかかる時間が長くなったりします。 そのため、パソコンのスペックも良いものを準備する必要があります。RAM（Random Access Memory）容量は大きな方が良いです。 まとめ 私も昨年、動画編集を少しずつですが、やるようになりました。Premiere Proを利用しています。初期設定から、基本的な操作、動画の公開までをまとめた動画を見ながらでしたが、1日で基本的な動画を作ることができました。操作をしながら感じたことは、どんな動画を作りたいかという構成の部分でした。ここで曲を流したい、ここのテロップはエフェクトをかけたいなど、構成の部分です。まずはどんな動画を作りたい！から始まって、作るための方法を勉強するという感じです。次回は、Premiere Proの初期設定から、カットなどの基本的な操作をまとめてみたいと思います。 ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2024-01-23 - Modified: 2025-06-20 - URL: https://fastcoding.jp/blog/all/ui-ux/webaccessibility/ - カテゴリー: UI/UX - タグ: UI/UX, Webアクセシビリティ, 情報設計 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 現在はインターネットを通じ、いつでも・誰とでも簡単にコミュニケーションを取ることが出来ます。デジタル技術の進歩により様々な事が出来るようになった今、アクセシビリティの重要性が高まっています。 高齢者や障害を持つ方々も同じ様にWebで提供されるサービスを利用できるようにする為には、コンテンツの作り方や実装方法を工夫する必要がありますが、複数の規格やガイドラインがあり、実際何をすれば良いのか分からない方も多いのではないでしょうか？ アクセシビリティで達成すべき事は、情報設計やデザイン制作時・実装時で様々なものがありますが、今回は情報設計やデザイン制作時に優先して対応すべきものについて、いくつかご紹介します。 アクセシビリティとは？ 「アクセシビリティ」と聞くと、障害者の方へ向けたものというイメージを持つ人も多いのではないかと思います。しかし、アクセシビリティはAccess(アクセス)と、Ability(〜できる)に分けられ、障がいの有無に関わらず、全てのユーザーがサービスや機能をスムーズに利用できる状態を追求するという概念です。 視覚・聴覚・認知的な障がいがある方も含め、様々な人々が理解しやすく容易に操作出来るよう設計する必要があります。 また、よくある誤解として、アクセシビリティの向上＝文字サイズ拡大ボタンの様な補助機能を設定する事と誤解しているケースがあります。 補助機能は通常、「目で見える」部分に対しての機能追加が多く、例えば文字サイズの変更やコントラスト比の調整などが一般的であるため、視覚障害のある人にとっては不便に感じてしまう事があります。 補助機能を設定する前に大切なのが、スクリーンリーダーで読み上げた時に意味が伝わる様に情報設計する事や、利用者が自分のデバイスで文字サイズや色などを変更しやすいように実装する事です。 情報設計やデザイン制作の際に優先して対応する事 重要な情報は、色の違いや形の違い(太字・下線等)だけで表現しない 必須項目など重要な情報を伝える際、色の違いや形の違いだけで表現するのはNGです。「必須」ラベルを付けるなど、色や形以外で情報を理解できる様にしなくてはいけません。 十分なコントラスト比を保つ 文字と背景色のコントラストが低いと読みにくくなってしまう為、最低限の基準としてコントラスト比を4. 5：1以上に保つ必要があります。 ただし、4. 5：1のコントラスト比はテキスト29px以下、太字の場合では24px以下の場合の値です。これより大きいテキストのコントラスト比は3：1以上でないといけません。 このコントラスト比については、コントラストチェッカー簡単に確認する事が出来ます。 文章の構造や順序に注意する 目が見えている人はウェブサイトをスクロールして必要な情報を見つけることができますが、視覚に障害を持っている方はスクリーンリーダーを使い、ページの先頭から順にリンクや文章を読み上げていきます。 このとき、文章の構造や読み上げ順序に問題があると、正確に情報を理解することが難しくなります。その為、コンテンツやサービス設計する際には文章構造や順序に注意して制作する必要があります。 見出しを適切に設定する 見出しは、大見出し、中見出し、小見出しの順に適切なレベルを指定してください。 見出しが無いと最初から読まないと内容が伝わらず、必要な部分だけ拾って読むといった事が出来ません。適切な見出しを付ける事で内容の推測がしやすくなり、興味のない内容はスクリーンリーダーの機能を使って読み飛ばす事も出来るため、ユーザーの使い勝手が良くなります。 リンク先を推測しやすい文言にする よく「詳しくはこちら」という文言で統一しているリンクを見かけますが、アクセシビリティにおいてはNGです。運動機能に障害があり、マウスの操作に時間がかかってしまう様なユーザーにとって、不必要なページ遷移を防止することは特に重要です。 スクリーンリーダーにはリンクを一覧表示する機能がありますが、その機能を使って目的のリンクを探す場合に、「詳しくはこちら」「詳細」などで統一されていると、リンク先を推測する事が困難になります。 また、リンクを開く前に、そのリンクがPDFであるか、または外部ウィンドウで開くか等、理解できるようにする必要があります。 まとめ いかがでしたでしょうか？今回は情報設計やデザイン時に達成すべき事に絞ってご紹介しましたが、弊社では既に公開しているサイトに対してWebアクセシビリティ対応を行うことも可能です。ぜひ、お気軽にご相談ください。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2024-01-18 - Modified: 2024-01-10 - URL: https://fastcoding.jp/blog/all/webdesign/embed-youtube/ - カテゴリー: Webデザイン, ディレクション, 便利サービス, 動画制作 - タグ: mp4, YouTube, 動画, 埋め込み こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回、動画をメインビジュアルに掲載したWebサイトを紹介しました。 今回は、動画を掲載する方法をまとめました。 埋め込み方法は、大きく分けて２つ １） 動画共有サイトにアップロードして、埋め込む方法 ブランティングや商品・サービスの紹介動画をYouTubeにアップすることで、コメントからユーザーからの反応や感想も聞くことができます。 ２） 動画自体をサイトに埋め込む方法 メインビジュアルなどに動画を利用する場合は、動画自体を埋め込む方法が多いです。 １） 動画共有サイト「YouTube」から埋め込みする 動画共有サイトに動画をアップロードするので、サーバーへの負担を気にする必要がなく、比較的簡単に動画を設置する事ができます。特にYouTubeは世界中に多くのユーザーがいるので、それだけ多くの人の目にふれる機会があります。 YouTubeに動画をアップする YouTubeの利用には、Googleアカウントが必要です。 GoogleアカウントでYouTubeにログインしたら、右上のメニューから「動画をアップロード」へ進み、動画をアップロードします。 HTMLへ埋め込みする 動画をアップロードしたら、「共有」から埋め込みタグをコピーして、サイトの表示したい箇所に貼り付けるだけです。 とっても簡単ですね。 ２） 動画自体をサイトに埋め込む方法 最適な動画のファイル形式 動画のファイル形式には、MP4、AVI、MOV、WMVなど、多くの種類があります。ファイル形式によって、ブラウザが対応していない場合、再生できないこともあります。 ※YouTubeに動画アップする場合は、どんな動画ファイルでもアップすることが可能です。 一番、最適なファイル形式は、MP4! こちらの形式にしておけば、ほぼ最新のどのブラウザでも再生が可能です。 HTML5ではvideoタグで埋め込みする 記述はとっても簡単です。表示したい箇所に以下のタグを貼り付け。（） src属性には、動画ファイルまでのパスを指定してください。 videoタグで指定できる属性一覧 埋め込みをしたら、動画をカスタマイズしていくのに必要な属性を追加します。 controls コントロールパネルを表示する autoplay 動画の自動再生を有効にする muted 動画に含まれる音声を消す playsinline 動画のインライン再生を有効にするにする preload 動画が読み込まれている間に表示する画像を指定する poster 動画が読み込まれている間に表示する画像を指定する まとめ 動画の埋め込み方法は、意外と簡単なのですが、次回は、準備する動画についての注意点をまとめようと思いいます。 ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2024-01-13 - Modified: 2024-10-31 - URL: https://fastcoding.jp/blog/all/direction/video4/ - カテゴリー: ディレクション, 便利サービス, 動画制作 - タグ: mp4, YouTube, 動画, 動画編集ソフト こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトに掲載する動画やYouTubeにアップする動画のような本格的な動画から、アプリで簡単に作れる動画まで、様々なツールがありますが、 今回は、目的別に無料で使えるソフトをまとめてみました。 Gifvie ー ちょう簡単！結婚式や送別会に使える寄せ書きムービー Gifvie こちらはモバイルファーストで作られているので、スマホからも、アクセスできて簡単に寄せ書きムービーを作ることができます。 使い方もとっても簡単で、動画編集のスキルはゼロで誰でも使えます。 送別会や、結婚式のお祝いメッセージなど、時間がない時にとっても便利なサービスです。 PowerDirector 365 ー 国内シェアNo. 1 PowerDirector 365 直感的に操作できて、且つ優秀なエフェクトや編集ツールが用意されています。公式YouTubeチャンネルで、チュートリアルをアップしているので、参考にしながら作業できます。 また、最新のAI技術が搭載されており、自動文字起こしや、人物の切り抜き、音声修復などもやってくれます。 無料版は、製品版と同等の動画編集ツール、エフェクト、トランジションを利用することが可能です。 Promeo ー 2万点以上のテンプレートから選んで作れる！ Promeo 動画編集で大変なのは、操作はもちろんですが、デザイン構成を決めることかもしれません。どんな動画が良いかなーと悩んでしまうこともあるかと思います。 そんな時は、Promeo! 自分好みのテンプレートを見つけて、動画やテキストを変更するだけで凝った動画が作れてしまいます！ Lightworks ー Adobeのプレミアプロと同等の機能が無料！ Lightworks プロ向けに開発されたソフトなので、あまり初心者向けではありませんが、高機能な動画編集機能が無料で使えます。日本語も対応しているソフトです。 無料版は、一部機能と書き出しサイズに制限がありますが、ウォーターマークが付きません。 動画をカットしてテロップを入れて、音楽を入れて、切り替えのトランジションなど一通りの編集ができます。 まとめ 2014年現在、たくさんの無料の動画編集ソフトが存在してます、自分の作りたい動画やニーズに合ったものを自分で試すことができます。 まずは、操作が簡単なソフトを利用して、動画編集に慣れてから、より専門的な動画編集ソフトを利用するとイイかなと思います。 ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2024-01-11 - Modified: 2024-02-07 - URL: https://fastcoding.jp/blog/all/info/2024-web-accessibility/ - カテゴリー: UI/UX, Web業界の動向・情報, ディレクション - タグ: UI/UX, Webアクセシビリティ, 改正障害者差別解消法 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 前回、「Webアクセシビリティ」について触れましたが、2024年4月に施行される「改正障害者差別解消法」により、全事業者に対して「合理的配慮の提供」が義務化されます。これによりどの様な影響があるのか、また義務化される事によって起こりうるリスクや、Webアクセシビリティ対応の手順についてもご紹介します。 障害者差別解消法とは？ 障害者差別解消法は、障害者に対する差別を解消し、誰もが安心して暮らせる社会を目指す為の法律です。 正確な法令名を「障害を理由とする差別の解消の推進に関する法律」として、全ての国民が障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会を実現する事を目的として、10年前に制定されました。 法改正による義務化の内容は？対応しないとどうなる？ Webアクセシビリティ対応については、これまで努力義務とされていました。 しかし、2024年からは全事業者に対し「合理的配慮」する事が義務化された為、抵触した場合は処罰の対象となります。 内閣府によると（よくあるご質問と回答 Q7）、直ちに刑罰を課すとはしていませんが、障害のある方に対して民間業者が権利侵害を繰り返し、改善が見込めない場合や虚偽の報告をした場合、罰則の対象になるとしています。 内閣府の「障害を理由とする差別の解消の推進に関する基本方針」によれば、合理的な配慮を適切に実施するためには、「環境の整備」を行う必要があり、その一環として「情報アクセシビリティ」を考慮する必要があるとしています。Webアクセシビリティは情報アクセシビリティの一部であるため、これに対応する必要があります。 「合理的配慮」... 障害のある人から、何らかの対応を必要としているとの意思が伝えられたとき、過重な負担の無い範囲で対応することが求められる 対応が遅れることで起こり得るリスク 日本よりも法整備が進んでいる米国では、Webアクセシビリティの不備が原因で訴訟を起こされたケースがいくつかあります。 2016年に発生したアメリカの事例では、視覚障がいを抱える男性が「ドミノ・ピザのWebサイトやアプリがアクセシブルでなかった為、ピザの注文やクーポンの利用が出来なかった」として、ドミノ・ピザを提訴しました。2021年、連邦地裁は視覚障がい者の男性に有利な判決を下し、ドミノ・ピザに対して同社のWebサイトをアクセシビリティに適合させるよう命じました。さらに、原告の男性に4,000ドルの損害賠償を支払うことを命じました。 Webサイトを利用する誰もがクーポンを使う権利がありますが、ドミノピザの事例の様に障害のある方が情報を認識出来ないサイトの作りになっていると、他のユーザーと同じ様に充実したサービスを受ける事が出来なくなってしまいます。 Webアクセシビリティ対応について、合理的配慮が義務となる今後は、日本でも同じ様な問題が起こる可能性がゼロではありません。障害のある方もWeb上で自由に情報を得られるよう、企業側はアクセシビリティに配慮したWebサイトの提供を心掛ける必要があります。 Webアクセシビリティ対応の手順 Webアクセシビリティに対応したWebサイトを構築する為には、最新のJIS規格である「JIS X 8341-3:2016」に対応している必要があります。 1. 対応する度合いを決める JIS X 8341-3:2016 に対応している事を示す方法として、以下の3つがあります。 ・「準拠」は、試験を経て全ての達成基準が満たされた場合に使用されます。公表時には試験結果を併せて開示します。 ・「一部準拠」は、一部の達成基準が満たされている場合に使用されます。一部準拠の場合は、今後の対応方針も追加記載する必要があります。 ・「配慮」は、試験の実施や、その結果の公開の有無は問われません。 2. ウェブアクセシビリティ方針を作成 JIS X 8341-3:2016の対応度を表記する為には、最初に以下の2つを決定した上で「Webアクセシビリティ方針」を策定します。 対象となる範囲 Webサイトの対象範囲を決定します。通常、ドメイン名またはサブドメイン名を基準にします。 目標とする適合レベルを決める 「A・AA・AAA」の中から目標とする適合レベルを決定します。『みんなの公共サイト運用ガイドライン』や他国の法律等では「AA」が推奨されています。 3. Webアクセシビリティの試験を行う ウェブアクセシビリティ方針が確定したら、試験を実施して対応状況を確認します。 対象となるページが目標とする達成基準に適合しているか、一つずつ確認します。 検証を行う際には、WAICが提供している「JISX8341-3:2016試験実施ガイドライン」から入手可能なExcelファイル「実装チェックリスト」を利用することで、作業を効率的に進めることができます。 また、Webアクセシビリティの評価ツールとして「miChecker (エムアイチェッカー)Ver. 3. 0」があり、こちらでチェックする事でも基準をクリアしているか確認する事ができます。 4. 試験結果を公開する 各ページのテスト結果をまとめ、対応状況を判定します。全てのページが全ての達成基準に合致していれば「準拠」となり、どれか1つでも達成基準を満たしていない場合は「一部準拠」となります。100点満点で評価すると、100点が「準拠」に対応し、1点から99点が「一部準拠」となります。 WebアクセシビリティとSEOの関係 WebアクセシビリティとSEOは高い関連性があります。それは、Webアクセシビリティを向上させるために取り組む内容は、SEOを向上させるための施策と共通している点がある為です。Webアクセシビリティを向上させることは、結果としてSEO対策にも繋がります。 弊社ではWebアクセシビリティ対策として、総務省が発表している「みんなの公共サイト運用ガイドライン（2016年版）」に準拠し、サイトのチェックや修正を行っております。 また、SEOに強いサイト制作を得意としており、SEOに強い効果を期待できるセマンティックコーディング（Semantic Coding）を標準で実施しております。WebアクセシビリティとSEOの最適化を同時に行う事が可能ですので、お気軽にお問い合わせ下さい。 みんなの公共サイト運用ガイドライン 公的機関がWebアクセシビリティの向上に取り組む際の支援を目的として作成された 手順書で、JISX8341-3:2016 に対応しています まとめ いかがでしたでしょうか？ Webアクセシビリティに対応する事でリスクを回避するだけでなく、より多くの人に情報を伝える事ができる様になります。2024年の改正法施行に向け、早めに検討してみてはいかがでしょうか。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2024-01-10 - Modified: 2023-12-19 - URL: https://fastcoding.jp/blog/all/info/xd-figma-sketch/ - カテゴリー: React, Vue.js, Webデザイン, UI/UX, Web業界の動向・情報, ディレクション - タグ: Adobe XD, Figma, Sketch, 比較 こんにちは。FASTCODINGデザイナーの七転び八重子です。 UIデザインツールと言えば、Figma、Adobe XD、Sketchなどが代表的ですが、2020年頃を境にFigmaユーザーが圧倒的に増えました。 そこで、今回は 3つのデザインツールの特徴や違いを比較してみました。 はじめに 一番、利用されているツールは、Figma ! ! 色々な、比較検討をしても、やはり多くの人に利用されているのは、Figmaです。 コーダーとデータのやり取りをすることも多いので、「デザインデータの共有はFigmaでお願いします」ということも多々あるはずです。 私は、Macユーザーなので、Figmaの前にリリースされていたSketchを利用していますが、デザイン共有だけはFigmaを利用しています。 参考サイト： UI design Tool Adobeに買収されたFigmaの今後は？ Adobe XDとの棲み分けは？ 2022年9月、Figmaを200億ドルで買収したニュースはまだ記憶に新しいですよね。 （当時は、Adobe独占？とか色々思いましたけど、、、w） 既存ツールのXDとの棲み分けの方向性はまだ決まってないといった印象です。 今後もXDは利用でき、サポートも続くようです。 それぞれのツールの特徴のまとめ 黄色は良いなと思ったところ。こうして比較すると、一長一短ですが、用途によって自分に合ったツールを利用すると良いですね。 使ってみた感想！！ 私の感想です。笑 一人でデザインするなら、シンプルな操作で使い易いのが、XDとSketchかなと思います。 Figmaは、なんといってもグループでの作業にとっても便利です。 ユーザー登録不要！ URLだけで共有できるので、一般のクライアント様でも、面倒な操作が不要で喜ばれます。 私は先に述べた通り、この中では、リリースが一番古いSketchを利用しています。 SketchはPhotoshopのPSDファイルを配置できるので、画像の色味や加工しながら、Webサイトのデザインをするにはとっても便利だと感じています。 アイコンやイラストは、基本的にIllustratorを使っていますが、3つのToolで共通して便利だなと思うのは、簡単な図形なら描けてしまうところ。 特にSketchは、三角形などをかくと、センターの位置でカチッとスナップしてくれるところでです。 さいごに料金の比較 まとめ 今回は、簡潔に分かりやすくまとめてみました。今後もAdobeにお世話になっていく流れですが、ソフトの特性を把握して、便利に使い分けをしていきましょう！！ ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-12-26 - Modified: 2024-07-19 - URL: https://fastcoding.jp/blog/all/info/video1/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: mp4, YouTube, 動画, 埋め込み こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトに、動画を掲載しているサイトがとても増えましたね。 場面が次々と切り替わり、ユーザーの注意をひき、短い時間で多くの情報を伝えることができます。 多くの企業が取り入れているので、今回は上手に動画を活用しているサイトをご紹介したいと思います。 動画掲載のメリット ・ダイナミックな動きでユーザーが注目する！ ・短時間で、多くの情報を伝えることができる！ ・ブランディングに向いている 上手に動画を利用しているサイト 子どもたちの楽しい姿を伝える 子供達が走り回る広々としたキャンプ場を動画で上手に伝えています。シーンが複数切り替わるのでテンポ良く動画を見ることができます。 INCLUSIVE CAMP YouTubeの埋め込みを上手にキービジュアルに YouTube動画と、写真を上手に組み合わせていますね。ブレるようなエフェクトも入っていますが、無くても気軽に動画を取り入れる事ができそうです。クリックするとYouTube動画が再生されます。 Varex キービジュアル画像の隅に動画を配置 キービジュアルの中にYouTube動画を小さく配置しています。クリックすると全画面で再生されます。こんな配置の仕方もありだなーと思いました。 LIGHTSHIP イキイキと働く人たち 就職・転職サイトですが、働いてる人の笑顔がとても素敵なサイトです。様々な職業や環境、そこで働く人にスポットを当てた動画です。 VENTURE FOR JAPAN 動画に合わせてロゴのカラーが変わる ロゴの部分が動画の色味に合わせて変わっていきます。動画制作するときに、テキストの描画モードを調整するのですが、ちょっとした事ですが、単に白で配置するより細部へのこだわりがオシャレ感をグッと上げています。 BORDERLESS まとめ 動画を使ったり、動きのあるサイトは、みていてとても楽しいし、次々に起こる動きに新しさを感じます。 次回は、サイトに動画を掲載する方法をまとめたいと思います！ ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-12-20 - Modified: 2023-12-19 - URL: https://fastcoding.jp/blog/all/info/designwidth-2023-12/ - カテゴリー: React, Vue.js, Webデザイン, UI/UX, Web業界の動向・情報, ディレクション - タグ: Webサイト横幅サイズ, コンテンツ幅, 推奨フォントサイズ こんにちは。FASTCODINGデザイナーの七転び八重子です。 半年ごとの恒例テーマ、2023年も残り１ヶ月となってきたので、早速「Webサイトのベストな横幅サイズ（コンテンツ幅）」をチェックしていきます。 参考サイト ： statcounter はじめに Webサイトの設計やデザインする場合は、最初にWebサイトの幅(コンテンツ幅)を決めます。 パソコンの画面の場合は、「Webサイトの幅」を決めたら、それより400pxくらいは余裕をとって「アートボード」を設定するとデザインし易いです。 また、各デバイスに合わせて表示を最適化する為、 ・デスクトップ用 ・タブレット用 ・モバイル用 この3つのパターンで設計・デザインを作成しておくと、どんなコーディング（レスポンシブ・リキッドなど）でも対応できます。 コーディングである程度、デザインを巻き取れる場合もあり、デスクトップとモバイルがあればOKな場合もあります。 高解像度、Retinaディスプレイの場合はどうするのか？ 専用のサイズを用意しなくても大丈夫です。 Webサイトに掲載する画像素材のみ、倍のサイズで用意しましょう。また、ロゴなどは、SVGファイルにしておくと、綺麗な表示をキープできます。 ！SVGファイルとは？ Scalable Vector Graphics（SVG）は、 Webに適したベクターファイル形式です。 ベクターファイルは、jpgなどのラスターファイルと違って、拡大してもデータが荒くなることがありません。 早速ですが、結論から 半年前と比べて、ラップトップのサイズを 100px ほど広く設定。後から理由を述べますが、私もお仕事でデザインする場合、指定がなければ基本デスクトップのサイズは1200pxにしています。 ラップトップ コンテンツ幅：1200px ファーストビュー：750px アートボードサイズ：1920px ! コンテンツ幅が1200pxだとしても、背景のデザインやキービジュアル（画面いっぱい）などの、デザインをするには、最大幅のアートボードを設定しておくと良いです。 デスクトップ コンテンツ幅：1200px 〜 ファーストビュー：850px アートボードサイズ：1920px ！デスクトップは色々な考え方があるのですが、1920pxのスクリーンサイズだとしてもスクリーン目一杯広げてブラウザを表示する人が少ないので、結果ラップトップと同じ幅でデザインした方が良いかもしれません。リキッドデザインなど、幅を100%で表示する場合は、最大幅などを設ける方が、ユーザーにとっては見易いサイトになる場合もあります。 タブレット コンテンツ幅：768px ファーストビュー：800px アートボードサイズ：768pxジャスト モバイル コンテンツ幅：360px ファーストビュー：800px アートボードサイズ：360pxジャスト タブレットとモバイルは変わらずといった感じです。 ここ半年でスクリーンサイズの推移をみていきます お馴染みの、statcounterで、半年前と比較してみました。 はい。近年、減少傾向だったデスクトップのシェアが増えています。微々たる変化かもしれませんが、動画編集やリモート、オンラインのお仕事が増えてきたからでしょうか？？ 大きな変化はありませんが、1980pxと1366pxを押さえておけば大丈夫そうです。 地域別のシェア 地域別で見てみるととても参考になりました。 オレンジの部分、アフリカ、アジア、南米は、ノートPCでよく見られる1366pxが支流のようです。 日本、アメリカ、ヨーロッパではフルHDの1980pxが支流です。 タブレットやモバイルは、地域別での差がほぼありませんでした。 推奨フォントサイズ PC・モバイルともに16pxがGoogleが推奨するフォントサイズです。 文字数の多いサイトであれば、14px〜16pxで良いかもしれませんが、多言語サイトなど英語のフォントの場合は、14pxだとフォントが小さくて読みづらいので気をつけましょう。 まとめ 半年なので、大きな変化は見られないですが、ここにきて、デスクトップが多少増え、モバイルが横這いと安定してきました。 コンテンツ幅の推奨サイズも少し変えています。それでは、また半年後に。 ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-12-01 - Modified: 2023-11-28 - URL: https://fastcoding.jp/blog/all/info/framingeffect/ - カテゴリー: UI/UX, Web業界の動向・情報, ディレクション こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 フレーミング効果についてご存知でしょうか？心理現象の一つである「フレーミング効果」は、UI・UXにも活用できます。この効果を利用する事でユーザーを誘導し、購買心理を変える事ができます。 フレーミング効果とは？ 「フレーミング効果」とは、同じ内容でも伝え方や表現方法によって、人々の判断や意思決定に影響を与える現象の事です。情報のどこにフレームを当てるかによって意思決定が異なることから「フレーミング効果」と呼ばれます。 【A】術後1ヶ月の生存率は90%である 【B】術後1ヶ月の死亡率は10%である 被験者の医師を2つのグループに分け、A・Bそれぞれの情報を伝えて、手術と放射線治療のどちらを選ぶかという実験を行なったところ、Aの情報を伝えられたグループでは手術を選択した医師が多く(84%)、Bの情報を伝えられたグループでは、手術・放射線の割合が半々(50%)となったそうです。 上記２つは同じ意味合いですが、死亡率に基づいた情報を与えられたBグループより、生存率に基づいた情報を与えられたAグループの方が手術を選択する医師の割合が多くなりました。 人は損失を避ける傾向が強く、損失に焦点を当てた選択肢は選ばれにくくなるため、このような違いが出たと考えられます。 また同じ商品でも、一部の店舗は売れ行きが好調な一方で、他の店舗はなかなか売れないことがあります。これは、商品の印象を形成する際に影響を与えるフレーミング効果の差異によるものと言えます。利益と損失、どちらを強調するかによって価値の感じ方が変わり、それが人々の意思決定に影響を与えます。 フレーミング効果は意思決定の方向性を操作する方法として、広告やマーケティングなど様々な場面で利用されており、UI・UXデザインにも活かす事が出来ます。 効果的な「お得感」の伝え方 WebサービスやECサイトで効果的にフレーミング効果を利用するためには、「お得感」の伝え方が重要となります。 同じ意味でも、ユーザーにとって利益が大きく感じられる表現にする事が大切です。 分量を多く感じさせる伝え方 【A】健康成分◯◯◯1g配合 【B】健康成分◯◯◯1000mg配合 AとBでは、どちらが多く配合されていそうでしょうか？ 同じ量なのに、なぜかBの方が効き目がありそうに感じないでしょうか？ 分量を多く見せたい時は、より大きな数字で表記すると効果的です。 期間をより長く感じさせる伝え方 【A】2ヶ月間無料トライアル 【B】60日間無料トライアル AとBは同じ日数ですが、「2ヶ月」と表記するより「60日」といった様に、大きい数字で表記した方が日数に余裕があり、お得に感じられるという効果があります。 この効果を狙ったコピーは様々なサービスで見かけるのではないでしょうか。 到着をより早く感じさせる伝え方 【A】1週間でお届け 【B】7日間でお届け 商品の配達日数を伝える際は、数字が小さい「1週間」の方が早く届きそうな印象を与えます。 また、同じ表記でもコンテキストによって早いと感じさせる事が出来ます。例えば、「1週間以内にお届けします」という伝え方はポジティブな印象を受けますが、逆に「1週間かかります」という伝え方は期待感が下がり、待ち時間を長く感じさせてしまう可能性があります。 より得していると感じさせる伝え方 【A】5点購入すると20パーセント引き 【B】5点購入で1点無料 「無料」の効果は絶大で、実際割引率は同じなのですが、20%引きとするより「無料」とする方がよりお得感が増します。 インターネットの契約などでは、「他社からの乗り換えで工事代金が実質無料」といったコピーがよくありすが、これも同じ様な事例で実際は工事代金の総額を分割払いで支払う契約ですが、単に工事代金を支払うより「無料」という言葉を使った方が断然お得感があります。 特別感を強調する ただ単に「SALE」とするのではなく「特別オファー」や「限定チャンス」としてアピールすることで、ユーザーに特別な体験を提供し、同時に購買意欲を高める事が出来ます。限られた期間にしか得られない特典や割引がある事はユーザーにとって魅力的で、迅速な決断を促す手助けとなります。 進捗状況の伝え方を工夫する タスクの進捗状況をプログレスバーで表示する際「あと50%残っています」と伝えてしまうと、時間の経過が遅く感じ、離脱に繋がる可能性があります。「すでに50%が完了しました」と伝える事でタスクが迅速に進んでいると感じ、目的を達成するモチベーションも向上します。 またUIの工夫として、プログレスバーの速度を調整する事も大切です。一定の速度でプログレスバーが進むとユーザーは速度が落ちたように感じてしまうといった研究結果があります。これを回避する方法として、わざと不規則な速さで進むようにしておくと、タスクが順調に進んでいるという印象を受け易くなる様です。 まとめ いかがでしたでしょうか？ 「フレーミング効果」は、情報や選択肢の提示の仕方によって、意思決定や評価に影響を与えます。これらをUI/UXデザインに活用し、サービス満足度を向上させましょう。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-11-27 - Modified: 2023-11-15 - URL: https://fastcoding.jp/blog/all/info/microcopy/ - カテゴリー: UI/UX, Web業界の動向・情報, ディレクション, 便利サービス - タグ: UI/UX, UI/UX改善, マイクロコピー こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 Webサイトを改善して成果を上げるためには数値を把握し、小さな改善を積み重ねていく事が大切ですが、その中でも費用対効果が高く、手間をかけずに成果を上げる方法として「マイクロコピー」を活用するという方法があります。 今回は、どの様にマイクロコピーを使えば効果的のか、その活用方法について実例と共にご紹介します。 マイクロコピーとは？ マイクロコピーは、Webサイト内のリンクやボタンまわりによく使われる短いテキストの事です。 具体的にはボタンのキャプション、エラーメッセージ、ヘルプテキスト、サインアップフォームの案内など、行動喚起を促す際に使われます。 人は何らかの「きっかけ(トリガー)」がなければ行動を起こしません。マイクロコピーはユーザーが行動したり決断するきっかけを作る事ができます。小さな要素ですが、その効果は非常に大きく、うまく活用する事でUXの向上やCVアップが見込めます。 マイクロコピーの効果的な使い方 心理的なハードルを下げる 特に料金が発生する様な申し込みや登録は、ユーザにとって心理的なハードルが高いアクションです。 Amazonではボタンの下に「いつでもキャンセルできます」という一文を加え、「登録したら解約できないのでは？」といった不安を解消しています。 また、「時間がかかる」ということもユーザーにとっては心理的負荷がかかることです。 マイクロコピーの有名な実例で、メルマガの登録フォームボタンの文言を「登録する」から「より詳しく」に変更した事で、購読率が40%向上したというケースがあります。 「会員登録」となると、少し興味があっても「面倒くさそう」「時間がかかりそう」と、ボタンを押すのを躊躇してしまいますが、「より詳しく」というコピーする事で心理的なハードルが下がり、次のページに進みやすくなります。 別の方法として、会員登録せずに購入できる選択肢を作るという方法もあります。 運営側としては、なるべく会員登録を促したいと考えてしまいますが、ユーザーにとって心理的ハードルが低い選択肢も一緒に設ける事により、かえって売上が伸びる可能性があります。 具体的な数値を用いる 「導入実績〇〇社以上！」「リピート率〇%」など、具体的な数値を用いたマイクロコピーでは、信頼性や説得力が高まります。 特にCTAの近くに置く事で、アクションを起こすための「ひと押し」となり、CVRの改善が期待できます。 登録を促す場合は、数字を用いて「手軽さ」をアピールする事も効果的です。 移動中の隙間時間にスマホから申し込みを行うという事も考えられる為、「最速3分で見積もり！」「簡単5ステップ！」など、具体的な数字を用いて手軽さや簡単であるという事をアピールしましょう。 マイクロコピーを考える上で重要なのが、そのコピーがユーザにとって身近に感じられるかという点です。例えば「30代以上で500万人が利用！」より「30代以上の10人に1人が利用！」の方がイメージしやすくないでしょうか？ また、実験結果では「1分で完了」よりも「60秒で完了」と「秒」表記した方がCVRが高いという結果も出ています。単に数字を用いるだけでなく、ユーザーが具体的にイメージしやすく、身近に感じられるような表現にする事が大切です。 タイミングワードを用いる タイミングワードとは、緊急性のあるワードを使ったコピーの事です。「今すぐ」「まずは」「もう少しで」など、アクションを促進するワードを使う事で、ユーザーの行動を促します。 購入ボタンのラベルを「予約する」から「今すぐ予約する」に変更する事で、CVRが1. 5倍になったというケースもあり、現在は様々なサービスでこの「タイミングワード」を用いたコピーを見かけます。 ホテル予約サイトagodaでは、「お得な割引はこの60分だけ」といったタイミングワードが用いられています。コピーだけでなく、カウントダウンによる時間制限を設け、ユーザーの「損したくない」という気持ちをより一層高める工夫をしています。 メリット強調する CVR等の分析・改善をサポートする代理店CodaLift LLCのケースです。 各プランのCVR向上と有料版への新規顧客獲得を目的として、デザインの改善を行いABテストした結果、元々は月払いで表示していた金額から、よりお得額に見せる為に「年払いがお得である」というコピーを大きく表示したところ、収益が38%・平均注文金額が24%増加する結果となりました。 お得額の表示を月額→年間に変更しただけですが、金額差を大きく見せる事でユーザーの購買意欲を向上させ、全体の売上アップに繋がりました。 まとめ いかがでしたでしょうか？ マイクロコピーは、数文字程度の短い一文でですが、ユーザー満足度やコンバージョンに大きな影響を与えます。ページ全体の改善に比べて手間をかけずに実行出来る施策でもある為、事例を参考にしながら取り入れてみてはいかがでしょうか。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-11-22 - Modified: 2023-11-15 - URL: https://fastcoding.jp/blog/all/info/firstview/ - カテゴリー: UI/UX, Web業界の動向・情報 - タグ: UIUX, キービジュアル, ファーストビュー こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 ファーストビューはWebサイトの顔であり、企業の強みをアピール出来る重要な部分です。 コンバージョンにも影響する為、状況に応じて最適化する必要がありますが、どの様なデザインにすれば効果的か、悩む方も多いのではないでしょうか？ 今回は、効果的なファーストビューを作るためのポイントについてご紹介します。 ファーストビューの重要性 ファーストビューはWebサイトの印象を左右する重要な部分になります。ユーザーはわずかな時間でサイトの価値や信頼性を判断し、その印象がサイト全体に大きな影響を与えます。 ニーズに合ったファーストビューをつくる事が出来れば、ユーザーの滞在時間を伸ばし、コンバージョンアップを狙える可能性が高くなります。 逆にどんなに良質なサイトでも、ファーストビューで興味を引くことが出来なければ直帰率が上がり、コンバージョンの低下を招いてしまいます。 その為、ファーストビューを最適化する事はとても大切です。 デザインのポイント 訴求内容を絞る ファーストビューのビジュアルの見せ方として、固定表示と画像を切り替えて見せる（カルーセル）パターンがあります。 カルーセルのメリットは、限られたスペースの中で多くの情報を伝える事が出来る点です。たくさんの商品がある場合はカルーセルを使って内容を盛り込みたくなりますが、いくつかの実験データでは、カルーセルにする事でコンバージョンの低下を招いている可能性があると指摘されています。 その要因として、カルーセルでは情報量が多くなってしまい結局何のサイトなのか、何を売りとしているのかユーザーに伝わりにくくなるといった点があるようです。 また、クリックされるのは1枚目のみで、2枚目以降はほぼクリックされていないという結果になりました。 せっかくカルーセルに情報を盛り込んでも、ユーザーに見てもらえず、思うようにページ遷移が起こらない可能性があります。結果、より効果的なファーストビューを作る為には、訴求内容を絞る事が大切です。 「ユーザーのベネフィット」を提示 ベネフィットとは、商品(サービス)を利用する事によって得られる効果や恩恵の事です。メリットも同じ様な意味として使われますが、メリットは商品(サービス)自体の利点を指します。メリットも同じ様な意味で使われますが、メリットは商品(サービス)自体の利点を指します。 商品（サービス）の宣伝を目的としたサイトでは、どうしても商品の優れた部分をアピールしがちですが、機能的なメリットを伝るだけでは、なかなか商品の魅力は伝わりにくいものです。 例えば、家事代行サービスを例に挙げると以下になります。 「メリット」でサービスの特徴は伝わりますが、本当にこれが他の商品より優れているのかまでは分かりません。最悪の場合、他と比較する為に離脱してしまうかもしれません。また、ユーザーの目的が商品やサービスから得られる「体験」であった場合、商品の優れた点はユーザーにとって最も重要なポイントではない可能性もあります。 これに対し、ベネフィットの提示は、ユーザーが商品を利用している時の自分の姿を想像し易くなり、商品に対する興味や共感に繋がります。ユーザーは何かしらの目的を持ってWEBサイトを訪れますが、ベネフィットは最終目的であり、メリットはそれを達成する為の選択肢の一つとも言えます。よって、一瞬で利用価値を判断されるファーストビューでは、メリットよりもベネフィットを提示した方が効果的です。 瞬時に内容を判断できるメインビジュアル 瞬時に情報を伝える事が出来る写真やイラストは、ユーザーのベネフィットを伝える上で重要な要素です。 https://www. fondesk. jp/p/sayonara/ こちらは電話代行サービスのLPです。 「電話対応からの卒業」というテーマで、インパクトのあるキャッチコピーや写真と共に、サービス利用によって得られるベネフィットを上手く提示しています。 https://bollina. jp/ こちらはシャワーヘッドの商品サイトです。キービジュアルで商品の特徴を伝えなくても、「全身美顔器」というキャッチコピーにより「これを使うと全身綺麗になれそう」「どの様な効果があるのかもっと知りたい」と思わせるファーストビューになっています。 https://takedacpta. jp/ ビジネス＝物語という切り口で、顧客を物語の主人公に見立てたイラストが使われています。税理士事務所というと堅いイメージになりがちですが、柔らかいイラストとキャッチコピーにより、気軽に問い合わせできそうな雰囲気をつくっています。 安心感や信頼性を高める 安心感や信頼性を高める演出として、ファーストビューにマイクロコピーを置く方法があります。 マイクロコピーは「導入実績〇〇社以上！」「DL数NO. 1」など、数文字程度のフレーズの事で、ユーザーの行動を後押しする一言として使われます。 初めてサイトを訪れるユーザーにとって、十分な実績があるという事は安心材料に繋がり、一気に購買意欲が高まります。「顧客満足度」「売上」などは具体的な数字を入れてアピールしましょう。 その他、信頼性を高める方法として、キービジュアルに顔写真を使うのも効果的な方法です。 人の顔が入っている広告は、入っていない広告に比べて2倍近くコンバージョンが高くなるという報告があります。特に食品系のサイトで提供者の顔が見える事は、誠実さや安心感に繋がります。 表示速度を改善する どんなに良質なサイトも、流入後ページの表示に時間がかかってしまえば、直帰や離脱につながってしまいます。 Googleの調査では、ページの読み込みが3秒以上かかると、半分以上のユーザーが離脱するという事が分かっています。また、SEOでのランキングも下がる可能性が大きくなる為、表示速度の改善は非常に大切です。 ファストコーディングでは表示速度を改善するための様々な施策を行なっております。 無料診断も行っておりますので、お気軽にご利用下さい。 まとめ いかがでしたでしょうか？ Webサイトを制作したものの集客拡大に繋がっていない... とお悩みの方は、これらを参考にまずファーストビューを見直してみてはいかがでしょうか。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-11-20 - Modified: 2023-11-15 - URL: https://fastcoding.jp/blog/all/ui-ux/typography/ - カテゴリー: UI/UX - タグ: Webデザイン, タイトルデザイン, バナー制作, 文字組み こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 バナーやサイトのキービジュアルを制作する際、文字のデザインで悩んでしまう事はありませんか？ キービジュアルの制作においては素材も大切ですが、「文字組み」がしっかり決まるかどうかでバナーやサイトの印象が左右されます。 今回は、印象的な文字組みにする為の基本とアイディアについてご紹介します。 文字組みの基本 イメージに合った書体を選ぶ 文字は書体によってかなり雰囲気が変わる為、書体選びは大切です。 勢いやインパクトを持たせたイメージにしたい時は太めのゴシック体、高級感を持たせたり落ち着いた雰囲気に仕上げたい時は、細めの明朝体を使うと効果的です。 メリハリを付ける 文字組みで大切なのは文字の比率とバランスです。キャッチコピーの中で最も伝えたい内容は何か整理し、その文字が一番大きく見える様に配置しましょう。そうする事で全ての文字を読まなくても、ぱっと見ただけで内容が伝わりやすくなるます。 文字組のアイディア 右上がりにする スピード感を持たせた表現にしたい時は、右上がりにすると文字に動きとインパクトを持たせる事が出来ます。 ※ポイント 単に文字を右上がりにするだけだと、カタカナの「ー」や、語尾につく「？」「！」等の記号のバランスが崩れて違和感が出やすくなります。記号の縦幅・横幅もしっかり調整しましょう。 上下に動きをつける 文字を上下に動かして配置する事で、軽やかな印象を持たせる事ができます。 ※ポイント 単に上下にするだけでは単調になってしまったりクドくなってしまうので、文字のサイズにメリハリをつけて配置しましょう。 アーチ型にする アーチ型に文字を配置することで、丸みのある柔らかい印象になります。 ※ポイント アーチの角度がキツすぎると違和感が出て文字も読みにくくなります。 角度は抑えめにする事がポイントです。 図形を入れる 文字の一部を図形にすると、華やかで印象的な文字組みになります。 ※ポイント シンプルな文字組みでも、文字の意味に関連付いた図形を入れることで印象が強くなり、文字だけの場合よりも人の記憶に残りやすくなります。 まとめ いかがでしたでしょうか？ 文字組みは、やりすぎてバランスが崩れてしまったり、逆にシンプルすぎて単調に見えてしまったりと、塩梅が難しいところがあります。紹介した以外にも沢山のテクニックがありますが、まずは文字の読み易さやメリハリ感などを意識して制作する事が大切です。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-11-15 - Modified: 2023-11-15 - URL: https://fastcoding.jp/blog/all/direction/uxwriting/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, UXライティング こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 UXデザインはユーザーの一連の体験を設計しますが、その中でも重要となるのが「UXライティング」です。 今回はUXライティングの重要性と、制作する際に気をつけた方が良いポイントについて解説します。 UXライティングとは？ UXライティングとは、プロダクト内で使われるユーザーの行動を促す文言の事で、ストレス無く的確に情報を伝える為のライティング手法です。 具体的には、アクションボタンの文言やエラーメッセージ・注意喚起など、プロダクト内で使われる文言全般を指します。 UXライティングの重要性 ユーザーが迷わず直感的に操作する為にUXライティングはとても重要です。なぜなら、正しく行わなければ混乱を招き、離脱してしまう可能性があるからです。 よく見かける例として以下があります。下図はダイアログで予約のキャンセルを行なって良いか確認していますが、このような聞き方にしてしまうと、違いが起こりやすくなります。 この場合「OK」を押すとキャンセルが実行されますが、キャンセルしたいからと誤ってキャンセルボタンを押してしまうユーザーもいます。そうなると、キャンセルされずに予約が継続されてしまう事になります。 このライティングの一番の問題は、ダイアログ上に「キャンセル」という言葉が2つ出てきており、この2つの「キャンセル」の意味合いが同じなのかそうでないのか、不明確である点です。 この様に2重キャンセルは捉え方がややこしくなり、操作の妨げになってしまうため避けた方が良いとされています。 求人サイトの詳細ページに設置されたボタンを「今すぐ応募する」という文言にしているケースを見かけますが、これも離脱が起こる原因になります。このボタンは実際には応募入力フォームに遷移するのですが、事前にユーザー情報を登録していた場合、このボタンを押すだけで応募が完了してしまうのでは？と不安になるかもしれません。この場合、ボタンのラベルを「応募画面へ進む」に変更する事で安心して次のページに進む事が出来ます。 UXライティングで大切な事は、次に何が起こるのかユーザーが予想できる様にしてあげる事です。 オンラインショッピングの決済や予約サイトなど、様々な場面でこの様なケースを見かけますが、ライティング1つで離脱に繋がってしまったり、逆に改善する事でCVアップにも繋がるので、ユーザーの立場に立って丁寧なライティングを心掛けましょう。 気をつけるべきポイント 簡潔な文章にする まず念頭におくべき事は、基本的にユーザーは文字をあまり読んでいないという事です。これは調査結果からも明らかになっています。なので、説明テキストは基本読んでもらえない事を前提に、どうしたら伝えたい事が伝わるか考える必要があります。 先程の二重キャンセルの問題も、説明文をよく読んでおらず直感で操作するユーザーが多いため起こる問題です。 ユーザーは長い説明文を読んでいないという事から考えると、ボタンを見ただけで何が出来るのか、簡潔に伝える必要があります。キャンセルについて分かりやすく伝えるためには、「キャンセル」という言葉を「取り消し」に言い換え、ボタン文言も「はい」「いいえ」とする事で文章が簡潔になり、ユーザーの認知負荷を減らすことが出来ます。 言い回しを統一する 同じアクションでも画面によって違う言い回しにしてしまうと、混乱を招きやすくなります。 例えば、「ダウンロード」を別画面で「インストール」という表記に変えてしまったり、ボタンの「はい・いいえ」を「YES・NO」に変えてしまうと、操作中に迷いや違和感が生じてしまいます。そうなるとスムーズな操作とはいかなくなるので、ユーザーの学習コストを下げる為にも言い回しは統一するようにしましょう。 読みやすく工夫する 人の認知特性として、眼球を動かさずに文字を読めるのは9〜15文字前後であるとされています。 確かに、横に長いタイトルは読みにくく感じないでしょうか？ Yahoo! ニュースはこれらを考慮し、トピックス一覧のタイトルを15文字以内に収めています。 文章はなるべく短く収める事で人の記憶に残りやすくなります。収まらないない場合は15文字前後で改行し、可読性を高めましょう。 また、文章を瞬間的に理解させる工夫として「Z法則」を利用することも有効です。 大半の人は文字を読もうとする時、左上から右下に視線を動かします。その特性を利用して「削除する」「選択する」などの動詞を左上に置き、その内容に関する決定ボタンを右下に置くという方法です。左のケースは全てのメッセージを読まないと意味が伝わりませんが、右は部分的に見ただけでも意味が伝わりやすくなります。 まとめ いかがでしたでしょうか？ UXライティングで気をつけた方が良いポイントについて解説しましたが、一番大切なのはユーザーの立場に立って文章を考える事です。ボタン1つ取っても、ユーザーは何を目的としてこのボタンを押そうとするのか、またどんな不安や疑問を持つのか... 等、考えながら情報を組み立てていく様にしましょう。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-11-01 - Modified: 2025-05-13 - URL: https://fastcoding.jp/blog/all/info/trend/ - カテゴリー: Webデザイン, UI/UX, Web業界の動向・情報 - タグ: UI/UX, Webデザイン, デザイントレンド こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 気付けば2023年も残りわずかという事で、今年のデザインの傾向について振り返ってみたいと思います。ビジュアル面・レイアウト面・操作感などのインタラクティブ面でそれぞれ分けてご紹介します。 ビジュアル Y2K 「Y2K」(2000年代初頭のスタイル)は音楽・ファッション業界等、様々な分野でリバイバルされ、webデザインにも影響を与えています。 Y2Kはピンク・紫・緑など鮮やかなネオンカラーが特徴で、あえて低画素にして当時のWebサイト風にしたり、ピクセルアート風のフォントを使うなどレトロで懐かしい雰囲気ですが、最新のエフェクトと組み合わせる事で、逆に新鮮で新しくも感じられます。 https://www. vogue. es/micros/tendencias-moda-anos-80/ https://sonyesportsproject. com/こちらのリンク先は現在見ることができなくなっております（2025年5月現在） 3D空間 VRの様な3D空間を取り入れたサイトも多く見かけました。スクロールによって画面が進み、さらに360°ぐるっと回転する事によって、あたかもその空間にいるかの様なリッチな視覚体験ができます。 https://web. auto/ja/ https://aquaplayart-ipsa. com/こちらのリンク先は現在見ることができなくなっております（2024年10月現在） クレイモーフィズム フラットなら2Dから、最近は立体感ある3D表現も増えてきています。粘土のようなマットな質感を持った立体感のある表現が特徴的なクレイモーフィズムは、2023年も引き続きトレンドとなっています。フラットなデザインと相性が良く、ポイント的に使う事で先進的なイメージを与えることが出来ます。 https://corp. telecy. tv/ https://sdgsstory. global. brother/j/ グラスモーフィズム グラスモーフィズムは背景の上に半透明のレイヤーを重ね、すりガラスのような質感にみせるデザイン手法です。iPhoneのUIでも採用されており馴染みのあるデザインですが、軽やかで透明感のある表現が出来るため、使い方次第で洗練さや高級感を演出する事が出来ます。 https://www. pyuru. co. jp/ https://brik. co. jp/job レイアウト スプリットレイアウト スプリットレイアウトは画面を大きく二分割したレイアウトです。 情報量の少ないサイトは単調になりがちですが、このように大胆なレイアウトで見せ方に変化をつける事によって、オリジナリティが生まれます。 https://cocochi. design/ https://www. thefirsttake. jp/ スマホ風のレイアウト 近年レスポンシブデザインが主流となっており、PCとスマホでレイアウトを変えるのが一般的でしたが、最近はモバイルファーストの影響から、PCでもスマホのレイアウトを表示するサイトが増えてきました。 レイアウトを同一にする事で開発コストは下がりますが、PCで見るとどうしても余白が多くなる為、背景にも変化を付けたり、余白を生かしたデザインにする事がポイントです。 https://stylers. co. jp/ https://green-spoon. jp/vegetableday2023 インタラクティブ スクロールエフェクト スクロールによって画面上のストーリーが展開され、ユーザーを引き込みます。 クリックで画面遷移しなくてもスクロールだけでストーリー展開されるため、ユーザーのインタラクションコストを低減させたり、画面領域の狭いスマホとも相性が良い手法です。 https://www. kabu-kitamura. com https://aqm2. ai/ja/ まとめ いかがでしたでしょうか？ デザイン制作で迷ったら、ぜひ参考にしてみてください。ただ、トレンドを意識しすぎるあまり使いずらいサイトになってしまっては本末転倒ですので、制作の目的やコンテンツ内容にマッチするかについては検討する必要があります。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-09-01 - Modified: 2023-08-29 - URL: https://fastcoding.jp/blog/all/direction/color_vision/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, Webデザイン, 色覚 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 より多くの人が不自由なくサービスを使えるようにするためには「色覚」に配慮する事が大切ですが、色覚を意識してUI設計できているでしょうか？ 今回は色覚に配慮したUIを作るための方法について解説します。 どのように見えているのか？ 色覚とは？ 色覚とは、色を認識する力です。人は目から入ってくる光によって色を認識しており、目の奥にある網膜の錐体という視細胞で色を感じ取っています。 正常に色を見分ける為には3種類の錐体が必要ですが、錐体の個数には個人差があり、少ない方は本来の色の見え方とは異なって見えてしまいます。 色覚異常がある方の見え方 では、色覚に異常がある方はどの様に見えているのでしょうか？ 色覚異常は大きく3つのタイプに分かれており、赤い光を感じる事が難しいP型、緑の光を感じる事が難しいD型、他にもT型やA型などありますが、P・D型が多いとされています。 下記は、P型色覚とD型色覚の色の見え方です。赤系に見え方の変化があり、青系は見え方の差が少なくなります。 見やすくするための工夫 一般の人には問題なく見分けがつく色でも、色覚異常の方には混同しやすい色があります。 下の図は全く同じ色で作成されていますが、色覚によって見え方が全く変わってしまいます。左が一般色覚の見え方で、右がP・D型色覚の見え方です。この様に色覚に異常がある方はそれぞれの色が何に該当するのか区別できません。 この様な場合は、それぞれがどの項目に該当するのか表記することが必要です。 また、下図の様にコントラスト差のある色を組み合わせることで認識しやすくなります。 その他の方法としては、単なるベタ塗りで表現するのではなく、斜線やドットなどのハッチングを加えて情報を伝える方法もあります。 また、よくボタンの機能を色で分けているサイトがありますが、色覚異常の方には区別が付かない色の組み合わせがある為、色だけで識別させるUIはなるべく避けた方が良さそうです。 この様な場合は優先度が高い方のボタンに背景色を入れ、低い方は枠線のみにすると視認性が高くなり、選択しやすくなります。 色以外の表現方法を考える 色覚異常がある方は、上図の通り赤がカーキ色の様な鈍い色に見えています。 一般的に、フォームの「必須」項目やエラーは赤を使いますが、色覚異常の方は黒文字と赤文字の区別が付きにくいため、エラーである事が分かりにくくなってしまいます。 このような場合は注意アイコンを入れてエラーである事を分かりやすくしたり、エラーが出ている場所のテキストボックスに背景色を入れ、コントラストを付け目立たせる等、色で見分けが付かない場合でも情報を区別できる工夫が必要です。 まとめ いかがでしたでしょうか？ 色の見え方についてはイラストレーターの機能やアプリのシュミレーターを使えば簡単にチェックできるので、そういったものを活用しながら、だれもが不自由なく使えるUIを目指しましょう。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-08-29 - Modified: 2023-08-31 - URL: https://fastcoding.jp/blog/all/info/coding_01/ - カテゴリー: Web業界の動向・情報 こんにちは。FASTCODINGディレクターの働くおかんです。 皆さん、「コーディング代行」ってご存知でしょうか？ 名前は聞いたことがあるけれど、具体的にどんなことしてくれるの？という方もいらっしゃると思います。 この記事では、コーディング代行についての基本的な知識から依頼するにあたっての全体的な流れ、注意事項などを詳しく解説します。適正な価格を把握し、スムーズな依頼をするためのポイントもお伝えします。コーディング代行を上手に活用できれば、プロジェクトのスケジュールを短縮でき、予算も抑えることができますので、是非ご一読ください。 コーディング代行とは？ コーディング代行とは、Web制作において重要な作業であるコーディングを、プロの制作会社や専門の代行会社などに委託するサービスです。自社で開発を行う場合に比べて、専門知識を持つプロに作業を任せることで、効率的に高品質な成果物を得ることができるため、ホームページやサイトの制作を依頼する際に頼りにされる方法として注目されています。 特に、レスポンシブデザインでのWebサイトの構築やSEO対策、運用などに対してメリットがあります。 料金体系は委託先によっても異なりますが、基本料金に加えて必要なオプションを追加することができるなど、要望に対して柔軟に対応してもらえる会社がほとんどです。 効率的かつ高品質なWebページを実現する手段として、コーディング代行は多くの企業や個人に利用されています。 コーディング代行を依頼する前に知っておきたい基本的な流れ コーディング代行の依頼方法と注意点 コーディング代行を依頼する際には、外注先を選定することが重要です。制作会社やフリーランスなど、様々な業者がありますが、過去の実績や評判、料金などを比較し、信頼性のある会社を見極めましょう。依頼内容によって費用が異なるため、事前に相場を把握しておくことも必要です。 依頼する際には、作成するサイトやページの概要や要件、納期や納品形式、コストなどを明確にし、制作会社に正確に伝えることでトラブルを防げます。また、必要なデザインデータや指示書を共有することで、よりスムーズな進行が期待できます。 注意点としては、依頼する会社の信頼性を確認することや、納期遅延や品質不良に対する対策を考える必要があることです。会社として一定の品質を保っている制作会社と比較すると、フリーランスは個人の技量によるため品質にばらつきが出やすく、また万一制作がうまくいかない場合のリカバリー対応も行ってもらえず、最悪は連絡が取れなくなるということもあるので、法人のコーディング代行会社を選ぶ方がよいでしょう。 コーディング代行の外注先選びのポイント まずは複数の会社を比較し、ホームページやサイトの制作実績をチェックしましょう。これによって、実績のある信頼性の高いコーディング代行会社を見極めることができます。 次に、料金や対応についても注意深く見ていきます。相場を把握し、見積もりを複数社から取得することで、適正な費用を見積もることができます。また、制作会社の対応の丁寧さや迅速さも重要なポイントです。 さらに、ページの表示速度に対するこだわりやSEO対策の能力も見逃せません。会社のWebサイトや制作実績を見て、コードの品質やSEO対策の実績を確認しましょう。これによって、自社の目的に合った外注先を見つけることができます。 また、選んだ外注先の担当者とのコミュニケーション方法も確認してください。メールや電話でのやり取りが可能か、タスク管理ツールなどを使うかどうかによって、要件を詳細に伝えることができ、イメージのズレを防ぎ、スムーズな制作が期待できます。 コーディング代行の外注先は慎重に選び、しっかりと比較検討することで、満足度の高いコーディング代行を実現できます。価格やスピードだけはでなく、コミュニケーションの良さも重視しましょう。 スムーズな依頼のための準備と必要な資料のリスト 依頼前の資料準備と必要なデザインデータ HTMLコーディングの制作を依頼する際には、依頼前の資料準備も大切です。外注先に必要な情報やデザインデータをきちんと伝えることで、スムーズな制作進行が実現します。 まず、制作の目的やコンセプトを明確に伝えることが重要です。サイトの運用や発注に関する情報も含めて共有する打ち合わせを持つべきでしょう。また、必要なページ数やCMSの導入の有無、コンテンツのリニューアルなど、具体的な目的も明確に伝えることがポイントです。 デザインデータを提供する時は、使用しているソフトウェアの種類とバージョンも一緒に伝えましょう。デザインソフトウェアによっては、バージョンが違うことでファイルが開けなかったり、開いても誤差が出たりする場合があるためです。 コーディング代行の納品前の確認と修正対応 外注先でのコーディング作業が終わると、検収作業としてのコーディングの確認と修正の依頼を行います。制作されたページが要件にあっているかどうか、また要件にはないことであっても、実際にブラウザで表示を確認して使いやすいかどうかを確認してください。 特に検収時の確認では、デザインやレイアウトの整合性、機能の正常性、ブラウザやデバイスごとの表示確認など、細かな部分まで丁寧にチェックすることが大事です。外注先に対してどういった内容をテストしたか、テスト結果書の提供を依頼してみるのもありかもしれません。 もし、修正が必要な箇所があれば、その内容を明確に伝えることが大切です。どの部分にどういった問題があるか、どのようにしたいかを、画面のスクリーンショットを使って図示し、問題ない状態になるまで修正を依頼しましょう。 修正対応が完了したら、最終的な納品となります。納品形式としてデータを受け取るのか、それともサーバへのアップロードを依頼するのかを決め、外注先に伝えましょう。 コーディング代行の価格設定と見積もりのポイントとは？ コーディング代行の相場と料金体系 コーディング代行の相場や料金体系は、制作会社や依頼内容によって異なります。一般的な相場を把握しておくことで、適正な料金を見積もることが重要です。 相場は、ページ数やデザインの複雑さ、レスポンシブ対応などの仕様によって大きく変動します。また、制作会社の経験や実績、地域によっても異なる場合があります。 しっかりと比較検討することで、適切な相場を把握することができます。 料金体系は、会社によってかなり違いがあります。基本料金やディレクション料金があったり、時間ベースの料金体系を採用する会社もあれば、ページ単位の会社もあります。ですが基本的には制作全体にかかる工数や作業内容にに比例するため、必ず見積書を取得して比較しましょう。また、CMS導入やSEO対策などの追加オプションにも注意し、料金に含まれているかを確認しましょう。 また料金だけに目が行きがちですが、納品後の保証やサポート内容も確認することが重要です。料金が安いだけでサポートが不十分だったり、検収後の瑕疵対応を一切行わないなど、見積書では分からない部分もあります。見積書を取得する際に合わせて確認しましょう。 特急料金と即日納品の対応可能性の確認 コーディング代行を依頼する際には、特急料金や即日納品の対応も確認しておきましょう。実際にプロジェクトが進行していくなかで、デザイン作業に遅れが出たり、要件定義で新たな要件が出る場合もあり、短期間で制作をしなければならない場合もあります。 特急料金については、通常の納期よりも短い期間での対応を希望する場合に発生します。特急対応には追加料金が発生することが一般的であり、依頼前に料金や納期を確認しておくことが大切です。 また、即日納品についても制作会社や外注先によって異なる場合があります。短い期間での納品は可能な場合もありますが、コーディングの複雑さや要件によっては即日納品が難しい場合もありますので、必ず事前に相談しましょう。 特急対応や即日納品は、急ぎのプロジェクトや緊急のサイト更新に役立つオプションですが、追加料金がかかる場合もあることを忘れずに、コストやスケジュールを考慮した上で依頼を進めるようにしましょう。 まとめ 本記事では、HTMLコーディング代行に関する基本的な知識や依頼の流れを詳しく解説しました。コーディング代行の基本的な流れから、依頼方法と注意点、制作会社選びのポイント、相場と料金体系まで幅広くカバーしています。 しかしながら、実際の依頼方法や料金、流れは各社で細かく異なります。まずは打ち合わせを依頼して確認してみましょう。 --- - Published: 2023-07-10 - Modified: 2023-07-03 - URL: https://fastcoding.jp/blog/all/other/illustrator-hack1/ - カテゴリー: Webデザイン, その他 - タグ: 3Dイラスト こんにちは。FASTCODINGデザイナーの七転び八重子です。 イラストレータで簡単に、ぷっくりした3Dイラストを作ってみましょう。 ニューモフィズムなWebサイトにもピッタリなので、デザインの幅が広がります！ ステップ１ イラストを描く イラストレーターで平面のイラストを作成します。 POINT 同じカラーはくっつく！ 同じ色のパーツをグループにして、3D効果をかけると、くっ付きます。 別々に効果をかけたい場合は、別のグループにしておきます。 ステップ２ グループ事に3D効果をかける 同じ効果をかけて、パーツ同士をくっつけたい場合は、グループ化してから効果をかけます。 → → をクリックで簡単に3Dイラストになります。 ステップ３ リアルタイムプレビューでナチュナルな仕上げに 3Dとマテリアルのパラメーターの調整は、「リアルタイムプレビュー」をしてからの方が分かりやすいです。 パラメーターを調整して、膨らみ具合や、光の当たり方を調整します。ここは、いろいろ触った方が分かりやすいと思います。 POINT つるんとした質感とマットな質感 パラメーターの中にある、 → を調整します。 POINT 影をナチュラルにつける パラメーターの中にある、 → を調整します。角度やサイズなども調整できます。 あとは、作ったパーツを合わせて、完成です！ 今回は、3Dとマテリアルの「膨張」を紹介しました。次回は、立体的な木を作ってみたいと思います。 デザインもコーディングもFASTCODINGへお任せください ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-07-03 - Modified: 2024-02-27 - URL: https://fastcoding.jp/blog/all/info/googlemap-custom/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: googlemap, map design, グーグルマップ, デザイン, 地図 こんにちは。FASTCODINGデザイナーの七転び八重子です。 GoogleマップをWebサイトのデザインに合わせてカスタマイズする方法をまとめました。 サイトのカラーとマップのカラーを合わせることで、サイトの統一感が増して、グッと凝ったサイトにみせることができます。 はじめに。Googleマップの埋め込みって無料？有料？ 結論から言いますと、 普通のコーポレートサイトなどであれば、無料で利用できます! (2023年6月現在) iframe埋め込みの場合は完全無料 Googleマップの → を利用すれば、簡単にWebサイトにマップを表示できます。 このHTMLソースを貼り付けるだけで表示されます！とっても簡単です！ ですが、Googleマップ自体をサイトの小窓に表示させているようなものなので、表示をカスタマイズはできません。 Google Maps APIの場合は、条件化で無料 (従量制料金プラン) 「28,500回リクエスト/1ヶ月 （200ドル）まで無料 」 それ以上は、「1,000リクエストにつき7ドル課金」です。 最新料金プランの確認はこちら https://mapsplatform. google. com/intl/ja/pricing/ APIは、WebサイトににGoogleマップの機能を呼び込んで利用している感じなので、カスタマイズができます。 Uber、Airbnb、食べログ、Expediaなどのサービスは、Google Maps APIというインフラがあって初めてなりなっているサービスと言えます。 Googleマップをカスタマイズしているサイト Googleマップをカスタマイズしてオシャレにみせているサイトをご紹介ます。 THE-TOKYO-TOILET サイトに合わせて、淡い色味に変更し、アイコンを変更、ランドマークや駅名などの表示情報を調節していますね。無駄な表示がないので、アイコンが目立ち、とてもスッキリした印象にカスタマイズされています。右のアイコンをクリックするとマップに情報を表示する仕様も分かりやすくて良いですね。 薬局情報-吉田薬業株式会社 こちらも、サイトに合わせてトーンを合わせてアイコンを変更しています。 Googleマップカスタマイズの方法 GoogleマップをカスタマイズするにはGooglemapAPIを使います。 ① APIキーを取得 取得方法は割愛しますが、APIキーを取得しておきます。 取得方法はこちら Google Maps Platform ② GooglemapAPIを導入 HTMLのヘッダー＜head＞内に、下記の記述。取得したAPIキーを変更してください。 ② Googleマップを設置 Googleマップを表示させたい場所に下記の記述します。サイズを必ずスタイルで指定しましょう。 ③ Googleマップの詳細を指定 ④ Googleマップをカスタマイズ 全体のカラーや表示などを絞ったり Goolgeマップカスタマイズツール 「Google Maps APIs Styling Wizard」 Google Maps APIs Styling Wizard 最後にカスタマイズに便利なツールをご紹介します。 こちらで感覚的に、カラーや表示を変更しでき、スタイルをコピーして貼り付けすることができます。 左のメニューから、デザインを調整します。 最後に「FINISH」をクリックすると、JSONとURLが書き出されます。 デザインもコーディングもFASTCODINGへお任せください ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-06-07 - Modified: 2023-05-26 - URL: https://fastcoding.jp/blog/all/direction/color/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, Webデザイン, 配色 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 webサイトを制作する上で「色」はサイトの印象を決める重要な要素となります。失敗すると見難いサイトになってしまったり、ブランドイメージにも影響する為、配色については悩むことも多いのではないでしょうか。今回は、webサイトのデザインをする上での配色ルールや、コツについてご紹介します。 サイトを構成する3つのカラー メインカラー サイトの印象を決める色になります。一番主張したい色をメインカラーに設定します。 一般的にはブランドカラーの色に合わせる事が多いのですが、ブランドカラーをメインにする事で、サービスの認知を向上させる事にも繋がります。また、見出しやアクションボタンなど目に留めて欲しい場所で使う事で、統一感が出やすくなります。 ベースカラー 背景色など、最も大きな面積で使われる色です。基本的にベースカラーでは主張の少ない色を使用します。 その理由として、ベースカラーに濃い色を持ってきてしまうと、コンテンツが見難くなってしまう為です。 特に管理画面の様に何かしらの操作を行ったり、画面を見る時間が長いサイトについては視覚負担を考慮した色にしましょう。 アクセントカラー アクセントカラーはポイント的に使用します。主にバッジや注意喚起など、ユーザーの注意を引きたい場所で使用します。 3つのカラーの最適な比率 上で説明した3つの配色は、目安としてベースカラー70%、メインカラー25%、アクセントカラー5%の割合で使用すると良いとされています。 配色の考え方・プロセス ユーザーに与えたい印象で考える 次に色の決め方ですが、ユーザーに与えたい印象について把握・整理した上で、メインカラーを先に決定します。 色にはそれぞれ心理的なイメージがあり、赤はエネルギッシュ、青は信頼感や誠実なイメージを持たせる事ができます。 またメインカラーは、コンテンツが引き立つ色にする事も大切です。 例えばファッション系のサイトでは、コンテンツを引き立てるために無彩色をメインに配色しています。 また、食品関係のサイトでは赤系をメインに使う事で美味しそうに見せたり、黒を使う事で高級感を演出しています。 メインカラーはサービスの印象を大きく左右するものです。訴求したい商品のイメージや、サービスの目的を十分理解した上で決定しましょう。 トーンを合わせる メインカラーが決まったら、サイト全体に統一感を持たせる為、3色のトーンを合わせます。例えばメインカラーがパステル調の色だったとしたら、アクセントカラーもパステル調に合わせます。ここを合わせないと、サイトの世界観を崩してしまったり、チグハグな印象になってしまうので注意しましょう。 可読性に気をつける サイトのイメージを作り上げる上で、色のトーンを合わせる事は重要ですが、コントラストが強いもの同士を組み合わせると、眼球への負担が大きくなります。 例えばベースの背景色を白、文字を黒にすると、コントラストが強くなります。 文字が読まれる記事サイトでは、長い時間画面を眺めていると、眼球が光量を調整しようとして目が疲れてしまいます。 この様な場合は文字に真っ黒を使わず、少しだけ明るい黒にしてコントラストを弱める等、文字を読みやすくさせる工夫が必要です。 また、白は色の中で一番明るい色になるので、分量が多いと目が疲れる原因にもなります。 よく病院の手術室は壁の色は白ではなく、薄い緑〜青になっている事が多いのですが、その理由として手術中の医師の目の疲れを軽減させる目的があります。緑〜青系は赤の補色となり、視覚的なインパクトを軽減する効果があります。 webサイトも可読性に注意し、場合によっては背景色を真っ白にするのでは無く薄〜い青系を混ぜるなど、少しでも視覚負担を抑える工夫をしましょう。 まとめ いかがでしたでしょうか？ 今回は配色について説明しました。難しい場合はweb上に配色ツールもたくさん出ているので、そういったものを活用しながら進めていくのも良いと思います。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-06-02 - Modified: 2023-05-26 - URL: https://fastcoding.jp/blog/all/webdesign/smartphonedesign/ - カテゴリー: Webデザイン, UI/UX, ディレクション - タグ: UI/UX, ディレクション, デザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 現在WEBサイトはレスポンシブで制作されることがほとんどですが、その場合スマホサイトが縦に長くなりすぎてしまうという問題があります。 スマホはPCに比べて表示領域が狭いため、ある程度長くなってしまうのは仕方ないのですが、長くなり過ぎるとデメリットもあるので、制作の際は注意しましょう。 縦に長いことで起こる問題 下部のコンテンツが見られにくい 情報量が多くページが縦に長いと、単純にスクロールする手間が発生します。長すぎるページはスクロールが面倒になり途中で離脱してしまったり、途中のコンテンツから別ページに遷移する場合も多く、下部のコンテンツが見られにくいという傾向があります。 表示に時間がかかる ボリュームのあるページは重くなり、表示に時間がかります。また、スマホはPCなどと違って移動中などで閲覧される事が多く、電波状況に左右されやすくなります。その為、続きが表示されないといった状況になれば、離脱率も上がってしまいます。 情報を見失いやすい スマホページは縦方向にスクロールして閲覧しなければならない為、「タイトルと本文」の様なコンテンツのまとまりがPCと比べて見えづらくなります。スマホではコンテンツの量が増える程、今どのコンテンツにいるのか分かり難くなってしまいます。 具体的な方法 - 1＜全て表示させない＞ では、スマホページの長さを抑える具体的な方法についてご説明します。 長い文章を折り畳む ボリュームのあるテキストは全て表示させず、アコーディオンにして折り畳みます。 見出し以降を折り込む事で、見たい情報だけピンポイントにアクセス出来ます。 メニューの場合は開かなくても見出しを見ればある程度中身を想定出来ますが、見出しだけではわからない場合は、透過のグラデーションを入れる・「続きを見る」などの文言を入れて、続きの内容が分かる様にしてあげる事も大切です。 モーダル表示にする アコーディオンと同じくペースを短縮させる方法として、モーダルで表示させる方法もあります。 他画面に遷移させるほどの情報量では無いが、地味にスペースを取ってしまうような場合に適しています。 スマホでは非表示にする スペースを取る画像などは、スマホでは表示させないのも一つの手です。 ただし、デザインに違和感が出てしまったり、意味が伝わりにくくなる場合もある為、情報の優先順位はしっかり定義しましょう。 具体的な方法 - 2 ＜UIを見直す＞ タブ切り替えで表示する 類似コンテンツやカテゴリー分けされた情報はそのまま縦に表示にするのではなく、タブ切り替えにして表示する事で縦スペースを短縮できます。 横スクロールにする 同類のサムネイルやカセットが並ぶ場合は、横スクロールで表示します。ただ、デザイン処理によっては横スクロールに気づかない場合があります。 矢印や続きを見るなどの文言を入れたり、サムネイルをはみ出させるなどして、右にまだ続きの情報があるという事が分かる様にしましょう。 まとめ いかがでしたでしょうか？ スマホサイトの長さを抑える方法についていくつかご紹介しましたが、状況によってこの通りとは限りません。いずれにしてもユーザーにとって必要な情報か精査した上で、適したUIを選択する事が大切です。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2023-05-26 - Modified: 2023-05-26 - URL: https://fastcoding.jp/blog/clients/form/ - カテゴリー: ご契約者様専用 このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2023-05-09 - Modified: 2023-06-07 - URL: https://fastcoding.jp/blog/all/info/designwidth-2023-5/ - カテゴリー: React, Vue.js, Webデザイン, UI/UX, Web業界の動向・情報, ディレクション - タグ: アダプティブ, リキッド, リキッドレイアウト, レスポンシブWebデザイン, レスポンシブレイアウト, 固定幅 こんにちは。FASTCODINGデザイナーの七転び八重子です。 半年ごとの恒例テーマ「Webサイトのベストな横幅サイズ（コンテンツ幅）」 とかいいながら、一年ぶりの更新になってしまいました。。 今回は、フォントサイズも合わせて調べてみました。 はじめに2023年5月時点のディスプレイ解像度を確認していきます 海外向けのサイトの需要が増えている点を踏まえ、今回は、日本に限定せず、世界統計で見ることにします。 PC 昨年と比べて、主要サイズは変わっていませんが、PC全体が減少しています。PCからタブレットやモバイルに移行している模様です。 タブレット 主要サイズに大きな変更はないようですが、810px-1080pxサイズ（iPad第７〜９世代）のタブレットが増えているようです。 モバイル モバイルは、390px-844px（iPhone12）が増えたようです。 結論！Webサイトのコンテンツ幅とフォントサイズ 昨年と比べると、タブレットやモバイルが増えましたね。 これまでは、PCとモバイルのデザインをレスポンシブで対応していたと思いますが、今後はタブレットのデザインも重要になってくるかなと感じます。 ラップトップ コンテンツ幅：1100px ファーストビュー：700px アートボードサイズ：1400pxくらい デスクトップ コンテンツ幅：1720px ファーストビュー：850px アートボードサイズ：1920pxくらい タブレット コンテンツ幅：768px ファーストビュー：800px アートボードサイズ：768pxジャスト モバイル コンテンツ幅：360px ファーストビュー：800px アートボードサイズ：360pxジャスト 推奨フォントサイズ PC・モバイルともに16pxがGoogleが推奨するフォントサイズです。 文字数の多いサイトであれば、14px〜16pxで良いかもしれませんが、多言語サイトなど英語のフォントの場合は、14pxだとフォントが小さくて読みづらいので気をつけましょう。 まとめ 大きな変化は見られないですが、デスクトップからタブレットやモバイルへの移行は進んでいるなーという感じです。 特にタブレットは増えていたので、今後はタブレットデザインに力を入れても良いかと思います。 ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-12-15 - Modified: 2022-12-15 - URL: https://fastcoding.jp/blog/all/info/improvement/ - カテゴリー: Webデザイン, UI/UX, Web業界の動向・情報, ディレクション - タグ: UI/UX, UI改善, Webデザイン, 初心者 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 webサービスやアプリのコンバージョンを向上させる上で、UIデザインは非常に重要な役割を果たしています。分かりやすく使いやすいサイトを目指す上では、UIを見直し改善していく事が大切ですが、どこから改善すれば良いのか分からないというような場合も多いのではないでしょうか。 今回は、まず見直すべきUIと改善例について解説します。 選択肢を減らしてみる 迷いは離脱のもと？ 選択肢が多い場合、考えて操作する必要が出てくるためユーザーの精神的な負担が大きくなります。 下の図の様に会員登録やお問合せのボタンが並んでいるUIは、サービスサイトやLPなどでよく見かけるパターンですが、デザイン処理によっては混乱を招きやすくなってしまいます。 それぞれのボタンの色を変える事で多少見やすくなりますが、デザインルールとしてブランドカラーしか使えない場合もあります。左下の図の様に、見やすさを重視して関連性の無い色を使うのは、サイト全体のトーンや世界観を壊してしまう可能性もあるので避けたほうが無難です。この様な場合はCVボタンを並べるのは避け、どちらか一つのボタンに絞って設置する様にしましょう。 選択肢はできるだけ排除し、ユーザーの視覚的な負担を軽減する工夫が必要です。 情報の優先順位を付ける 重要な要素を目立たせる デザイン制作する上では要素を減らせない状況もあります。その場合は情報を並列にせず、優先順位を付ける事で見やすいUIになります。 人は「小より大」「線より面」「薄いより濃い」に目が留まります。これらの特性をデザインに利用することで認知しやすくなり、誘導させることができます。 ただし、左下の図の様に並列したボタンに「薄いより濃い」の特性を利用したデザインを適用する場合は注意が必要です。 確かに濃いボタンの優先度は高く見えますが、薄い色のボタンは非活性(押下出来ないボタン)の様に見えてしまう事がある為、かえって混乱を招いてしまうかもしれません。この様な場合は、面と線で強弱をつける様にしましょう。 隠しすぎない 情報量を考慮する 複数の選択肢の中から1つを選択させたい時、よく使われるのがプルダウンです。 ここ数年は、無駄を削ぎ落としたミニマルなデザインが主流となっていることもあり、画面をすっきり見せる事が出来るプルダウンはよく利用されるUIです。 しかし、ユーザーにとってプルダウンは展開してみないと中身が見えません。また、クリックして中身を開いた後に選ぶという2アクションになる為、一連の動作が手間に感じられる場合もあります。 これに比べ、ラジオボタンは1クリックのみで選択可能です。 2〜3個程度の選択肢であれば、なるべくラジオボタンで表示する様にしましょう。 では、選択肢が多い場合にプルダウンが適しているのか？と言われると、そうでもありません。 よく日付けなどを選択する際にプルダウンが使われている事がありますが、選択肢が多い場合にプルダウンを使うとスクロールが面倒になる為、ストレスを感じてしまう事があります。 レイアウトを工夫する 多すぎる選択肢の中から一つを選択させる場合は、状況に合った配置の工夫が必要です。 例えば、こちらのようにカレンダーを表示させ、直接選択してもらう方法です。それぞれ「月・日」を選ぶより、カレンダーで全体を俯瞰できる方が選択しやすくなります。 まとめ いかがでしたでしょうか？ 「デザインの改善」というとビジュアルを大きく変えなければいけないイメージですが、今回の様に小さな所を見直すだけで大幅に効果が上がるケースもあります。また、UI改善を行なった後は意図した結果になっているか検証しながら進めていく事も大切です。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-12-05 - Modified: 2022-11-29 - URL: https://fastcoding.jp/blog/all/direction/lp/ - カテゴリー: UI/UX, ディレクション - タグ: LP, UI/UX, Webデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 LPのストーリー構成を考えようと思った時、何か正しいのか、またどのように構成すればユーザーの興味を引けるのか、悩んでしまうことはありませんか？ LPは情報量が多くなる為、ただ情報を並べただけでは結局何が言いたいのか分からないページになってしまいがちです。 今回は、CVを高める為の基本的なストーリー構成とテクニックについて解説します。 まず抑えておくべきポイント ペルソナを設定する LPの構成の前に、まずはペルソナをできる限り具体的に設定する必要があります。 ペルソナを設定しユーザーの行動を可視化することで、刺さりそうな言葉や行動が具体的に見えるようになってきます。 良いLPの特徴は、ターゲットが明確であること、それに対してメッセージが明確であることです。ここでしっかりと考え、検討することで売上に繋がるLPとなります。 ユーザーの行動を可視化するには、カスタマージャーニーマップなど様々な方法があり、手法についてはこちらでも説明しています。 UXをデザインする方法 アピールポイントを絞る アピールしたい事は色々あると思いますが、最もアピールしたい部分は何なのか、いま一度整理してみましょう。 また、そのアピールポイントは他社と差別化できているでしょうか？ この部分がユーザーに伝わらないと、その先に進むことは難しくなります。 競合はどのように他社と差別化を図っているのか、という事もチェックしながらアピールポイントを絞りましょう。 伝わるLP構成の考え方 結・起・承・転の流れをつくる では、実際のストーリー構成についてです。 漫画や小説などのストーリー構成は「起・承・転・結」の流れで展開され、LPでも使われています。 具体的には以下のような構成になります。 一見問題なさそうですが、LPの場合「起・承・転・結」の構成はNGです。 なぜなら「起」が最初にくると、どうしても「掴み」が弱くなってしまうからです。 ユーザーを逃さずCVまで導くためには、まず興味を持ってもらわないと始まりません。 検索ワードにヒットして訪問したとしても、ファーストビューがありきたりな内容では、興味を持ってもらう事自体難しくなります。 その為、LPでは結末を最初に持ってくる「結・起・承・転」の流れを作る事がポイントとなります。 ユーザーの心理に沿って構成する 「結」 ユーザーが知りたいのは、商品を利用する事で得られるメリットです。 その為、LPの構成は検索ワードに対しての答え＝「結」の部分から入る事によって直球でアプローチしやすくなり、対象ユーザーにとって興味をもつきっかけとなります。 これが、LPの鉄板構成「結・起・承・転」です。 「起」 ユーザーが商品に興味を持ったら、次に知りたいのは、その解決方法です。たった2ヶ月で本当にそんなに体重を落とす事が出来るのか？どんな商品なのか？ユーザーの悩みに対する解決方法として、本題のサービス案内に入ります。 ここで具体的な説明を行い、サービスに対する理解を促します。 「承」 「承」のセクションでは「起」の内容をさらに深めていきます。 ここで解決できる理由や根拠について掘り下げます。たった2ヶ月でマイナス20kg目指せると言われても、本当かどうか納得できる説明がなければ購入はできません。 ここで解決できる証拠をしっかり説明し、ユーザーに利用するメリットを感じてもらえる事が大切となります。 また、CVを促す為には証拠のみではなく、安心感や信頼感も必要となりす。 LPではよく「お客様の声」など実際に商品を利用したユーザーの口コミを掲載していますが、商品の理解だけでなく信頼感を持たせる事で購入のハードルが下がり、CVに繋がりやすくなります。 「転」 「転」では、興味を持って読み進めてもらったユーザーに対して、疑問や不安を解消します。 「FAQ」や「良くある質問」などを設け、ユーザーが疑問に思うであろう事柄をあらかじめ記載し、自己解決できるようにしておきます。 具体的な解答が明示されている事で、一部のユーザーにとって場安心材料となるかもしれません。 離脱を防ぐためにも、なるべく多くの質問を用意し、ユーザーの疑問に応えられるようにしておきましょう。 まとめ いかがでしたでしょうか？ LPはユーザーの心理に沿ってストーリー構成する事で自然な流れとなり、内容の理解を深める事にも繋がります。一方的に商品紹介を行うだけのLPは、内容が伝わりにくく離脱を招きやすくなるので注意しましょう。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-11-14 - Modified: 2024-07-10 - URL: https://fastcoding.jp/blog/all/webdesign/responsive-liquid/ - カテゴリー: React, Vue.js, Webデザイン, ディレクション - タグ: アダプティブ, リキッド, リキッドレイアウト, レスポンシブWebデザイン, レスポンシブレイアウト, 固定幅 こんにちは。FASTCODING Webデザイナー、七転び八重子です。 レスポンシブレイアウトとリキッドレイアウト、どちらもデバイス事にサイトを最適化する手法なのですが、改めてその違いを明確に理解しましょう。 以前の記事で「レスポンシブ？リキッド？フレキシブル？レイアウトのまとめ」でレイアウト手法をまとめています。 今回は、「レスポンシブレイアウト」と「リキッドレイアウト」の違いにフォーカスします。 はじめに：FASTCODING流の区分け どちらも色々な定義が世の中にはあり、どれも大きな差異はなく、ほぼ同じような内容なのですが、ここでは明確にということで、FASTCODING流での区分けでご説明したいと思います。 レスポンシブもリキッドも、「画面サイズに合わせて、デザインを調整し、見やすく最適な表示にすること）」のレイアウトの手法の１つです。 デザイン的な見た目の違いと認識している方も多いのではないかと思いますが、正確には、「コーディングの作り方の違い」によって、画面幅やデバイスに応じて見た目が替わることを意味しています。Webデザインを制作するときは、とある１デバイス／１画面幅での見た目を、複数のデバイス／画面幅用に作りますので、Webデザインだけでは分からない、「サイトを制作する上での」情報、ということになります。 ※ことばの違いや定義の仕方によって、４つ以上存在させることも可能ですが、弊社の過去の経験上、ほとんどが上記の何れかに当てはまります。 レスポンシブレイアウト 「レスポンシブレイアウト（Responsive layout）」は、画面幅によって表示するデザイン（スタイル）が変わるレイアウトと、FASTCODINGでは定義しています。 レスポンシブレイアウトは、デバイスの画面幅に応じてコンテンツや画像、ナビゲーションなどの配置・表示/非表示などを調整するレイアウト/コーディング手法です。 デザインの切り替えは、「ブレイクポイント（※）」を基準にします。 もっとも多い使われ方は、横幅750ピクセル程度と、1024ピクセル程度を境目に、PC用のデザイン、タブレット用のデザイン、そしてスマートフォン用のデザインに切り替えるというレイアウトになります。 デザインが切り替わる画面幅をブレイクポイントといいます。例えば以下のように横幅に応じて表示するデザインが切り替わる、ということになります。 スマートフォン：～750px タブレット：751px〜1024px PC：1025px〜 反対の言葉が「アダプティブレイアウト」と言い、ブレイクポイントが１つもなく、画面幅を変えても見た目が変わりません。その代わり、スマホ表示やタブレット表示など、画面幅が異なるデバイスへ対応するために１つのページに対して複数のデザインやコーディングを用意して対応します。 リキッドレイアウト 「リキッドレイアウト（Liquid layout）」は、どのデバイスでも画面の横幅に合わせてコンテンツの表示サイズがピッタリ（100%）に可変されるレイアウトとFASTCODINGでは定義しています。 シンプルな言い方をしますと、「横スクロールバーが出ない」＝横スクロールしなくても全ての情報が見える状態、とも言えます。 反対の言葉が「ソリッド（固定幅）レイアウト」と言い、デバイス事に画面幅が変わっても、固定幅なので、幅が小さいとコンテンツが隠れてしまい、横スクロールが表示されます。 まとめ いろんなコーディング手法があるのですが、どの手法も組み合わせてコーディングすることがあります。 つまり、「固定幅」＋「レスポンシブ」もあれば、「アダプティブ」＋「リキッド」もあります。 ファストコーディングでは、様々なコーディング手法で目的に合ったSEOに強いコーディングを提供しています。ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-10-16 - Modified: 2025-10-11 - URL: https://fastcoding.jp/blog/all/direction/scrolltelling/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, スクロールテリング, デザイントレンド こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 気付けば2022年も残り3ヶ月になりましたね。残り数ヶ月という事で、今年のデザイン傾向について振り返ってみたいと思います。 ビジュアル的には3Dの様な立体感のあるものやニューモフィズムを意識したもの、また引き続きミニマルなデザインが多く見られましたが、中でも「スクロールテリング」の手法を使ったサイトを多く見かけました。 スクロールテリングとは？ 「スクロールテリング」に違い言葉で「ストーリーテリング」があります。 ストーリーテリングとは「物語を語る」ことで、近年マーケティングなどビジネスで重要視されています。 物語を語ると言っても、昔話などを語るという意味では無く、ビジネスにストーリーを持たせるという意味になります。 ビジネスの現場では数字や過去のデータなどが重要視されますが、単純にそれだけを説明するよりも、商品の誕生秘話や具体的な事例などストーリー性を持たせて説明した方が相手によりイメージが伝わりやすくなります。 Webサイトで使われる「スクロールテリング」は、スクロールと、「ストーリーテリング」を組み合わせた造語です。 ユーザーがスクロールダウンすると、その動きに合わせてグラフィックやアニメーションが起動し、画面上のストーリーが展開されます。 導入事例 では、スクロールテリングの手法を使った事例をご紹介します。 AirPods Pro BOTANIST 白泉社 RECRUTING SITE 2023 ※既にサイトは閉鎖されています（2025年10月現在） 導入メリット スマホやタブレットと相性が良い スクロールテリングは、画面遷移せずスクロールするだけでストーリーが展開されるため、画面領域の狭いスマホとも相性の良い手法です。 世界観が作りやすい スクロールと連動させて見せることでユーザーの興味を引き、サイトの世界観に没入しやすくなります。結果、感情や体験などUXの部分に訴えかけることができます。 この手法は、ユーザーの行動心理に訴えかけることでコンバージョンを高めるサイトに適しています。例えば、旅館やリゾートホテル・ウエディングのような画像を多用して世界観を作り込むブランディングサイトや、企業の採用サイトなどが挙げられます。 近年の採用サイトは各社様々な思考を凝らして制作している為、ただ単に会社のビジョンなどを書き連ねただけでは興味や共感を得ることは難しくなります。デザインのトレンドや手法を取り入れ、興味を持ってもらうことも大切です。 また、体験や共感と言ったUXの部分をデザインするためには、表面的なビジュアルの部分だけでなく、対象となるユーザーを深く調査した上でストーリーや筋書きを作る必要があります。 まとめ いかがでしたでしょうか？ 今回は今年のトレンドであるスクロールテリングについてご紹介しました。 ビジュアルのトレンドは時代に合わせて移り変わっていきますが、UX体験に関わる部分においては今後も重視される傾向になりそうです。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-08-02 - Modified: 2022-07-25 - URL: https://fastcoding.jp/blog/all/info/ga4-3/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: GA4, UA, グーグルアナリティクス４, ユニバーサルアナリティクス こんにちは。FASTCODING Webデザイナー、七転び八重子です。 前回、UAからGA4の移行方法を簡単にまとめたので、今回は、レポート画面の見方をまとめます。 ※ GA4は、2020年10月のリリースから、次々と機能を追加したりレポート画面のレイアウトを変更しているので、2022年7月時点での情報となります。 ユニバーサル アナリティクス（旧）とGoogleアナリティクス4（新）の違い ユニバーサル アナリティクス（旧）からGoogleアナリティクス4（新）への移行手順 ホーム 下記のデータが表示されます。 ・過去７日間におけるユーザー数 （期間はソート可能） ・リアルタイム測定（過去30分間のユーザー数） ・最近表示したもの （最近表示したアナリティクスページへのリンク） ・インサイト（大きく変化した数値） インサイトは、GoogleのAIによる機械学習を用いたアラートが表示されます。サイトまたはアプリに関する特定の異常値が表示されるので、何らかの対策が必要になる可能性のあるデータです。 レポート レポートでは、ユーザー（ユーザーの属性や環境）とライフサイクル（ユーザーのアクション）を把握することができます。 レポートのスナップショット レポートのスナップショットは、アプリやサイト全体の状況を把握できるデータをまとめたレポートが表示されます。各データへのリンクもあります。 ・トータルのユーザー数（Webサイトにアクセスした人数・そのうち初めてアクセスした人数・平均滞在時間） ・インサイト（大きく変化した数値） ・新規ユーザーの参照元（Googleから自然検索をしてなど、ユーザーどのようにしてアクセスしてきたのか） ・閲覧数が最も多いページ（アクセスの多いページからランキング表示） ・達成されたコンバージョン（成果）の回数 サイトの健康診断として、定期的に確認します。「特定の日にアクセス数が伸びた」「上位アクセスのページが変わった」など、変化があれば原因を探ります。 リアルタイム リアルタイムは、ユーザーがどのサイトまたはアプリからきて、どのような行動をしたかをリアルタイムにみることができます。 ・過去30分間のユーザー数（分単位） ・参照元、メディア、キャンペーン別のユーザー数（ユーザーはどこから流入しているか） ・ページタイトルまたはスクリーン名ごとのユーザー数（ユーザーが閲覧したページ） ・イベント発生数（ユーザーがどんなアクションを起こしたか） ・イベントごとのコンバージョン数（ユーザーがどんなコンバージョンを達成しているか） リアルタイムでは、新しいキャンペーンやサイトの変更がトラフィックにもたらした効果を瞬時に、また継続的に把握できます。例えば、新しく追加したコンテンツや、1日限りのプロモーションでユーザーがサイトやアプリに誘導されているかどうかを確認することができます。 ユーザー ユーザーの属性 ユーザーの属性を見ることができます。 ・場所（国、地域、市区町村） ・言語 ・年齢 ・性別 ・インタレストカテゴリ（ユーザーの興味関心をもとにターゲットユーザーに広告を配信する機能） WebサイトやLPを作る際に設定した「ペルソナ」に合致しているかどうかを把握する重要な指標になります！ テクノロジー テクノロジーでは、ユーザーがどのプラットフォーム（デバイス）を使用し、どのブラウザ、またはアプリからアクセスしたのかなど、ユーザー環境を見ることができます。 ・プラットフォーム ・OS ・デバイス ・ブラウザ ・デバイスカテゴリ ・画面のサイズ ・アプリ 使用したデバイスの画面サイズ（解像度）もみれるので、多くのユーザーが閲覧したサイズのサイトを優先的に改善するなどの対策が取れる！ ライフサイクル ライフサイクルは、ユーザー獲得から維持に至るまでのユーザーの行動全体を把握できます。 集客 集客は、ユーザーがどこからサイトにきたのか、どういった行動を取ったかを把握できます。 集客サマリー（ユーザー数・新規ユーザー流入元・セッション流入元・ライフタイムバリュー） ユーザー獲得（新規ユーザーの流入元） トラフィック獲得（新規ユーザーやリピーターによる新しいセッション） ＜ユーザー獲得レポートとトラフィック獲得レポートの違い！＞ユーザー獲得レポート GA4から新しく登場したメニューで初回ユーザーがどこから来たかを軸に集計しています。 トラフィック獲得レポート UAの集客メニューと同じで、セッションベースでどこから来たのかを軸に集計しています。 ユーザー獲得レポート活用して、どの流入元からの初回訪問ユーザーを獲得すればよりCV獲得に繋がるのかなど対策をしましょう。 エンゲージメント エンゲージメントは、「ページビュー」「スクロール」「リンクへのクリック」等のWebサイト上でのユーザーのアクションを指します。GA4最大の特徴でもあり、ユーザーがアクセスしたウェブページとアプリ画面別に、ユーザーエンゲージメントを測定できます。 エンゲージメントの概要（エンゲージメント時間・ページ表示回数・イベント発生回数・ユーザー数の推移・継続率） イベント（ユーザーが起こしたイベントの詳細） コンバージョン（設定した各種コンバージョンのグラフや表） ページとスクリーン（ユーザーがアクセスするページ、アプリ画面） ページとスクリーンは、よく見るデータの一つになると思います。どのページが最もアクセスされているのか把握できます。 収益化 収益化は、サイトとアプリにおける収益化の全体的な状況を把握できます。 収益化の概要（収益・購入者数・平均購入額・購入商品など） Eコマース購入数（販売しているアイテムから得られた収益と、ユーザーがとった行動を測定） アプリ内購入（アプリ内購入による収益を商品IDごとに測定） パブリッシャー広告（モバイルアプリの広告から得た収益を広告ユニットごとに測定） 計測のためには、専用の計測記述を追加してデータ取得を行う必要があります。 探索機能を活用して、ファネルレポートを作成することで、「サイト訪問→商品表示→カート追加→決済開始→購入完了」の5つのステップが表示され、ユーザーがどこで離脱しているかを把握できます。 維持率 維持率では、新規ユーザーとリピーター・ユーザー継続率・エンゲージメント時間・ライフタイムバリューなどを把握できます。 新しいユーザーとリピーターの時系列推移 コホート別のユーザー維持率の時系列推移（該当日から１/７/３０日後に再訪したユーザーの割合） コホート別のユーザーエンゲージメントの時系列推移（該当日から１/７/３０日後に再訪したユーザーの平均滞在時間） ユーザー維持率（新規ユーザー数を100%とした時に、何％が翌日以降戻ってきているかを42日先まで表示） ユーザーエンゲージメント（最初の42日間に再度サイトを訪れたユーザーの平均エンゲージメント時間） ライフタイムバリュー（新規ユーザーの初回訪問から120日間の平均収益を表示） まとめ 来年7月のUA（ユニバーサル アナリティクス）の終了までに、GA4へ移行し活用してみましょう！ ファストコーディングでは、SEOに強いコーディングを提供しています。 ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-07-26 - Modified: 2022-07-19 - URL: https://fastcoding.jp/blog/all/info/ga4-2/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: GA4, UA, アナリティクス移行, グーグルアナリティクス４, ユニバーサルアナリティクス こんにちは。FASTCODING Webデザイナー、七転び八重子です。 グーグルは、GoogleアナリティクスのUA（ユニバーサル アナリティクス）サポートを2023年7月1日をもって終了することを発表しました。したがって、7月1日以降はデータの取得ができなくなりますので、後継であるGoogleアナリティクス4か他の解析ツールの導入が必要です。今回は、UAからGA4の移行方法を簡単にまとめてみました。 ユニバーサル アナリティクス（旧）とGoogleアナリティクス4（新）の違い ① 新しいGoogleアナリティクス4プロパティを作成 これまで通り、Googleアナリティクスにログインします。 ①左下の「設定」へ ②GA4設定アシスタントへ ③「はじめに」へ ④「プロパティを作成」へ 以下の画面で、プロパティ設定は完了です。（かんたん！） タグの設定 ①上部のメニューから「タグマネージャー」を選択 新しいタブで、Googleタグマネージャーが表示されます。 ②「新しいタグ」へ進む ③タグ設定の右上部のアイコンをクリック。 ④「Google アナリティクス: GA4 設定」を選択。 ⑤測定IDを入力 測定IDの確認は、Goolgeアナリティクスで確認します。 左下の「管理」 → 「データストリーム」 ⑥トリガーへ進む ⑦「All Pages」を選択 ⑧「保存」する ⑨「公開」をクリック これで設定は終わりです。測定が開始されます！ まとめ 今回は、GAからGA4への移行方法をまとめましたが、次回は測定の見方をまとめたいと思います。 ファストコーディングでは、ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-07-19 - Modified: 2022-07-19 - URL: https://fastcoding.jp/blog/all/info/ga4-1/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: GA4, UA, アナリティクス移行, グーグルアナリティクス４, ユニバーサルアナリティクス こんにちは。FASTCODING Webデザイナー、七転び八重子です。 グーグルは、GoogleアナリティクスのUA（ユニバーサル アナリティクス）サポートを2023年7月1日をもって終了することを発表しました。したがって、7月1日以降はデータの取得ができなくなりますので、後継であるGoogleアナリティクス4か他の解析ツールの導入が必要です。今回は、これまで利用してきたユニバーサルアナリティクスとGoogleアナリティクス4の違いを簡単にまとめてみました、 UAとGA4の違い UAとGA4の大きな違いは、「解析対象」の違いです。 UA（旧）は、「ページを基準にしたセッション」を測定していたのに対して、 GA4（新）は、「ユーザーのアクション」を測定するので、全く違う解析ツールと言えます。 すでに移行した方は、管理画面のメニューが変わったので戸惑った方も多いと思います。 これは、時代に合わせた広告配信への切り替えが大きく関係しています。 広告配信と解析ツールってどう関係あるの？と思う方もいるかと思いますが、 そもそも、アナリティクスは、ユーザーの行動を正確に知り、的確な広告を出すためのツールとして開発され利用されています。 つまり、顧客の購買に至る行動が変わってきたので、これまでのやり方が頭打ちになってきたということです。 検索広告からディスプレイ広告へ ＜これまで＞ 検索連動型広告 欲しい商品や情報をインターネットで検索 → 価格やサービスを比較検討 → 購入する ＜さいきん＞ ディスプレイ広告 Facebook・Youtube・Instagram・アプリの広告 → 口コミ検索 → 購入する UAは、検索連動型広告の最適化が得意 従来の検索連動型広告の測定に特化していたのがUAでした。 UAは、「１ページ単位でどのくらいのセッション・直帰率・購入数だったか」 というページを基準にどのキーワードからの流入がCVRを高められるかなどの計測に優れています。 つまり、他のアプリやサイトに飛んでしまうと、別のユーザーとして測定してしまうため、詳細なユーザーの情報を得ることができません。 GA4は、ディスプレイ広告の最適化が得意 GA4は、「ユーザーがどのデバイスでどのWebサイト・アプリにアクセスし、どんなアクションを起こしたか」 という一人のユーザーのライフサイクルの計測に優れています。 まとめ ユニバーサル アナリティクス（旧）とGoogleアナリティクス4（新）の違いが理解できたところで、次回は、GA4の導入方法をまとめます。 ファストコーディングでは、ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-07-06 - Modified: 2022-06-23 - URL: https://fastcoding.jp/blog/all/info/ogp-img/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: Webサイトビルダー, Wix, ペライチ こんにちは。FASTCODING Webデザイナー、七転び八重子です。 新製品やサービス、キャンペーンなどの情報をWebサイトとSNSでリリースする事が多いと思いますが、その際の OGPの設定 はとても大切です。 今回は、OGRの設定とSNSごとに違うOGR画像のサイズをまとめてみました。 OGRって何？ OGPとは、「Open Graph Protcol」の略で、WebページがSNSでシェアされた際にタイムラインなどに表示されるサムネイル画像、ページタイトル、説明文のことです。 OGPの設定 OGP画像サイズ Facebook、Twitter、Instagram、で画像サイズが違いますが、別々に用意するのはちょっと手間になります。なので、結論から言いますと、 ・横幅 １２００ px 縦幅 630 px の画像サイズ ・テキストは、630 px の正方形の中に収まるようにしておく。 Facebook、Twitter ・横幅 １２００ px 縦幅 630 px の画像サイズ Instagram ・横幅 630 px 縦幅 630 px の画像サイズ OGP画像シミュレータを活用しよう OGP画像シミュレータで、デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートできます！ https://ogimage. tsmallfield. com/ まとめ OGPを設定することによって、Webページの情報に沿ったイメージ画像や適切なタイトル・説明文が表示されます。OGP未設定の場合は、SNS側で自動的にWebページ内から説明文や画像を表示されます。適切な情報を発信して、より多くのユーザーにWebサイトへ誘導しましょう。 ファストコーディングでは、ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-07-01 - Modified: 2022-06-23 - URL: https://fastcoding.jp/blog/all/info/liquid-design/ - カテゴリー: Webデザイン, Web業界の動向・情報, 便利サービス - タグ: グリットレイアウト, フレキシブルレイアウト, リキッドレイアウト, レスポンシブWebデザイン, レスポンシブレイアウト こんにちは。FASTCODING Webデザイナー、七転び八重子です。 Webサイト制作におけるレイアウトの手法、リキッド、フレキシブル、レスポンシブ、グリット、、、、用語がごっちゃになっていませんか？ 改めて、その違いをまとめてみました。 レスポンシブWebデザイン 「レスポンシブWebデザイン」とは、Webサイトを閲覧するユーザーが利用しているデバイス（パソコン・スマホ・タブレットなど）の画面サイズに合わせて、デザインを柔軟に調整し、見やすく最適な表示にすることを指します。 レスポンシブWebデザインは、どうやってレスポンシブにするかによって4種類の手法があります。 レスポンシブレイアウト レスポンシブレイアウトは、デバイスの画面幅に応じてコンテンツや画像、ナビゲーションなどの配置・表示/非表示などを調整するレイアウトです。デザインの切り替えは、「ブレイクポイント（※）」を基準にします。 ※デザインが切り替わる画面幅のサイズをブレイクポイントといいます。下記は例です。 スマートフォン：320px〜599px タブレット：600px〜1024px PC：1025px〜 リキッドレイアウト 「リキッドデザイン」は、どのデバイスでも画面の横幅に合わせてコンテンツの表示サイズがピッタリに可変されるレイアウトです。 フレキシブルレイアウト 「フレキシブルレイアウト」は、リキッドレイアウトと同じで要素の単位を%で指定しますが、最小幅と最大幅も指定したレイアウトです。 例えば、リキッドレイスレイアウトでは、大きなデスクトップで閲覧する場合、各要素が横長に広がり過ぎてかえって見づらくなってしまうことがあります。 これを避けるために、ブレイクポイントを指定することで、指定した幅以上の画面の場合は左右に余白を作って見やすい表示に調整します。 グリットレイアウト 「グリッドレイアウト」とは、Webサイトの幅と高さから、画面を縦横に格子状に分割し、ブロックで構成したレイアウトです。 CSSフレームワーク「Foundation」や「Masonry」があり、簡単に導入することができますが、外部ファイルなので仕様の変更に対応する必要があります。 デザインの注意点 画面幅よってフォントやブロック要素をサイズを調整する レイアウトの方法を４つご紹介しましたが、単に横スクロールが出ないようにするだけでは、ユーザーが見易いWebサイトとは言えません。その為、それぞれ画面のサイズに合わせて、フォントサイズや画像サイズなどを調整します。 まとめ レスポンシブといってもいろんなタイプのレイアウトがありましたね。 ファストコーディングでは、フレキシブレイアウトにサイズ調整をして、ユーザーにが最も見易いサイトの制作をしています。 デザインからコーディングまで丸っとお願いした場合は、ファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-06-28 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/website-builders2/ - カテゴリー: Webデザイン, Web業界の動向・情報, 便利サービス - タグ: Webサイトビルダー, Wix, ペライチ こんにちは。FASTCODING Webデザイナー、なな転び八重子です。 前回、Webサイトビルダーを選ぶ上で押さえておきたいポイントをまとめましたが、今回は目的別のおすすめビルダーをご紹介します。海外のツールについては、top10. comからスコアの高いビルダーツールを選びました。 おすすめWebサイトビルダー 個人から小規模法人サイトなら「Wix(ウィックス)」 ワンページWebサイトなら「ペライチ」 チャットボットと連携可能な「STUDIO(スタジオ)」 オンラインストアが開設なら「Shopify(ショッピファイ)」 国内利用者が多く解説本も多数！「Jimdo(ジンドゥー)」 まとめ 個人から小規模法人サイトなら「Wix(ウィックス)」 Wix（ウィックス）は、世界190か国で世界中で2億人以上が利用するドラッグ＆ドロップのホームページ作成ツールです。とにかく豊富な機能が揃っており、頻繁にアップデートされているので目的のサイトを比較的簡単に構築することができます。 日本語版公式サイト 料金プランはこちら メリット １、専門知識が不要 テンプレートを選び、ドラッグ＆ドロップでサイトが作成できる他、AIを使った自動作成ツールもあります。 ２、試したい機能がすぐ追加できる Wix Appというアプリが利用してサイトの機能拡張ができます。例えば、SNS連携、オンライン予約、チャットツール、ネットショップなど ３、集客に必要なマーケティングツールが使える メルマガ・ビデオメーカー・アクセス解析・SEOツール・SNS投稿など、サイトの宣伝と認知度アップに欠かせないマーケティングツールが充実しています。 ４、豊富なテンプレート プロのWebデザイナーが手がけた美しいテンプレートを500種類以上あります。また、無料で使える写真・動画素材を2万点以上あり、動的なデザイン性の高いサイトが作れます。 ５、アニメーション効果で動きのあるサイトが作れる ビジュアルエフェクトが使え、スクロール時のフェードイン、アニメーション、動画背景などを追加することができます。 デメリット １、独自ドメインで運用したい場合は、有料版にする必要がある Wix（ウィックス）は、無料版では独自ドメインが利用できません。独自ドメインを利用するには、「ドメイン接続プラン」以上のプランを利用する必要があります。 ２、制作途中でテンプレートの変更ができない 選択したテンプレートで制作を進めていくうちに、やっぱりこっちのテンプレートが試してみたいなといった時、途中で変更がききません。 Wixで作られたサイト ・株式会社 鈴木建工 ・FSC MOTORSPORT ・Powtoon ワンページWebサイトなら「ペライチ」 昨今流行りのワンページデザインサイトにぴったりなのがペライチさん。その名の通り、１ページのサイトを簡単な操作で制作できます。 公式サイト 料金プランはこちら メリット １、日本企業発のサービス 日本人向けに開発されているサービスなので、とにかく分かりやすい！ ２、30日のお試し期間 ビジネスプランの全機能が、30日間無料でお試しできます。 ３、とにかく操作が簡単 人気パーツをブロック単位でドラック＆ドロップできます。 ４、ビジネスサポート機能 フォーム・メルマガ配信・予約システム・決済・SNS連携・アクセス解析といった機能が利用できます。 デメリット １、独自ドメインで運用したい場合は、有料版にする必要がある ペライチも、無料版では独自ドメインが利用できません。独自ドメインを利用するには、「ライトプラン」以上のプランを利用する必要があります。 ２、ページ数の多いサイトには不向き １〜５ページくらいのサイトなら良いですが、１０ページを超えるようなサイトになる場合は、料金も高くなります。 チャットボットと連携可能な「STUDIO(スタジオ)」 STUDIO（スタジオ）は、完全オリジナルのデザイン制作が可能なノーコードツールです。他のビルダーサービスは、フォーマットから選択するものが大半ですが、STUDIOはテンプレートからカスタマイズする方法と、真っ白な状態から作り上げる方法を選択できます。１から作れるといっても、豊富な素材が用意されているので、わざわざ素材を用意する必要はありません。 公式サイト 料金プランはこちら メリット １、チャットボットとのサービス連携が可能 チャットボットは、ユーザーの問い合わせ内容に応じて、定型文の解答や選択肢を設けることで、ユーザーを待たすことなくスムーズに問題が解決できるので顧客満足度を上げることができます。最近はエンドユーザー向けサービスを提供している企業だけでなく、大企業でもチャットボットを導入するケースが多くなっています。 ２、日本語対応でサポート！チャットのレスポンスが早い 作業に困ったら、サイト内にあるチャットで気軽に質問できます。問題が起きても解決までが早いのは嬉しいサポートです。 ３、制作で共同作業ができる リアルタイムコラボレーション機能が標準装備されており、複数人でサイト制作を進めることができます。リアルタイムで同期されるので更新を待つ必要がありません。 デメリット １、多少HTMLの知識が必要 STUDIOは、ノーコードでWebサイトが作れますが、マージンやタイトルタグなど多少の知識が必要な場面があります。 ２、マーケティングの機能がない おしゃれなサイトが作れますが、マーケティング機能がないので自分でアナリティクスを導入する必要があります。 オンラインストアが開設なら「Shopify(ショッピファイ)」 Shopify(ショッピファイ)は、世界中で170万以上のショップに導入実績があります。越境ECが簡単開設できるプラットフォームとして人気があります。 公式サイト 料金プランはこちら メリット １、決済方法が豊富 Shopifyは、ビットコイン、PayPal、iDEALまで、世界中の100種類を超える外部の決済ゲートウェイサービスと統合しています。 ２、14日間の無料トライアル ３、Shopifyストアの商品を「楽天市場」と連携・販売できる 「楽天市場」との連携で、より多くのお客様にリーチでき、販売の在庫を一元管理することができます。 デメリット １、海外のサービスなので一部のアプリ機能は英語のみ ２、２４時間のサポートがあるが英語対応のみ 国内利用者が多く解説本も多数！「Jimdo(ジンドゥー)」 Jimdo(ジンドゥー)は、世界中で3200万以上のサイトで利用されているドイツ生まれのビルダーサービスですが、日本ではKDDIさんが協業パートナーになっており、日本語対応しています。 公式サイト 料金プランはこちら メリット １、白紙からこだわりのサイトを作成 or AIビルダーで作成 ジンドゥーの始め方は２つあります。AIビルダーは、質問に答えるだけでおしゃれなサイトを作成できます。 ２、日本語サポート対応 ３、SEOに強い 「ページタイトル」「メタディスクリプション」「画像代替テキスト」などの基本的なSEO対策が無料で利用できます。有料プランになると「XMLサイトマップ」「noindex/nofollow」「Googleサーチコンソールの連携」も利用できます。 デメリット １、無料版は180日以上ログインしていない場合、作成していたWebサイトが削除される可能性がある。 ２、バックアップ機能がない 専用アプリを入れる必要がありますが、バックアップファイルはHTMLで作成されるため、HTMLの知識がない場合は扱いが難しくなります。 まとめ 今回はおすすめのWebサイトビルダーをまとめてみましたが、制作会社に丸っとお願いした場合は、ファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-06-24 - Modified: 2022-06-23 - URL: https://fastcoding.jp/blog/all/info/website-builders1/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, 便利サービス - タグ: Webサイトビルダー, Wix, ペライチ こんにちは。FASTCODING Webデザイナー、なな転び八重子です。 クラウド型のCMSサービスのWebサイトビルダーは、ドラッグ&ドロップで簡単にWebサイトが作れる便利なツールです。海外で有名なWix（ウィックス）、日本企業発のペライチなど、いろんなツールがあり、どれを選んだら良いのか迷われる方も多いのではないでしょうか？今回は、選ぶ上で押さえておきたいポイントをまとめました。 【はじめに】 Webサイトビルダーを使用する５つのメリット ・専門知識が不要 ・無料で利用できる ・試したい機能がすぐ追加できる ・短期間で運用が可能 ・豊富なテンプレートから、デザイン性の高いサイトが作れる。 → Webサイトビルダーは、スタートアップや初期コストをできるだけ押さえたい場合に、おすすめのツールと言えます。 ① 必要な機能を検討しよう 例えば、 ・感覚的に操作できるシンプルなインターフェースならJimdo（ジンドゥー）。 ・豊富なストック画像に写真編集ツールならWix（ウィックス）とWeb. com（ウェブ･ドットコム）。 ・世界クラスのショッピングカートソリューションならSquarespace（スクエアスペース）とShopify（ショッピファイ）。 → それぞれ特化した機能があるので、比較検討します。 ② 質の高いテンプレートを選ぶ たくさんの無料テンプレートが用意されているからといって、良いサイトを制作できるわけではありません。少ないテンプレートでも質の高いものを選びましょう。例えば、WixとNetwork Solutionsは、競合他社よりも無料のテンプレートの数が少ないですが、提供しているテンプレートは、とても洗練されています。 ③ 有料or無料 無料ビルダー ほとんどの場合、独自のドメインの利用ができず、各ページに会社の広告が表示されることが多いです。 有料ビルダー 独自ドメインを使用でき、広告を取り除くことができます。また、より多くのストレージ、ツールを利用できます。 → 無料の場合、ストレージが少なく、読み込み時間が遅く、SEOとマーケティングツールが少ないことに注意してください！ ④ ビルダーブランド Webサイトビルダーを選ぶ上で、ブランドとしての信頼性を考慮しましょう！ Web. comは1995年から、GoDaddyは1997年からサービスを提供しています。Squarespaceは、機能とデザインからWebサービスとアプリケーション、ベストプラクティスに至るまで、何年にもわたって無数のWebby賞を受賞しています。 ⑤ SEOに強い せっかく作ったサイトが、検索エンジンに最適化されていなと、潜在的な訪問者、読者、顧客に見つけてもらえません。 WebサイトビルダーがSEOに対応しているかは以下の項目を確認してみてください。 ・タイトルタグ、メタ説明、および代替画像属性を編集する機能 ・自動化されたXMLおよびHTMLサイトマップ ・検索に適したURL（良い：sample. com/test-news;悪い：sample. com. com/7459123） ⑥ 日本語対応 便利で高機能なWebサイトビルダーツールでも、海外のツールは日本語に対応していないものもあります。 慣れてしまえば、英語のインターフェースでも問題ありませんが、日本語対応だとストレスがなくて良いですね。 まとめ いかがでしたでしょうか？ これらのポイントを押さえて、Webサイトビルダーを選べば、簡単にWebサイトを作ることができます！次回は、人気のWebサイトビルダーをご紹介します。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-03-25 - Modified: 2022-03-22 - URL: https://fastcoding.jp/blog/all/direction/component/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, コンポーネント こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 定番としてよく使われているUIであったとしても、使い方を間違えるとユーザーにとって使いにくくストレスとなってしまう場合があります。特にスマートフォンはPCに比べ領域が小さくなる為、UIデザインする際は気を付けなければなりません。 今回は、定番としてよく使われているものの、使い方に注意が必要なUIコンポーネントと、その改善方法についてご紹介します。 アコーディオン FAQなどで使われる事が多い折り畳み式のアコーディオンは、コンテンツを格納することができるのでページを短縮できるというメリットがあります。 一部をアコーディオン形式のUIにするのであれば特に問題ないですが、複数並べる場合は注意しないと使いにくい印象を与えてしまいます。 開いた時の情報量に注意 アコーディオンは自分が見たい情報のみを開いて閲覧でき、縦並びの表示である事からスマホでの表示に適していますが、項目を閉じるためには再度タップしなければなりません。 開いた時の情報量が多すぎるとスクロールが必要となり、元の位置まで戻って閉じる事が煩わしく感じたり、タップした項目を見つけづらくなってしまいます。 開いた時の情報量に注意し、多くなりすぎる場合はページ内リンクで補うなど表示方法を工夫しましょう。 デザインのポイント また、アコーディオンを使いやすくする上では開いた時のデザインも重要です。 各項目は見出しの役割も果たしているので、開いた時に見出しと本文の関係になるようにすると直感的に分かりやすくなります。 具体的には、段落を付ける・余白を取る・グルーピングするなど、入れ子構造になるようメリハリをつけたデザインになるようにしましょう。 ページTOPに戻るためのボタン 縦に長いスマホサイトでは、すぐページTOPに戻れるよう画面右下に固定されたボタンを多く見かけます。 上までわざわざスクロールしなくて良いのは便利ですが、画面の小さいスマホでは誤タップが起こりやすくなります。ある程度読み進めている途中で誤ってタップしてしまい、意図せずTOPに戻ってしまったらどうでしょうか。ストレスを感じ離脱する可能性も高くなってしまいます。 これを回避するためには、ボタンは画面に固定せずフッターの近くに置く、または随所にリンクを設置する事です。 モーダル モーダルはメッセージの表示などでよく使われるUIですが、スマホで使用する際は注意が必要です。 モーダルウィンドウは、元の画面に被る様に表示され、ユーザーがそのウィンドウでの操作を完了させるまで他の操作ができなくなります。ユーザーは必ず目を通すことになるので、重要な操作を促す時に使用する事で操作ミスを防ぐことが出来ます。 NGな使い方とは？ モーダルは元の画面を隠してしまう為、情報の比較が出来なくなります。 容易に元の画面に戻ることができますが、使い方を間違えると操作しづらくなり、ユーザーのストレスとなってしまいます。 また、フォームをモーダルで表示するなど、何かしら操作を必要とする場合、画面の小さいスマホでは誤って閉じてしまう可能性が高くなります。スクロールしなければならないような長いコンテンツも誤操作が起きやすくなるので、モーダルで表示するのはなるべく避けたほうが良さそうです。 モーダルはユーザーの操作の自由を制限します。無闇に多用せず、状況や情報量など検討した上で使うようにしましょう。 まとめ いかがでしたでしょうか？ これらは定番で使われているUIコンポーネントですが、何となくで使ってしまうと、とても使いにくいUIになってしまう可能性があります。デバイスや各コンポーネントの特徴を理解し、使い分ける様にしましよう。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-03-23 - Modified: 2022-03-14 - URL: https://fastcoding.jp/blog/all/webdesign/cta/ - カテゴリー: Webデザイン, UI/UX, ディレクション - タグ: CTA, CVR, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 コロナ禍でネットショッピングをする機会が増えた方も多いと思いますが、「今だけ送料無料！」「数量限定！」などと書かれているのを見て、思わず買い物カゴに入れた経験はないでしょうか。 この様な緊急性を高めたCTAは、コンバージョンに繋がりやすくなります。 サイトへの流入はあるものの、なかなかコンバージョンに繋がらない... という場合、CTAを見直した方が良いかもしれません。 今回は、緊急性を高めたCTAを作るポイントについてご紹介します。 ユーザーはどこで緊急性を感じているか ある商品を購入しようと決めているユーザーにとって、その購入タイミングは自由です。しかし、購入を先延ばしにした場合、通りかかったお店の商品の方が安ければ、そちらで購入してしまうかもしれません。 運営側としては今すぐ購入してもらいたい所ですが、いつでもアクセスなWebサイトでは先延ばしにされてしまいがちです。 いつ購入しても良い商品を「今買わないと！」と思わせるためにはどうしたら良いのでしょうか。 人は緊急性のある訴求に弱く、「今買わないと損するかも」「もう手に入らないかも」という心理が働いた時に行動するパターンが多くなります。 この様に感情に左右される部分が大きい為、ユーザーの心理をUIに落とし込んでいく必要があります。 緊急性を持たせるポイント 緊急性を持たせたワードを使う 「今すぐ」「今だけ」「今なら」の様なワードが入っているボタンを見かけた事があると思いますが、「今」というワードを使う事だけで限定的なニュアンス含み、メッセージに緊急性を持たせる事ができます。 実際、「ダウンロード」から「今すぐダウンロード」など、緊急性のある文言に変更しただけでCVRが増加した事例もあります。 時間制限の表記 タイムセールなど期間限定の場合、「この機会に安く買い物したい」という心理から、ユーザーの購買意欲は高まります。 行動の期間を設ける事で、検討している人にとっては「今行動しなければならない」という感情になり、行動喚起を促します。 希少性や価値を持たせる 期間制限と同じく、「今行動しなくてはならない」という心理を促す方法として、希少性や価値を持たせる方法があります。 「数量限定」「残りあと◯個」などの表現は希少性が高まります。 また、賃貸物件の検索サイトなどでは「今◯人が検討中です」「お気に入り登録◯件」等と表示される事がありますが、これも希少性や価値を高める上で重要です。 具体的な検討人数を載せる事で、他の人に取られたくないとう心理が働き、緊急性を高めます。 視覚的に緊急性を持たせるポイント 緊急度が高いと感じる色を使う 色には心理的効果があります。青や緑などの寒色系は沈静効果、赤や黄色などは高揚感を与える色として、注意喚起などに良く使われます。 緊急性を持たせたワードに加え、ユーザーの心理を後押しする色を使う事で相乗効果が生まれ、緊急度が高いと感じるCTAを作る事が出来ます。 CTAを最適な位置に配置する コンバージョンをアップする為には、何よりユーザーに認識してもらう事が大切です。 いくら緊急度の高いUIを作成しても、認識されなければ意味がありません。 ファーストビューなど一般的に目に留まりやすいとされている位置にCTAを配置するのはもちろんですが、ユーザーにとって最適な位置に置く事が大切となります。 例えばページ下部にCTAを置いた場合、途中で離脱したら目に入らないかも... と心配になるかもしれませんが、コンテンツを最後まで読んだということはそれだけ興味を持っているという事であり、コンバージョン率は高くなります。 適切なCTAの位置を把握する為には、ユーザーのインサイトを把握した上で、どこに置くべきか考える事が大切です。 まとめ いかがでしたでしょうか？ 今回は緊急性を高めたCTAを作るポイントについてご紹介しました。実際にはABテストを繰り返し行い効果を検証していく必要がありますが、すぐに取り入れられる施策も多いので試してみてはいかがでしょうか。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-03-16 - Modified: 2022-03-14 - URL: https://fastcoding.jp/blog/all/webdesign/eyecatch/ - カテゴリー: Webデザイン, UI/UX, ディレクション - タグ: UI/UX, アイキャッチ こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 webサイトを開いた時、一番に目に入るアイキャッチ。どんなコンテンツなのか、ユーザーに興味を持ってもらいサイトへ誘導することが目的ですが、何かが足りない・しっくりこない... などお悩みではないでしょうか？ 目を引くアイキャッチを作るには、ちょっとしたコツが必要です。 今回は覚えておけば応用できる「目を引くアイキャッチ」の作り方についてご紹介します。 コントラストが重要！ 目を引くアイキャッチを作る為に大切なのは「コントラスト」です。 コントラストとは、対照・対比という意味で、アイキャッチにおけるコントラストとは、明るい部分と暗い部分の差のことです。全体が同じトーンになってしまうと強調したい部分が強調できず、ぼんやりとした印象になりがちです。アイキャッチを見た時、何かはっきりしない印象になっているのであれば、全体のコントラストを見直してみましょう。 ユーザーは、アイキャッチを見て自分が求めているコンテンツか否かを3秒で判断していると言われています。瞬時で判断されてしまうからこそ、アイキャッチで伝えたい事がしっかり伝わる様、気を付けなければなりません。次に、気を付けるべきコントラスト3点について説明します。 1：色のコントラスト 下は化粧品のアイキャッチで、女性が好みそうなパステル系のカラーで仕上げて欲しいという依頼を受けた例です。左はパステル系のカラーでまとめ、優しい雰囲気にはなっていますが、全体が同じトーンになっているため単調で、少し暗いイメージになってしまっています。また、読ませたい文字の部分も同系色でまとめているため、文字がすっと目に入ってきません。 右では背景に白い余白を作る事で文字とのメリハリが付き、明るい印象になって文字も読みやすくなりました。 同系色でまとめすぎると同じトーンになり、ぼやけると説明しましたが、無闇に色を多用すると煩雑になり逆効果です。アイキャッチを作る際は、なるべく色数は抑え、目立たせたい所でアクセントカラーを使うと対比が生まれ、まとまりやすくなります。 2：文字のコントラスト 次に注意する点は、文字のコントラストです。 左のアイキャッチは文字を最初から読まないと、ぱっと見では内容が伝わりません。この様な長めのキャッチコピーは要点がすぐに掴めない為、読み飛ばされやすくなってしまいます。 右では読んで欲しい文字を強調させ、それ以外の文字は小さくしています。この様に、文字の大きさにコントラストを付けることで要点が掴みやすくなり、目を引くアイキャッチになりました。 3：画像のコントラスト 画像と文字のコントラストは、目を引くアイキャッチを作る上で最も重要です。 左は明るい画像に明るい色の文字を置いてしまっている為、文字と画像が馴染みすぎて見にくくなっています。このような場合、文字が見やすくなるまで画像の明るさを調整しましょう。右は極端な例ですが、画像の明度を調整し、画像と文字にコントラストをつけることによって見やすくなりました。 また、画像の使い方を工夫する事でも目を引くアイキャッチは作れます。 下は背景画像をシャープに区切ることで余白が生まれ、自然と文字に目が行きやすくなります。 認知特性を利用する 認知特性とは、具体的には以下の様なことです。人は意識しなくても変化がある部分に注目してしまうという特性があります。 これらを利用し、目を引くアイキャッチを作成しましょう。 大きいものから小さいものへ視線が動く 人は大きいものから小さいもの、太いものから細いものへと視線が動きます。アイキャッチを作る際は、情報の優先順位を付け、強調したい内容を大きく配置するようにしましょう。 瞬間的な判断能力 下記のランダムに並べた数字の中から「4」の数字を探そうとした場合、一番早く探せるのは「B」ではないでしょうか？全て同色のAは探しにくいですが、色数が多いCも一瞬で探すのは難しくなります。 アイキャッチも色数が増えることで視線が散らばり、煩雑な印象を与えやすくなるので注意しましょう。 変化を見つける力 情報が均一に配置されている場合、人は無意識に異なる形に視線を動かします。 アイキャッチを作る際は、形に変化をつけることで視線を誘導しながらテンポよく情報を伝えることができます。 まとめ いかがでしたでしょうか？ アイキャッチを作成していてしっくりこない場合は、無闇に修正するよりも全体のコントラストを調整したり、上で紹介した様な基本的な事を見直してみるだけでもぐっと良くなる場合があるので、意識してみましょう。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2022-03-02 - Modified: 2022-03-14 - URL: https://fastcoding.jp/blog/all/frontend/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96_%e7%94%bb%e5%83%8f%e5%87%a6%e7%90%86/ - カテゴリー: React, Vue.js, SEO - タグ: PSI, ページスピード 皆さん、こんにちは！ ファストコーディングベトナムのフロントエンド開発チームのNathanです。 前回は遅延読み込みを活用したページスピードスコアの向上について記述いたしました。 今回は画像処理によるページスピードスコアの向上について書いてみたいと思います。 画像処理だけですので、HTMLやJavaScriptを使うことが無く、とても単純なこと（だから効果があるの？）と思うかもしれませんが、実際弊社で対策をするWebサイトのほとんどは、この対策で数十点のスコアアップができています。 この記事では、色々なページスピード対策用の画像処理の方法をご紹介いたします。 ソース：https://www. kindpng. com/imgv/TRomTim_jpg-gif-png-and-svg-example-images-png/ 1．画像の横幅と高さを必ず指定すること。 画像のサイズは、CLS（Cumulative Layout Shift - 累積レイアウトシフト 読み込み中の表示ページコンテンツのレイアウトの安定性と変化を測定する）にある程度の影響があります。CLSが安定しないと、PSIスコアも大きく減点されてしまいます。 そのため、ウェブサイト内の画像サイズは必ず横幅と高さを指定してください。 特にレスポンシブウェブサイトのレイアウトを維持するためには、いくつかの留意点があります。以下代表的なものを記載いたします。 タグで “width” と “height”のサイズをパソコン画面（PC）で表示することを必ず設定すること。 レスポンシブな画面サイズの場合、キービジュアルイメージ要素の親要素に“height”を設定することを必ず注意すること（場合によっては「vw - viewport width」または「rem」単位を使用）。 親要素にクラスがない場合は、クラスを追加して、画像の高さと親要素の高さを一致するように設定できます。 2．ファイルサイズ圧縮ツールで画像サイズを最適化： ページスピードスコアにとって、画像のファイルサイズは小さければ小さいほど良いのですが、ファイルサイズを小さくすれば、その分画質も落ちてしまいます。 よってHTMLコーダーは程よい画質を維持したまま、ファイルサイズをできるだけ小さくすることを試みるわけですが、人間の手作業では限界があり、大きなファイルサイズのまま画像を利用しているWebサイトも多々見受けられます。 弊社では kraken. io というツールを用いて、画質をほどよくキープしたまま、ファイルサイズを最小化するようしています。 この手のツールは無数にありますが、いくつかのツールを使った結果、このツールが今のところ最適ではないかと思います。 開発環境（GruntやGulp等のタスクランナー）に取り込んで利用することもできるので、大変おすすめです。 ソース：https://kraken. io/ 以下は1例ですが、画質やファイル形式にもよりますが、ツールを使う前後では30～50％程度のファイルサイズの開きが出ることが多く、大変有用なツールです。 例） Original size: 724. 18 KB Kraked size: 467. 42 KB Savings: 256. 76 KB % Savings: 35. 46 % 3．WebPフォーマットでウェブサイトの画像を最適化 WebPフォーマットとは、Googleが開発したWebサイト向けの画像ファイルの形式を意味します。WebPフォーマットに対応しているブラウザの場合には、WebP画像を利用することで、ページスピードスコアが上がります。 具体的には、画像の現在の形式に「. webp」を追加し、サイトが「. htaccess」ファイルを介してwebp画像を受信できるようにする必要があります。 例えば： 古い画像：image. jpg 新しい画像：image. jpg. webp そしてこれが、上記のファイル名フォーマットの場合の「. htaccess」ファイルのコードです。 「. htaccess」ファイルを「index. html」ファイルと同じディレクトリレベルに配置する必要があります。 これは、Chrome Dev Tools（Chromeのデベロッパーツール）のタブに表示される結果です。 HTMLファイルの元の画像形式が保持され（左側のセル）、セクション（右側のセル）のウエブページに使用されている新しい「. webp」形式が表示されます。 よくあるご質問 質問：「index. html」ファイルに画像ファイルの新しい画像形式を直接追加しないのはなぜですか？ 答え：すべてのブラウザまたはデバイスが「. webp」画像(e. g. I. E, Safari)をサポートしているわけではないので、「index. html」の中に画像ファイル形式を直接「. webp」拡張子に追加することはおすすめしません。 4．遅延読み込み - 非表示画像の「遅延」読み込み 1つ前の記事と被りますが、遅延読み込みは、ブラウザがユーザーに結果を返す前に、同時に多くのWebページの画像を読み込むことを軽減します。遅延読み込みは、リソースの節約、ユーザーエクスペリエンスの向上、ページスピードスコアの向上に役立ちます。 次のようにタグにloading = "lazy"を追加することで、Webページの画像に遅延読み込みを使用できます。 注意：ATF（Above The Fold）に属する画像要素に遅延読み込みを設定しないでください。なぜならATF領域は遅延せずに即時に読み込むことが必要だからです。 5．適切なサイズの画像 必要な表示サイズに対して大きすぎる画像を設定するのは、PSIスコアに悪影響を及ぼします。 これを回避する方法は、元の画像のサイズを縮小して、Webページに必要な画像サイズと一致させることです。この作業はPhotoshop等の画像編集ソフトウェアで行うことができます。 上記の例は、レスポンシブ画面の画像サイズを縮小する方法を示しています。これは、デスクトップサイズの画像にも当てはまります。 まとめ ご覧のとおり、画像処理はページの読み込み速度を大幅に向上させ、ユーザーが待たなければならない時間を短縮するのに役立ちます。すぐにウェブサイトで問題を解決して改善しましょう！ --- - Published: 2022-02-23 - Modified: 2022-02-21 - URL: https://fastcoding.jp/blog/all/info/claymorphism/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: claymorphism, クレイモーフィズム, デザイントレンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 2022年の新しいUIデザインのトレンドである「クレイモーフィズム」をまとめてみました。 これまでのデザイントレンドはこちらをご覧ください。 「デザイントレンドを振り返ろう」 クレイモーフィズムとは？ クレイモーフィズムは、クレイ（粘土）のようなマットな質感に、膨らんだ丸みのある3D要素を特徴としたデザインです。 最近のメタバースやNFTの人気が背景にあるようです。 ニューモフィズムとクレイモーフィズムの違い どちらも内側と外側にシャドウををつけて立体感を出していますが、2019年に流行ったニューモフィズムは、背景に繋がって凹凸のあるデザインでしたが、クレイモーフィズムは、背景の上にプカプカ浮かんでいるように見えるデザインです。 丸みのあるカード クレイモーフィズムは、丸みのある立体的なカードが特徴的です。 角の丸くするだけでなく、ボタンなどはプクッと膨らませたように見えます。 半透明のグラスモーフィズムとの融合 2021年の秋頃から流行ったグラスモーフィズムは、磨りガラスのような半透明のレイヤーが特徴的です。 ダークモード クレイモーフィズムは、基本は明るいポップなカラーが似合いますが、ダークモードでもデザインできます。その場合は、丸みのあるカードがちゃんと見えるように、真っ黒にならないように気をつけてください。 クレイモーフィズムをCSSのみで作ってみた See the Pen Untitled by 野田 英里 (@fikgpnyd) on CodePen. まとめ 個人的には、3Dの流れは、今後も続くだろうとみています。ですが、全て3Dで作ると少しデザインが限定的になる感じもします。シンプルなフラットデザインに3Dの要素を加え、ログインなどのポップアップに半透明なカードを利用するとか素敵かなー？と思っています。 --- - Published: 2022-02-23 - Modified: 2022-03-14 - URL: https://fastcoding.jp/blog/all/frontend/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e5%af%be%e7%ad%96_lazy-loading_%e9%81%85%e5%bb%b6%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf/ - カテゴリー: React, Vue.js, SEO - タグ: PSI, ページスピード 皆さん、こんにちは！ ファストコーディングベトナムの フロントエンド開発のNathanです。 Webサイトへの訪問者数を増やし、Webサイトのパフォーマンスを向上させるために、遅延読み込みを使用してPSIスコアを向上させる方法をご案内します。 遅延読み込みとは PSIスコア、Webサイトのパフォーマンスを向上させるためには多くの方法がありますが、最も一般的に使用される方法の1つは「レイジーロード（lazy loading 遅延読み込み）」です。ユーザの体感速度を上げるために、要素に応じて読み込むタイミングを「ずらす」のが遅延読み込みということになります。 遅延読み込みの最大の目的は、ユーザーにとって重要性の低い部分の読み込みを遅らせ、出来る限り短い時間でWebサイトを表示するように、重要な部分（Webサイトインターフェイスに関連するセクション）を優先的に読み込むことです。 すべてのWebサイトに遅延読み込みを適用する必要があるのはなぜでしょうか？ 遅延読み込みというからには、最終的には（遅延したとしても）読み込まれます。そのような処置が何故必要なのでしょうか。これはユーザが見る画面の大きさには制約があり、常に1ページ丸々見えるわけではないので、実際に見える範囲だけを読み込むことで表示速度を早くしたいという思惑があるからです。 ページの読み込みが速いほど、ユーザの待ち時間は軽減され、ウェブサイトの高いパフォーマンスの印象（早いと感じること）がユーザーに与えられ、訪問者の数が増えます。これは、ウェブサイトに遅延読み込みを適用することの重要性を証明しています。 この記事では、色々な遅延読み込みの方法をご紹介いたします。 1．loading="lazy" イメージタグの場合、タグでloading = "lazy"属性を適用することで、遅延読み込みできます。 2．Intersection Observer Intersection Observerとは、表示する画像やテキストが、ユーザが見ている画面内（＝ここではビューポートと称します）に入ったかどうか、を検知するためのJavaScriptの機能の一つ（API）です。Intersection というのは、何かしらの要素が交わる、重なる、というような意味でして、この場合、HTMLの要素（DOM要素）が、表示領域に対して重なっているかどうかを監視する、というような意味ととらえられます。Intersection Observerを使いたい場合は、JavaScriptを利用することが必須です。この方法のメリットは タグや (YouTube）タグを使うことだけではなく、「src」を含む要素などにも適用することができます。 Intersection Observerはどのように動作するか？ ソース（src）を持つ要素は、要素のソースがビューポートと交差するまで非表示します。つまり、ビューポートに入ったとき（マウスを要素の位置まで引き下げたとき）にのみ、要素が表示されます。それ以外の場合、要素は非表示のままになります。 のHTML例： ⓵通常のタグ。 ②IntersectionObserverをで使用した場合。 よくあるご質問 質問1：なぜ空のソース（src）が必要になるのですか？ →回答：場合によっては、「src」がないと画像が表示されず、Dev Consoleに画像の「src」を求めるエラーメッセージが表示されるため、交差点オブザーバー（Intersection Observer）を使用することをお勧めします。 質問2：HTMLバリデーターで「要素imgの属性srcの値が正しくありません：空でない必要があります」といったエラーが発生します。 →回答：srcに#を設定することでエラーを回避できます。 JS： 3．下にスクロールするときにページをロード Intersection Observerと同じですが、この場合はユーザーがページの上部から一定の距離（ピクセル単位）下にスクロールした後に、無限スクロール（Infinite Scroll）の要素が表示されます。 ですので、JavaScriptを用いて、$（window）. on（）と$（window）. scrollTop（）のイベント定義が必要になります。 以下のコードでは、ページの上部から100pxの距離で要素を表示する条件を設定しています。 注1：下記のコードでは、ページを100pxから引下げられるたびに、Delayed Loadが初期化されてしまいます。今回の目的は、与えられた条件が満たされたときに一回だけDelayed Loadすることですので、コードが自動的に再初期化されないように終了条件を設定します。 以下はそのためのコードサンプルです。 「isInitSwiper」は、コードの実行を開始および終了するために使用する「キー」変数になります。 注2：同じブロック内で異なるJavaScriptブロックを初期化するには、異なる変数名を使用する必要があります。 注3：変数の名前はユーザーにとって重要です。変数の名前はA、B、C、Dの名前よりも意味のあるものにしてください。 4．Background Images YouTube iframeとタグに直接添付されたbackground-imageの両方で同じコードを使用できます。 以下のサンプルでは、まずbackground-imageはBelow The Foldであり、ページの下部にあることを前提にしています。 ソース： https://www. marketingtracer. com/seo/above-the-fold そして、以下がサンプルのJavaScriptコードです。 以下のような元のHTMLに対して、 以下のように編集します。 上記と同じ要領で、背景画像に対しての遅延読み込みも可能です。以下はそのサンプルのJavaScriptコードとなります。 まとめ 上記は、遅延読み込みでPSIスコアを改善する4つの方法です。情報を参照して、ウェブサイトに適した方法を選択してください。 --- - Published: 2022-02-21 - Modified: 2022-04-04 - URL: https://fastcoding.jp/blog/all/info/designwidth-2022-2/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション - タグ: 2022年, アートボードサイズ, コンテンツ幅, ファーストビュー, 横幅トレンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 はい。また、このテーマを扱う季節になりました。笑 半年ごとに、Webサイトのベストな横幅サイズ（コンテンツ幅）を調べている私です。今回は、ブラウザのサイズ状況と合わせて、国内のメディアサイト・コーポレートサイトを調べてみました。 半年前の記事はこちらをご覧ください。 「【2021年下半期】Webデザイナー必読！横幅サイズとファーストビューサイズ」 2022年2月時点のディスプレイ解像度を確認 こちらは、半年で大きな変化はないかと思いますが、半年前に比べると、人気のブラウザサイズは割合が高なっていることが分かります。 PC デスクトップでは1920x1080とラップトップでは1536x864が伸びていますね。 モバイル 新しいiPhoneの発売などで、こちらは大きく変わるようですが、ベースのサイズはそんなに変わらないですね。 タブレット タブレットは、相変わらず768x1024サイズが独走しています。 結論！Webサイトのコンテンツ幅 PCの場合は、少し手間ですが２つのサイズで対応しておくと良いですね。 できれば、このあたりは、リキッドレイアウトでマックスワイドを設けて対応が綺麗かなと思います。 1100pxのコンテンツ幅のサイトを大きなスクリーンで見ると左右の余白が大きく、画面が勿体無いですし、少し昔っぽい感じがします。 ラップトップ コンテンツ幅：1100px ファーストビュー：700px アートボードサイズ：1400pxくらい デスクトップ コンテンツ幅：1720px ファーストビュー：850px アートボードサイズ：1920pxくらい タブレット コンテンツ幅：768px ファーストビュー：800px アートボードサイズ：768pxジャスト モバイル コンテンツ幅：375px ファーストビュー：800px アートボードサイズ：375pxジャスト アートボードサイズは、デザイン時のサイズです。 国内の企業サイト調べ 実際に、サイトのコンテンツ幅をどのくらいに設定しているかみてみました。 以前調べた時に比べて、リニューアルのタイミングでコンテンツ幅が広くなっているようです。 まとめ 現在の支流は、1100px〜画面のサイズに応じて、マックスワイドを設けている仕様が多いようです。 次回は、Webサイトで表示する読みやすいフォントサイズを調べたいと思います。 --- - Published: 2022-02-08 - Modified: 2022-02-08 - URL: https://fastcoding.jp/blog/all/webdesign/design-trends/ - カテゴリー: Webデザイン - タグ: クレイモーフィズム, スキューモーフィズム, ニューモーフィズム, フラットデザイン2.0, マテリアルデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、2022年に流行るデザイントレンド「クレイモーフィズム」ついてまとめる前に、 これまでのデザイントレンドをざっとおさらいしてみます。 デザイントレンドを振り返ろう ほぼ毎年、新しいデザイントレンドが生まれているわけですが、その背景には、ビッグ・テックが生み出した商品やサービスの流れや、世界的なモバイルの普及のように、人々の生活に大きな影響を与えた社会的な変化などがあります。デザイントレンドは大きな支流があるものの、過去の流行ったものが近年、改めて見直されることもあります。新しいデザインを把握しつつ、デザインがもたらすメリットやデメリットをしっかり把握して、最適なデザインを選択していく必要があります。 2007年〜2012年 スキューモーフィズム リッチデザインとも呼ばれ、モバイルが普及し始めた当初に流行りました。 リッチ＝立体感のあるデザインと思われがちですが違います。 現物の見た目や動きに似せることで、初めて触る人でも直感的に操作できることを目的にしたデザインです。 スマートフォンが普及し始めた当初、現実の世界から、デジタルの世界へ移行するにあたり、このスキューモーフィズムは、スマートフォンを使ったことがないユーザーでも操作しやすく多くの人に使ってもらう為にはとても適切なアプローチでした。 2013年〜2014年 フラットデザイン フラットデザインは、シンプルさ・使いやすさを追求し、余分な要素を削いだデザインです。 立体感をなくし、すべてのオブジェクトが一つの平面上に存在しているようにみえます。 スキューモーでは、現実に存在しているものをデザインしましたが、Webアプリや新しいサービスなど現実に実在していないものを開発する時に問題が生じました。そこで採用されたのが、フラットデザインです。要素が簡素化されたので、モバイルではロード時間が短縮され、高解像度Retinaディスプレイや様々なディスプレイサイズにすぐ対応できるメリットもありました。また、世界的にはユーザビリティ（使い勝手の良さ）に重きを置く流れになり、2013年にAppleがiOS7のアプリデザインにフラットデザインを採用し、それ以降広く普及しました。 2014年〜 フラットデザイン2. 0 フラットデザイン2. 0は、従来のフラットデザインの良さを活かしつつ、ボタンなど重要な箇所は、立体感を装飾をするデザインです。 フラットデザインは、そのシンプルさから、クリックするボタンなどの領域がわかりずらいなど、ユーザビリティにおいて課題がありました。その課題を解決したのがフラットデザイン2. 0ですね。 今では、全体はフラットでシンプルだけど、ボタンだけシャドウで浮いたように見えるデザインが増えました。 2014年〜 マテリアルデザイン マテリアルデザインは、Googleが2014年にガイドラインで発表を行ったデザイン指針であり、フラットデザイン2. 0と見た目は近いですが、「実際に触れることが出来る現実世界」を根底に、以下のルール（一部抜粋）から成り立ちます。 １）要素を「シート（紙）」・「紙媒体」として捉える カードやボタン、リストなどは「シート（紙）」として考え、それらは1dpの厚さを持っており、紙の中に載せているテキスト・写真などの要素はその紙からはみ出してはいけない。 ２）縦と横と奥行が存在する マテリアルデザインは、現実世界がベースなので、奥行きも存在します。レイヤーが重なる場合は、シャドウをつけます。 ３）操作に応じたモーション（動き） マテリアルデザインは、ユーザーの操作に応じたモーション（動き）を多用します。モーションにはそれぞれ意味があり、装飾ではありません。 さらに詳しくは、こちらの記事でご紹介しています。 【1】これまでのデザインとマテリアルデザイン 【2】マテリアルデザイン実践 ①カラーの選び方 【3】マテリアルデザイン実践 ②ボタンのルールと作り方 2020年〜 ニューモーフィズム ニューモーフィズムは、オブジェクトの影に明暗2色のドロップシャドウを使い、浮き上がったり、くぼんでいるように見せるのが特徴のデザインで、美しく洗練された印象のデザインに仕上げることができます。 ニューモーフィズムはこちらの記事をご覧ください 【2020年】新しいデザインのトレンド「ニューモーフィズム」に注目 2022年〜 クレイモーフィズム クレイモーフィズムは、クレイ（粘土）のようなマットな質感に、膨らんだ丸みのある3D要素を特徴としたデザインです。 ニューモフィズムは、背景に繋がって凹凸のあるデザインでしたが、クレイモーフィズムは、背景の上にプカプカ浮かんでいるように見えるデザインです。 まとめ 次回、2022年のデザイントレンド「クレイモーフィズム」について、詳しく解説したいと思います。 こうして、トレンドを追ってみると、全体の流れの軸はユーザービリティにあります。ユーザーにとって、快適な操作や閲覧ができ、よりサービスを訴求できるようなデザインが求められるわけですが、トレンドも考慮しつつ、サービスやターゲットによって最適なデザインを選ぶことが大事かなと思います。 --- - Published: 2022-01-05 - Modified: 2021-12-29 - URL: https://fastcoding.jp/blog/all/webdesign/website-images-webp/ - カテゴリー: Webデザイン - タグ: WebP, 次世代フォーマット画像 こんにちは。FASTCODINGデザイナーの七転び八重子です。 page speed insights（ページスピードインサイト）でページ速度の判定をすると、対策の１つに「次世代フォーマットでの画像の配信」という項目があります。 今回は、次世代フォーマットでの画像「WebP」の特徴や作成方法についてまとめてみたいと思います。 JPAGやGIFなど様々な画像形式をまとめているので合わせてご覧ください。 目次 WebP（ウェッピー）とは？ 他の画像形式とWebPの比較 WebP対応ブラウザ WebP画像の作成方法 WebP（ウェッピー）とは？ Webp（ウェッピー）とはGoogleが開発した高圧縮率の次世代の静止画フォーマットで、拡張子は「. WebP」です。ページスピードの測定ツールのpage speed insights（ページスピードインサイト）で、「次世代フォーマットでの画像の配信」という項目の中で「Webp」の使用が推奨されています。Googleは、同等の画質のGoogleは、PNGと比較してサイズが26% 、 JPEG画像では25～34%小さくなると発表しています。 参照：https://developers. google. com/speed/webp 他の画像形式とWebPの比較 画像形式 圧縮形式 画像の透過 アニメーション対応色数 WebP非可逆圧縮○○フルカラー JPEG非可逆圧縮× ×フルカラー GIF可逆圧縮×○256色 PNG可逆圧縮 ○ ×フルカラー WebP対応ブラウザ https://caniuse. com/webp WebPは全てのブラウザに対応しているわけではありません。対応していないブラウザには従来のJPEG、PNGなどの画像形式を使用する必要があります。 対応状況×○○○× WebP画像の作成方法 Webデザインで利用する主要アプリケーション、Sketch,Photoshop,AdobeXD,ではWebPの書き出しに現在対応していません。（2021年12月現在） 使用する場合は、変換ソフトを利用します。 Squoosh Google開発のオンラインコンバーターです。 https://squoosh. app/ 「Drop OR Paste」に変換したい画像をドラッグ＆ドロップします。 左側の画像が元画像、右側の画像が変換後の画像です。画面を見ながら調整できるので、便利ですね。WebP以外の画像形式への書き出しも可能です。 まとめ 今後、WebPは普及していくと思いますが、今は対応ブラウザや変換ソフトが必要な事から、利用には検討が必要です。画像を軽くすることで、ページスピードの改善に繋がります。 ファーストコーディングでは、完全成果報酬でGoogle PageSpeed Insightsで高スコアを獲得できるように、Webサイトを高速化するサービスを提供しています。 --- - Published: 2021-12-28 - Modified: 2021-12-29 - URL: https://fastcoding.jp/blog/all/webdesign/website-images/ - カテゴリー: Webデザイン - タグ: GIF, JPEG, PNG, SVG, WebP, 次世代フォーマット画像 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトで利用する画像といっても、GIF、JPEG、PNG、SVG、TIFF、BMPなど様々な画像形式があります。最近では、次世代画像フォーマット「WebP」などが新しく登場していますね。 今回は、それぞれの画像の特徴と目的に応じた使い方をまとめました。Webサイトで利用する場合の使い分けもまとめているので参考にしてみてください。 目次 画像形式と特徴一覧 Webサイトで利用する場合 まとめ 画像形式と特徴一覧 画像形式と拡張子 パソコンで画像データを扱う際、ファイル名の後ろに「. jpg」などの記号がついていると思いますが、こちらが拡張子です。そのファイルがどの画像形式なのか、拡張子を見ると分かります。 JPEG （ジェイペグ） 写真に最適な画像形式です。ファイルの拡張子は「. jpg」になります。 JPEGは、フルカラーの1,677万色を表現することができ、風景写真や繊細なグラデーションがある画像に適しています。「不可逆圧縮（一度圧縮すると元のサイズには戻せない形式）」という、簡単に言うと、写真加工などで画質を下げて保存してしまうと、元の画質には戻せなくなる特徴があり、画像加工の前に必ず元データをとっておく必要があります。 GIF （ジフ） 主に簡易的なアニメーションや画像の連続表示に最適な画像形式です。ファイルの拡張子は「. gif」になります。 GIFの特徴は、データ容量が非常に小さく、256色までしか表現できないので、複雑な色の表現には適していませんが、1つのGIFファイルに複数の画像データを挿入し簡易的なアニメーション動画を作ることができます。 PNG （ピング） PNGは、GIFの代わりに開発された経緯があり、Webサイトのロゴやアイコンなどでよく利用されています。ファイルの拡張子は「. png」になります。 JPEG同様1677万色を表現でき、可逆圧縮（圧縮しても元のサイズに戻せる形式）のため、保存を繰り返しても画質が劣化しません。RGB（PCの画面表示で使用される色の設定）のみ対応しており、CMY（印刷物に使用される色の設定）には対応していません。印刷物の利用には不向きです。 SVG （エスブイジー） SVG（Scalable Vector Graphics)その名(Vector)の通り、ベクタ形式のデータです。ファイルの拡張子は「. svg」になります。 JPEGやPNGはラスタ形式の画像ファイルで、点（pixel）で画像を表現している為、拡大すると、荒い画像になりますが、SVGはベクター形式なので、拡大縮小でデータが劣化することがありません。 ベクタ形式とは？ 画像や文字など情報を数値化して記録しており、ブラウザがその場で描画してくれます。解像度を気にすることも、拡大縮小でデータが劣化することもありません。 例） ＜circle cx=“50” cy=“50” r=“150”/＞ X=50 Y=50 を中心に半径50の円を描きなさいという意味になります。 TIFF （ティフ） 印刷向きの画像形式で、画像データに、タグと呼ばれる詳細な画像情報が含まれており、再現性に優れ高解像度な画像です。ファイルの拡張子は「. tif」になります。 ファイルサイズが大きく、Webでは扱えない形式です。JPEGと同じく、「不可逆圧縮（一度圧縮すると元のサイズには戻せない形式）」ですが、非圧縮で保存ができ、また、圧縮方法を選択できる特性を持ちあわせています。 BMP （ビットマップ） Windows OSのパソコンの標準的に使用されており、高画質で無圧縮為、画像が劣化することはありませんが、ファイルの容量は大きくなります。拡張子は「. bmp」になります。 現在では、画像が劣化せずに圧縮出来る拡張子があるため、保存形式としてあえてBMP形式を採用する意味はなくなっています。 WebP（ウェッピー） Googleが開発した画像形式で、JPEGやPNGよりも2〜3割程度データサイズが軽くなるようです。拡張子は「. webp」になります。 非可逆圧縮でありながら透過も可能な所が特徴的です。 Core Web Vitals を測定する、PageSpeed Insights（ページスピードインサイト）でも、WebPが推奨されていますが、現時点で表示出来るOSやブラウザが限定されており、表示できないブラウザに対してはJEPGやPNGでの代替画像の準備が必要になります。 Webサイトで利用する場合 Webサイトで利用する場合は、写真とアイコンなどで扱う画像形式を変えます。近年は、SVGのブラウザ対応が追いついてきたので、多くのWebサイトでの利用されています。 レスポンシブサイトでは、ロゴやアイコンのサイズが拡大縮小しても、綺麗に表示することができます。 ・写真の場合 JPG ・ロゴ、アイコンの場合 PNG or SVG ・写真で透過させたい場合 png ・色数の少ないイラスト PNG or SVG ・簡易アニメーション GIF Webサイトで画像を扱う場合は、ファイルサイズに注意しましょう。 撮影したオリジナルの画像をそのままアップすると、容量が大きく読み込みに時間がかかるので、ページスピードが遅くなってしまいます。必ず、適正なサイズにしてから利用してください。 画質を綺麗に保ったまま、サイズダウンできる便利サイト こちらのサイト、画像をアップロードするだけです。お手軽でかなり便利なサイトです。私もよく利用しています。ブログなどで利用する写真などや、メールに添付する場合に重宝します。 まとめ Webサイトでは、適切な画像を選び、ファイルサイズをなるべく軽くできるようにしましょう！画像を軽くすると、読み込みスピードの負担が軽減され、UXが向上します。 ファーストコーディングでは、完全成果報酬でGoogle PageSpeed Insightsで高スコアを獲得できるように、Webサイトを高速化するサービスを提供しています。 --- - Published: 2021-12-16 - Modified: 2021-12-13 - URL: https://fastcoding.jp/blog/all/direction/gaze/ - カテゴリー: UI/UX, ディレクション - タグ: UIUX, 視線誘導 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 「視線誘導」をご存知でしょうか？ 情報設計する上では、ユーザーに情報が正しく伝わる事、またユーザーがストレスなくその情報をキャッチできる構成になっているかがが重要ですが、その情報を効果的に伝える手法の1つとして「視線誘導」があります。 視線誘導とは？ 「視線誘導」とは、ユーザーの視線の流れをコントロールし誘導するために使われる手法です。 人は視線を動かす時、無意識に動かすパターンがいくつか存在します。 そのパターンを意識したレイアウトにする事で、ユーザーに情報が伝わりやすくなるというメリットがあります。 視線誘導をうまく活かす為には、人が「何から見るか」「どこから見るか」について知ることが大切です。 では、代表的なパターンをいくつかご紹介します。 Z型パターン Z型の視線の流れは以下のパターンです。 左上→右上→左下→右下 視線がアルファベットの「Z」のように動くため、『Z型』と呼ばれています。 Z型は情報の強度が均一であるときに効果が表れ、シンプルな構成のデザインに有効です。 このパターンで最も注目されるのは左上です。重要な情報は、最初に見られるこの部分に大きく配置しましょう。また、Ｚの終わり（右下）も目線が止まりやすいため、この部分にアクションボタンを置くと効果的です。 F型パターン F型の視線の流れは以下のパターンです。 アルファベットの『F』の様に左上→右上→左下→右下へと下がりながら移動します。 F型はニュース記事など「読ませる」情報が多いものによく使われています。 さっと全体の情報を見渡すことができますが、下部にいくにつれ情報が読みとばされやすいことがあります。 その他のパターン 大きいものから小さいものへ視線は動く 人の視線は、まず大きなものに注目し、その後小さいものへと動きます。 「見出し」は本文に比べ文字を大きく配置しますが、これも視線誘導を使った効果です。一番に伝えたいことを大きく載せ、そこをスタート地点として内容へ導きます。 例えば、すべての画像や文字のサイズを同じにしてしまうと、見にくくなる上に情報も読み飛ばされやすくなってしまいますが、サイズに変化をつけることで視線をコントロールする事ができます。 同形、同色へ視線は動く 情報が均一に配置されている場合、人は無意識に形が同じ画像や、同じ色の文字に視線を動かします。 Webサイトのデザインでは、同形、同色のあしらいを繰り返し使うことで、統一感や美しさを演出する他、視線を誘導しながらテンポよく情報を伝えることができます。 数字の順番に視線は動く 数字を使う事でも視線を誘導することが出来ます。 人は無意識に、数字の順に視線を動かします。たとえ不規則な配置だったとしても、数字をふることで数字の順番に目線が動きます。 しかし視線の先に予想していた番号がない事は、ユーザーにとってストレスになる為、配置は注意しましょう。 まとめ いかがでしたでしょうか？ 視線誘導は Web以外にも広告やポスター、公共施設など様々なところで使われています。視線の流れをスムーズに誘導する事は、ユーザビリティを高める上でも重要です。「視線誘導」のパターンを理解し、情報設計やデザインに活かしましょう。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-12-13 - Modified: 2021-12-21 - URL: https://fastcoding.jp/blog/all/webdesign/illustrator1/ - カテゴリー: Webデザイン - タグ: Illustrator, イラレ, タイトルデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、イラストレーターで「サクっと」作れてしまう、タイトルデザインをまとめました。 ちょっとしたフォントのあしらいでグッと雰囲気が出るので、ぜひ活用してみてください。 タイトルデザイン一覧 基本 01〜06 どれも簡単なあしらいでーす。 →→いろんな形状が、上記以外にもあるので試してみてください。 フチ系 07〜12 １１と１２で利用しているブレンド機能は、本当に便利で使用頻度が高い機能ですが、 文字デザインでも、インパクトのあるタイトルなどによく利用されてますね。 ちょっと凝ってる系 13〜18 比較的簡単ですが、少し凝っているように見える加工です。 かすれ文字は、操作が多少複雑なので、以下にまとめておきます。 18 かすれ文字の加工 文字はアウトラインを取らなくても大丈夫です。 ウインドウでを追加します。一時的に、テキストが見えなくなります。 ※透明ウインドウが見当たらない場合は、上部メニューのウインドウから追加してください。 マスクを選択して、白のオブジェクトを追加します。 追加したところのフォントが見えるようになります。オブジェクトが黒い場合は、白にしてください。 マスクを選択した状態で、ブラシツールを選択して、を選択し、フォントにかすれを作ってきます。 ※線の色は黒にしてください。 左側を選択して、完成です。 --- - Published: 2021-11-08 - Modified: 2021-11-08 - URL: https://fastcoding.jp/blog/all/direction/ui-tips/ - カテゴリー: UI/UX, ディレクション - タグ: UIUX, UI改善, インタラクションコスト こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 普段何気なく使っていると気づきにくいですが、なぜか使いやすいと感じるサービスは「痒いところに手が届く」と感じる細かい配慮がされています。今回は、使い心地を良くする為に取り入れた方が良いTipsをご紹介します。 待ち時間によってステータスを変える クリックして読み込みに時間に時間がかかる時、「読み込み中」と表示しているサービスは多く見かけます。読み込み時間があまりにも長すぎる場合に「読み込み中」のテキストのみだと、ユーザーは不安になり離脱する可能性が高くなります。 このような場合、読み込み時間によってステータスのUIを変えると効果的です。 例えば、読み込み時間が1〜4秒の場合は「スピナー」、4秒以上の場合は「プログレスバー」を表示するといった形です。進捗が分かる様にすることで、ユーザーのストレス軽減に繋がります。 重要なページから移動する際の工夫 商品を購入するために情報を入力中、誤って戻るボタンを押してしまい、また一から再入力... 。 この様な経験は無いでしょうか？この様な事故を防ぐ為にも、重要なページから移動する際は「このページを離れて宜しいですか？」「入力情報が保存されない可能性があります」など警告のメッセージを表示する様にしましょう。 検索時のレコメンド サービス内に検索機能がある場合、その検索性がサービスの良し悪しを決めるといっても過言ではありません。検索機能では、ユーザーに検索条件の候補を表示してあげることで、検索性を向上させることができます。 例えば、金額を絞って商品を検索した後に「予算をあとOO円増やすと検索結果がO件増えます」というレコメンドを表示したり、詳細ページで「こちらもオススメ」など、金額と共に表示し誘導してあげる事です。 検索条件の候補を表示することにより、心地よい検索体験が提供できます。 最小限のページ切り替えでインタラクションコストを下げる 検索結果一覧ページで重要なのは、必要な情報が一覧にまとまっており、複数の候補の中から自分が気になったものだけスムーズに詳細ページに進める体験です。 結果一覧に商品画像が載っていなかったり、情報が少ない場合、いちいち詳細ページで確認しなければいけなくなります。また、詳細ページに進んでみたら在庫切れだった為にまた戻って探し直すことになった... など、一覧ページと詳細ページの余計な往復はユーザーのストレスとなってしまいます。 これを解消するには、最小限のページ切り替えにしてユーザーのインタラクションコストを下げることです。わざわざ詳細ページに飛んで確認する必要のない情報は一覧ページに掲載したり、一覧ページの画像をスワイプ出来るようにし、詳細ページに移動せずとも、ある程度の情報が閲覧できる仕様にするのも1つの方法です。 参考：UIデザインをする上で重要な認知負荷「インタラクションコスト」とは？ まとめ いかがでしたでしょうか？ 意識しなければ気にも留めないような小さな事ですが、普段使っているサービスも注視して見ると、様々なところで隠れた配慮があります。一から優れたUI/UXを設計するのは難しいですが、この様な少しの工夫で使いやすさは変わり、離脱を防ぐことに繋がります。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-10-25 - Modified: 2021-10-25 - URL: https://fastcoding.jp/blog/all/direction/ooui/ - カテゴリー: UI/UX, ディレクション こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 UIの設計手法、OOUI（オブジェクト指向UI）」をご存知でしょうか？ 「使いやすさ」はUI設計の仕方で大きく変わりますが、OOUIは有効な手法であるとされています。 今回はそんな「OOUI」について解説します。 「OOUI」オブジェクト指向UIとは？ 「UIデザイン」というと、一般的には色合いやタイポグラフィなどビジュアル面を整える事と捉えられがちですが、UX5段階モデルで言うところの構造〜表層までを指し、OOUI（オブジェクト指向UI）は「構造」の領域に当たります。 UI設計は大きく分けて「オブジェクト指向UI」「タスク指向UI」の2通りに分かれます。双方の違いは、タスク（アクション、行動）を起点に設計しているか、オブジェクト（目的のもの•対象物）を起点に設計しているかの違いです。 タスク指向UI・オブジェクト指向UIの例 では、具体的にタスク指向UI、オブジェクト指向UIの違いを見てみましょう。 ＜タスク指向UI＞ ... 行動・アクション（タスク）を起点に設計したUIがタスク指向UIです。 ... 不動産検索サイト ①検索方法を選択→②条件を絞り込む→③物件表示 まず検索方法（タスク）が表示され、条件を絞り込む事で対象となる物件が表示される。 ＜オブジェクト指向UI＞ ... オブジェクトを起点に設計したUIがオブジェクト指向UIです。 ... フードデリバリーサイト ①一覧からピザを選択→②店舗とメニューを選択→③カートに入れる オブジェクト一覧から対象商品を選択し、支払い等のタスクを行う。 なぜ「オブジェクト指向UI」が注目されているのか？ なぜオブジェクト指向UIが注目されているのでしょうか？ 一番の理由は、操作が直感的にできるということです。 日常生活をイメージすると、私たちはまず何らかの目的があった上で行動する事が多いと思います。目的なく行動することもあるとは思いますが、ほとんどが無意識なだけで、皆何かしらの理由や目的があるものです。 この様に「行動→対象物」ではなく「対象物から行動」に移行する方が自然な考え方であることから、日常生活と同じ感覚で操作できるオブジェクト指向UIは、直感的で目的にたどり着きやすいUIであるとされています。 オブジェクト指向UIのメリット オブジェクト指向UIは直感的な操作が可能になるだけでなく、構造もシンプルになります。 例えば、ファイルを削除するUIを考えた時「タスク指向UI」では、 ①削除を選択→②一覧から対象のファイルを選択→③確定ボタン という手順になる為、3ステップ必要です。 一方、オブジェクト指向UIの場合は、 ①一覧から対象のファイルを選択→②削除という2ステップで済む為、画面数も少なくなります。 「オブジェクト指向UI」は、オブジェクトに対してアクションを選択する設計となる為、タスク指向UIよりシンプルな構造となります。 また、画面数が少なくなり構造がシンプルにまとまる事から、開発側の負担を減らすといったメリットもあります。 タスク指向UIの使い分け 自由度が高く、メリットの多いオブジェクト指向UIですが、全てこの手法で設計すれば上手くいくわけではありません。 ATMの様にオブジェクトが限定されていたり、オブジェクトを選択する必要が無いものはタスク指向UIの方が使い勝手は良くなります。 また、対象物が定まっていない場合もタスク指向UIが有効です。 不動産サイトのような検索サイトでは「駅名から探す・エリアから探す」など先に検索軸を絞った方が効率的であり、オスススメ物件（オブジェクト）から再検索させるのは複雑となり、非効率です。 オブジェクト指向UIとタスク指向UIは、どちらの方が良いという事ではなく、適材適所で使い分ける事が大切です。 まとめ いかがでしたでしょうか？ オブジェクト指向UIとタスク指向UI、両者のメリットを理解した上で、どちらが適しているのか見極め設計する事が「使いやすさ」に繋がります。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-10-21 - Modified: 2021-10-20 - URL: https://fastcoding.jp/blog/all/direction/ia/ - カテゴリー: UI/UX, ディレクション - タグ: UIUX, ワイヤーフレーム, 情報設計 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 快適に利用できるサービスを作る為には「情報設計」が重要です。 きちんと情報設計を行うことで、ターゲットユーザーに合わせた導線が明確となり、使いやすいサイトを作ることが出来るようになります。今回は、イマイチ分かりにくい「情報設計」の進め方と、意識すべきポイントについて解説していきたいと思います。 情報設計とは？ 情報設計は、ユーザーに情報が分かり易く伝わる様、整理し組み立てていく事です。 家を建築する場合、どこにリビングを置き、どこに水回りを配置すればクライアントにとって快適な空間になるのか考えながら設計を行います。 Webサイトも同じで、どの様なコンテンツをどの順番で配置すればユーザーにとって使いやすいサイトとなるか、利用目的によって情報を整理していきます。 情報設計の流れ 現状の課題を整理する 情報設計はワイヤーフレーム作成前に取り掛かる工程です。ますは、Webサイトを作る目的は何なのか、さらに改善したい部分や問題となっている点は何なのか、現状の課題を整理するところから始まります。 ＜目的＞ ・売り上げを伸ばしたい ・新規顧客の獲得 ・商品やサービスの認知拡大 ・問い合わせ数を増やしたい また、情報設計はターゲットによっても変わってくる為、「誰」に向けてその情報を届けるのか明確にしておく事が大切です。誰に・何を・どのように届ければ目的を達成できるのか具体的に考えましょう。 問題点を分析する ユーザーは何かしらの目的がありサイトに訪れます。しかし、その目的に対し情報が上手く伝わらなかった場合、使いにくいサイトと認識されて離脱が起こり易くなります。 ターゲットユーザーにとってどこが問題なのか、そしてなぜこの問題が起きているのか原因を分析します。 また、その上でどうするべきか戦略を立て、ゴールに誘導するための施策を練る必要があります。 その為には、競合との比較や差別化するにはどうすべきかを洗い出し、ユーザーストーリーに沿った設計を行うことが大切です。 戦略を立てる 戦略を立てる為には、まずユーザーの行動や心理を整理し、把握する必要があります。 そのための手法として、「ストーリーマッピング」や「カスタマージャーニーマップ」があります。 これらは、ユーザーが取るであろう行動・思考を時系列に沿って並べ、一連の行動を可視化したものです。これにより、それぞれのフェーズで何が必要となるのか、どの様な機能・導線が有効か検討することが出来ます。 参考：UXをデザインする方法 必要なコンテンツを洗い出す カスタマージャーニーマップやストーリーマッピングでの仮説をもとに、必要なコンテンツを洗い出します。 情報が多すぎると分かりにくくなったり迷いやすくなる場合もあるので、ユーザーにとって本当に必要かどうか、ここでしっかり検討する必要があります。 ワイヤーフレームを作る 必要となるコンテンツや要素が整理できたところで、ようやくワイヤーフレームの作成となります。ワイヤーフレーム作成では、情報設計で定めたコンテンツや機能などを配置・構成し、視覚化していく作業です。 また、ワイヤーフレームはデザインの骨組みとなるものですが、デザインの下書きではありません。 重要なのはページ構成や配置がどのようになっているかです。その為、ワイヤーフレームの段階ではフォントや色などデザイン要素は入れない様に注意します。 気を付けたいこと 開発途中では「やはり、この機能も必要だった」など、抜け漏れが多くなりがちです。しかし、その都度追加や修正を行うと、想定していたスケジュールや予算を超えてしまうことにもなり兼ねません。 このようなトラブルを防ぐ為にも、情報設計は大切です。 ワイヤーフレームの段階で「ターゲットに沿った構成になっているか」「機能は問題ないか」等、認識を揃えておく事でお互いに齟齬無くデザインを進める事が出来ますし、後々の追加・修正のリスクも軽減されます。 まとめ いかがでしたでしょうか？ 情報設計はWebサイトの核となる、とても重要な項目です。「誰に・何を・どのように」届けるのかという事を意識し、情報を組み立てていくことが大切です。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-10-19 - Modified: 2021-10-20 - URL: https://fastcoding.jp/blog/all/webdesign/outsourcing/ - カテゴリー: Webデザイン, UI/UX - タグ: RFP, UIUX, 外注 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 「Webサイトをリニューアルしたい」「開業するのでお店のサイトを作りたい」など、Webサイトを外注したいけれど何を準備すればいいのか分からない... といった疑問を持っている方も多いのではないでしょうか。 「サイトが古いので新しくしたい... 」といったご要望は多いのですが、依頼内容がざっくりしすぎていると、思っていたものと違う提案が上がってきたり、修正の追加費用がかかってしまう場合もあります。こんなハズじゃなかった... と後悔しないためにも、依頼前にしっかりとした事前準備が必要です。 今回は、デザインから依頼する際の注意点や、事前に準備しておいた方が良いことについてまとめていきたいと思います。 目的や課題を明確にする まずはサイト制作の「目的」を明確にしましょう。 自社のサイトが古いから作り直したい、というのも１つの目的ではありますが、効果的なサイトを作るためにはWebサイトを制作する事で得られる「目的」「ゴール」を明確にしなければなりません。 Webサイトは課題を解決するための手段です。単に作るだけでは意味がありません。 また、目的によって構成やデザイン・SEOやユーザービリティなども変わる為、目的を明確にしておかないと制作者に意図が伝わらず、後戻りが発生したり場合によっては追加料金となってしまう事もあります。 依頼前に現状抱えている問題とその問題を解決し、何を実現したいのか整理しましょう。 目的 現状どのような問題があるのか、なぜWebサイトを制作したいのか ゴール どの様になれば課題が解決されたと言えるのか 目的が明確になったところで目標指数を設定しましょう。 ・問い合わせ数 ・UU数（サイトを閲覧した人の数） ・PV数（閲覧ページの数） ゴールを達成する為ユーザーにどの様な価値を伝えるか、またそのために必要な要素は何なのか。 これらを整理していくことで、目的に合ったWebサイトが作れる様になります。 ターゲットを絞る Webサイトを制作する上で大切なのは、ターゲットを明確化させることです。 ターゲットユーザーを絞り込み分析することで、より効果の出やすいサイトを制作することができます。 ユーザーを分析するためには、「ペルソナ」や「カスタマージャーニーマップ」などの手法を利用すると、より具体的にイメージしやすくなります。ペルソナ等の手法については、こちらの記事を参考にしてみてください。 参考：UXをデザインする方法 これらをもとに、自社の戦略の中でどの様にWebサイトを活用したいのか考えてみましょう。 自社サービスの特徴を洗い出す 制作会社に依頼する際は、自社サービスの特徴や取り組みを分かりやすく伝える必要があります。具体的には以下となります。 ・サービスの特徴 ・競合と比較した場合の強み ・アピールポイント これらの情報を適切に伝えないと、せっかく依頼しても中途半端なサイトになってしまう可能性があります。制作会社では細かいコンテンツの作り込みができない為、結果どこにでもある様な無難なサイトになってしまいがちです。自社の強みが明確になっていない場合は、必ず自社の特徴やアピールポイントを洗い出し明確化させましょう。 また、これらを明確化させることで、どのようなコンテンツが必要なのかが分かります。 制作会社はこれらの情報を元に情報設計を行いますので、サイトに必要なページを洗い出し、更にどのような優先順位で掲載したいのかも考えておきましょう。 スケジュールに余裕を持つ スケジュールは余裕を持って依頼する様にしましょう。 あまりに制作期間が短いと、デザインや仕様検討に十分な時間を割くことができず、品質に影響がでてしまうことがあります。また、特急料金がかかり費用が追加となる場合もあります。 どうしてもタイトになってしまう場合は、限られた時間の中で何をするか優先順位を付ける様にしましょう。 提案依頼書（RFP）を作成する 課題や要望がまとまったら、提案依頼書（RFP）を作成しましょう。 口頭での依頼は抜けてしまうこともあるので、事前にRFPを用意することで内容が伝わりやすくなります。 Webサイト制作、リニューアルの目的 プロジェクトの目的を記入します。 「ブランドイメージの向上」「集客強化」など 背景及び課題 新規制作やリニューアルやに至った背景を記入します。 対象となるwebサイトが抱える問題について、なるべく深堀して記載します。 プロジェクトのゴール 設定した目標指数を記入します。 訪問者数10％UP、直帰率の抑制（75％→60％）など ターゲット ペルソナイメージについて細かく記入します。 30代 女性（既婚・未婚問わず）健康や美容に興味がある人 など 競合情報 競合企業とどのようなところで差が出ているのか、 どう差別化していきたいのかを記入します。 セールスポイント 自社の強みや、サービスの特徴を記入します。 具体的なデザインイメージ 参考にしたいWebサイトのURLを記入します。 どこが良いと思ったのか、どこを参考にしたのか具体的に記入します。 公開希望日・予算 具体的な公開希望日、予算を記入します。 まとめ いかがでしたでしょうか？ サイト制作を依頼しようと思ったとき、まず目に付くのはデザインであるため、「こんなテイストにしたい」など、まずイメージを伝えたくなります。しかし、いきなりデザインの話から始めてしまうと、各人の好みでしか判断が出来きない為、失敗に繋がりやすくなります。 効果のあるサイトを作るためには、依頼前に自社の特徴や課題を洗い出す事が大切です。また、明確な理由があることで、より具体的な提案を受けることが出来るようになります。 Web制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-10-15 - Modified: 2021-10-15 - URL: https://fastcoding.jp/blog/all/info/wp-pagespeed/ - カテゴリー: Web業界の動向・情報, SEO, WordPress - タグ: SEO, WordPess, プラグイン, ページスピード こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、WordPressの様々なプラグインの中から、特にページ速度を向上させるプラグイン３つに絞ってご紹介します。 目次 サイト表示速度の重要性 Googleランキングに影響する ユーザーの離脱率を低下させる サイトの速度を確認する WordPressを高速化する必須プラグイン３選 AMP対応 WebP対応 WP Fastest Cache 不要なプラグインを削除する まとめ サイト表示速度の重要性 WordPressは豊富なプラグインでとても便利なCMSで有名ですが、デフォルトでは速度が遅く、便利だからといって色々なプラグインを追加していくとサイトの表示速度が低下してしまいます。サイトの表示速度が遅くなると、ユーザビリティが下がり離脱率が増加してしまうので気をつけましょう。 Googleランキングに影響する 2018年にGoogleは、モバイル検索のページ表示速度をランキング要素に加える「スピードアップデート」の正式導入を発表し、2021年6月中旬から、「Core Web Vitals（コア ウェブ バイタル）」が、モバイル検索のランキングシグナルに導入されました！現在、ページスピードは実際に検索ランキングに影響をしています。 Core Web Vitals（コア ウェブ バイタル）について、詳細はこちらの記事を合わせてご覧下さい。 ユーザーの離脱率に直結する いくら検索上位に表示されて、コンテンツが充実していても、サイトの表示速度が遅いとページを見る前に別のサイトへ離脱してしまいます。 Google は、2018年に以下の調査結果を発表しています。 ・表示速度が1秒から3秒に落ちると、直帰率は32％上昇する ・表示速度が1秒から5秒に落ちると、直帰率は90％上昇する ・表示速度が1秒から6秒に落ちると、直帰率は106％上昇する ・表示速度が1秒から10秒に落ちると、直帰率は123％上昇する 参照:Think with Google Amazonでは、「サイト表示が0. 1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する」と言われています。 このように、サイトの表示速度とユーザの離脱率には高い相関関係があります。 サイトの速度を確認する Webサイトの表示速度の確認は「 PageSpeed Insights 」が便利です。デスクトップ表示、モバイル表示それぞれでスピードを計測・採点することができます。対象サイトのURLを入れるだけでスコア判定してくれるので、自社だけでなく、競合サイトの計測も可能です。 結果は0〜100ポイントで表示され、85以上のスコアであれば良好、それ以下であれば対策が必要となります。Googleの開発者も85以上のスコアであることが望ましいと言っているので、できれば80以上のスコアを目指しましょう。 PageSpeed Insightsの詳細はこちらの記事を合わせてご覧下さい。 WordPressを高速化する必須プラグイン３選 ワードプレスを比較的簡単に高速化するには、プラグインの見直しをして以下の項目を実践してみてください。 １ モバイルページ高速化 ２ 画像の軽量化 ３ キャッシュの利用 ４ 不要プラグインの削除 AMP AMP（Accelerated Mobile Pages）は、モバイルページを高速表示させるプラグインです。 Googleによると、AMPページは読み込み時間を15％～85％減少させることができます。 AMP for WP– Accelerated Mobile Pages WebP対応プラグイン WebP対応プラグインを利用すると、画像を軽くし、読み込み速度を向上させることができます。 EWWW Image Optimizer PageSpeed Insightsの診断で「次世代フォーマットでの画像の配信」という警告が表示されたことはないでしょうか？ 「次世代フォーマットでの画像」とは？ これまで、Webサイトで使用されてきた画像はJPG、GIF、PNGなどが一般的です。しかしGoogle PageSpeed Insightsでは、JPEG 2000、JPEG XR、WebP などの画像フォーマットの使用を推奨しています。 WebP（ウェッピー）は、Googleが開発している静止画フォーマットです。ファイルの拡張子は「. webp」。JPEGやPNGをそれぞれ30％程度圧縮できるといわれています。アニメーションの表現もでき、PNGのような透過表現にも対応しています。 2021年10月現在のブラウザ対応状況（参照：Can I use） WP Fastest Cache WP Fastest Cache は、キャッシュを利用して、表示速度を高速化してくれるプラグインです。 WP Fastest Cache 「キャッシュ」とは？ サイトにアクセスすると、ページを表示するためのデータをサーバーから呼び出します。しかし毎回データを１から呼び出すと時間がかかるので、前回呼び出した時のデータを保存しておくことで、サイトを表示させるまでの時間を短縮することができます。この方法をキャッシュと言います。 不要なプラグインの削除 最後に、不要なプラグインを削除をしましょう。プラグインは、10個までが理想です。 まとめ ページスピードを意識したWebサイトやブログの運営は、今とても重要視されています。ただし、個人での対応は限界があるかもしれません。そんな時は、丸っと専門にお任せすると間違いありません。 ファーストコーディングでは、完全成果報酬でGoogle PageSpeed Insightsで高スコアを獲得できるように、Webサイトを高速化するサービスを提供しています。 --- - Published: 2021-10-04 - Modified: 2021-10-04 - URL: https://fastcoding.jp/blog/all/webdesign/designtools/ - カテゴリー: Webデザイン, UI/UX - タグ: Adobe XD, Figma, Sketch, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 アプリやWEBサイトの制作に特化したUIデザインツールは、現在様々なものが開発されています。 これからUIデザインツールを試す方にとっては、種類も多い為何を使えば良いか迷うことも多いのではないでしょうか。 今回はおすすめのツールを3点に絞り、それぞれのツールの特徴をご紹介したいと思います。 そもそもUIデザインツールとは？他のデザインツールと何が違う？ WEBデザインするためのツールと言えば、ひと昔前まで、PhotoshopやIllustratorが主流でした。 しかし、徐々にレスポンシブサイトやアプリデザインにも対応できるツールが求められるようになり、現在ではたくさんのUIデザインツールが開発されています。 UIデザインツールの大きな特徴は、まずコンポーネント機能やプロトタイプ機能があることです。 プロトタイプでは挙動や使用感を検証することができます。これらは、IllustratorやPhotoshopなど従来のデザインツールには無い便利な機能です。 また、アニメーションを作成することも可能です。 分業制やチームでサイト制作を行なっている場合、複雑な挙動を言葉で説明するのはなかなか難しいものがありますが、デザインの段階でアニメーションを確認できれば、お互いスムーズにイメージを掴むことが出来ます。 その他、便利な機能として「コメント機能」があります。 デザインのフィードバックを貰いたい場合、従来の方法であればデザインデータを共有した後にExcelなど別のファイルに修正点をまとめてもらう必要があります。「コメント機能」はURLでデザイン共有し、画面に直接コメントを書き込むことが出来ます。この機能により、フィードバックを行う側も受ける側も余計な手間が省けます。また、コメントが書き込まれると通知が届くため、やりとりもスムーズに行うことが出来ます。 UIデザインツールの難点として挙げられるのは、画像を補正したりアイコン等細かいパーツを作り込むことに関しては不得意な部分があるという事です。現状、全ての作業を１つのツールで賄うのは難しいので、アイコンの作り込みはIllustrator、画像補正はPhotoshopで行う等、分けて制作することになります。 これらの機能は、これからご紹介する3つのツールにも装備されています。今回は、共通する機能の紹介は省き、各ツールごとで特徴的な機能を紹介していきたいと思います。 1. Sketch 「Sketch」はUIデザインツールの中でも歴史が長く、その先駆けとして代表的なツールです。当初はUIデザイン用に開発されたものでは無かった様ですが、いち早くUIデザインに特化した機能を装備した事で注目を集めました。操作性の良さが人気のツールです。 sketchの特徴 Mac専用である SketchはMac専用になります。Windowsで使用することは出来ません。 動作が軽い アプリや大規模案件では、たくさんのアートボードを扱うことになります。 Sketchは、たくさんアートボードを作成しても重くならず、スムーズに動きます。 直感的に扱うことができる画面 何となく「こうすればこうなる」というのがイメージしやすいUIになっているので、デザイナーでなくとも簡単に扱うことができます。ただ、日本語対応しておらず全て英語になってしまうため、慣れるまでは違和感があるかもしれません。 カスタマイズ機能 ツールバーは自分流に使いやすくカスタマイズすることが出来ます。よく使う機能を表示させたり、好きなように並び替えを行うことが可能です。 プラグインが豊富 Sketchは他のUIデザインツールに比べ、機能を拡張させるためのプラグインが豊富にあります。 sketchの場合、アニメーションは標準機能では作成出来ませんが、プラグインを導入する事で可能です。 2. Adobe XD 「Adobe XD」はAdobe社が提供しているUIデザインツールです。他Adobeソフトとも連携が可能で汎用性が高く、人気があります。IllustratorやPhotoshopと比べると直感的に操作できるため、デザイン初心者でも使いやすいツールです。 Adobe XDの特徴 Mac、Windowsで使用可能。基本的に無料。 「Adobe XD」はMac・Windows両方で使用可能です。また、期間の縛り無く無料で全ての機能を利用することが出来ます。ただし、無料版の場合は共有数や書き出し回数に制限があります。 リピートグリット機能 記事一覧ページの様に、同じデザインやオブジェクトを繰り返す場合に使える機能です。通常は一つづつコピペで並べていくことになりますが、リピートグリット機能を使えば自動でリピートしてくれる為、一瞬で出来上がります。 パーツをアセットパネルで一元管理 ボタンなど共通パーツを使い回す時に便利な機能です。使い回すパーツをシンボル登録しておけば、デザイン変更した際も全てのページに反映されます。 sketchでも同じ機能がありますが、XDではアセットパネルで一元管理することができ、より使いやすい画面となっています。 レスポンシブサイズ変更 左右上下のマージンを保ったまま、素早くリサイズできる機能です。 sketchでこの様な機能はありませんが、プラグインを導入すれば可能です。 自動アニメーション、3D変形 自動でアニメーションを作成することが出来ます。また、オブジェクトに3D表現を加えることも出来るため、奥行きのあるデザイン表現が可能です。 3. Figma 「Figma」は WEB上で作業するデザインソフトである為、他ツールと違いダウンロードやインストールが不要です。アカウントを作成する必要がありますが、基本ネット環境さえあればアクセスが可能です。 Figmaの特徴 共同編集が可能 Figmaではリアルタイムで共同編集を行うことが可能です。 複数人でデザインする場合でも、１つのワークスペースで共同作業することが出来るため、効率的に作業を進めることが出来ます。 作業者の進捗状況を確認できる ブラウザ上でデザイン作業を行っている為、誰でも作業者の進捗状況を確認することが出来ます。コロナの影響でリモートワークが当たり前となっていますが、遠く離れていても相手の状況を確認できるのは便利です。 ファイルの受け渡しが簡単 Figmaでは、編集されたものが常に最新となります。クライアントに最新データを渡す場合、XDやSketchではファイルの受け渡しが発生しますが、 Figmaの場合、URLを共有するだけなので他のツールに比べ共有が楽です。 まとめ 今回はUIデザインをする際におすすめのツール「sketch」「Adobe XD」「Figma」3点の特徴をご紹介しました。3つともUIデザインに必要な機能は装備されているので、基本どれを使っても問題ありません。ただ、デザイン環境や作業人数などにより使いやすいツールは変わりますので、今回ご紹介した特徴を参考に選んでみてはいかがでしょうか。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-09-28 - Modified: 2021-09-25 - URL: https://fastcoding.jp/blog/all/webdesign/designtheory/ - カテゴリー: Webデザイン, UI/UX, ディレクション - タグ: UI/UX, Webデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 デザインが完成したものの、何となくしっくりこない... 何が原因か分からない... などのお悩みはありませんか？ デザインは、各要素を組み合わせたバランスで成り立っていますが、美しい・洗練されていると感じるデザインには共通するルールがあります。そのルールとは何なのか？今回はデザインがしっくりこない場合、確認すべきポイントをまとめてみました。 画像の選定 まず第一に、写真の選定に気をつけましょう。 写真が美しいサイトは、それだけで目を引くサイトになります。 逆に、細部までこだわって作り込んだとしても、使われている画像がイマイチの場合、何となく野暮ったく見えてしまいます。それだけ使用する画像は重要な要素で、サイトの印象を左右します。 また、サイトの顔となるキービジュアルは最も重要な部分です。 ユーザーはそのサイトが自分にとって有益か否かを3秒で判断していると言われています。ファーストビューで伝えたいメッセージを伝えられているか、興味をそそるデザインになっているか否かが決め手となり、ユーザーの滞在時間に影響します。 ではどんな画像を選ぶべきか？ですが、画像を選ぶ際に気をつけるべきは、被写体の「背景」です。 背景がシンプルな画像を選ぶだけで、簡単に洗練された印象のデザインにすることができます。 逆に写真全体の雰囲気が良くても、背景がごちゃついているとキャッチコピーなどのテキストもうまくハマらず、なんとなく野暮ったい印象になってしまいます。 どうしてもその画像を使わなければならい場合は、背景を綺麗に加工処理し、キャッチコピーがうまく入る様バランスを整えましょう。 文字、画像、余白のバランス 美しく見やすいデザインを作る上で重要なのが、文字・画像・余白のバランスが心地よい配置になっているかどうかです。バランスを見るには、文字や画像を「塊」として捉えると調整しやすいと思います。 この塊が一箇所に集中しすぎたり、重心が左右どちらかに偏りすぎると、画面内の空白が気になってしまったり、のっぺりした印象に見えてしまうので要注意です。 塊として捉える 配置バランスを修正する 左上のレイアウトはパッと見、特に問題はなさそうですが、塊の重心が左に寄っているため画面内の余白が目立ち、間延びしたレイアウトとなっています。 このレイアウトを美しく見せるためには、右図のように塊の重心が中心にくる様に配置するとバランスが良くなります。 また、余白は取りすぎても詰まりすぎても美しく見えません。最近は余白を多く取るデザインが主流ですが、取りすぎるのも間が抜けたデザインになりやすいので要注意です。 デザインは全体を俯瞰して見ることが大切です。文字・画像余白ちょうど良いバランスになるよう調整しましょう。 配色バランス 美しいと感じるデザインは、配色のバランスが整っています。 配色はデザインにおいて最も難しい部分でもあります。色にはそれぞれ特有のイメージがあり、色が人に与える心理的効果はとても大きいので、うまくデザインに活用したいところです。 配色を考える際は、訴求したい商品のイメージやターゲット層を意識し、色の持つイメージも活用しながら配色を考えましょう。 また、色合いを意識しすぎる余りごちゃつく・煩雑になってしまうパターンも多いですが、洗練されたWEBサイトにしたい場合、1番簡単なのは色数を「絞る」ことです。 同系色でまとめる・少ない色数で構成するメリットは、すっきりと洗練されて見えるということもありますが、他にもメリットがあります。 それは画面内で強調したい部分、例えば重要なCVボタンなどが見つけやすくなることも挙げられます。 全体を同系色でまとめた上で、強調部分は反対色にしたりアクセントカラーを使用する事で、目に止めて欲しい部分を強調させることができます。 WEB上にはカラー設計に役立つツールがいくつも存在しています。まず軸となるメインカラーを決めた上で、こういったものを参考にするのも１つの手です。 ●Coolors https://coolors. co/ ●ColorDrop https://colordrop. io/ ●Pigment https://pigment. shapefactory. co/ まとめ いかがでしたでしょうか？ 今回は、美しいデザインを作る上で意識すべき事をまとめてみました。作成したデザインがしっくりこない場合は、一度基本に立ち返り「バランス」のとれたデザインになっているか、俯瞰して見ることが大切です。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-09-17 - Modified: 2025-08-17 - URL: https://fastcoding.jp/blog/all/webdesign/motion-graphics/ - カテゴリー: Webデザイン - タグ: Logo Animation, motion graphics, Webデザイン, アニメーション, モーショングラフィックス こんにちは。FASTCODINGデザイナーの七転び八重子です。 近年、YoutubeのOPや、企業ロゴ、Webサイトのキービジュアルなどモーショングラフィックスを利用する事が増えました。 今回は、モーショングラフィックスのメリットや2021年のトレンド、事例をご紹介しようと思います。 目次 モーショングラフィックスとは？ モーショングラフィックスのメリット モーショングラフィックスの2021年トレンド アニメーションロゴ モーフィング グレイン効果 細いライン 2D・3Dのハイブリッド技術 モーショングラフィックスの企業活用事例 SmartHR ※リンク先がエラーになるため、項目を削除（2025年8月現在） Nintendo Switch Logo ※リンク先がエラーになるため、項目を削除（2025年8月現在） Google Intel Fedex まとめ モーショングラフィックスとは？ モーショングラフィックスとは、グラフィックデザインに動きを加えたもので、ロゴやテキスト、イラストが動くことで静止画では伝えきれないイメージや情報を伝えることができます。近年は特に注目され、商品やサービス、企業イメージを伝えるためにモーショングラフィックスを動画広告に利用する企業が増えています。 モーショングラフィックスのメリット 正確に情報を伝える事ができる 百聞は一見に如かずということわざ通り、文字を通して得る情報に以上に、視覚から人が受ける情報の割合は大きく、全体の8割を超えると言われています。異国の言語が分からなくてもジェスチャーで通じ合えるように、モーショングラフィックスを利用する事で、言葉の壁を越えてイメージを共有する事ができます。 ブランドイメージをより強く印象づける 近年、ユーチューブでの宣伝や、商品の紹介動画を利用する企業が増えたので、OPに動きのあるタイポグラフィーを取り入れた動画が増えました。 特にアニメーションロゴは、ブランドイメージに直結する顔なので、動きや音を取り入れる事でよりユーザーに印象付ける事ができます。 UXの向上！ユーザーに飽きさせない工夫ができる WebサイトのCTAのクリックや、お問い合わせなどの入力フォームに動きを加えるなどUXにおけるマイクロインタラクション（※）が見直されています。 「ボタンをクリックした時に、そのアクションが正しく実行されたことを表示する」、「新しい通知が届いた事を、ユーザーに伝える」、「アプリのインストールのステータスを表示する」など、細かな部分のデザインや、アクションに対するフィードバックを視覚的に取り入れる事で、スムーズで飽きさせないUXを提供する事が可能になります。 マイクロインタラクションとは？ アプリやWebサービスを利用するときのユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのことです。 モーショングラフィックスの2021年トレンド アニメーションロゴ これまで、静的なタイポグラフィとアイコンだったロゴに、予期しない動きやひねりなどの動きを取り入れる事で、ブランドをより魅力的でダイナミックに表現できるようになりました。アニメーションロゴは、すでにブランドアイデンティティデザインの最も重要なトレンドの1つになっています。 ロゴマークのキャラクターにアニメーションを取り入れた例。 Animation by Ashot S. モーフィング モーフィングは、１つの画像や形状を別の画像または形状に変形するアニメーションの効果です。アニメーションロゴで良くみられます。 Animation by Ashot S. グレイン効果 グレインは、画像にテクスチャの効果を追加したものです。洗練された雰囲気、ソフトでナチュラルな印象を与える事ができます。 Animation by Gregory Darroll 細いライン 細いラインで書かれたイラストをラインにそってアニメーションさせます。つい目で追って、最後までアニメーションを見てしまいますね。 document. createElement('video'); https://fastcoding. jp/blog/wp-content/uploads/2021/09/Line-Art-Character-Animation. mp4 Animation by Mark Rise 2D・3Dのハイブリッド技術 2Dと3Dを合わせたアニメーションです。あえて、テイストの違うイラストを織り交ぜる事で、アニメーションにコントラストができます。 Animation by Ashot S. モーショングラフィックスの企業活用事例 Google Animation by Ashot S. Intel Animation by Hamza Ouaziz Fedex Animation by Mate Miminoshvili まとめ モーショングラフィックスをWebサイトに取り入れると、もちろんUXが向上するものもありますが、データ量が大きいとページスピードに影響があるので、そのあたりのさじ加減が大切になってきます。 ファーストコーディングでは、コーディングはもちろん、アニメーション制作もお受けしています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-09-14 - Modified: 2021-10-05 - URL: https://fastcoding.jp/blog/all/webdesign/photoshop-tips2/ - カテゴリー: Webデザイン - タグ: Photshop, Webデザイン, チュートリアル, ハイパス, ピンボケ, 写真加工, 写真補正 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザインで使用する写真で、昔撮影した写真を利用することって、結構あると思いますが、この写真を利用したい！と思っても、手ブレでピンボケしてる写真とかもありますよね。過去の写真は新しく撮影できないもの、（例えば創業当時の写真だったり）もあります。今回は、そんなピンボケ写真を出来るだけくっきり補正してみたいと思います。 目次 実践！ ピンボケ写真をくっきり補正しよう！ STEP1, 画像を２枚複製する STEP2, スマートシャープで全体をシャープにする STEP3, ハイパスで髪の毛をシャープにする STEP4, コントラストを調整する 完成！ まとめ 実践！ ピンボケ写真をくっきり補正しよう！ 今回使用するソフトは、もちろん Adobe Photoshop です。 写真素材は、以下のの画像無料サイトから準備しました。以前、無料の写真素材サイトをまとめているので合わせてご覧ください。 写真のフリー素材サイト photo AC STEP1, 画像を２枚複製する ①写真をPhotoshopで開いたら、画像を複製して新しいレイヤーを２つ作ります。名前を分かりやすようにとします。 ②複製したレイヤーを２つとも、右クリックからします。 ③からフィルターをかけるので、は非表示にしておきましょう。 STEP2, スマートシャープで全体をシャープにする ①レイヤーを選択して、上部メニュー→→を選択。 ③除去にを選択、ノイズを0、量はマックス、にしておいてから、先に半径を調整します。そのあと、ノイズと量を調整します。 ※ここは写真によって数値が違うので画像を拡大して顔を見ながら調整します。 ④背景はそのままのぼかしを維持したいので、を追加し、で背景を塗りつぶします。 これで、背景はそのまま、人物だけにシャープのフィルターが適用できました。 STEP3, ハイパスで髪の毛をシャープにする ①レイヤーを選択して、上部メニュー→→を選択。 ②ハイパスの半径を調整します。今回は髪の毛だけにフィルターを適用するので他の箇所は無視してください。値はくらいにしました。 ③レイヤの描画モードを、にします。これでは全体のエッジがきつくなるので、髪の毛だけにフィルターをかけます。 ④先ほど同様、を追加し、今回は、塗りつぶしで黒にしましょう。描画色を白にして、で表示したい髪の毛周辺をマスクします。 STEP4, コントラストを調整する 最後に、シャープとハイパスで若干、境界線が濃くなっているので、コントラスト調整して優しい雰囲気にします。 ①調整レイヤーでを選択します。をマイナス８くらいに調整します。 完成！ まとめ いかがだったでしょうか？マスクの使い方をしっかり覚えれば比較的簡単です。このフィルターのハイパス機能はかなり便利なので、また今度ご紹介したいと思います。 ファーストコーディングでは、コーディングはもちろん、イラストやWebデザインにも対応しています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-09-09 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-5/ - カテゴリー: Web業界の動向・情報, SEO - タグ: Core Web Vitals, Google PageSpeed Insights, Google Search Console, グーグルサーチコンソール, コア ウェブ バイタル, ページスピードインサイト こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめています。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページスピードインサイト）の使い方」 第5回目は、「コアウェブバイタルの具体的な対策まとめ」 目次 はじめに Google Search Console （グーグルサーチコンソール）を利用して対策 STEP1, 検索順位１ページ目に入る STEP2, クリック率を上げて、アクセス数を増やす STEP3, ABテストでCVに繋げる Google PageSpeed Insights （ページスピードインサイト）を利用して対策 CSSの最小化 適切なサイズの画像 使用していないCSSを削除する テキスト圧縮の有効化 サーバーの応答時間の調整 複数ページリダイレクトの回避 ウェブフォント読み込み中の全テキスト表示 オフスクリーン画像の遅延読み込み 次世代フォーマットでの画像の配信 効率的な画像フォーマット レンダリングを妨げるリソースの除外 まとめ はじめに 5回にわたり、コアウェブバイタルについてまとめてきましたが、良質なユーザー体験を提供できるWebサイトを構築する目的は、もちろん検索エンジンでの上位表示にも関わりますが、最終的にはCVを獲得する事（問い合わせ・資料請求・商品の購入）にあります。 その為に、先ずはWebサイトの現状（問題のあるページ・キーワードなど）を把握して、内部対策をする必要があります。 ユーザーが求めるコンテンツが充実している事。 Web開発の推奨する設定に沿って構築されている事。（検索エンジンに好まれる作り） 快適なユーザー体験を提供する事。（ページの表示速度を上げるなど） コアウェブバイタルについての解説や、今回利用するツールの使い方や指標の見方は、以前の記事をご覧ください。 コアウェブバイタルとは？詳しく解説 Google Search Console （グーグルサーチコンソール）の基本と登録方法 Google Search Console （グーグルサーチコンソール）の使い方 Google PageSpeed Insights （ページスピードインサイト）の使い方 Google Search Console （グーグルサーチコンソール）を利用して対策 先ず最初に、グーグルサーチコンソールを利用して、Webサイトの現状を確認します。 Google Search Console STEP1, 検索順位１ページ目に入る Webサイトのアクセス率をアップする為には、検索順位の１ページ目に表示される必要があります。そして、１ページ目に表示される為には、Webサイトのコンテンツをキーワードに沿って充実させることが大切です。 先ず、２ページ目以降（１０位以下）のなっているページを把握しましょう。 検索パフォーマンスで検索順位10位以下のページを把握する 左メニューからをクリックします。平均掲載順位にチェックを入れます。 を選択して、でソートし、フィルタリングでと入力しを選択すると11位以下のページが表示されます。クエリをクリックすると、キーワードが確認できます。 検索順位を上げる為にコンテンツを見直す Google検索１０位以下になっているページのキーワードを確認して、そのキーワードでGoogle検索してみます。 １ページ目に表示されてる競合サイトにはあって、自社サイトには足りていないコンテンツを見つけて、ページをリライトします。色々なサイトの良い所を取り入れながら、さらにユーザーが理解しやすいように工夫してみましょう。文章が長ければ良いというわけではありません。無駄な文書を削除することも必要です。また、専門の情報など、他のサイトで取り扱っていない情報を盛り込むのもポイントです。 その他、画像にはaltタグを追加し、見出しに使用する＜h＞タグなど、Googleロボットが理解しやすいよう構造化データ（※）を適応しましょう。 構造化データとは？ 構造化データとは、検索エンジンに、HTMLで書かれたWebページを理解できるようにするマークアップ方法のことです。構造化データを使用すると検索結果に画像やレビュー評価などの「リッチリザルト」が表示されたりと直接コンバージョンに繋がる事から、SEO対策としても重要です。 STEP2, クリック率を上げて、アクセス数を増やす コンテンツを充実させたら、次はクリック率を上げる対策を行います。 上位表示なのに、クリック率の低いページを見つけます 「掲載順位」と「CTR」で２回ソートします。 を選択して、でソートし、フィルタリングでと入力しを選択してソートします。 次に、、でソートし、フィルタリングでと入力しを選択してソートすると、検索結果５位以内で、CTRが10%を切るクリック率の悪いページを確認することができます。 検索結果に表示される記事タイトルを工夫しましょう！ 競合サイトのタイトルも意識しながら、以下に気をつけてタイトルをつけましょう。 キーワードを盛り込む コンテンツ内容がわかる具体的な文章 新しい情報であることを知らせる！ 例） 【2021年●月】 〜 【最新】〜 メリットがあることを知らせる！ 例） 「習慣」「●●のコツ」 全角40前後の文字を使う（Google検索した時に、タイトルとして表示される文字数） STEP3, ABテストでCVに繋げる クリック率が上がったら、最後はCVに繋げる対策です。 ユーザーがWebサイトにアクセスした後の、直帰率やページの推移、などを測定するには、Googleアナリティクスを利用します。 ABテスト（※）をして、徐々にコンバージョン率を上げていきましょう！ ABテストとは？ Webマーケティングにおけるコンバージョン率を最適化していく様々な手法の1つです。AとBの２パターンを準備して、どちらのパターンが高いコンバージョン率を得られるかを検証します。 Google PageSpeed Insights （ページスピードインサイト）を利用して対策 Google PageSpeed Insights でページの読み込み速度を判定します。 Google PageSpeed Insights 指標の見方や、使い方は以前の記事をご覧ください。 Google PageSpeed Insights （ページスピードインサイト）の使い方 CSSの最小化 CSSを記述する際は、読みやすいように改行やスペース（ホワイトスペース）、コメントなどを入れるのが一般的ですが、このホワイトスペースやコメントはデータ量に含まれるため、Webサイトの表示速度に影響します。この余分なホワイトスペースやコメントなどを除きファイル容量を小さくする為に、ミニファイと呼ばれるファイル圧縮をします。 適切なサイズの画像 ビューポート（表示領域の大きさ）に合わせて適切な解像度に調整した画像を利用するようにHTMLやCSSを編集します。大きな画像はそれだけで読み込み速度を遅くしてしまいます。 使用していないCSSを削除する 利用していないCSSを削除しましょう。またページ毎に必要最低限なCSSのみを利用するといったファイル構造の変更も効果を発揮します。 テキスト圧縮の有効化 HTTP通信上の圧縮（gzip, deflate等）を設定して、ネットワークの全体的な通信量を最小限に抑えましょう。 サーバーの応答時間の調整 サーバーの応答時間は、サーバー会社が使用しているソフトウェア、Webサイトを構成する画像やソース量、トラフィック量に影響を受けます。ページ表示速度を改善するためには、サーバーの応答時間を0. 2秒以内（200ミリ秒）まで縮めることが理想とされています。 表示複数ページリダイレクトの回避 リダイレクトは増えれば増えるほど速度低下を招きます。基本的にはリダイレクトを解除しましょう。 ウェブフォント読み込み中の全テキスト表示 ウェブフォントを利用する場合に、フォントデータが読み込まれるまでの表示フォントを指定します。 オフスクリーン画像の遅延読み込み ファーストビュー以下の要素に存在する画像の読み込みを遅延させます。lazyload等のプラグインを利用しましょう。 次世代フォーマットでの画像の配信 画像フォーマット自体を次世代フォーマットに変更する場合、一部のブラウザで表示できなくなることがあります。対応したいブラウザによって対応しましょう。 効率的な画像フォーマット 画像ファイル自体のファイルサイズを縮小するよう可逆圧縮／非可逆圧縮等を行いましょう。 レンダリングを妨げるリソースの除外 主にファーストビュー内に含まれるCSSやJavaScriptによる画面描画要素のインライン化、より高速に処理できる手法への置き換え等を行いましょう。 まとめ 最後は、コアウェブバイタルの具体的な対策をまとめました。 今回挙げた対策は一例です。実際にはHTMLやCSSの構造、JavaScriptによるアニメーションの状況に応じて、より効果を発揮する施策があります。この辺りは、かなり専門的な対策になります。 ファーストコーディングでは、コーディングはもちろん、コアウェブバイタル対策にも対応しています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-09-06 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-4/ - カテゴリー: Web業界の動向・情報, SEO - タグ: Core Web Vitals, Google PageSpeed Insights, コア ウェブ バイタル, ページスピードインサイト こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめています。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページスピードインサイト）の使い方」 第5回目は、「コアウェブバイタルの具体的な対策まとめ」 ※2021年12月追記 2021年11月3日URLが変わりました。 Google PageSpeed Insights ： https://pagespeed. web. dev/ 目次 Google PageSpeed Insights （ページスピードインサイト）とは？ スコア判定 Google PageSpeed Insights の指標の見方 フィールドデータ ラボデータ 改善できる項目 診断 合格した監査 Google PageSpeed Insights の使い方 まとめ Google PageSpeed Insights （ページスピードインサイト）とは？ Google PageSpeed Insights （ページスピードインサイト）とは、Core Web Vitals（コアウェブバイタル）の指標を判定するツールの１つで、Webサイトのページの読み込み速度をスコア測定してくれるツールです。 無料で利用可能。 PC、スマホの両方を測定。 競合サイトの測定もできる。 Core Web Vitals（コアウェブバイタル）についての詳しい解説は以前の記事を参照ください。 Google PageSpeed Insights （ページスピードインサイト） スコア判定 「0～100」のスコアでページ表示速度の判定を行ないます。 90～100 「速い」 50～89 「平均」 0～49 「遅い」 提供される指標 フィールドデータ：Chrome User Experience Report（CrUX）のレポート ラボデータ：Lighthouseの分析結果 改善できる項目：ページ表示速度を向上させる為の改善案 診断：ページ表示速度がWeb開発にて適している設定に近いかの項目 合格した監査：問題がないと判断された項目 Google PageSpeed Insights 指標の見方 フィールドデータ フィールドデータは、※Chrome Experience report （CrUX）のレポートをもとにした、実際のユーザーから取得したデータです。Core Web Vitals（コアウェブバイタル）の指標でもあります。 スコアは、架空のシュミレーションによるユーザー体験のスコアである事に対して、フィールドデータは、実際のユーザー体験からのデータになります。 Chrome User Experience Report とは？ Googleが提供しているUXやパフォーマンスを確認するためのツールです。 参考：https://developers. google. com/web/tools/chrome-user-experience-report オリジナルの概要を表示にチェックを入れると、ドメイン全体の複数ページでの集計結果を表示してくれます。 ゲージの見方 フィールドデータは多数のユーザーから集めたデータです。その為、端末性能やネットワークの速度などユーザー環境によってデータにばらつきがあります。そのデータの平均値を表示するのではなく、ばらつきも含めて表したゲージになります。 75パーセンタイルの人が、指標の「緑：速い」の数値であれば、合格となります。 パーセンタイルとは？ 75パーセンタイルであれば、最小値から数えて75%に位置する値。 ラボデータ ラボデータは、「Lighthouse」を使った分析結果です。６つの指標のパフォーマンススコアを表示します。 First Contentful Paint（コンテンツの初回ペイント）：コンテンツまたは画像が表示されるまでの時間 Speed Index（速度インデックス）：ページのコンテンツが見えるまでの時間 Largest Contentful Paint（意味のあるコンテンツの初回ペイント）：最大のコンテンツかテキストか画像が表示されるまでの時間 Time to Interactive（インタラクティブになるまでの時間）：ページの操作が可能になるまでの時間 Total Blocking Time（合計ブロッキング時間）：タスクの処理時間が50ミリ秒を上回った場合の、コンテンツ表示から操作可能になるまでの合計時間 Cumulative Layout Shift（累積レイアウトシフト）：ページコンテンツの予期しないズレ 改善できる項目 改善できる項目は、ページ表示速度を向上させるための改善案が表示されます。スコアの良い改善する項目が無い場合は、表示されない場合もあります。 赤 「優先すべき改善案」 オレンジ 「改善した方がいい項目」 診断 診断は、ページがWeb開発の推奨する設定に沿っているかの診断結果を表示します。各項目をクリックで詳細を確認できます。 赤 「優先すべき改善案」 オレンジ 「改善した方がいい項目」 合格した監査 合格した監査は、そのページが合格した監査が表示されます。 Google PageSpeed Insights の使い方 使い方は簡単です。分析したいサイトのページURLを、貼り付けて「分析」をクリックするだけです。 モバイルとPCはタブで切り替えができます。 まとめ 今回は、Google PageSpeed Insights （ページスピードインサイト）の使い方をまとめました。次回は、「コアウェブバイタルの対策と事例」をまとめます。 ファーストコーディングでは、コーディングはもちろん、コアウェブバイタル対策にも対応しています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-09-01 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-3/ - カテゴリー: Web業界の動向・情報, SEO - タグ: Core Web Vitals, Google Search Console, グーグルサーチコンソール, コア ウェブ バイタル こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめています。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページスピードインサイト）の使い方」 第5回目は、「コアウェブバイタルの具体的な対策まとめ」 目次 Google Search Console （グーグルサーチコンソール）の使い方 ① 検索パフォーマンス ② URL検査 ③ ガバレッジ ④ サイトマップ ⑤ ページエクスペリエンス ⑥ ウェブに関する主な指標 ⑦ モバイルユーザビリティ ⑧ リンク ⑨ メッセージ まとめ Google Search Console （グーグルサーチコンソール）の使い方 Google Search Console （グーグルサーチコンソール）の登録方法は以前の記事を参照ください。 今回は各メニューから、主によくみる指標をまとめて見方を説明します。 Google Search Console （グーグルサーチコンソール） ① 検索パフォーマンス 検索パフォーマンス（左メニューの「検索パフォーマンス」をクリック）では、以下のデータをみることができます。 Google検索で検索された「キーワード」 検索キーワードごとの表示回数・掲載順位・クリック数・クリック率 これからのデータは、サイト全体、ページ別でそれぞれ確認できます。 サイト全体のデータを見る 「合計クリック」「合計表示回数」「平均CTR」「平均検索順位」が表示されますので、全てを「ON」にチェックして下さい。 すると以下の４項目が表示されます。 「クリック数」：ユーザーの検索結果に表示され、クリックされた回数 「表示回数」：ユーザーの検索結果に表示された回数 「CTR」：クリック率＝クリック数÷表示回数 「掲載順位」：そのキーワードで検索された時の検索順位の平均 「クリック数」が多いキーワードがサイトの中でアクセスが多いキーワードとなります。 ページ別のデータを見る 「ページ」をクリックします。検索からのアクセスが多い順番にページのURLが表示されます。上位のURLをクリックして下さい。 もう一度、「クエリ」を選択し戻ってください。そうしますと、選んだページの検索キーワードが確認することができます。 ② URL検査 URL検査（左メニューの「検索パフォーマンス」をクリック）では、以下のデータをみることができます。 Googleインデックスに登録されているか、されていないか。また、されたページの詳細情報 拡張機能でAMPエラー、構造化データに関するエラー、インデックス登録での問題 と表示されても、実際にそのページが必ず検索結果に表示されるとは限りません。検索結果に実際に表示されるには、ページとその構造化データが品質とセキュリティに関するガイドラインを遵守している必要があります。 と表示された場合は、そのページは検索結果に表示されません。「インデックス登録をリクエスト」をGoogle にクロールを促します。ただし、数時間後から数日後かかる場合があります。 欄を展開すると詳細が表示される Googleがそのページをクロールできたか、どの時点でクロールしたか、またはそのURLのクロール時に障害が検出されたかどうかを示します。URL検査で、 と表示された場合は、その理由をここで確認できます。 拡張機能（モバイルユーザビリティ、AMPなど）が表示される この欄には、Googleで検出された、検索の拡張機能に関する以下の情報が表示されます。拡張機能が検出されなかった場合、この欄には何も表示されません。 モバイルユーザビリティ：ページがモバイルデバイスでの使い勝手に優れているかどうかを確認します。 AMP：ページがAMPバージョンにリンクしている場合、ツールの行を選択すると詳細を確認できます。 構造化データ：ページ上で見つかったリッチリザルトタイプの情報が表示されます。 ③ ガバレッジ ガバレッジ（左メニューの「ガバレッジ」をクリック）では、サイト内の各ページのインデックス状況を確認することができます。 先ほどのURL検査にも近しい機能ですが、こちらはサイト全体の状況を確認できます。Googleインデックスされていると、検索結果に反映されますが、何らかの理由でインデックスされていない場合は、検索結果に表示されなくなるため、検索からのアクセスは0になります。このような問題を避けるためインデックス登録状況を確認しましょう。 ガバレッジの４つのステータス エラー：ページがインデックスされていない状態です。 有効（警告あり）：インデックスされているが、なんらかの問題があるとGoogleは判断している状態です。 有効：ページが正常にインデックスされている状態です。 除外：意図的にインデックスから除外されている状態です。noindexタグやページのリダイレクトなどが挙げられます。 エラー起きている場合は、各エラーの原因が表示されるので、確認して対処しましょう。 ④ サイトマップ サイトマップ（左メニューの「サイトマップ」をクリック）では、以下のデータをみることができます。 サイトで検出されたサイトマップの確認 新しいサイトマップのGoogleへの通知 サイトマップの送信履歴の確認 送信したサイトマップの解析時に検出されたエラーの確認 サイトが小規模（ページ数が 100 件未満）で、ホームページから 1 つまたは複数のリンクをたどってサイトのどのページにでも到達できる場合は、サイトマップを使用する必要はありません。その場合、必要なのはのインデックス登録をリクエストするだけで大丈夫です。 ⑤ ページエクスペリエンス ページ エクスペリエンス （左メニューの「サイトマップ」をクリック）では、サイト訪問者のユーザーエクスペリエンス(UI)のサマリーが表示されます。 ※現在、ページ エクスペリエンス レポートはモバイル向けURLに限定されています。 2021年8月、ページエクスペリエンスレポートから広告エクスペリエンスのウィジェットが削除されました。これによって、サイト所有者はページエクスペリエンスに関して最も重要なデータのみを閲覧でき、レポートが簡略化されています。 このページエクスペリエンスレポートの指標の基準になっているのが以下のと の３つです。 HTTPSとは？ HTTPS(Hytertext Transfer Protocol Secure)は、HTTPで通信を安全に行うための仕組みです。 Google検索におけるページエクスペリエンスのステータスが と評価されるためには、HTTPSでページを配信することが前提となります。 参考記事：HTTPS をランキング シグナルに使用します ⑥ ウェブに関する主な指標 ウェブに関する主な指標（左メニューの「ウェブに関する主な指標」をクリック）では、ユーザーがページを読み込む際の速度（LCP）、応答性（FID）、安定性（CLS）がテストされます。 この指標は「コアウェブバイタル」と呼ばれ、特に注意しておく必要のある指標です。詳しくは「コアウェブバイタルとは？詳しく解説」を合わせてご覧下さい。 「データがありません」という画面が表示された場合は、登録したGoogleサーチコンソールのプロパティがまだ新しいか、CrUX（Chrome User Experience） レポートで利用できるデータが不足している可能性があります。その場合は、PageSpeed Insights テストツールを利用して測定できます。 ⑦ モバイルユーザビリティ モバイルユーザビリティ（左メニューの「モバイルユーザビリティ」をクリック）では、プロパティのページのうち、モバイル端末で表示した場合にユーザビリティの問題があるものを特定できます。 モバイル ユーザビリティの問題のしきい値レベルを超えるすべてのページが表示されます。それぞれの問題をクリックすると問題の詳細が表示されます。この詳細では、その問題の該当ページのサンプルリスト、修正方法、修正後に Google に通知する手続きを確認できます。 ⑧ リンク リンク（左メニューの「リンク」をクリック）では、自分のサイトへのリンク数が最も多いサイトや、上位のリンクされているページなどを確認できます。 SEO対策において「外部リンク」は重要な要素です。どのくらいの人気のあるサイトかを測る目安でもあるのでしっかり把握しておきましょう。 ⑨ メッセージ メッセージ（画面上部のベルのアイコン）では、Googleからのお知らせやエラー、ペナルティなどのメールを確認することができます。 まとめ 今回は、Google Search Console （グーグルサーチコンソール）の使い方をまとめました。次回は、「Google PageSpeed Insights （ページスピードインサイト）の使い方」をまとめます。 ファーストコーディングでは、コーディングはもちろん、コアウェブバイタル対策にも対応しています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-08-24 - Modified: 2024-07-08 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-2/ - カテゴリー: Web業界の動向・情報, SEO - タグ: Core Web Vitals, Google Search Console, グーグルサーチコンソール, コア ウェブ バイタル こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめています。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページスピードインサイト）の使い方」 第5回目は、「コアウェブバイタルの具体的な対策まとめ」 目次 Google Search Console （グーグルサーチコンソール）とは？ Google Search Console （グーグルサーチコンソール）の登録方法 STEP1, アカウント取得 STEP2, プロパティタイプの選択 STEP3, サイト所有権の確認 GoogleサーチコンソールとGoogleアナリティクスを連携する まとめ Google Search Console （グーグルサーチコンソール）とは？ Google Search Console （グーグルサーチコンソール）とは、Core Web Vitals（コア ウェブ バイタル）の判定ツールの１つとして、利用されているGoogleの無料SEOツールです。 ① Google 検索エンジンでの表示結果 ② Webサイトの問題を検出・改善できる ③ ページをGoogleインデックスに登録できる ④ 他サイトからのリンク状況を確認できる ①のように、ユーザーが Webサイトに訪問する前のデータ（どのようなキーワードで検索されたか）を見ることができるツールは、現在Google Search Console （グーグルサーチコンソール）のみです。反対に、ユーザーが Webサイトに訪問した後のデータを見るツールが、Google Analytics（グーグルアナリティクス）です。 ① Google検索でのページの表示を確認できる Google検索で検索された「キーワード」、検索キーワードごとの表示回数・掲載順位・クリック数・クリック率を確認できます。 ② Webサイトの問題を検出・改善できる Googleボットがクロールして取得できなかったページや、Googleからのアラートメッセージを確認できます。 ③ コンテンツをGoogleインデックスに登録できる ブログなど新規記事の投稿やWebページの更新をしたら、Googleのクローラーに対して、すぐにインデックスするよう依頼できます。 ④ 他サイトからのリンク状況を確認できる 第三者のサイト（外部リンク）、自社サイト内（内部リンク）の一覧を確認できます。 Google Search Console （グーグルサーチコンソール）の登録方法 STEP1, アカウント取得 Google Search Console サービスの利用には、Googleアカウントが必要です。普段、Gmailなどを利用されている方は、そのままご利用いただけますが、アカウントを持っていない方は、最初にGoogleアカウントを取得して下さい。 STEP2, プロパティタイプの選択 追加したいサイトのURLを入力します。登録方法は、「ドメイン」と「URLプレフィックス」の２種類あります。 ドメイン 「ドメイン」は、「www」の有無や「http://」「https://」の違いに関わらず、一括での登録・集計が可能です。 ※「ドメイン」の登録をすると、プロバイダ側の設定が必要となるため今回は簡易に設定できる「URL プレフィックス」の設定を解説します。 URLプレフィックス 「URLプレフィックス」は、特定のページのみ登録できます。大きなサイトでは、ページ数が数万と膨大になるのでこちらを利用しましょう。 STEP3, サイト所有権の確認 URLを登録すると認証画面が表示されます。 ①グーグルアナリティクスかグーグルタグマネージャーを利用している場合は、どちらかの確認方法で進めると手間がかかりません。②利用してない場合は、「HTMLファイルをアップロードする方法」が簡単です。 GoogleサーチコンソールとGoogleアナリティクスを連携する GoogleサーチコンソールとGoogleアナリティクスを連携すると１つのレポートで両方の指標を同時に確認できるようになります。 ステップ１,Googleアナリティクス側でデータ連携を設定 Googleアナリティクスにアクセスして、左のメニューから「集客」→「Search Console」→「検索クエリ」を選択。 右の画面に「Search Console のデータ共有を設定」をクリック。 次に、「サーチコンソールを調整」をクリック。 Search Console の設定ページで、小さい青いリンク文字「追加」をクリック ステップ2,Google Search Console側でデータ連携を設定 新しいウインドウで、Google Search Consoleの画面に移行します。関連付けするプロパティを選択します。 関連付けの確認で、関連付けるをクリック これで、Google Search Consoleのデータ連携が完了しました。 ステップ3,Googleアナリティクス側で設定を完了する Googleアナリティクスの画面へ戻って、Search Consoleの設定で「完了」をクリックします。 最後に設定の「保存」をして連携は全て完了です。 まとめ 今回は、Google Search Console （グーグルサーチコンソール）の基本と登録方法をまとめました。次回は、「Google Search Console （グーグルサーチコンソール）の使い方」をまとめます。 ファーストコーディングでは、コーディングはもちろん、コアウェブバイタル対策にも対応しています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-08-19 - Modified: 2021-12-21 - URL: https://fastcoding.jp/blog/all/info/corewebvitals-1/ - カテゴリー: Web業界の動向・情報, SEO - タグ: Core Web Vitals, コア ウェブ バイタル こんにちは。FASTCODINGデザイナーの七転び八重子です。 SEO対策の１つ、「コアウェブバイタル（Core Web Vitals）」を5回に分けてまとめます。 第1回目は、「コアウェブバイタルとは？詳しく解説」 第2回目は、「Google Search Console （グーグルサーチコンソール）の基本と登録方法」 第3回目は、「Google Search Console （グーグルサーチコンソール）の使い方」 第4回目は、「Google PageSpeed Insights （ページスピードインサイト）の使い方」 第5回目は、「コアウェブバイタルの具体的な対策まとめ」 目次 コアウェブバイタルとは？ コアウェブバイタル３つの指標 1, LCP（Largest Contentful Paint） 読み込み時間 2, FID（First Input Delay） インタラクティブ性 3, CLS（Cumulative Layout Shift） ページコンテンツの視覚的な安定性 コアウェブバイタルの判定ツールどれを使えば良いのか？ まとめ コアウェブバイタルとは？ ウェブページにおけるユーザー体験（UX）の向上を目的とした取り組みを「Web Vitals（ウェブ バイタル）」と言います。色々な指標があるのですが、その中でも、2020年にGoogleが発表した特に重要な3つの指標を「Core Web Vitals（コア ウェブ バイタル）」としています。 2021年6月中旬から、「Core Web Vitals（コア ウェブ バイタル）」が、モバイル検索のランキングシグナルに導入されました！ SEOの観点からも対策は重要ではありますが、Googleがサイト評価で考慮する数多くの要素のあくまで一つなので、導入による大きな検索順位変動は想定されていないようです。とは言え、ページの表示速度などは、ユーザーが快適にウェブページを閲覧する上で大切なUXの１つなのでしっかりと対策をしましょう。 2020年にGoogleは以下のように言っています。 3指標の基準を全て満たしたページでは、離脱率がニュースサイトでは 22%、ショッピングサイトでは 24% 低下しています。 （Google Developers Japan より抜粋） コアウェブバイタル３つの指標 コアウェブバイタルに定義されている3つの指標は以下です。 LCP（Largest Contentful Paint） 読み込み時間 FID（First Input Delay） インタラクティブ性 CLS（Cumulative Layout Shift） ページコンテンツの視覚的な安定性 それぞれ詳しく、みてみましょう。 1, LCP（Largest Contentful Paint） 読み込み時間 LCP（Largest Contentful Paint）とは、ウェブページのビューポート内にメインコンテンツが読み込まれるまでの待機時間を示す指標です。 LCPのの75パーセンタイル(※１)の基準は以下の通り。 ・2. 5秒未満なら「良好」 ・4秒以下なら「改善が必要」 ・4秒を超えると「不良」 ※１）パーセンタイルとは？ データを大きさ順でならべて100個に区切り、小さいほうからのどの位置にあるかを見るものです。75パーセンタイルは、小さいほうから75/100のところにあるデータです。 現在、LCPは以下のHTML要素が表示されるまでの時間を対象としています。 ＜img＞要素 ＜image＞要素内の＜svg＞要素 ＜video＞要素（ポスター画像を使用） url（CSSグラデーションではなく）関数を介してロードされた背景画像を持つ要素 テキストノード（タグ以外の文字データ）または他のインラインレベルのテキスト要素の子を含むブロックレベルの要素 2, FID（First Input Delay） インタラクティブ性 FID（First Input Delay）とは、ユーザーが最初にページ上のボタンやリンクをタップもしくはクリックしてからブラウザが応答するまでに要する時間のことです。 FIDのの75パーセンタイルの基準は以下の通り。 100ミリ秒以下なら「良好」 300ミリ秒以下なら「改善が必要」 300ミリ秒を超えると「不良」 3, CLS（Cumulative Layout Shift） ページコンテンツの視覚的な安定性 CLS (Cumulative Layout Shift) とは、読み込みに応じて発生するレイアウトのズレのことです。一部の要素が遅れて読み込まれることなどにより、最初に読み込まれた要素が、当初の位置から大きくズレて表示されると視覚的に安定しているとは言えません。 CLSはviewport内で、（影響を受けた面積）×（移動した距離）で表されます。 例えば、図のように中央に広告が遅れて表示され、画面の下半分がズレた場合、影響を受けた面積の割合は半分なので0. 5です。出現した広告の大きさがviewportの高さの20%であったとすると、下半分の要素が移動した距離は0. 2となります。これにより、CLS = 0. 5*0. 2 = 0. 1 と計算されます。 CLSの75パーセンタイルの基準は以下の通り。 0. 1以下なら「良好」 0. 25以下なら「改善が必要」 0. 25を超えると「不良」 LCPとFIDの単位は秒ですが、CLSはスコアなので単位はありません。 コアウェブバイタルの判定ツールどれを使えば良いのか？ Core Web Vitalsの測定ツールは、データソースや取得項目などが異なる複数のツールがあるので目的に応じて使い分ける必要があります。 それそれの指標を判定できるツールは以下。 結論から言いますと、 Google Search Console （グーグルサーチコンソール）の「ウェブに関する主な指標」で問題のあるURLを把握して、PageSpeed Insights（ページスピードインサイト）でURLごとの課題を確認する方法が良いと思います。 Google Search Console （グーグルサーチコンソール） Google Search Consoleは、エラーチャックやユーザーがサイトに訪問する前のデータを把握できるツールです。 どのような検索ワード（クエリ）からWebサイトに訪問したか 検索エンジンに登録されているページごとの検索ワード（クエリ） 検索ワード（クエリ）ごとの表示回数・掲載順位・クリック数・クリック率 逆に、サイトに訪問した後のデータを把握できるツールがGoogleアナリティクスですね。 Google Search Console Google PageSpeed Insights （ページスピードインサイト） Google PageSpeed Insights では、指定した１つのURLのページスピードに関する評価と、コアウェブバイタルの指標に関する評価、改善項目が示されます。 PageSpeed Insights それぞれの使い方は、また次週まとめます。 まとめ 今回は、コアウェブバイタルの基礎をまとめました。次回は、「Google Search Console （グーグルサーチコンソール）の使い方」をまとめます。 ファーストコーディングでは、コーディングはもちろん、コアウェブバイタル対策にも対応しています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-08-17 - Modified: 2021-09-25 - URL: https://fastcoding.jp/blog/all/webdesign/minimal/ - カテゴリー: Webデザイン, UI/UX, ディレクション - タグ: フラットデザイン, マテリアルデザイン, ミニマル こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 前回の記事でミニマルデザインについて説明しましたが、今回はミニマルデザインを採用する際、気をつけた方が良いポイントをまとめてみました。 ミニマルデザインのメリット！ 近年のトレンドであるミニマルデザインは、多くのサイトで採用されています。その理由として、以下のようなメリットがあげられます。 ・マルチデバイスに対応しやすいデザイン ・読み込み時間の高速化 ・不必要な装飾を排除することのより認知負荷の低減につながる ・コンテンツそのものを引き立たせる デメリットは... ？ 逆にミニマルデザインにすることで生じるデメリットもあります。 ・排除しすぎることで視認性が悪くなり「視覚的な手がかり」が弱まる ・ボタンやリンクが分かりにくくなる（どこが押せるのかわからない） ・個性を出すことが難しく、没個性化しがち ・ごまかしが効かないデザインであるため、制作の難易度が上がる デザインする際のポイント メリットが多い様に見えるミニマルデザインですが、デメリットも結構あります。 また、根本的な考え方や本来の意味を間違えていると、上記の様なデメリットが目立ちやすいデザインとなってしまいます。 では、そうならないためにはどうしたら良いのか、デザインにする上でのポイントをいくつかご紹介します。 ミニマルとシンプルの違いを理解する ミニマルとシンプルは似て非なるものです。 ミニマルデザインは、余分なものを排除することで認知負荷を下げ、コンテンツへの集中を促すなど、要素を少なくすることで、生まれるメリットが多いデザインです。 一方「シンプル」に見せるため要素を削るデザインの仕方は、本来のミニマルデザインの本質とは異なります。余計なものが目立つデザインは認知負荷を増加させますが、解釈に必要なものが無いこともまた認知負荷を増大させてしまいます。 排除が過ぎたために、かえって使いづらいデザインとなっては本末転倒です。ミニマルデザインの本来の目的を理解し、デザインに反映させましょう。 どこが押せるか判別できるようにする ミニマルデザインでの難点は、ボタンを枠線だけで表現したり色のついた文字だけで代用するなど、ミニマルにすることでどこが押せるのか分かりにくくなることです。 マテリアルデザインではボタンを線ではなく面で捉えて影をつけるという視覚的な処理を施している分、より判別しやすい表現になっています。 余計な装飾は排除しつつ、クリック出来るところはすぐに判別できる、認知負荷のかからない表現が求められます。 ホワイトスペースを生かす ミニマルデザインは、ホワイトスペース（余白）を使ったデザインが効果的です。 ホワイトスペースを意図的に使うことで、伝えたい情報をより強く印象づけたり、コンテンツそのものを引き立たせたせることが出来ます。この「コンテンツそのものを引き立たせたせる」とはどういうことなのか、分かりやすい例をご紹介します。 例えばワインを売る場合、装飾が施されたワイングラスとシンプルな透明のワイングラス、どちらを選択するでしょうか？大多数の人は透明なグラスを選ぶと思います。 ワインを売るなら、美しく見せるべきはグラスではなく、ワインそのものということです。 また、ホワイトスペースを生かしたデザインでは、配色パターンをシンプルにし、目立つ色を使うと効果的です。視覚的な手がかりを追加しなくても、アクセントカラーを使うことで誘目性を高めることができます。 参考サイト 神勝寺 禅と庭のミュージアム 画面内の色数を絞り、ホワイトスペースを生かすことでコンテンツそのものの魅力を引き立たせたサイトとなっています。 みんなの銀行 従来の銀行のイメージを覆す、ゆるくてユニークなイラストが印象的なサイトです。使われている色は黒一色のみでとてもシンプルなのですが、こちらもホワイトスペースを有効に使い、ストーリー性を感じられる様な構成になっています。 まとめ ミニマルデザインの注意点や制作する上でのポイントをまとめてみましたが、いかがでしたでしょうか？ ミニマルデザインは、一見シンプルで簡単そうに見えますが、ごまかしの効かない難しいデザインでもあります。陥りやすい点を意識し、より良いデザインに繋げましょう。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているた め質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-07-28 - Modified: 2021-08-28 - URL: https://fastcoding.jp/blog/all/webdesign/photoshop-tips1/ - カテゴリー: Webデザイン - タグ: Photshop, Webデザイン, イラスト, チュートリアル, 写真加工 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザインで使用する写真やSNSのプロフィールアイコンなど、本人顔出しNGの方も、イラストならOK! ってニーズが結構ありませんか？ 今回は、人物写真をポスタリゼーションでイラストチックに加工するチュートリアルをまとめてみました。 ポスタリゼーションとは？ 写真や印刷物などの連続的な階調（グラデーション）をもつ画像を、明暗や色彩に応じて、段階的に分けて表現することです。使用する色数を減らし、アニメ調のイラストのように表現することができます。 目次 今回使用するソフトと素材 実践！ 人物写真をイラストチックに加工してみよう！ STEP1, 人物写真を切り抜いて背景色を変更する STEP2, 表面をぼかして逆光を明るく調整する STEP3, コントラストと色調を調整 STEP4, ポスタリゼーションを適用してストロークでぼかす 完成！ まとめ 今回使用するソフトと素材 今回使用するソフトは、Adobe Photoshop です。とっても有名な画像加工ソフトですね。 私は、Webデザインをする上で使用するソフトを使い分けているのですが、Photoshopは画像加工、イラストレーターはイラストやアイコン制作、WebサイトデザインはSketchを利用しています。それぞれのソフトで得意な編集機能があるので、慣れたソフトだけを利用せずにちゃんと使い分けをしましょう！ 写真素材は、今回海外の画像無料サイトから準備しました。以前、無料の写真素材サイトをまとめているので合わせてご覧ください。 実践！ 人物写真をイラストチックに加工してみよう！ 人物写真をポスタリゼーションでイラストに加工すると、どうしても境界線がふやっとしてしまいがちなので、今回は輪郭をしっかりと強調したいと思います。 STEP1, 人物写真を切り抜いて背景色を変更する まずは、人物を切り抜きします。 ※切り抜きをしないでも人物と背景の境界線がしっかりしていれば大丈夫です。 髪の毛と体部分は、別で選択して後で選択範囲を合わせると綺麗に切り抜きできます！ ①最初に「クイック選択ツール」で体を選択して、選択範囲を保存しましょう！ ②髪の毛を「クイック選択ツール」で選択して、「選択とマスク」をクリックします。表示モードをオーバーレイにすると見易いです。 ③「エッジの検出」で「スマート半径」にチェックを入れて選択範囲を調整。「境界線調整ブラシ」で拾えてない髪の毛を選択します。出力設定の出力先が「選択範囲」になっているのを確認して「OK」をクリック ④チャンネルで登録した選択範囲「カラダ」を選択します。「塗りつぶし」で描画色「白」を選択して「OK」をクリック！カラダと髪の毛の選択範囲が１つになる。 ⑤チャンネルから選択範囲を取って、レイヤーマスクをして切り抜き完了です。 人物と背景は違うカラーを選択する！ ⑥「調整レイヤー」で「塗りつぶし」で追加！ STEP2, 表面をぼかして逆光を明るく調整する ①人物レイヤーをスマートオブジェクトに変換して、メニュー「フィルター」→「ぼかし（表面）」を選択、「半径５px」「しきい値10レベル」に設定して「OK」します。 ②人物の逆光を補正します。メニュー「イメージ」から「色調補正」→「シャドウ・ハイライト」を選択。ここは写真によって適正値が違います。 STEP3, コントラストと色調を調整 ①新しい「調整レイヤー」→「カラールックアップ」を選択、下のレイヤーにクリップさせます。 ②3D LUTファイルから「filmstock_50. 3dl」を選択 ③レイヤー全てを選択して、「スマートオブジェクト」に変換して１つのレイヤーにします。 STEP4, ポスタリゼーションを適用してストロークでぼかす ①メニュー「フィルター」→「フィルターギャラリー」→「アーティスティック」→「エッジのポスタリゼーション」を選択し「エッジの太さ」「エッジの強さ」「ポスタリゼーション」を調整します。こちらも、写真によって適正値が違うのでお好みに調整してください。 ②メニュー「フィルター」→「表現手法」→「油彩」を選択し、「形態２」「クリーン度９」「拡大・詳細１」「密度の詳細２」に調整し、「光源」のチェックを外して「OK」します。 ③メニュー「フィルター」→「シャープ」→「アンシャープマスク」を選択し、「量１2０%」「半径３」「しきい値１０」に調整して「OK」します。 完成！ どや！？ってことで、いい感じにオシャンになりましたかね。。 まとめ いかがだったでしょうか？写真によって調整が必要ではありますが、普通に撮影した写真を利用するより、デザイン性がグッと上がったと思います。SNSのアイコンにぜひ活用してみて下さい。 ファーストコーディングでは、コーディングはもちろん、イラストやWebデザインにも対応しています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-07-26 - Modified: 2021-07-12 - URL: https://fastcoding.jp/blog/all/direction/designstyle/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, フラットデザイン, マテリアルデザイン, ミニマルデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 フラットデザインやマテリアルデザインなど、webサイトのビジュアル表現には様々なスタイルがあります。現在はミニマルなデザインが主流となっていますが、今日に至るまでデザインスタイルはどの様に変化していったのか、変遷を追いながら各スタイルの特徴を解説していきたいと思います。 スキューモーフィズム スキューモーフィズムは要素に光と影を入れる事で立体感を持たせ、現実世界の様な3D表現を用いたデザインスタイルになります。立体的に見せるだけでなく、質感なども表現する事が出来ます。 現在はタブレットやスマホなど、マルチなデバイスで表示出来るデザインが求められていますが、PCを中心としていた2000年代頃では、このスキューモーフィズムのデザインスタイルが主流となっており、PCに不慣れなユーザーも3D表現にする事で「こうすればこのように使えるだろう」と思わせる手段として有効に機能しました。しかし、コンピューターの操作に習熟した現代では、スキューモーフィズムは過度の表現となり、このスタイルにする意味と役目は気薄になりました。 ミニマルデザイン スキューモーフィズムに変わって使われる様になったのが、現在の主流となっているミニマルなデザインスタイルです。ミニマルデザインは、極端に言うとシンプルに仕上げるデザインスタイルのことで、代表的なものにフラットデザインやマテリアルデザインがあります。 デザインにはトレンドがあり、時代の流れと共に変化しています。 webデザインに限らず、近年はさまざまなデザインが「ミニマル化」されていますが、街中で見かけるファーストフード店のロゴなども、実はアップデートする度にミニマルなデザインに変化しています。 上図を見ていくと、初期のロゴは現在のロゴより複雑です。複雑なデザインは思い出しにくく、人々の印象に残りにくくなります。 ロゴは企業の顔として重要な要素の１つとなる為、親しみやすく記憶に残る様なものでなければなりません。ミニマルデザインのメリットは、余計な要素や装飾を取り除きシンプルにする事で、コンセプトやメッセージ性を高めることができるという事です。「記憶に残るロゴ」を模索していった結果、現在の様なシンプルなデザインにアップデートされていきました。 ロゴデザインの変遷を例に挙げましたが、この流れはWEBデザインにおいても同じ事が言えます。 webデザインにおいては、スキューモーフィズムからシンプルで平面的な表現にする事によって認知負荷の低減を図り、操作がしやすくなるというメリットが生まれます。また、モバイルデバイスの普及によっても、このミニマルなスタイルが有効であるとされる様になりました。 フラットデザイン フラットデザインは、iPhoneのiOS7のUIで採用された事により、一般的に認知される様になりました。 フラットデザインの特徴は、平面的な装飾やシンプルな配色パターン、大きめにとる余白などが挙げられます。また基本的な考え方として、装飾よりも機能を重視するデザインスタイルになります。コンテンツ以外の要素が控えめな見映えになる事により、結果的にコンテンツそのものへの集中を促す事に繋がります。 スキューモーフィズムのデザインは、大きめのパーツであれば見やすいのですが、画面が小さくなった場合は立体感のある装飾が邪魔をして見にくくなります。スマホやタブレットなど様々な画面でも見やすく最適化されたデザインを目指す上で、フラットデザインは有効なデザインスタイルと言えます。 マテリアルデザイン フラットデザインは、シンプルで作りやすいデザインである反面、平面すぎて単調に見えてしまったり、「どこが押せるのか分からない」など、ユーザービリティの面で難しいデザインスタイルではあります。 このデメリットを解消するデザインスタイルが、Googleが提唱するマテリアルデザインです。 マテリアルデザインの特徴は、大きく２つあります。 １つは自然界の物理法則に従ったデザインであるという事です。現実世界では、どのような物質であっても「厚さ」があり、上にものを乗せると重なり影ができます。マテリアルデザインは、平面的でありながらも「奥行き」を持ったスタイルとなります。 ２つ目の特徴は、現実世界を模した「動き」です。 現実世界では、ある地点から別の地点に移動する際、瞬間移動する事はあり得ません。ある状態から別の状態に変化する際は段階的に形状が変化します。マテリアルデザインでは、場所が変化する場合にはそれに相応した「動き」を伴って変化することを推奨しています。 アニメーションなどで現実世界に近い「振る舞い」を表現する事でユーザーの理解度が高まり、より直感的に操作することが可能となります。 まとめ デザインスタイルの移り変わりや、各スタイルの特徴について説明しましたがいかがでしたでしょうか？ 現在ではフラットデザインから派生したフラットデザイン2. 0や、マテリアルデザインから派生したニューモフィズムなど様々なスタイルがあります。 デザインスタイルは流行もありますが、絶対にこれでないといけないなどのルールはありません。大切なのは、それぞれの手法を理解した上で表現したい世界観に合ったスタイルを選択することです。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-07-19 - Modified: 2021-07-23 - URL: https://fastcoding.jp/blog/all/webdesign/mage-creator/ - カテゴリー: Webデザイン, 便利サービス - タグ: illustration, maga creator, Webデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 Facebook、Instagram、Twitter、YouTube用のカバー画像やポスト画像、自分で作るとカッコよくできなかったり、素材探しに時間取られちゃったりしませんか？ 今日は、そんな画像を簡単に作れちゃう便利なサイト MEGA CREATOR をご紹介しようと思いまーす。 ちなみに、この記事のアイキャッチ画像は、MEGA CREATOR を利用して作ってみました！ 目次 MEGA CREATOR って何？ 実践！ MEGA CREATOR で画像を作ってみよう！ ① まずは、会員登録する ② テンプレートを選んで作成してみる ③ 任意のサイズに変更して、背景色を調整 ④ テキストの変更 ⑤ イラストの変更 ⑥ イラストの追加 ⑦ 画像をアップロード ⑧ 完成した画像を書き出す！ まとめ MEGA CREATOR って何？ MEGA CREATOR は、ICONS8が提供しているデザインツールの１つで、イラストやアイコン、背景などを選んで、簡単に画像が制作できる便利ツールです。 ICONS8 は、アイコン、イラスト、写真、音楽、デザインツールなどを提供しており、無料（有料あり）でハイセンスな素材を利用できるサイトです。 ハイセンスなテンプレートと素材の数 大きな特徴は、何と言っても豊富でハイセンスなテンプレートと素材の数です！Facebook、Instagram、Twitter、YouTubeなどのカバー画像やポスト画像が用意してあるので、好きなテンプレートを選んで、そこから編集ができるのでイメージにぴったりな画像を簡単に作る事ができます。もちろん、任意のサイズで作成もできますし、手持ちの素材をアップする事もできます。 利用は無料！画像のエクスポートの種類によって料金プランあり 料金プランは以下の通り、毎日ブログやYouTubeをアップしてる人や、利用頻度が高い人は、お得な料金だと思います。 プラン 月額料金 詳細 DRAFT 無料 PNG（width800px）のみエクスポート、ウォーターマークが入る ONE TIME $2〜 1つの画像のみ、PNG、PSDでエクスポート可能 PRO $29/month PNG、PSD、SVGでエクスポート可能 ちなみに、素材だけ欲しい！っていいう方は、ICONS8が提供している全ての素材が使える月額プランもあります。 では、早速MEGA CREATORにアクセスして、画像を制作してみましょう！！ 実践！ MEGA CREATOR で画像を作ってみよう！ 今回は、この記事のアイキャッチ画像を作ってみようと思います。出来栄えは見ての通り。 MEGA CREATOR （ https://icons8. com/mega-creator ) ① まずは、会員登録する 会員登録しなくても、画像は作れるんですけど、作った画像をエクスポートするには、登録が必要になります。 会員登録が完了したら、「Start Designing」をクリックしてスタート！ ② テンプレートを選んで作成してみる 新規作成「Create New Design」で、サイズを指定して作ることもできますが、テンプレートから作った方が早そうなので、今回はテンプレートからイメージに近い画像を選びました。 ③ 任意のサイズに変更して、背景色を調整 編集画面の上部で、サイズをカスタムで変更します。合わせて、背景色も変更。 ④ テキストの変更 テキストやイラストを選択すると、編集メニューが表示されます。 ⑤ イラストの変更 パソコンのイラストを選択すると、他の類似したイラストが表示されるので便利ですね。 ⑥ イラストの追加 不要なイラストを削除したので、左のメニューからイラストを追加してみました。色々あるけど、ジャンル分けされててソートできるので選びやすいです。他にもあしらいをちょこちょこ変更！ ⑦ 画像をアップロード ローカルにある画像をアップしてみました。 ⑧ 完成した画像を書き出す！ 右上の「Export」から画像を書き出します。この時、プランによって書き出せる画像の形式が違います。 まとめ あっという間に、画像が完成してしまいました。なんと便利なんでしょう。。。料金がかかりますが、自分でイラストを描いたり、デザインしたりするのが多変であれば、格安だと思います。 ファーストコーディングでは、コーディングはもちろん、イラストやWebデザインにも対応しています。お困りの際はお気軽にご相談くださいませ。 --- - Published: 2021-07-12 - Modified: 2021-07-15 - URL: https://fastcoding.jp/blog/all/info/designwidth-2021-7/ - カテゴリー: Webデザイン, UI/UX, Web業界の動向・情報 - タグ: max-width, Webデザイン, アートボードサイズ こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？ 私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。 前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。 目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系！フレキシブルレイアウトとは？ Webサイト横幅サイズとファーストビューの結論 パソコンの場合 タブレットの場合 スマートフォンの場合 まとめ ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ まず、Webサイトをデザインする上で、どのようなレイアウトにするのかを最初に決める必要があります。どのレイアウトデザインも、一長一短あるので、Webサイトの用途に合わせて選択します。最近では、パソコンはソリッドレイアウト、タブレットやSPはリキッドレイアウトを採用しているケースが多いです。 余談ですが、 よくレスポンシブデザインとリキッドデザインを比較するような説明があるのですが、正確には、レスポンシブデザインを実現する手段のひとつがリキッドレイアウトです。 レスポンシブデザインとは？ 閲覧者のデバイスやブラウザ幅に応じて、適切なレイアウトでコンテンツが表示されるデザインの事を指します。各デバイスサイズ（PC用、スマホ用、タブレット用）にブレイクポイントを設定して、CSSを分けて表示を調整します。 ソリッドレイアウト（固定レイアウト）とは？ 「ソリッドレイアウト」とは、ウインドウの幅に関係なく、コンテンツを固定の幅で表示するレイアウトです。幅はピクセル(px)で指定します。 ◎メリット 固定幅の中であれば、自由に要素をデザインできる。幅によってデザインが変わらない為、どんな閲覧環境でも同じデザインを表示したいWebサイトに向いている。(金融機関や役所などに多いレイアウト) △デメリット 固定幅なので、閲覧環境によって余白が多くなったり、逆に横スクロールが出てしまう事がある。 リキッドレイアウト（可変レイアウト）とは？ 「リキッドレイアウト」とは、ウインドウの幅に合わせて、コンテンツの表示が変化するレイアウトです。幅は100%を最大として要素を％で指定します。 ◎メリット どんな画面幅でも横スクロールが出ず、左右の余白がない分、情報量をたくさん載せる事ができます。2020年頃から、人気のレイアウトでファーストビューに力を入れているサイトは、画面いっぱいにダイナミックな表現が可能になります。また、今後新しい規格のスマホやタブレットが登場してもブレイクポイントの利用が無いので対応しやすいと言えます。 △デメリット 一定のレイアウトを保つように作られているので、デザインに自由がなく単調になりやすい。極端に画面幅が広かったり狭かったりする場合に文章によっては可読性が下がることもある。あらゆるサイズで調整が必要になるので、慣れてないとコーディングはやや大変といった印象。 リキッドの進化系！フレキシブルレイアウトとは？ 「フレキシブルレイアウト」とは、リキッドレイアウトのデメリットをカバーしたレイアウトで、極端に広い幅のウインドウでも、min-widthとmax-width（最小幅と最大幅）を設定することで可読性を損なわないようにする方法です。 Webサイト横幅サイズとファーストビューの結論 ３つのレイアウトを説明しましたが、それぞれのレイアウトでWebサイトをデザインする時の設定サイズも異なってきます。合わせて、statcounterで2021年7月現在のブラウザシェアも確認して結論を出しました。 パソコンの場合 パソコンの場合は、画面サイズ＝立ち上げたブラウザサイズではない場合があります。つまり、画面いっぱいにブラウザを広げて見ない場合も考慮する必要があります。 ◆ ソリッドレイアウトの場合 / 横幅960px〜1100pxを推奨 ◆ リキッドレイアウトの場合 / 横幅1700pxまで ◆ フレキシブルレイアウトの場合 / 最大幅でデザイン 例）max-width 1500px ◆ ファーストビュー / 高さ550px〜600pxくらいまで タブレットの場合 タブレットとスマートフォンは、画面サイズいっぱいにデザインするので基本はリキッドレイアウトでのデザインでOKです。 ◆ 横幅 / ７６８px ◆ ファーストビュー / 高さ1080pxまで スマートフォンの場合 ◆ 横幅 / 375px ◆ ファーストビュー / 高さ600pxまで Retinaディスプレイに対応するには？は過去のブログでまとめています。合わせてご覧下さい。 まとめ 今回は、2020年から流行りだしたリキッドレイアウトも考慮してみました。やはり、デスクトップは画面サイズに結構な差があるので、フレキシブルレイアウトの方法を取り入れて置くのは、大切だなと思いました。 Web制作でお悩みの方はファストコーディングにお任せください！ SEOやページスピード対策を取りれた最新のコーディング/フロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-06-23 - Modified: 2024-07-09 - URL: https://fastcoding.jp/blog/all/direction/cvr3/ - カテゴリー: UI/UX, ディレクション - タグ: CVR改善, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 今回もCVに繋げるUI/UXデザインのポイントをご紹介します。CVを妨げる要因は色々ありますが、ユーザーにとって初めて訪れたサイトやサービスでは「購入」「登録」などといったアクションは、非常にハードルが高いものです。 人は、その行動によって得られる利益よりも損失の方を意識する傾向があると言われています。ユーザーが損失と感じる不安は取り除き、直感的に利用できる体験を提供することがCVのハードルを取り除く近道となります。 では、どのようなUIにすれば効果的なのか、その方法についてご紹介します。 CTAを統一する 申し込みを検討している際、同一ページに「無料トライアル」「資料請求」という２つのCTAが存在した場合、ユーザーは「無料トライアルでお試ししたいが、資料も欲しい。どちらを先にすべきか？」という迷いが生じてしまうかもしれません。このように、異なるCTAが同一ページに存在する場合、迷いが生じ一旦そこで思考が停止してしまいます。それをきっかけに深く検討し始め、選択する事自体を辞めてしまうといった事にもなり兼ねません。 どうしても複数のCTAが必要な場合は、優先度の高いボタンを大きめに表示する、ページ内で目立つ色にするなど、優先順位をつける様にしましょう。 マイクロコピーを工夫する マイクロコピーとは、数文字・数行程度のテキストの事で、ユーザーにアクションを起こしてもらうための「一押し」として用いられる事が多いです。 その中でも特に効果的なものを二つご紹介します。 一つ目は「実績」を訴求するマイクロコピーです。初めて利用するユーザーにとって、十分な実績があるという事は不安解消の手助けとなります。「導入実績○○社以上」「DL数 No. 1」といったコピーは、よく使われているので目にした覚えがあるのではないでしょうか。 別ページを設けて実績を紹介するケースもありますが、CTAの近くに実績を置く事で、よりCVRの改善が期待できます。 二つ目は「手軽さ・簡単さ」を訴求するマイクロコピーです。移動中などに購入や申し込みを行うケースも考えられますので「簡単3ステップ！」などのコピーをCTAボタンの周辺に配置し、手軽さを訴求する事でCVに繋がりやすくなります。 また、「1分で完了」よりも「60秒で完了」の様に「秒」で表記した方がCVRが高いという結果も出ています。この様に、そのコピーがユーザーにとって身近に感じられるかどうかも重要となります。 入力フォームを改善する 問い合わせやユーザー登録が複雑・面倒だと思われた場合、離脱してしまう確率が高くなります。 スムーズに入力できるフォームにするために注意したい点をご紹介します。 視線の動きに配慮した配置にする インタラクションコストを最小限にする為、視線の動きに配慮した配置にしましょう。視線を左右に動かさなければならない場合、ユーザーは入力しづらく感じます。スマホでは上から下にスクロールする為、垂直方向が自然でストレスの少ない配置になります。 なるべく項目数を減らす 必須となる項目以外はなるべく減らすよう心がけましょう。登録に必要な情報だけ先に入力させ、属性に関する情報は登録後に取得するなど工夫することで離脱を防ぐことが出来ます。 グルーピングする 全てを等間隔で並べてしまうと、見辛くなり入力が困難になります。ラベルと入力欄、関連項目などはグルーピングすることで見やすくなります。 入力例や注意事項はフォーム外に表示する プレースホルダー内に記入例などを表示しているケースを見かけますが、ユーザーが文字を入力し始めると消えてしまう為、何を入力しているのか分からなくなってしまいます。入力はフォームの外に表示しましょう。 入力方式に注意する ユーザーのインタラクションコストを最小限にする為、入力方式に注意しましょう。 例えば、選択肢が多くないのにも関わらずプルダウンを採用した場合、プルダウンを開く手間が発生し、ユーザーにワンステップ多く操作させることになります。選択肢が少ない場合はラジオボタンにするなど、最適な入力方式を選択しましょう。 ステップや現在位置を表示する 入力内容が多いフォームでは、あとどれくらいで操作が完了するのか不明確な場合、ユーザーは不安を感じ離脱してしまうケースが多くなります。今、ステップのどこにいるかが分かる様、現在地や完了率などを表示してあげる様にしましょう。 リアルタイムエラー 入力後に不備があった場合、一度フォームを全て入力し、送信した後にまとめてエラーを表示するのではなく、リアルタイムでフィードバックを行う様にしましょう。 これにより、ユーザーのストレスと手間を大きく軽減することが出来ます。 エラーの箇所、理由は明確に パスワード入力でエラーが起きた場合、「入力に不備があります」と言った様な抽象的なフィードバックは、どの様に改善すべきか不明なため、次のアクションに繋がりません。 何が間違っていて、どの様に直せば良いのかを明確にフィードバックしましょう。 フォーム送信後のアクションを明記する フォーム送信後、ユーザーは申込や購入が適切に行われているのか心配になりがちです。入力が適切に完了したこと、また次のアクション（商品の発送等）についても明記する様にしましょう。 まとめ 今回は直接CVに影響するUIの改善について説明しましたが、その中でも特に入力フォームはCVに大きく影響します。 フォームが最適化されていない場合、ひとつひとつは小さな事でも、それを繰り返し体験することでストレスになったり不信感を感じたりすることで離脱の原因になります。入力時に起こりやすい注意点を知り、最適化してCVRの改善に繋げましょう。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-06-16 - Modified: 2024-07-09 - URL: https://fastcoding.jp/blog/all/direction/cvr2/ - カテゴリー: UI/UX, ディレクション - タグ: CVR改善, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 前の記事で、CVに繋げるデザインを作るためには、ユーザーの見えない心理を掴み、情報設計することが大切であると説明しましたが、今回はそれををいかにユーザーに分かりやすく、かつ魅力的に映るようデザインに落とし込むかについて説明していきたいと思います。 ユーザー視点で情報をデザインする 日常を意識してデザインしよう ユーザーに分かりやすいビジュアルデザインを考える上で大切なポイントは、ユーザーのに日常を意識する事です。UI/UXデザインではコンテキストという言葉を用いますが、ユーザーが慣れている操作や手続きから疲弊があると、分かりにくい・使いづらいサイトと認識されてしまいます。 パーツ1つのデザインにおいても、コンテキスト（行動の意図、背景）を意識し、ユーザー視点に立ったデザインを心がけましょう。 ユーザーにとって重要な情報を目立たせる ありがちなのが、リリース後に次々と新しいコンテンツが追加されていくと、それまでのコンテンツが埋もれてしまうというパターンです。 リリース初期は情報の優先順位付けが正しくできていても、日々の運営によって埋もれてしまうケースは多くあります。 分かりやすいビジュアルデザインを目指す上で、情報量過多は大きな弊害となる為、現在のビジュアルデザインは最適なものになっているか、定期的にチェックすることも大切です。各ページにおける情報の優先度を整理し、優先度が高い情報を目立たせる様にしましょう。 誠実さ、信頼性を演出する CVを促す方法はいくつかありますが、「誠実さ」を演出することは、大きな成果を生み出します。その例として、引っ越しの一括見積もりサイト2社を比較し、ユーザーテストを行ったケースをご紹介します。 両サイトを比較してもらった結果、使いやすさや説明のわかりやすさはA社のサイトが上回っていましたが、最終的にどちらを使うかユーザーに質問すると、使いづらいと言っていたB社という結果になりました。 なぜこの様な結果になったのでしょうか？理由は、B社の方がユーザーへの誠実さが伝わる情報設計となっていたことでした。B社は見積もり依頼ページの最後に、業社からの連絡を受け取るかどうかを選べるチェックボックスと説明を設けていましたが、これがA社にはありませんでした。 そのため、ユーザーはA社で依頼すると営業メールや電話がたくさん来るのでは無いかというイメージを抱いてしまったのです。B社はそうしたユーザー心理をビジュアルデザインに落とし込んだことで、多少使い勝手の悪さがあったとしてもユーザーに選ばれるサービスとなっていました。 また、信頼性を演出する方法として、提供者の顔写真を掲載するという方法もあります。商品写真と一緒に生産者の顔写真が表示されていると、表示しない場合と比べてクレームが少ないという分析結果もあります。 これは食品系に限らず、様々な業種でも通じるものがあるのではないでしょうか。 ポイントとしては、ユーザーに不利益となる様な体験は排除すること、さらにビジュアルで誠実さや信頼性を演出することでCVを促すことに繋がります。 認識されない要因を知る UIデザインを考える上で良く起こる現象として、そもそも認識されないという問題があります。要因を知り、重要な機能やボタンが埋もれない様にしましょう。 ①「押せる」感のあるボタンにする ボタンの色や文字をグレー系にしてしまうと非活性ボタンに見えてしまい「押せない」という意味に受け取られやすくなってしまいます。 ただ、サイトのデザインによってはボタンをグレーにする場合もあります。 その場合、ボタンに影をつけたりグレーの彩度を上げ、他の要素より目立たせることで、グレーであっても「押せる」感のあるボタンを作ることができます。 ② 意味の伝わらないアイコンは避ける ユーザーは馴染みのないものを自分の視界から排除して認識する傾向があります。ハンバーガーメニューなどは一般的に馴染み深いUIですが、リテラシーの低いユーザーを対象としている場合は認識から排除されてしまうケースがあります。この場合、併せて「メニュー」という表記を加えることでクリック率を増加させることができます。 ③ デバイスごとの視線の動きを考慮する PCの場合、視線の動きは左から右に流れますが、スマホの場合は操作で使われる右手の親指が届く範囲がよくみられる箇所となっています。そのため、PCと同じ様に左上から順に見ていく流れで情報設計をしてしまうと、大切な情報がユーザーに認識されにくくなってしまいます。 デバイスごとの視線の動きの違いを認識し、それぞれに沿った情報設計にしましょう。 ④ 情報は適切なタイミングで表示させる アプリをダウンロードし、開いた瞬間にポップアップ表示されるコンテンツがありますが、こういった場合、ほとんどのユーザーが内容を認識せず、無意識で閉じるボタンを押してしまう傾向が多くなります。まだ何もアプリの内容を掴んでいない状態で、いきなりポップアップが表示されるとどうでしょうか？煩わしく感じられ、排除されてしまう可能性が高くなります。また、iOSの場合は一度「許可しない」を選択すると再度表示することが出来ない仕様となっています。そこに重要なメッセージを記載している場合は認識されない場合があるため、情報は適切なタイミングで表示する様にしましょう。 この問題を解決するためには、何の脈略もなく立ち上げ直後に表示するのではなく、許可するメリットを事前に伝えた上でポップアップを表示させると効果的です。 まとめ CVに繋げるためのデザインのポイントをご紹介しましたがいかがでしたでしょうか？ ユーザーの信頼を高める演出やNGとされる要因を把握し、ポイントを抑えたデザインを心がけましょう。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-06-09 - Modified: 2024-07-09 - URL: https://fastcoding.jp/blog/all/direction/cvr1/ - カテゴリー: UI/UX, ディレクション - タグ: CVR改善, UI/UX こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 サービスを運営する上では、ユーザーが定着してくれない・CVに至る前にサイトから離脱してしまう... などの問題は良く起こります。これは、サービス提供側とユーザーニーズの「すれ違い」が発生しているのにもかかわらず、それに気が付かないままUIデザインを行なっている事がひとつの要因かもしれません。 では、どうすればCVに繋げられるのか？また、どんな事に気をつけてUIデザインを行うべきかについて、具体例を挙げながら改善策をご紹介していきたいと思います。 ユーザーの心理をデザインに落とし込む クリーニング配送サービスの事例 下はクリーニング配送サービスサイトのUIです。 このサービスは自宅に衣類用の箱が届き、クリーニングしたい衣類を箱に詰めて送るというサービスです。箱のサイズはS・M・Lとあり、箱のサイズで金額を設定しています。そのため、具体的な数字を用いて箱のサイズを分かりやすく表記しましたが、なぜか思うように申し込みが入りませんでした。 この原因はどこにあるのでしょうか。 この原因は、サービスの説明方法にありました。 サービス提供側は当然、この大きさであればどのくらいの枚数の服が入るのかを分かっています。ですが、ユーザーは箱のサイズを具体的な数字と紐づけて把握しているわけではありません。 その為、このサイズの箱に何枚の洋服を詰める事ができるのか分からず、具体的なイメージが出来ない状態となっていました。この状態では、詰め放題とはいえ結局お得かどうか分からない、といった所で思考が止まってしまいます。そうすると、サイトへのアクセスはあっても最終的な申し込みには至らず、売り上げにつながらないサイトとなってしまいます。 改善案では、洋服が何枚入るのかを数字とイラストで具体的に説明しました。これにより、ユーザーが利用シーンをイメージしやすい状態となりました。 このように、些細なことですがサービス提供側の視点で考えてしまうと気づかない事が多々あります。 モノやサービスが溢れる現代では、ユーザーに考えさせるという一手間が致命的となります。ユーザーに「また今度でいいや」「他で探してみよう」と思わせた時点でCVの妨げに繋がるので、ユーザーのリテラシーやサービスへの期待値を正しく理解し、UI/UX設計を行いましょう。 空港券予約サイトの事例 空港券の比較サイトでチケットを探す場合の例です。 比較サイトでは、航空会社の評価や価格の比較検討は出来ますが、料金の内訳までは表示されていない事がほとんどです。別途費用がかかる可能性がある手荷物料金は、航空会社や利用するプランによって異なる為、表示価格に含まれているか否かは気になるところです。 比較した中でA社のチケットが一番安くても、そこには手荷物料金が含まれておらず、手荷物料金が含まれた価格で表示されていたB社の方が安くなるのであれば、B社を利用したいはずです。 このように、比較検討画面で比較が出来なければ、ユーザーはそのまま予約ボタンを押すことが出来ません。 実際は予約ボタンを押すと、次の画面で料金内訳が表示されるのですが、ユーザーの心理としては、手荷物料金が含まれているかわからないのに「予約ボタンを押すことで、予約のプロセスに進んでしまうのではないか」と不安に思ってしまいます。これにより離脱につながる可能性が高くなります。 この画面の改善ポイントは2つあります。 一つ目は、重要なアクションの近くで重要事項の説明を行うことです。アクションボタンの近くに注意を引くアイコンを設置し、それを押すことで「手荷物料金も含まれます」など説明をしてあげると、予約ボタンの押下を促すことが出来ます。 二つ目は、行動喚起のためのボタンの文言は、次に起こることを明確に表記することです。予約につながるボタンなので「予約する」という表記は間違っていませんが、ユーザーからすると「このまま決済画面に遷移してしまうのでは？」と次の画面が想像できない状態となってしまいます。 この表記を「予約」ではなく「料金計算」とすることで、ユーザーは心配することなく先へ進むことができます。 まとめ 「UI/UXデザイン」というと、流行に合わせてミニマルなデザインを取り入れるといった表面上の話だけで捉えられる事もありますが、それは一部でしかありません。 上の様なケースは他サービスでもたくさん見受けられますが、CVに繋げるデザインを作る為には、ユーザーが何を求めてサービスを利用しているのか、何を不満に感じているのか、といった「心理」を理解する必要があります。ユーザーの見えない心理（行動、思考、感情）を掴み、ゴールとなるCVまでスムーズに辿り着ける様に情報を組み立てましょう。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-06-08 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/interactioncost/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, インタラクションコスト, 認知負荷 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 今回は、優れたUIデザインをする上で必要となる「認知負荷」について説明したいと思います。これは「インタラクションコスト」と呼ばれ、ユーザービリティを考慮したUIを設計する上では最も重要となります。 インタラクションコストとは サービスを使う時にユーザーは様々な事を考えつつ、スクロールやスワイプをしながら画面のあちこちを見回し、自分自身の目標を達成しようと試みます。その時にユーザーが受ける負担やエネルギーが少なければ少ない程、そのサービスは「使いやすい」と言えます。ユーザーが受ける労力には以下の様なものがあります。 これらの労力を合算したものを「インタラクションコスト」と言い、ユーザービリティの指標とされています。 精神的な負荷 「精神的な負荷」とは、ユーザーが考える・判断するなど、あらゆる精神的な活動を行なった時に発生する負荷（負担・労力）です。サービスの初回登録などでは、インタラクションコストを下げようと、ユーザーが実行するステップ数を減らそうとしているサービスは多々あります。 下はよく見かけるフォームの一例です。 上の場合、ステップを踏まず1回で登録できるという点においては良いのですが、ステップ数を重視したため入力項目が多くなってしまい、精神的な負荷は増えます。 一方、こちらはステップ数は多いものの、精神的な負荷が少なく済むフローとなっています。1ステップごとの達成感や、入力内容についてもその都度確認が出来る為、総合的に見てインタラクションコストは下がります。 インタラクションコストは、ゴールまでのステップ数が少ない程良いという事ではなく、ゴールまでに使う負担（認知的・身体的）が少ない方が良いという考え方になります。なので、単純にクリック数だけを重視するものではありません。 身体的な負荷 身体的な負荷とは、画面をタップする・スクロールするなど、ユーザーが物理的に体を動かすことで発生する負荷です。こちらも手数が少ない方が良いという事になりますが、単純に身体的な負荷だけを軽減する事がインタラクションコストを下げる事になるとは限りません。現実的には、精神的な負荷との兼ね合いを考慮する必要があります。 PCではマウスで虫眼鏡アイコンをクリックする為、身体的負荷は小さい。スマホの場合、指を伸ばしてタップする為、PCより負荷は大きくなる。 インタラクションコストを下げる方法 インタラクションコストを下げる理想的な方法は、考える事なく見ただけで全ての意味を把握でき、操作に迷わない状態を作る事ですが、画面サイズや操作の仕方・使われるシーンなどによって異なります。スマホ用に最適化してインタラクションコストを下げたUIは、他デバイスでは最小にはなりません。その為、デバイスごとに最適化する必要があります。 インタラクションコストを下げる他の方法として、どのようなサービス・デバイスでも適応でき、人間の認知特性に基づくアプローチが3つあります。 それは、「一貫性」「シンプルさ」「共通概念」です。 一貫性 一貫性とは、ある規則にのっとって、デザイン要素全てがその基準に従っているという事で、サイトの世界観を表現する上でも大切な部分です。 一貫性が保たれたサイトは、ユーザーが操作を予測しやすくなります。サービス内での一貫性を理解できれば操作に迷う事もなく、新しい機能が出てきた場合も予測しやすくなる為、学習コストが低減されます。 これにより、インタラクションコストを小さくする事ができるという事です。 また、他のメリットとしては信頼性が生まれる事です。同じ規則が保たれた一貫性のあるデザインは、安心して操作する事が出来ます。 シンプルさ シンプルなUIの良さは、意図が明快であるため「理解しやすい」事です。 シンプルさが支持される理由の一つとして、人間の認知できるリソースに限りがある為です。画面に要素がある時、その中で何かの優先度を上げるということは、何かの優先度が下がる事になります。全てを目立つ様にすることは出来ません。 要素を削ってシンプルにするということは人間の認知できるリソースを有効活用することに繋がります。 また、「シンプルにする」ことは、表面から見えるよりも多くの配慮や工夫が求められます。本来の意図を踏まえず、単に要素を削った事でかえって認知負荷を増やすようであれば、それはシンプルとは言えません。 シンプルにするとは「単純にする」では無く「明快」にするという事です。要は何が起っているのかを即座に理解でき、次にどうするかスムーズに決定できる状態にする事です。 共通概念 「共通概念」とは、「虫眼鏡＝検索」「星アイコン＝お気に入り・評価」など、一般的に認知されている標準的なルールの事です。こういった「共通概念」を利用する事によって、UIの新たな学習コスト、認知的な負荷を削減する事が出来ます。 共通概念のメリットは、解釈にかかる負担を小さくする事でサービス本来の目的に集中できる事です。 共通概念の中でひとつ注意しなけれなならないのは、下線リンクの扱いです。古典的なテキストリンクは青文字＋下線でしたが、現在では各サイトのルールに沿って「青以外」「ホバー時のみ下線」など様々な表現があります。実際、どれが優れているといった事は無く、サービスやサイトのルールに沿って一貫性を保てていれば良いという事になりますが、はっきりと良くない表現があります。 それは、強調する意味で使われた、リンク無しの「下線テキスト」です。 下線テキストは「リンクする」という共通概念が確立している為、リンクしないテキストはそれに反します。この様に、共通概念に逆らうデザインはインタラクションコストを大幅に増加させる為、避けた方が良い表現です。 まとめ UIデザインをする上で重要となるインタラクションコストについて説明しましたが、いかがでしたでしょうか。 エネルギーをできるだけ使わず、最低限の労力でできるだけ大きい成果を上げるためには、人間の持つ特性を有効活用し、シンプルで一貫性のあるデザインを心がける事が重要です。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-06-04 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/theory/ - カテゴリー: UI/UX, ディレクション - タグ: UIデザイン, アフォーダンス こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 世の中にはたくさんのWEBサービスがありますが、みなさんは何が決め手でそのサービスを使ってるでしょうか？サービス内容が良い、見やすい・使いやすいなど様々な理由があると思います。 WEBサービスを使う際、UIはユーザーが最初に触れる部分であり、そのサービスを印象づける上で重要な要素となります。UIとUXの関係性については前の記事で説明しましたが、UIを使った時にユーザーの内面に起こる反応が「UX」となり、UXはユーザーの内面を含めた概念になる為、必ずしも意図的に設計できるものではありません。しかし、UIはユーザーをコントロールしたり、意図的に設計・デザインすることができます。 優れたUIを設計する為にも、今回は「UIデザイン」をする上でのルールや概念について説明していきたいと思います。 ビジュアルデザインとUIデザインの違い 「デザイン」というと、一般的にはビジュアルデザインを指していることが多いですが、WEBサイトを制作する工程では、「ビジュアル」をデザインする部分と「機能」をデザインする部分に分かれます。 ビジュアルデザインは、画像やイラストなどの装飾を組み合わせ、そのサイトやサービスが魅力的に見えるようにするのが目的です。特にトップのキービジュアルは、サイトを開いて最初に目にする部分である為、どのようなサイトなのか連想できるビジュアルを作ることが大切です。 また、私たちはそのビジュアルを見た時、それが魅力的に感じるか不快に感じるかを本能レベルで判断しています。人が心地よく感じるビジュアルは、色彩のコントラストやバランス、スケールなど一定の規則が保たれており、バランスから外れていると（意図的に狙った場合は別ですが）不快と感じる事が多くなる様です。 このあたりはグラフィックやタイポグラフィの知識をつける事で、より魅力的なビジュアル表現ができる様になると思います。 一方、UIデザインは、ユーザーがサイトやアプリをスムーズに使える様、「機能」の部分をデザインします。サービスサイトやアプリ等の場合、LPなどと違い日常的に使うものになる為、ビジュアル面よりも使いやすさが重視されます。 この様に、ビジュアルデザインとUIデザインは重要視される部分が異なり、デザインする上での知識や概念も異なります。 次に、UIデザインを行う際に意識した方が良いポイントを説明していきたいと思います。 UIを理解する アフォーダンス 「アフォーダンス」は、元々生態光学や生態心理学の分野で提唱された概念（ここでは省きます）ですが、デザイン領域では本体の意味とは異なる意味で使われるようになりました。 デザイン領域におけるアフォーダンスは「状況とその物の形などよって操作を理解させる」という考え方です。例えば、扉の取手には色々な形状がありますが、私たちはその取手の形状を見て、押せば扉が開くのか・引っ張ることで開くのか、または横に引くのかを判断しています。つまり、物の形状自体が使い方や操作方法を示している状態であり、ここのボタンを押す事でこんな操作ができそうだといった判断ができる状態を指します。使いやすいUIを目指す上では、このアフォーダンスの概念を理解する必要があります。 【自然に分別を誘導しているゴミ箱】 ゴミ箱の口が捨てるものに近い形状となっており、分別を誘導している。 建築やプロダクトデザイン業界では、人が使うことを大前提とし、構造＋使用感ありきの意匠デザインとなっている為、当たり前のことのように思えますが、これが上手くいっていないデザインも見かけます。 【どこのツマミをひねれば良いかわからないコンロ】 真ん中のコンロを使いたい場合、どのツマミをひねれば使えるのか判断に迷います。これを解消する為には、コンロとツマミの関係性をユーザーに正しく伝える必要があります。 【間違いやすい開閉ボタン】 私はよくエレベーターの開閉ボタンを押し間違えるのですが、考えてみるとこの様な三角アイコンのデザインが多いです。 ドアが閉まりかかっていた時、滑り込みで乗ってこようとした人がいた為、急いで「開ける」ボタンを押してあげようとしたつもりが「閉める」ボタンを押していたという悲しい経験も多々あります... 。 このボタンの間違いやすい点は、両者の形状が似ているため一瞬で判断する事が難しい事にあります。また、三角の矢印アイコンのみだと、「開く」「閉じる」どちらを意味しているのかが伝わり辛いです。 ドアが閉じるまでの時間は4秒程です。開閉ボタンは限られた時間の中で、いかに正しく判断できるかが重要となります。 認知特性を利用する（色・形・動き） 使いやすいUIをデザインするためには、人間が生来的に備えている能力を活用すると良いと思います。わかりにくい例として、エレベーターの開閉ボタンを例に挙げましたが、一瞬で判断できる様なUIにするためには、色・形・動きといったような認知特性を活用する事が一つの解決策になります。 ●人が持つ瞬間的な判断能力 ランダムに1〜10の数字を並べた中から「5」を探します。この中に「5」はいくつ存在するでしょうか。 Aでは、数字を順番に見ていく必要がありますが、Bではほぼ一瞬で探す事ができます。これが色に対する人間が持つ生来的な能力、瞬間的な把握力です。Cは「5」意外にも色をつけた例ですが、2番より時間がかかってしまいます。色が増えれば増えるほど、ある色を探すのにかかる時間は増加します。 サイト制作や他分野のデザインにおいても、いわゆる煩雑な状態が良くないとされる理由がこれです。 デザインをする上で色を増やしていく事は簡単ですが、目的や狙う効果に合わせて色を設定していくことが大切です。 ●変化を見つける力 「動き」や変化があると、人は意識しなくてもそこに注目してしまう特徴があります。 例えば、文字が動く電光掲示板などは、意識しなくても自然と目が行ってしまうと思います。WEBサイトにおいても「動き」を取り入れると注目を集めやすいです。装飾のために使用される動きは、極端に言えば存在しなくても支障のないものですが、面白さやギミックさを演出する事ができます。ただし、無闇に多用すると煩わしく感じられる事がある為、注意が必要です。 また「動き」を効果的に使う方法としては、ユーザー自身が状況を理解するための手助けとなるような使い方をしてあげる事です。 ユーザーが画面内のどこにいるのか、何が起こって今どの状態にあるのかと行った事を確認したい場合、UIに「動き」を取り入れる事でユーザーの理解度が大きく変わります。 例えば、iPhoneでたくさんの画面を開いていて後ろの画面に移動したい場合、後ろの画面が元画面に被りながらスライドして切り替わります。この様にAからBに至る途中段階の表現が存在する事によって、ユーザーは体感的に理解する事ができます。 まとめ UIデザインを作成する上での基本的な概念について説明しましたが、いかがでしたでしょうか。 アフォーダンスで扉の取手を例に上げましたが、これはユーザーが頭を使って理解しているのではなく、直感的に判断し行動しているケースがほとんどです。 WEBサイトに関しても同じで、例えばECサイトで欲しい商品を選択肢から選ぶ際も、UIパーツの形状を見て直感的に判断し操作している事が多いと思います。使いにくいとされるUIでは、この様に直感で判断できないものが多く、ボタンかと思って押したらボタンでは無かったなど、期待した操作が出来ないとユーザーを苛立たせる原因となってしまいます。 WEBサイトにおけるアフォーダンスは、機械とユーザーの関係性をわかりやすく設計することです。どのユーザーにも同じ操作を行わせることは難しいですが、誰でも理解できるUIを作成する事、また認知特性を理解し、UIデザインに反映していく事が大切です。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-06-02 - Modified: 2021-05-24 - URL: https://fastcoding.jp/blog/all/info/security-1/ - カテゴリー: Web業界の動向・情報, その他 - タグ: ウイルス, セキュリティ対策 こんにちは。FASTCODINGデザイナーの七転び八重子です。 コンピューターウイルスについて、ざっくり知っている方はお多いと思いますが、まさか自分がウイルスに感染するとは思ってないかもしれません。ウイルスは日々進化しているので感染を100%防ぐことはできませんが、どのような種類のウイルスがあり、どのように対策すべきかを知っておくことが大切です。今回は、コンピューターウイルスについてまとめてみました。 目次 マルウェアとコンピューターウイルス よくある症状 感染経路 マルウェアの種類 ファイル感染型 ワーム型 トロイの木馬型 マクロ感染型 複合感染型 コンピューターウイルスに感染しないように注意する事 まとめ マルウェアとコンピューターウイルス 「コンピューターウイルス」は知っていても、「マルウェア」という言葉はあまり聞かないかもしれません。 マルウェアは「malicious software（悪意のあるソフトウェア）」の略語で、パソコンを攻撃したり、情報を盗む目的で、意図的に作られた不正なプログラムの総称です。なので、コンピューターに感染し、悪事を働くコンピューターウイルスはマルウェアの中の１つという位置づけです。代表的なマルウェアにワームやトロイの木馬、スパイウェアなどがあります。 感染しても以前から存在していたファイルのサイズが少し増えたようにしか見えないか、あるいは、全く何も変わらないように見せかけるので、ウイルス対策ソフトがないと発見しにくいです。 仮に、企業がウイルス対策を怠って、取引先にウイルス付きのメールを送ってしまった場合は、信用問題、訴訟問題に発展する可能性があるので気をつけましょう。 よくある症状 悪質なメッセージが画面に表示される ハードディスクを書き換えて、パソコンが起動できなくなる パスワードなどの個人情報を盗み取られてしまう 感染経路 閲覧サイト Webサイトを閲覧しただけで、ウイルスに感染することもあります。運営元のわからない怪しいWebサイトでゲームやアプリケーション、動画などをダウンロードボタンを押した途端に、ウイルスに感染することもあります。また、セキュリティに警告が出ているサイトにも、極力アクセスしないように気をつけましょう。 記憶媒体からの感染 ウイルスに感染したUSBメモリ、SDカード、外付けハードディスクなど記録媒体から感染することもあります。 メールによる感染 知らない宛先から届いたメールには気をつけましょう。本文に記載されているURLや添付ファイルをクリックしてウイルスに感染することもあります。悪質なものになると大手企業を装っているメールもあります。 マルウェアの種類 ファイル感染型 ファイル感染型はパソコン上の拡張子が「. com」「. exe」「. sys」といった実行型ファイルに付着しているのが特徴で、プログラムを勝手に書き換えて感染・増殖するタイプのウイルスです。上書きや追記という形でファイル/プログラムそのものを変形させてしまい、元のファイルやプログラムとは異なる動作を実行させられてしまいます。 ワーム型 ワーム型はファイルやプログラムに依存しないタイプで、自らが実行形式のプログラムであり、自分自身を増殖させて感染を拡大させていきます。宿主となるファイルを必要としないので、コンピュータウイルスとは区別されますが、ネットワークを介して他のコンピュータに伝染していく点では共通しています。 ワーム型は、ウイルス付きのメールを知らないうちに大量に送ってしまうという手法が典型的ですが、同じネットワークに繋がれたデバイスを自動検出して感染させたり、社内のサーバーにある共有フォルダやUSBから感染したりと、感染速度が早いのが特徴があります。 トロイの木馬型 トロイの木馬型はワーム型と同様にファイルやプログラムに依存しませんが、自己増殖をしないタイプです。その名の通り、ギリシア神話に登場するトロイの木馬になぞらえて名前がつけられたウイルスで、ユーザーにとって便利なソフトや楽しそうなゲームのように見せかけて、それを実行するように仕向けます。昨今、悪質性を増しており、新型コロナウイルス関連の文言を悪用したスミッシング（SMSを使ったフィッシング詐欺）などの被害も増えているようです。 マクロ感染型 マクロ感染型は、マイクロソフトのWordやExcelといったデータファイルに搭載されているマクロ機能を利用して感染するタイプのウイルスです。社内のパソコンが感染した場合、実在する相手からメールが送られてしまうこと、件名や本文を引用しされるので、疑うこと無くファイルを開いてしまい感染が拡大します。 複合感染型 複合型ウイルスは、複数のウイルスを組み合わせて作ったウイルスのことで、強い感染力を持つのが特徴です。ファイル感染型ウイルスであれば、. comや. exeファイルに感染するだけでなく、ハードディスクやUSBといった記憶デバイスのシステム領域にも感染します。感染した状態でコンピューターを起動すると、ウイルスがメモリに常駐しハードディスクのシステム領域にも感染しますので、パソコン自体に深刻なダメージを与えます。 コンピューターウイルスに感染しないように注意する事 OSやソフトウェアを最新状態にする セキュリティソフトを導入する 怪しいサイトやメールや添付ファイルは見ない/開かない 有名ではないアプリやソフトは極力利用しない 所有者や中身に覚えのないUSBメモリー/CD/DVDは利用しない まとめ 最低限知っておくべきコンピュータウイルスの種類や基礎知識についてご紹介しました。日頃からしっかり対策しておきましょう！！ --- - Published: 2021-06-01 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/uxdesign/ - カテゴリー: UI/UX, ディレクション - タグ: UXデザイン, カスタマージャーニーマップ, ストーリーボード, ペルソナ こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 WEBサイトやサービスを作る上でUXデザインは重要と聞きますが、実際どの様に体験(UX)をデザインするのか分からないという方も多いのではないかと思います。 前の記事で、UI/UXデザインの思考法には、「人間中心設計」や「デザイン思考」などがあると説明しました。大まかな流れはこちらの記事で説明しているのでチェックしてみてください。 設計プロセスを理解したとことで、実際どのような方法でUXデザインは行われているのか、その手法について説明していきたいと思います。 UXデザイン（設計）とは デザインというとグラフィックやプロダクトの様に、実際にものを制作をするイメージを持ちますが、「UX」＝「体験」なので、ユーザーにどの様な体験をしてもらうかを考え、その「体験」をデザイン・設計する事が「UXデザイン」です。 「人間中心設計（HCD）」はUXデザインの中心的なものとなり、工程は大きく分けて1〜4に分かれます。 この中で、「体験」をデザインする部分は1・2の部分に該当します。 ＜1＞でまず調査を行い＜2＞の「定義」ではユーザーの行動も含めた利用シーンを想定し、そのシーンを可視化します。利用シーンを明確化する事で、どんな時にどのような情報を出す必要があるのか、また出てきた情報をどのタイミングで表示すればユーザーに伝わるか、考えながら情報設計を行います。ユーザーには必ず利用目的があり、その「目的」を達成するまでの状況を細かくイメージします。 利用シーンを明確化する方法には、以下の様な手法があります。 UX設計の手法 顧客像の設定 ＜ペルソナ・シナリオ法＞ ペルソナとは、ラテン語の「Persona」に由来する言葉です。人格・キャラクターといった意味を持ち、リサーチから得られたデータをもとに作り上げた架空の顧客像です。 ペルソナを設定する事で、ユーザーの行動や思考をイメージしやすくなり、より具体的に情報設計を行う事ができます。 名前・性別・年齢・職業・行動・性格を設定します。また、プロジェクトで必要な情報、例えば良く利用する店や情報源の種類など、細かな情報も設定します。 ユーザーの行動を可視化する ＜カスタマージャーニーマップ＞ ペルソナでもシナリオ（脚本）を利用しますが、よりユーザーの行動を可視化するためにカスタマージャーニーマップを作成します。 カスタマージャーニーマップとは、顧客が商品やサービスを知る経緯から、興味を持ち購入して使用に至るまでの流れを旅(ジャーニー)に例え、可視化したものです。顧客が何を考え、商品やサービスとどう関わっていくのかを、顧客の行動や心理とともに時系列に落とし込んでいきます。 ＜ストーリーボード＞ カスタマージャーニーマップはユーザーの行動や感情を言葉や文字で視覚化しますが、ストーリーボードは漫画の様な絵コンテなどで視覚化します。 これにより、コンテキストも含まれユーザーの感情がより明確化されます。 作り方は、シナリオ（話）からセリフを追加し、スクリプト（脚本）にします。そこで、利用シーンやユーザーの感情を再度洗い出します。 UX設計ができているか確認する 見返してみてきちんとUX設計ができているか確認しましょう。 設計をする上で、経験値としての知見はUXを深く読み解く上で重要ですが、考え方に柔軟性がないと客観的に物事を捉えられなくなります。このように、ペルソナ・カスタマージャーニーマップ・ストーリーボードを作ることで、利用シーンやどのタイミングで情報を表示させるか、またどの様な機能が必要なのか知ることが出来ます。 まとめ UXデザインのプロセスについて説明しましたが、いかがでしたでしょうか。 UXデザインの手法はカスタマージャーニーマップ、ストーリーテリングなど色々存在していますが、それらの方法を使うだけで良いUX設計ができる訳ではありません。 UX設計は手法を上手く活用しなけれなならないこと、またそこから何を見い出すのかによって方向性が変わる為、難しい部分もあります。その為、仮説立てや効果・検証を繰り返し、定性・定量データの両面から、ユーザーの潜在的なニーズを探っていくことが大切となります。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-05-26 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/hcd/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, デザイン思考, 人間中心設計 こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 サービスを作る上で、ユーザーにどの様な体験（UX）を提供するかは非常に重要となりますが、その「UX」を高める為にはどの様な手法があるかご存知でしょうか。 UI/UXはユーザーを主軸としてデザインを行いますが、この様に使う人を中心に置き、設計・企画する思考法に「人間中心設計」や「デザイン思考」があります。 また、「人間中心設計」と「デザイン思考」はプロセスがとても似ており、混同しがちです。 今回は「人間中心設計」「デザイン思考」とは何なのか、双方の違いについても説明していきたいと思います。 人間中心設計とは 物づくりを行う際、使う人の事を考える事は当たり前のことのように思えますが、ユーザーを中心にした物づくりは20世紀中頃に確立された考え方のようです。 それ以前は、機能上の問題やコストが重視されたため、使いやすさなどは一切考慮されていませんでした。間違えないようユーザー側が訓練を積めば良いという考え方で、まさに技術中心のデザインだったようです。 しかし、人間はどれほど注意していたとしても誤ってしまう事があります。 人間が機械を使用する際の安全性を向上するためにも、人間の特性を研究し人間に合わせた物づくりが必要不可欠であるという認識が徐々に広まり、人間工学や認知科学などの発展にも繫がったそうです。 人間中心設計は人間工学の考え方がベースとなっており、ユーザーを中心とした設計プロセスで、国際規格ISOで定義されています。以下の様なプロセスとなり、常にユーザーを意識しながら、時には関わりながらものづくりを行うイメージとなります。 デザイン思考とは 「デザイン思考」とは人工科学や建築業界から誕生したもので、問題をデザインで解決させる思考法です。 これは見た目や雰囲気などビジュアル的な部分のことでは無く、こちらも人間中心設計と同じ様にユーザーを主軸とした視点でデザインを行うことを指します。 デザイン思考のプロセスは以下になります。 図を見てみるとデザイン思考の方が工程が多くなっている様に見ますが、基本的な部分は人間中心設計と違いが無いようにも思えます。 双方の違いはどこにあるのでしょうか... 。次の項目ではその違いについて考えてみたいと思います。 「人間中心設計」と「デザイン思考」の違いとは まずは定義されているプロセスの内容を詳しく見てみましょう。 人間中心設計のプロセス 【1、利用状況の把握と明示】 ユーザー調査により定性・定量的なデータを分析する。 【2、要求事項の明確化】 ユーザーから得られた定量データを基に、目的や目標を設定する。 【3、設計解決案の作成】 情報構造の設計を行う。（要求に対する忠実な設計） 【4、要求に対する評価】 ユーザーの要求で設計したものに対し評価をする。その評価を基に改善を行う。必要に応じて1〜4の手順を繰り返していく。 デザイン思考のプロセス 【1、共感】 インタビューや観察を通し、共感を得た上で ユーザーが求めている潜在的なニーズを読み取る 【2、問題定義】 ユーザーのニーズに仮設を立て、さらに深掘りした上で問題を定義する。 【3、アイディア創造】 ブレインストーミングなどで、試作のための様々なアイディアを練る。 【4、プロトタイプ作成】 アイディアを基に試作品を作成する。 【5、テスト】 施策品の検証を行う。ユーザーからのフィードバックをもとに改善を行い、必要に応じて1〜5の手順を繰り返していく。 細かく内容を見た上で双方の違いを確認すると、人間中心設計ではユーザーからの要求をデータとして把握分析した上で設計をし、その後ユーザーに試してもらい改善点を修正していくというプロセスとなっています。つまり、ユーザーの要求に対して忠実なものを再現するイメージです。 それに対し、デザイン思考ではまずユーザーに寄り添い、ユーザーを理解するところから始まります。ユーザーの隠れた潜在的欲求を探り、さらにチーム内で違った視点から様々な意見を出し合って、そのアイディアを基に設計をします。そしてユーザーテストを行い、さらに修正改善し複雑な問題を解決していくというプロセスとなります。 特に、ステップ1の「共感」は、向き合い方のちがいによって解決策が変わる為、特に注意しなければならない点です。 まとめ 人間中心設計とデザイン思考は「ユーザーが求めているものとは何かを探り、問題を解決していく」という方向性は同じですが、思考方の違いにより最終的にはそれぞれ違うゴールとなります。なので事例によっては人間中心設計の思考方にマッチするケース、デザイン思考にマッチするケースが存在します。 双方の違いを正しく知ることで、事例に合った思考方を試すことが出来き、より良いUXデザインに繋がるのではないでしょうか。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-05-24 - Modified: 2025-03-13 - URL: https://fastcoding.jp/blog/all/info/bestthings/ - カテゴリー: Web業界の動向・情報, その他 - タグ: google, Google Best Things, ショッピング こんにちは。FASTCODINGデザイナーの七転び八重子です。 今年の3月、Googleが公開したサイト 「Google Best Things」 さまざまなジャンルの人気商品を集めたこのサイトを今回はご紹介します。 ※こちらのWebサイトはすでに閉鎖されているようですので、ご注意ください。（2025年3月現在） 目次 人気商品Top1000点 商品の平均価格やレビューが見れる Googleショッピングで購入可能 まとめ 人気商品Top1000点 Google Best Things - Discover 1,000 Top Products 「Google Best Things」は今、Webで最も人気のある商品Top1000点を集めたサイトです。人気Top1000の商品は、Google検索数、ショッピングサイトの売り上げを基に、Googeが独自に決めています。日本に限らず世界中の商品という事になります。 サイトはとてもシンプルで感覚的に使える感じになっています。何と言ってもオシャレ。 8つのジャンルと小カテゴリーと目的カテゴリー 8個のジャンルから、商品を絞れるようになっています。 全て Everything 赤ちゃん・幼児 Babies & toddlers 電化製品 electronics ゲーム・アート・工作 games,arts & crafts 健康・美容 health & Beauty 家庭・オフィス用品 home & office アウトドア・旅行 outdoors & on the road ペット pets スポーツ・フィットネス sports & fitness カテゴリーから、たとえば「カメラ」で見ると、人気の10商品が紹介されていました。「カメラ」と言っても、「カメラレンズ」「デジタル一眼レフカメラ」などは、別カテゴリーでまとめてあります。 目的別のカテゴリー 面白いなと思ったのが、目的別のカテゴリーです。 例えば、「For Enjoying your favorite albums」を選択すると、、 音楽を楽しむための商品が表示されます。 商品の平均価格やレビューが見れる 商品をクリックすると、アメリカのGoogle ショッピングサイトの商品を表示します。そこで、商品のレビューや価格の比較を見ることができます。 Googleショッピングで購入可能 気に入った商品があれば、そのままGoogleショッピングからショッピングサイトを選択して購入可能です。ほとんど海外のショッピングサイトなので、日本のショッピングサイトから購入する場合は、商品名で検索してみてください。 まとめ 日本は、ショッピングサイトや比較サイトなどかなり充実しているし、電化製品は日本製が人気なのでココで見なくてもとは思いましたが、流行りや人気商品が確認できるので欲しいアイテムがある場合は、こちらで一度検索しても面白いなと思いました。 --- - Published: 2021-05-19 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/importance_uiux/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX改善, Webデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 最近よく耳にする「UI/UX」。なぜ今必要とされているのでしょうか？ その前に、UI/UXとは何の事なのか疑問な方はこちらの記事をチェックしてみてください。 UI/UXをデザインするという事は、「使い勝手」と「体験価値」を作ることです。 そうは言っても、実際どのような事をするのか分からない方も多いのではないかと思います。今回は実例を挙げ、UIUXが必要な理由とUI/UXの改善例をご紹介します。 UI/UXの重要性 ビジネスがデジタル化している今、ただ単にかっこいいデザインを作ればブランディングになる、売れるという時代ではなくなっています。 例えば電化製品の様な「モノ」の場合、実際に使ってみないと品質を知ることはできません。 しかし、Webサービスの場合は品質が気に入らなければすぐ別のサービスに乗り換えられてしまい、満足してもらえなければユーザーは簡単に離脱してしまいます。 また、ネットの情報から競合サービスを比較検討することが容易に出来るため、常にユーザービリティを改善し、ユーザーの心理や行動をUI/UXに落とし込む必要があります。 この、ユーザーのニーズを落とし込む方法として、「情報設計」と「ビジュアルデザイン」の２つのプロセスがあります。 情報設計とは、どのページで、いつどの様なメッセージを表示させるか等、ユーザーのニーズに沿い組み立てていく作業です。ユーザーのニーズをつかめていたとしても、この情報設計が上手くできていないとその魅力がユーザーに届かず、離脱の原因となってしまいます。 では、どのようしてユーザーの心理や行動をデザインに落とし込むのか、UI/UX改善の実例をご紹介します。 バイト探しアプリの事例 下記はバイト探しアプリで応募率改善の為、応募フォームを見直した実例です。 AとB、どちらの画面からの応募率が高いと思いますか？ テストの結果、応募率が高かったのはBでした。 アルバイト探しの場合、正社員の転職のようにしっかりと自己アピールを考えて応募！という場合は少ないと思います。大半は正社員の転職に比べ、気軽に応募する場合が多いのではないでしょうか。応募者の情報は採用側にとって重要な情報ですが、一画面の情報量が多いと応募者は入力を負担に感じ、これだけで離脱が多くなってしまいます。 これを避けるには必須項目だけを画面に表示し、任意項目は開閉式にして視覚的な負担を下げることです。ユーザーは応募に対するハードルが下がり、先に進みやすくなります。 ユーザーの心理を探る 上記はあくまで一例であり、正解ではありません。サービス内容や対象にによってまた別の結果になりますが、このようにユーザーの心理をデザインに落とし込むことが大切です。 ユーザーが何を期待してサービスを利用しているのか、またどんな事に不満を感じているのか「心理」を理する事が必要になります。では、一体どうすればユーザーの心理を掴み、サービスの成果を上げることができるのでしょうか。 一つの方法としては、分析・解析ツールを使うことです。 ツールを使うことで来訪者のキーワードや離脱した箇所など様々な情報を手に入れることができ、その情報をもとに改善施策を打つことができます。 しかし、解析ツールでわかることはあくまで「結果」です。ユーザーがなぜその行動をとったのかという部分までは分かりません。ユーザーの根本的な不満を理解する為には、解析ツールなどの定量的なデータをもとにしながら、ユーザーインタビューなどでユーザーの心理を探ることが重要です。 まとめ UI/UXデザインとは何をする事なのか、重要性と改善方法について説明しましたがいかがでしたでしょうか。 サイト運営においては、ユーザー目線で考えているように見えて、実は売り手側の目線になっていることが多々あります。その原因として、担当者は常にそのサービスや商品に触れている為、当初持っていた疑問や初心者なら当然抱く疑問を持たなくなってしまう事にある様です。 ユーザーとの「すれ違い」を埋めていく必要があるため、常に視野を広く持ち、思考が凝り固まらないよう心がけましょう。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-05-18 - Modified: 2021-06-08 - URL: https://fastcoding.jp/blog/all/direction/usability/ - カテゴリー: UI/UX, ディレクション - タグ: UIUX, ユーザビリティ こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 様々な商品やサービスを選ぶ上で「使いやすさ」は特に重要視する部分だと思います。 WEBサイトにおいても、選ばれる商品にするには「ユーザービリティ」を高めることが重要です。 この「ユーザービリティ」という言葉は「使いやすさ」と解釈される事が多いですが、それだけの意味ではありません。ボタンやメニューの識別・見易さといったUIに関わる部分になりますが、単純にデザインやUIが良ければよいというものでも無く、総合的な満足度などUXに関わる部分も重要な要素となります。 そこで「ユーザービリティ」とは何なのかについて説明していきたいと思います。 ユーザービリティとは ユーザービリティにおいては様々な研究者、研究分野において定義されています。 現在、UXや人間中心設計の分野において標準的な指標となっているものがあり、それが ISO（国際標準化機構）よる定義となります。 ISO 9241-11による定義 ISO 9241-11によると、「ユーザービリティ」は「目標を達成する」際の ・有効さ ・効率 ・満足度 ・利用状況 であると定義されています。 具体的には、「もの」を使用する際ユーザーが最終的なゴールに辿り着けるか、また辿り着いた場合の有効さや満足度はどの程度だったのか？といったことを意味します。 ヤコブニールセン博士による定義 ユーザービリティ領域の専門家である、ヤコブニールセン博士はもう少し具体的に定義しているので、こちらも見てみましょう。 ヤコブニールセン博士は「ユーザービリティエンジニアリング言論」の中で、ユーザービリティは以下と定義しています。 ・学習しやすさ ・効率性 ・記憶しやすさ ・エラー発生率 ・主観的満足感 ユーザービリティの具体例 ECサイトを閲覧する場合で考えてみたいと思います。 サイト閲覧する場合、暇つぶしで何となく見ている場合もありますが、大抵は欲しい物があり閲覧していることが多いと思います。この場合、ものを購入することが「目的」です。 検索パネルでは特定のキーワードで探せるようになっていたり、ユーザーに合わせたレコメンド機能がついていたりなど、目標を達成しやすくするため様々な工夫がされています。 また、ユーザーがしばらく使わなくても、すぐに思い出して使えるよう、覚えやすくしなければなりません。 どこのサイトでも、基本的にグローバルナビが上や左側にあることが多く、実行ボタンはページ下部にあるなど、決まったレイアウトになっていることが多いです。 これがページごとに違うレイアウトだったとしたらどうでしょうか。 複雑なレイアウトは、学習のしやすさや効率性等を著しく低下させてしまいます。 また、何らかのエラーが発生した場合は、何が原因でエラーになってしまったのか、正しい対処法や誘導をユーザーに伝えることも大切です。正しい解決法がユーザーに伝わらなかった場合、原因が分からず操作を諦めてしまう事にもなりかねません。 この場合、ユーザーは目標達成に至っていない為「有効さ」は低いことになり「このサイトは使いたくない」と思われてしまった場合、「満足度」についてもかなり低いという結果になります。 気をつけたいポイント ターゲットユーザーの決定 ユーザービリティは「あるケースにおける場合」と定義されており、同じサイトであってもターゲットユーザー次第で大きく異なります。 例えばネットから出前を注文すると考えた場合でも、配達時間を重視するのか、それとも予算重視なのか、 既に注文したい料理が決まっているか否かでも使い方が変わります。 使い方によって評価が変わる事になるため、まずは、どの様な目的でどの様なユーザーをターゲットとするのか、具体的な条件を設定することが重要です。 基本的なルールを使用する WEBサイトには、よく使われる基本的なルールがあります。 リンクできる部分の文字色は青、ヘッダーにあるアイコンをクリックするとTOPページへ戻る、ボタンを押すとページ遷移する、などはユーザーが当たり前の様に記憶しているルールです。 基本的に多くのユーザーは、新たに学習し直す事を嫌います。携帯を買い換える場合、iphoneユーザーの場合は次もiphoneにする事が多いと思いますが、その一番の理由として、再度学習し直すことが面倒だからではないでしょうか？WEBサイトに関しても同じで、学習し直す必要のない基本的なルールを利用すれば、難しいことを考えなくてもユーザービリティを高める事ができます。 一貫性を保つ ユーザビリティを高めるには、サイト全体の一貫性が保たれているかどうかも重要なポイントとなります。 ページによってリンクやボタンの色が違う... といったルールの無いサイトは、とても使いづらいものとなり、ユーザーの混乱を招く場合があります。 制作する上で、オリジナリティを出す事はとても大切ですが、上記でお伝えした「基本的なルール」を守りながら、一貫性を保ったデザインにする事が重要です。 まとめ 今回は「ユーザービリティ」を高める上で気をつけたいポイントをいくつか挙げましたが、いかがでしたでしょうか。 「ユーザービリティ」は単なる「使いやすさ」を目指すだけでなく、目的やユーザーによって最適化すべきものです。リピート率やコンバージョン率などに大きく影響するため、ユーザーにとって満足度の高いものなっているのかを意識し、常にユーザー目線に立って改善していく事が大切です。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化している為、質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-05-12 - Modified: 2024-09-16 - URL: https://fastcoding.jp/blog/all/direction/uiux/ - カテゴリー: UI/UX, ディレクション - タグ: UI/UX, WEBサービス, Webデザイン こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 「UI/UXデザイン」という言葉をよく耳にするようになりましたが、どのような事か正しく理解できているでしょうか？UIとUXはセットで呼ばれる事が多いですが、それぞれは別ものです。しかし、定義は曖昧で両者を混同しているケースもよくあります。 今回は混同しがちな「UIとUX」について、その違いや意味を解説していきます。 UIとは？ UIはユーザーインターフェースの略です。 User Interface 利用者 境界面、接点 Userは「利用者」、Interfaceは「境界線、接点」になります。 要するに、UIはユーザーと製品（デバイスなど）をつなぐ接点を指します。WEBでは、表示されているボタンや画像などユーザーの視覚に触れる全ての情報、見た目を指す言葉となります。 UXとは？ UXはユーザーエクスペリエンスの略です。 User Experience 利用者 経験、体験 Userは「利用者」、Experienceは「経験、体験」になります。 UXはユーザーが製品やサービスを通じて得られる体験や経験を指す言葉です。見た目（UI）の先にある心地よさや、サービス全体を通して得られる満足感といった様々な体験を指します。 UIとUXの関係性 UIとUXはそれぞれ違う言葉を指しますが、なぜセットで呼ばれることが多のでしょうか。 それは、UIはUXを高めるための重要な要素となり、質の高いUXを提供するために必要不可欠となるからです。... と、なんとなく意味合いが分かったところで、UIとUXの関係性をもっと身近なものに例えて整理してみましょう。 犬に例えると... 飲食店の場合... WEBサイトの場合... ユーザーがものやサービスに触れるところには必ずインターフェイスがあり、UXとの相乗効果によって質の高い製品やサービスが生まれます。UI/UXというとわかりにくいですが、この様に普段の生活に置き換えてみると分かりやすいのではないでしょうか。 まとめ UI/UXについて、ザックリと説明しましたがいかがでしたでしょうか。 WEBサービスにおいては、良いUXを提供する為に良いUIを設計することが大前提となります。 また、ユーザーにとって魅力的なサイトを作るためには、常にユーザー目線に立ったデザインを心がける事が重要です。 WEB制作でお悩みの方はファストコーディングにお任せください！ ユーザービリティを考慮したスムーズなUIのご提案、またフロントエンド開発に特化しているため質の高いサイト制作が可能です。 お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。 --- - Published: 2021-05-11 - Modified: 2024-07-31 - URL: https://fastcoding.jp/blog/all/info/gfycat/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: gifアニメ, Webデザイン, Web業界の動向, アニメーション, 便利サービス ※こちらのサービスは、現在は提供を終了しているようですのでご注意ください。（2024年7月19日更新） こんにちは。FASTCODINGデザイナーの七転び八重子です。 今更ながらですが、ブログやWebサイトnに動画やgifアニメを扱う方って多いのではないでしょうか？ ユーチューブにアップして貼り付けしたりするの手っ取り早い気もしますが、画面キャプチャーのgifアニメなどは、結構重たかったりします。私もブログで、手順を説明するのにGifアニメを作るのですが、重たいのでコマ数を削ったりと工夫しています。 そこで、本当に今更ながらですが、2014年頃からサービスを展開している「gfyCat」を利用してみようと思います。今回は、使い方から実際にアップしたGifアニメを貼り付ける所まで説明してみたいと思います。 目次 gfyCatの使い方 ① 会員登録 ② 動画 or Gifアニメをアップロードする ③ Webサイト（ブログ）に貼り付けてみる まとめ gfyCatの使い方 https://gfycat. com/ ① 会員登録 会員登録しなくても、利用できます。何度も利用される、ファイルを管理したい場合は、会員登録しておくと便利ですね。一回しか使わない方は会員登録スキップしちゃってください。登録した名前は、ブログやWebサイトに貼り付ける時に微妙に表示されるので、表示されてもいい名前、サイト名やブログ名にしておくと良いと思います。 ② 動画 or Gifアニメをアップロードする 会員登録が終わると動画アップロード画面に変わるので、ファイルからドラッグ＆ドロップするか、YouTube、Facebook、Twitch、Vimeo、InstagramのURLからもいけます。公開範囲をパブリックにするか非公開にするか、音声を含めるか含めないか選べます。 アップロードと変換中 ③ Webサイト（ブログ）に貼り付けてみる 変換が終わったら、シェアしたり、埋め込みできたりします。 埋め込みタグが表示されるのでコピーして貼り付けてみました↓ まとめ gifアニメは、最初135MBありましたが、変換後は4. 3MBまで軽くなりました。すごい。。 これは、色々なところで重宝しそうです。もっと早く利用していれば良かったです。 --- - Published: 2021-05-07 - Modified: 2024-07-20 - URL: https://fastcoding.jp/blog/all/webdesign/cosha/ - カテゴリー: Webデザイン - タグ: cosha, JavaScript, Webデザイン, シャドウ こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、写真のカラーに合わせて同じカラーのシャドウを入れてくれるJavaScript「cosha（コーシャ）」をご紹介します。スクリプトは非常に軽量で依存性もありません。ライセンスはMITです。 MITライセンス（MIT License）とは？ オープンソースソフトウェアのライセンスのひとつで、無料で基本は自由につかうことができるのが特徴です。 著作権表示（「Copyright (c) 年 作者名」）と、このライセンスの全文（英語の文章）orウェブページのURLを記載をソースコードのなかや、同梱の別ファイルなどに下記のような記述を掲載するだけで、改変・再配布・商用利用・有料販売でも、どんなことにでも自由に無料でつかうことができます。 目次 「cosha（コーシャ）」の実装方法 ① 画像を配置してクラスを指定 ② JavaScriptファイルを読み込む ③ JavaScriptに実行の指定 ④ オプションで位置やカラーを調整する まとめ 「cosha（コーシャ）」の実装方法 cosha 今回は、かっこいいネオンの写真を使って、背景を黒にしてみました。 ① 画像を配置してクラスを指定 を画像に指定します。 ② JavaScriptファイルを読み込む JavaScriptファイルは公式GitHubからダウンロードして下さい。 CDNでそのまま読み込ませてもいいです。 ③ JavaScriptに実行の指定 JavaScriptでは呼び出すための記述のみで大丈夫ですが、オプションを色々指定できます。 See the Pen cosha by 野田 英里 (@fikgpnyd) on CodePen. ④ オプションで位置やカラーを調整する 影の位置 ぼかし 明るさ 彩度 まとめ めちゃくちゃ簡単でしたね。でも、なんだか凝った感じな見栄えです。使用する写真によるかなと行った所。今回は、背景を黒にしてかっこいい感じにしてみました。 --- - Published: 2021-04-30 - Modified: 2021-04-23 - URL: https://fastcoding.jp/blog/all/wordpress/wp-news0413/ - カテゴリー: WordPress - タグ: Lazy-load, Web業界の動向, ページスピード こんにちは。FASTCODINGデザイナーの七転び八重子です。 以前、「Lazy Load」でページの読み込み速度を向上させるという記事をまとめたのですが、その「Lazy Load」を、WordPress がバージョン5. 7で標準サポートしました。これまではプラグインで対応していたのでこれは嬉しい追加機能ですね。 （WordPress 5. 7は2021年3月9日にリリース。） 目次 Lazy Load とは？ Lazy loading のブラウザサポート状況 iframe 動画の読み込み速度が改善される Lazy Load 追加の注意事項 ① width/height 属性必須 ② ビューポート内の画像にはLazy-loadを使用しない ③ 全ブラウザに対応する為にJSのLazy-loadと併用 まとめ Lazy Loadとは？ loading="lazy"属性は、画像やiframeの遅延読み込みを行うブラウザの標準機能です。HTMLタグに属性を加えるだけでよく、追加のJavaScriptのライブラリを必要としないので「ネイティブLazy-load（レイジーロード）」とも呼ばれます。 通常、Webページを開いた時、そのページにあるすべての画像を読み込むので、画像の容量が大きいとページの表示速度は遅くなります。loading="lazy"属性を利用すると、ページをスクロールして画像がビューポート（スクリーンに見えている領域）に入った時に読み込むので、ページの表示速度が向上させる事ができます。転送量の節約にもなるので、モバイル環境においては特にメリットが大きいです。 現在は、Chrome、Firefox、Edgeといった主なブラウザがloading="lazy"属性をサポートしていますが、Safariは正式機能としてはまだ対応しておらず、未サポートのブラウザも存在しています。 過去記事で詳しく説明していますので合わせてどうぞ。 Lazy loading のブラウザサポート状況 2021年4月13日時点での主要ブラウザのネイティブ Lazy loading のサポート状況です。 Can I use - Lazy loading via attribute for images & iframes iframe 動画の読み込み速度が改善される WordPress はバージョン5. 5で、画像のネイティブ Lazy-loading をサポートしていました。バージョン5. 7以降は、画像と同様に、iframe にも loading="lazy" を WordPress が自動追加してくれます。 iframe は画像と比べて利用頻度が少ないのですが、最近では、YouTube動画（iframe）の埋め込みが増えています。動画を頻繁に埋め込むサイトでは、利用する事で表示速度の改善が期待できます。 Lazy Load 追加の注意事項 loading属性でサポートされている値は次のとおりです。 auto：ブラウザのデフォルトの遅延読み込み動作。これは、属性を含めない場合と同じです。 lazy：ビューポートから計算された距離に達するまで、リソースのロードを延期します。 eager：ページのどこにあるかに関係なく、リソースをすぐにロードします。 ① width/height 属性必須 WordPress が自動で iframeタグに loading="lazy" を追加しますが、width属性と height属性が付いている iframeタグが対象になります。 ② ビューポート内の画像にはLazy-loadを使用しない ファーストビュー内の画像や動画には、Lazy-load属性を使用しないようにして下さい。最初から表示すべき画像なのに遅延読み込みが指定されていると、ブラウザが余分な処理をする事になります。 (loading="eager" を付けてくと遅延読み込みせずに、ページの表示と同時に読み込みが始まります。) ③ 全ブラウザに対応する為にJSのLazy-loadと併用 ネイティブ Lazy-load をサポートしないブラウザは、通常どおりに画像やiframeを読み込みます。そこで、JSを併用しましょう。 lazysizesは人気のあるJavaScriptの遅延読み込みライブラリです。 プラグインを読み込む HTMLタグを設定する 遅延読み込みしたい画像に「class='lazyload'」をつけます｡ 画像パスを指定する「src」を「data-src」に変更し、「src」にはできるだけ容量の小さい仮画像を入れておきましょう。 img(画像)だけでなくiframe(YouTube､Google Map等)にも対応しています｡ まとめ Lazy Load 追加の注意事項を念頭に、Webサイトに取り入れて、表示速度を改善してみましょう！ この他にも、サイトの表示スピードの改善は色々あります。個別でやっていくと、大変な作業になるので、難しいことはFASTCODINGに丸っとお任せ下さい。 --- - Published: 2021-04-27 - Modified: 2024-07-31 - URL: https://fastcoding.jp/blog/all/info/g-news0331/ - カテゴリー: Web業界の動向・情報 - タグ: AMP, Core Web Vitals, Web業界の動向, コア ウェブ バイタル こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年3月31日、Googleニュース「コアウェブバイタル（Core Web Vitals）とページエクスペリエンスに関するFAQ」が発表されました。 ※この記事は削除されているようです。（2024年7月31日 更新） 2016年から現在まで、トップニュース枠に掲載されるには AMP 対応していることが条件でしたが、今後その必要がなくなるようです。 コアウェブバイタル（Core Web Vitals）って何？？過去記事で詳しく説明しているので興味のある方はどうぞ。 目次 AMPとは？ Google検索トップニュースに掲載される条件 コアウェブバイタルはランキング指標の一つ 今回の発表をまとめると AMPとは？ AMP(Accelerated Mobile Pages)の略で、GoogleがTwitterと共同で開発を進めているプロジェクトで、AMPを直訳すると、モバイル用のページを早くするという意味です。AMPが目指しているのは、モバイルでインターネットのWebサイトのページが早く表示されるようにすることです。 近年、スマートフォンなどの浸透により、パソコン以外の環境でWebサイトを閲覧する機会が増えましたが、モバイルでの環境では、容量の大きなWebサイトを快適に利用できない可能性がありました。そこで、開発されたのがAMPです。 AMPは、元のページの情報を検索エンジンがキャッシュとして記録します。検索結果からのリンク先をそこに向けることで、１からページを読み込むことなくデータを表示させています。 Google検索トップニュースに掲載される条件 2016年から現在まで、トップニュースに掲載には、AMP対応している必要がありました。ですが今後は、Google ニュースのコンテンツポリシー（関連性の高い有用なコンテンツを表示する）を満たしていることが唯一の条件になります。AMP対応している必要は無くなりました。 コアウェブバイタルとページエクスペリエンスに関するFAQ(抜粋：和訳) Q：AMPページのページエクスペリエンスが良くない場合でも、トップストーリーカルーセルの対象になりますか？ A：はい、Googleニュースのコンテンツポリシーを満たすコンテンツはすべて、トップストーリーカルーセルに表示される資格があります。ページエクスペリエンスとは、優れたページエクスペリエンスを提供するためにすべて重要なシグナルのコレクションを指し、シグナルは、トップストーリーカルーセルを含め、ランキングの要素になりつつあります。これは、コンテンツ自体やクエリとの一致など、他の多くの要因に加えて、ページエクスペリエンスの要因が、トップストーリーカルーセルでの配置を決定することを意味します。ページエクスペリエンスのランキングがユーザーが期待する標準になり、他のパブリッシャーが一致させたいと思うようになるため、パブリッシャーは、ページエクスペリエンスを時間の経過とともに比較的優先して改善することに焦点を当てる必要があります。 コアウェブバイタルはランキング指標の一つ AMP は必須条件ではなくなります。またコア ウェブ バイタルが良好であることも必須条件ではなく、あくまで数ある指標の１つという位置付けです。 コアウェブバイタルとページエクスペリエンスに関するFAQ(抜粋：和訳) Q：WebページがCore Web Vitalsをクリアしていない場合、Top Storiesカルーセルの対象になりますか？ A：はい。トップストーリーカルーセルへの今後の変更により、ページエクスペリエンスステータスやコアWebバイタルスコアに関係なく、すべてのWebページがトップストーリーカルーセルの対象になります。変更が公開されると、Googleニュースのコンテンツポリシーへの準拠が唯一の要件となり、ページエクスペリエンスをすべてのページのランキングシグナルとして使用します。 今回の発表をまとめると AMPはトップニュース掲載の必須条件ではなくなる トップニュース掲載の必須条件は、Googleニュースのコンテンツでポリシーに準拠していること コアウェブバイタルのスコアが良いことはトップニュース掲載の必須条件ではないが、ランキング要因の1つであり、掲載される位置には影響する AMPが必須条件から外れましたが、コアウェブバイタルは関わってきます。どのくらい重要な要因なのかは現在は不明です。 いずれにしても、コアウェブバイタルを Googleがプッシュしているということはいずれはウェブの標準になる可能性があるので、ランキングにどれほど影響を与えるかに関係なく今から改善に取り組んでも良いと思います。 --- - Published: 2021-04-22 - Modified: 2021-04-19 - URL: https://fastcoding.jp/blog/all/info/state-of-frontend-2020-3/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報 - タグ: React, Web業界の動向, フレームワーク, フロントエンド, マイクロフロントエンド, 検索エンジン最適化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 ポーランドに拠点を置く、ソフトウェア開発会社のTHE SOFTWARE HOUSEさんが2020年に行った「フロントエンド開発のトレンドのアンケート」結果を和訳、今回は、第三部です。 第一部はこちら 第二部はこちら State of Frontend 2020 （第三部） 8章 開発チームについて ① 昨年、開発チームの一員として働いたことはありますか？ ② これらの人々のうち、あなたのプロジェクト開発チームの一員だったのはどれですか？ 9章 デザインについて ① 昨年、デザイナーと仕事をするときにハンドオフツールを使用しましたか？ ② どのハンドオフツールを使用しましたか？ 10章 品質保証について ① ソフトウェア開発チームでのテストの責任者は誰ですか？ ② 昨年、自分でソフトウェアテストを実行しましたか？ ③ 自分でどのようなテストをしましたか？ 11章 フロントエンドの未来について ① これらのトレンド/ソリューションのうち、3年後にはほとんど死んでしまうのはどれですか？ まとめ 8章 開発チームについて Guillermo Rauch：VercelのCEO フロントエンド開発はチームスポーツです。 回答者の92％が、昨年中に開発チームの一員として働いたことがあると明確に示しています。ただし、フロントエンドアーキテクチャと展開インフラストラクチャの最近の傾向は、フロントエンド開発者がチームメンバーとコラボレーションする方法に影響を与えています。ヴェルセルでは、それを直接目にしました。 Jamスタックのような新しいフロントエンドアーキテクチャの台頭により、フロントエンド開発者はバックエンドから独立してフロントエンドを展開できます。完全なバックエンドテストスイートが実行されるのを待つ必要がなくなり、反復が高速化されます。さらに、フロントエンドに簡単に接続できる既製のバックエンドAPI（ヘッドレスCMS、IDプロバイダーなど）が増えています。これにより、バックエンド開発者はビジネスに固有のAPIの開発により集中できます。 フロントエンドアーキテクチャと展開インフラストラクチャの最近の傾向は、フロントエンド開発者がチームメンバーとコラボレーションする方法に影響を与えています 次の変更は、デザイナーや製品所有者との協力に関連しています。JamスタックアプリはCDNエッジに迅速かつ安価にデプロイできるため、すべてのブランチとすべてのコミットに一意の「プレビュー」URLを割り当てることができます。Vercelでこれを行いました。現在、デザイナーと製品所有者はプレビューURLをクリックするだけで、フロントエンド開発者が行った変更が意図したとおりに表示され、機能するかどうかをすぐに確認できます。スクリーンショットやGIFを共有するよりもはるかに効果的です。 そして最後に、ソフトウェアテスト。Chromeのヘッドレスウェブブラウザであるpuppeteerとサーバーレスコンピューティングの導入により、エンドツーエンドのテストが高速かつ安価になりました。たとえば、Checklyのようなサービスで、プレビューURLに対してQAスペシャリストによって作成されたパペッティアテストを実行できます。また、Vercelやその他のすべての面倒な作業を行うフロントエンド展開プラットフォームの台頭により、DevOpsエンジニアはフロントエンド開発者のサポートに費やす時間を減らすことができます。 全体として、フロントエンドアーキテクチャとデプロイメントインフラストラクチャの改善が開発者のコ ラボレーションの変化をどのように推進しているかに非常に興奮しています。この分野でさらに多くのイノベーションが見られることを楽しみにしています。 ① 昨年、開発チームの一員として働いたことはありますか？ ② これらの人々のうち、あなたのプロジェクト開発チームの一員だったのはどれですか？ 9章 デザインについて Bartosz Skowroński：ソフトウェアハウスの設計責任者 デザイナーと開発者の緊密なコラボレーションを目指して ソフトウェア開発チームにおけるグラフィックデザイナーの役割についての議論は目新しいものではありません。10年前（おそらくその前でも）にこのトピックについて議論したことを覚えています。しかし、私たちはようやく、デザイナーが開発者と緊密に協力することはもはや流行ではなく、むしろ標準になっているようです。そして、このコラボレーションをさらに改善するための非常に優れたツールがあります。 おそらく、ソフトウェア開発におけるデザインタイプの最も基本的な分類は、UXデザイン（可能な限り最高のユーザーエクスペリエンスを処理する）、UIデザイン（インターフェイスが適切なルックアンドフィールを備えていることを確認する）、および製品デザイン（クライアントと彼らのビジネス目標を達成すること）。今日では、ソフトウェア開発会社にとって、ユーザー中心のUX / UIデザイナーとビジネス中心の製品デザイナーの2種類のデザイナーが参加することが標準になりつつあります。 製品設計者が参加することで、ソフトウェア会社はクライアントのビジネス目標に沿った戦略と製品の作成にますます焦点を合わせています。 プロダクトデザイナーの登場は特に嬉しいです。これは、ソフトウェア会社として、クライアントの真のニーズにますます焦点を合わせ、ビジネス目標に沿った戦略と製品を作成することを意味します。そして、クライアントはこの変化に感謝し始めているようです。世界中の開発チームの70％以上が、すでに少なくとも1人の設計者を抱えています（第8章開発チームを参照）。クライアントは、外部のフリーランスデザイナーを雇う代わりに、開発者とデザイナー（およびプロジェクトマネージャー、ソフトウェアテスターなど）が緊密に協力できる包括的なチームを選びます。 このコラボレーションを実りあるものにするためには、優れたツールが必要です。何年もの間、ソフトウェア開発ビジネスで働くデザイナーのニーズに合わせたツールを見つけるのが困難だったため、デザイナーはAdobePhotoshopのようなソフトウェアを使用していました。幸いなことに、今ではそれらがたくさんあります–ほんの数例を挙げると、Figma、InVision、Sketch、Zeplinです。ベクターグラフィックの作成、他のデザイナーとのコラボレーション、フロントエンド開発者へのデザインの引き渡しなど、すべてが簡単になります。開発チームの71. 7％がすでにそのようなツールを使用しているのは素晴らしいことです。 デザイナーとフロントエンド開発者の間の愛情は厳しいかもしれませんが、包括的な開発チームの普及と、さらに優れたデザインおよびハンドオフツールの出現により、私たちは皆、自信を持って将来を見据えることができると思います。 ① 昨年、デザイナーと仕事をするときにハンドオフツールを使用しましたか？ ② どのハンドオフツールを使用しましたか？ 10章 品質保証について Jessica Jordan：. cultの開発者擁護者 ソフトウェア開発の基礎としてのソフトウェアテスト 今日、デジタル製品の機能の増加はクライアント側で実装されています。このため、ソフトウェアエンジニアとQAスペシャリストの両方が、JavaScriptアプリケーションの開発、保守、スケーリングのワークフローの一部としてテストを行うことが義務付けられています。フロントエンド開発者の80％がすでにソフトウェアテストを実行しており、その数は年々増加しているように見えるのは良いことです。 幸い、JavaScriptエコシステムは、構築するアプリに十分なコードカバレッジを備えた堅牢なテストスイートを構築するための幅広いツールセットを提供します。近年、JSテストエコシステムでは、開発者の人間工学の改善、他のテストソリューションとの統合、および他の多くの側面に重点を置いて、テストを継続的に使いやすくする傾向が見られます。 ソフトウェアテストと最新のフロントエンド開発は切り離せないテーマです . cultでは、人気のあるジョブプラットフォームHoneypot. ioを強化するアプリケーションを含む、ソフトウェアプロジェクトの多くが自動的にテストされ、コードベースが拡大するにつれてテスト範囲が広がります。さらに、QAチームは、機能と設計の両方で機能要件が完全に満たされていることを手動でテストおよび検証します。これは、優れたユーザーエクスペリエンスを保証するためのリリースワークフローの重要な部分です。 私たちのチームはプラットフォームの開発時に手動テストと自動テストに追加の時間を割り当てていますが、ソフトウェアテストはデジタル製品の安定性に必要な投資であり、最終的にワークフロー全体の生産性が向上することがわかりました。 。私たちは、ユニット、統合、エンドツーエンドのテストのために、Capybara、RSpec、Ember CLI、QUnitなどのツールを信頼しています。そしてもちろん、あなたが選択できるソリューションは他にもたくさんあります。 . cultでは、テスト用のツールエコシステムの継続的な成長により、自動化を通じて製品開発ワークフローのさらに大きな部分をまもなくカバーできるようになると確信しています。そして、なぜ私たちはそれをするのですか？ソフトウェアテストと最新のフロントエンド開発は切り離せないテーマであることがわかっているからです。 ① ソフトウェア開発チームでのテストの責任者は誰ですか？ ② 昨年、自分でソフトウェアテストを実行しましたか？ ③ 自分でどのようなテストをしましたか？ 11章 フロントエンドの未来について Marek Gajda：ソフトウェアハウスのCTO フロントエンド2021のトレンド 調査の結果とフロントエンドWeb開発の最近の変更に驚いていますか？あんまり。これらの変更がどれほど迅速に行われるかに驚いていますか？絶対そうです。そのため、フロントエンドの将来を予測することは簡単な作業ではありません。 フロントエンド開発の状態を見ると、確立されたテクノロジー、ツール、グッドプラクティスがいくつかあります。これらの選択は明白に思えます。JavaScriptフレームワークを見てみましょう。AngularとVue. jsを組み合わせて使用 している人よりもReactを使用している人の数が多いことを確認すると（第2章フレームワークを参照）、Reactは非常に確固たる評判を得ており、近い将来どこにも行かない可能性があります。 。 ただし、フロントエンド開発コミュニティでは、愛と憎しみの境界線は非常に薄いです。そしておそらくそれの最も良い証拠はReduxに起こったことです。1、2年前、Reactを使用していたとき、Reduxも「当然の選択」でした。しかし、フロントエンド開発者はReduxの使用によって引き起こされる問題にうんざりし、すぐにReactフックの時流に飛びつきました。2020年の夏です。すでにReduxよりも多くの人がフックを使用しており（第2章を参照）、フロントエンド開発者の34％が、Reduxが3年後になくなると信じています。 また、フロントエンド開発の世界はますます複雑になっています。繰り返しになりますが、1、2年前は、継続的インテグレーションやコンテナ化などのソリューションは、よりバックエンドのものと見なされていました。しかし、その間に、フロントエンド開発者は、自分たちもこれらのソリューションを使用することで利益を得ることができることに気づきました。現在、フロントエンド開発者の77％がCIを使用し、62％がコンテナを使用しており（第3章ホスティングを参照）、フロントエンド開発の新しい標準となっています。 では、今後12か月でフロントエンド開発の状態はどのように変化するのでしょうか。Svelteは3つの最も人気のあるフレームワークの1つになりますか？マイクロフロントエンドは成熟しますか？誰も確実に言うことはできませんが、私の意見では、確かなことが1つあります。それは、いくつかの変更がどれほど迅速に行われるかに驚くことです。 そうは言っても、State of Frontend2021レポートでお会いしましょう。 ① これらのトレンド/ソリューションのうち、3年後にはほとんど死んでしまうのはどれですか？ まとめ 三部に渡って、和訳した「2021年最新のフロントエンド開発レポート」はいかがだったでしょうか？ 今後のフロントエンド開発に置けるトレンドが、なんとなく掴めたのではないでしょうか？取り入れていく、フレームワークの一つの基準になれば良いかなと思います。 --- - Published: 2021-04-19 - Modified: 2021-04-19 - URL: https://fastcoding.jp/blog/all/info/fontworks8/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報 - タグ: Webfonts, Web業界の動向, フロントエンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年1月下旬、フォントワークスは、Google社の「Google Fonts」へ手書き風の楷書系硬筆体「クレー」やディスプレイ書体の「ロックンロール」「レゲエ」「ドットゴシック」など全8書体提供を開始しました。が、1月末の段階では、まだGoogle fonts内で反映されていませんでした。すっかり忘れていたのですが、ニュースから一月経って、もう一度確認したところ、6書体が反映されていました。後の3書体はどうしたんだろう。。。 以前アップしたフォント関係の記事です、興味のある方はどうぞ。 目次 フォントワークスの８書体をご紹介 ① クレー(Klee) One Regular ② クレー(Klee) One SemiBold ③ トレイン(Train) One Regular ④ ロックンロール(RocknRoll) One Regular ⑤ ステッキ(Stick) Regular ⑥ ランパート(Rampart) One Regular ⑦ レゲエ(Reggae) One Regular ⑧ ドットゴシック16(DotGothic16) Regular Google fontsの日本語フォント（全25書体） Google fontsのの使い方 ① 好きなフォントを選んで、リンクか読み込みをする ② CSSに記述する ③ 読み込む文字を限定して表示速度をあげる まとめ フォントワークスの８書体をご紹介 Fontworks ニュース 2021年1月15日 GoogleFontsへディスプレイ書体など全8書体を提供しました Google fontsで提供されているのは、現時点で６種類でした。今後増えるのかな・・・ 同フォントは、フォントワークスのGitHubでも無料公開されています。ライセンスは比較的縛りの緩い“※SLIオープンフォントライセンス 1. 1”で、個人利用・商用共に無料です。 SLIオープンフォントライセンス(SIL Open Font License)とは? 商用利用、埋め込み、同梱可。ライセンスの明示が必要。フリーに利用できるフォントライセンスです。単体での再販はできませんが、何かしらのソフトウェアを同梱させることで販売が可能です。商用利用も可能で、ソフトウェアに組み込んでの利用に制約がありません。フォントを改変した場合、フォント名に元フォント名を含める事ができないのと、改変した旨の明記が必要です。また、ライセンス変更が不可となり改変後のフォントにはSIL OFLが適用されます。 ① クレー(Klee) One Regular 鉛筆文字のようなアクセントのある楷書フォントです。こちらはRegular。2021年4月7日の段階で、セミボールドと共に、Google fontsには反映されていません。 ② クレー(Klee) One SemiBold セミボールド。 ③ トレイン(Train) One Regular フォントワークスでは「レイルウェイ」という名前で提供されているフォントです。線路を思わせる二重のラインの自体が特徴。個性的なゴシック体なので、見出しに利用できそう。 ④ ロックンロール(RocknRoll) One Regular 躍動感があってポップな書体ですね。Webサイトではあまり見かけないフォントですね。グラフィックデザイン向きな感じ。 ⑤ ステッキ(Stick) Regular 名前の通り、棒を合わせたような書体です。 ⑥ ランパート(Rampart) One Regular 立体的なシャドウ書体です。こちらも、Google fontsには反映されていません。 ⑦ レゲエ(Reggae) One Regular ロックンロールと少し似ていますが、こちらの方が激しい感じ。 ⑧ ドットゴシック16(DotGothic16) Regular ドットを合わせような書体です。 Google fontsの日本語フォント（全25書体） Google fonts 日本語検索では21書体がありますが、 githubにある書体と合わせると合計25書体あります。 Google fontsのの使い方 Google fontsは無料で利用できまます。 利用時の注意 Google Fontsに限らずですが、Webフォントはサーバーからのテキストデータを読み込んで表示しているため、利用するフォント数やフォントウェイトの種類が多いとページの読み込みに時間がかかる事になります。特に日本語フォントは文字数が多く、ひらがな、カタカナ、漢字を読み込むため注意が必要です。 Googleの推奨する１ページあたりの容量は1. 6MB程度ですが、例えば「Noto Sans JP」は1ウェイトあたり1. 6MBあるため、「Regular」と「Bold」の２種類のウェイトを利用すると3. 2MBかかるため注意が必要です。 ① 好きなフォントを選んで、フォントの読み込みのコードと font-family の指定のコードをコピーして使う 好きなフォント選んで、「＋slect this style」をクリックします。ウェイトが複数ある場合があります。 フォントの読み込みのコードと font-family の指定のコードをコピーする 下記の様にヘッダとスタイルに記述する ② 読み込む文字を限定して表示速度をあげる 先ほど説明した通り、日本語フォントは重たいので取り扱いには注意が必要です。すべての文字にWebフォントを使うと、やはり読み込み速度は遅くなりますので、見出しのみかっこよくしたいなど、表示箇所を限定して、表示させたい文字のみを読み込む事で、表示速度を改善する方法をお勧めします。 詳しくは、こちらの記事にまとめています。 まとめ 日本語フォントが着々と増えていますね。あまり凝った感じのデザインだとUXの観点からWebサイトには不向きな書体もありますが、無料で使えるのはとても有難いです。デザインにも幅ができるので機会があれば使ってみたいと思います。 --- - Published: 2021-04-16 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/202104-text-animation/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: JavaScript, Webデザイン, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトで使いたい！カッコよくて、オシャレなテキストエフェクト・アニメーションをまとめてみました。 今回は、codepenから探してみました。 目次 CodePen Home CSS3 text-shadow effects Rotating text Shattering Text Animation SVG text mask Pure CSS Text Reveal ScrollTrigger: SVG Text Mask Awesome Text-Shadow SVG Text Animation Using Stroke Offset Method Splitted text reveal Spotlight Cursor Text Screen Emblem - Auto generate circular text Fullscreen Background Video with Mix-Blend-Mode Overlay Text Text blurring animation popout text Pure CSS Text animation 便利ツールサイト Criate Awesome Text Effects CodePen Home CSS3 text-shadow effects 綺麗なテキストシャドウです。CSS3で実装可能。 See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen. Rotating text テキストの一部が変わっていきます。使えそうな予感。 See the Pen Rotating text by Rachel Smith (@rachsmith) on CodePen. Shattering Text Animation メインビジュアルに使えそうですね。ループにせず、最初の表示だけにして使ってみたいです。 See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen. SVG text mask テキストにマスクをしています。これだけで雰囲気が出ますね。 See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen. Hand written SVG text animation 手書きの文字を表示！商品のキャッチフレーズなど短い文字で使うと良さそうです。 See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84) on CodePen. Pure CSS Text Reveal シンプルですが、こうゆうのが使えますね。 See the Pen Pure CSS Text Reveal by Mattia Astorino (@equinusocio) on CodePen. ScrollTrigger: SVG Text Mask オシャレですね。テキストマスクは流行っているのでしょうか？ポインターとかでもよく見かけます。 See the Pen ScrollTrigger: SVG Text Mask by Tom Miller (@creativeocean) on CodePen. Awesome Text-Shadow こちらのテキストシャドウも綺麗ですね。 See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen. SVG Text Animation Using Stroke Offset Method こちらもシンプルかつオシャレで使いたいですね。 See the Pen SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem) on CodePen. Splitted text reveal よく見かけるアニメーションですね。 See the Pen Splitted text reveal by Fabio Ottaviani (@supah) on CodePen. Spotlight Cursor Text Screen ポインターに合わせてカラーが変化します。こちらもちょっとカスタマイズしたら使えそうです。 See the Pen Spotlight Cursor Text Screen by Caroline Artz (@carolineartz) on CodePen. Emblem - Auto generate circular text クルクル回すだけなんですが、なんかポインターとかスクロールに合わせてもう一工夫して使いたいですね。 See the Pen Emblem - Auto generate circular text by George Hastings (@georgehastings) on CodePen. Fullscreen Background Video with Mix-Blend-Mode Overlay Text このまますぐ使えそうですね。動画に合わせてテキストにマスクがかかります。 See the Pen Fullscreen Background Video with Mix-Blend-Mode Overlay Text by Dudley Storey (@dudleystorey) on CodePen. Text blurring animation オープニングで使えそうなアニメーションです。 See the Pen Text blurring animation by Andrew Burton (@onge) on CodePen. popout text こちらも使いやすそうです。シンプルですが、文字によって微妙に動きがズレているのがオシャレ。 See the Pen popout text by Nathan Taylor (@nathantaylor) on CodePen. Pure CSS Text animation 何種類かあるので、「Repeat Animation」をクリックして確認してみてください。 See the Pen Pure CSS Text animation by Mamun Khandaker (@kh-mamun) on CodePen. 便利ツールサイト Criate Awesome Text Effects テキストを入力するだけで、面白いテキストエフェクトを表示してくれます。サイズ、フォントやカラーが調整ができ、gifアニメでエクスポート可能です。 Criate Awesome Text Effects --- - Published: 2021-04-14 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/state-of-frontend-2020-2/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報 - タグ: React, Web業界の動向, フレームワーク, フロントエンド, マイクロフロントエンド, 検索エンジン最適化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 ポーランドに拠点を置く、ソフトウェア開発会社のTHE SOFTWARE HOUSEさんが2020年に行った「フロントエンド開発のトレンドのアンケート」結果を和訳、今回は、第二部です。 第一部はこちら State of Frontend 2020 （第二部） 4章 JAMSTACKについて ① JAMSTACK Webサイトを構築しましたか？ ② 昨年、どの静的サイトジェネレーターを使用しましたか？ 5章 マイクロフロントエンドについて ① マイクロフロントエンドを使用しましたか？ ② マイクロフロントエンドをどのように構成しますか？ 6章 検索エンジン最適化について ① あなたは検索エンジン最適化をしますか？ ② SEOのテーマにどのようにアプローチしますか？ 7章 アプリケーションのアクセシビリティについて ① アプリケーションのアクセシビリティに注意を払っていますか？ ② アプリケーションのアクセシビリティをどのように処理しますか？ まとめ 4章 JAMSTACKについて Tim Neutkens：Head of Next. js at Vercel 最近、回答者のほぼ3分の1がJAMSTACK（JavaScript、API、マークアップ）Webサイトを構築しているのを見るのは素晴らしいことです。また、その半数以上が、Vercelで作成したJamスタック用のReactフレームワークであるNext. jsを使用していることを個人的に嬉しく思います。そして、ニュースをお伝えします。今後数か月で、JAMSTACKWebサイトを構築するフロントエンド開発者のシェアがさらに増えると予想しています。 私にとって、JAMSTACKの魅力は、より少ないことでより多くのことを達成できることです。ジャムのスタック、代わりにすべての要求（サーバー側レンダリング）にページをレンダリングするのには、要求時（静的生成）する前に、ページをプリレンダリング。これは、CDN（コンテンツ配信ネットワーク）上のすべてのエッジで共有できるため、最適なパフォーマンス、高可用性、低コスト、およびメンテナンスのオーバーヘッドがゼロになります。 ニュースをお伝えします。今後数か月でJAMSTACKWebサイトを構築する開発者の割合がさらに増えると予想しています。 さらに、JAMSTACKフレームワークは静的を超えて進化し、動的な柔軟性を採用しています。たとえば、Next. jsを使用すると、本番ビルド後に追加のページを静的に生成したり、既存のページを再生成したりできます（増分静的生成）。アプリに数百万のページがある場合でも、それらのページを段階的に生成できるため、初期ビルドは即座に完了します。 再利用可能なAPI（JAMSTACKの「A」）も増加しています。現在、市場にはヘッドレスCMS、ヘッドレスeコマース、ヘッドレスIDなどの多くのプロバイダーがあります。フレームワークがこれらのトレンドとともに進化しているのも不思議ではありません。私は経験から話しています：Next. jsには、ヘッドレスCMSでページをプレビューしているときに、静的生成を条件付きでバイパスできるプレビューモード機能があります。 JAMSTACKの将来にとても興奮しています。回答者がさまざまなJAMSTACKソリューションを使用しているのを見るのは素晴らしいことです。これは、開発者がさまざまなアイデアを試していることを示しています。これにより、JAMSTACKコミュニティは、よりシンプルでパフォーマンスの高いWebを目指しています。 ① JAMSTACK Webサイトを構築しましたか？ ② 昨年、どの静的サイトジェネレーターを使用しましたか？ 5章 マイクロフロントエンドについて Luca Mezzalira:DAZNのアーキテクチャ担当副社長、「BuildingMicro-Frontends」の著者 フロントエンド開発でマイクロサービス革命が必要ですか？ 今日、人々がマイクロフロントエンドアーキテクチャをどのように採用しているかを見るのは非常にエキサイティングです。アメリカンエキスプレス、DAZN、IKEA、Spotify、スターバックスは言うまでもなく、マイクロフロントエンドを使用している企業が世界中にたくさんあることはすでに知っています。現在、フロントエンドの状態調査の結果から、フロントエンド開発者の実質的に1/4がすでにマイクロフロントエンドを開発していることもわかっています。 Webコンポーネントは、マイクロフロントエンドで冒険を始めたばかりの開発者にとって優れたエントリーレベルのソリューションだと思います。調査の結果はそれを裏付けているようです。一方、サーバー側のレンダリング（Holocron、Podium、Ara Frameworkなど）やクライアント側の構成（ModuleFederationやSingleSPAなど）に使用できる新しいフレームワークはかなりあります。ただし、これらのフレームワークはマイクロフロントエンドコミュニティへの優れた追加機能ですが、慎重に選択する必要があることを覚えておく必要があります。常に、操作するコンテキストを確認してください。 まだ初期の段階であり、学ぶべき教訓はたくさんありますが、マイクロサービスと同じように、マイクロフロントエンドは進化して成熟するだろうと私は信じています。 マイクロフロントエンドが3年後に消滅するという声明に同意する回答者はわずか20％であることに満足しています（第11章「フロントエンドの将来」を参照）。また、マイクロフロントエンドの将来は有望に見えると思います。マイクロサービスが過去数年間に行ったように、マイクロフロントエンドは確実に進化し、おそらく成熟するでしょう。実際、TC39の世界では、すでにステージ2にあるレルムの提案により、マイクロフロントエンドの新しいシナリオを開く可能性のある興味深い動きがすでにあります。 マイクロフロントエンドは特効薬ではありませんが、サーバーサイドレンダリング、Jam Stack、シングルページアプリケーションなどの他のアーキテクチャへの優れた追加機能です。まだ初期の段階であるため、やるべきことは間違いなく多く、発見すべき実践がたくさんあり、学ぶべき多くの教訓があります。ただし、このアーキテクチャを適切なコンテキストで使用すると、プロジェクトやチームのスケーリングにメリットがもたらされると確信しています。 ① マイクロフロントエンドを使用しましたか？ ② マイクロフロントエンドをどのように構成しますか？ 6章 検索エンジン最適化について Tomek Rudzki：AWSサーバーレスヒーローおよび独立コンサルタント 検索エンジンからのトラフィックは、あらゆるオンラインビジネスにとって非常に重要です。WolfgangDigitalの「KPIReport2020」によると、オーガニック検索がトラフィックの43％を占めています。これは、直接トラフィックと有料検索トラフィックの合計以上のものです。それでも、State of Frontend 2020調査の結果によると、52％もの開発者がSEOを気にかけていません。 私は非難するためにここにいるのではありません。パスワードで保護された内部アプリケーションを開発している方もいらっしゃると思いますが、検索結果に表示する必要はありません（または表示できません）。ただし、それ以外の場合、Googleで成功するウェブサイトが必要な場合は、SEOに注意する必要があります。SEOスペシャリストが常に開発者の言語を話すとは限らないため、これは困難です。救いの手を差し伸べさせてください。 Googleの視点を理解すれば、ユーザー中心でボットフレンドリーなウェブサイトを構築するのにそれほど時間はかかりません。 まず、GoogleがウェブサイトでJavaScriptを適切にレンダリングできることを常に確認する必要があります。たとえば、robots. txtの一部のスクリプトを誤ってブロックしたり、GooglebotでサポートされていないJavaScript機能を使用したりしている可能性があります。モバイルフレンドリーテストまたはURL検査ツールを使用することをお勧めします。これらはGoogleが提供する無料の使いやすいツールです。それらを使用して、DOMを調べて、ページのすべての重要なセクションがGoogleによって適切にレンダリングされることを確認します。 また、調査によると、開発者の11％以上が動的レンダリングを使用しています（これは基本的に検索エンジンボットを検出し、静的バージョンのページを提供することです）。Googleはこれを「クローラーの回避策」と呼んでいます。動的レンダリングが失敗することがあるため、リスクがあります。ウェブサイトがGooglebotに空白のページを表示し、オーガニックトラフィックがゼロになるのを見てきました。したがって、動的レンダリングが期待どおりに機能するかどうかを常に徹底的にテストするようにしてください。 SEOは多くのビジネスにとって重要であり、レンダリングはSEOの多くの側面の1つにすぎません。サーバー側のレンダリング、クライアント側のレンダリング、動的レンダリングのいずれかを選択するのと同じように、適切なHTMLタグの使用と論理的なWebサイト構造の設計に重点を置く必要があります。Googleの視点を理解すれば、ユーザー中心でボットフレンドリーなWebサイトを構築するのにそれほど時間はかかりません。 ① あなたは検索エンジン最適化をしますか？ ② SEOのテーマにどのようにアプローチしますか？ 7章 アプリケーションのアクセシビリティについて Rocky Neurock：Honeypot. ioのエンジニアリングチームリーダー インターフェースをすべてのユーザーにとって使いやすいものにする 「ウェブを壊さないでください」と、私の友人のメラニー・サムナーはよく忠告します。開発者として、私たちは仕事でアクセシビリティを促進するために最後の列に並ぶことがよくあります。このパターンを回避するには、考え方を変える必要があります。アクセシビリティは私たちにはもたらされません。ウェブがすべての人のために機能できるように、私たちは仲間の優れた教師になる必要があります。 このトピックは私の心の近くにあり、大切なものです。私はユーザーエクスペリエンスを本当に気にかけているだけでなく、視力障害に苦しんでいるからです。私は確かにウェブが私のために機能しないと言うことができます。小さなテキストと低いコントラスト比は私に最も影響を与えますが、私は日常的に他の欲求不満に遭遇します。 たとえば、選択した要素やチェックボックスを再考する非ネイティブコンポーネントは、非常にうまく機能しないと、ユーザーを苛立たせる可能性があります。まず、キーボードを使ってWebを移動することを好むユーザーや、モバイルデバイスを使用しているユーザーにとって、これらのエクスペリエンスがいかに神経質になるかを検討してください。次に、支援機器を使用しているユーザーについて考えます。はい、彼らの経験はさらに悪いです。 アクセシビリティを向上させ、全体的なエクスペリエンスを向上させるための鍵は、「知る人ぞ知る」私たちが、アクセシビリティの利点についてカウンターパートに実際に教えることだと思います。 アクセシビリティを管理する開発者が、基本的なWebコンテンツアクセシビリティガイドライン（WCAG）のほとんどに精通しているように見えるのは良いことです。将来的には、アクセシビリティをテストする人の数も調べる必要があります。アクセシビリティを自動的にテストするツールの数は増え続けており、採用の増加は、アクセシビリティに責任があると感じる開発者の割合の増加と相関するのではないかと思います。 アクセシビリティを向上させ、全体的なエクスペリエンスを向上させるための鍵は、「知る人ぞ知る」私たちが、アクセシビリティの利点について実際にカウンターパートに教えることだと思います。自動化されたテストで自分の時間を解放できれば、さらに良いでしょう。 ① アプリケーションのアクセシビリティに注意を払っていますか？ ② アプリケーションのアクセシビリティをどのように処理しますか？ まとめ 回答では、SEOを意識したコーディングは半数以下ですが。Webデザイナーのデザインを、フロントエンジニアが引き継ぐわけですが、デザインやアニメーションも大切ですが、SEOやユーザービリティをしっかり考慮して開発する必要がありますね。 --- - Published: 2021-04-07 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/state-of-frontend-2020-1/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報 - タグ: React, Web業界の動向, フレームワーク, フロントエンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 ポーランドに拠点を置く、ソフトウェア開発会社のTHE SOFTWARE HOUSEさんが2020年に行った「フロントエンド開発のトレンドのアンケート」結果を和訳してみました。今回のレポートには、Web開発のトレンド・人気のあるフレームワークとツール・専門家による考察がまとめれています。フロントエンド開発において、現在の動向を把握するのに役立つはずです。膨大なレポートなので、３部に渡ってご紹介します。 State of Frontend 2020 （第一部） １章 フロントエンド開発者について ① 回答者の分布 ② フロントエンド開発にどのくらい参加していますか？ ③ 会社でのポジションを教えて下さい。 ④ 働いている会社の規模はどれくらいですか？ 2章 フレームワークについて ① どのフレームワークを利用しましたか？ ② 使い続けたい、または今後学びたいフレームワークはどれですか？ ③ 状態管理に関して、どのソリューションを使用していますか？ ④ 昨年、TypeScriptを使用しましたか？ ⑤ 昨年、TypeScriptを使用しましたか？ ⑥ TypeScriptはJavaScriptよりも好きですか？ ⑦ TypeScriptの将来についてどう思いますか？ 3章 ホスティングについて ① 通常、アプリケーションはどこにデプロイしますか？ ② 継続的インテグレーションを使用していますか？ ③ 昨年、どのCIソリューションを使用しましたか？ ④ コンテナ化を利用していますか？ ⑤ 昨年、どのコンテナ管理ソリューションを使用しましたか？ まとめ １章 フロントエンド開発者について レポートの編集長 Patryk Mamczur 4,500人のフロントエンド開発 State of Frontend 2020レポートについて考え始めたとき、私は1つの目標を念頭に置いていました。それは、フロントエンド開発者の日常業務がどのようなものかを調べることです。わずか数週間で、ちょうど4,500人のフロントエンド開発者がフロントエンドの状態調査に参加しました。私は、参加者の増え続ける数字を観察し、調査を終了する絶好の瞬間を待っていました。State of Frontend 2020は、フロントエンド開発のみに焦点を当てた最大のレポートです。 ① 回答者の分布 ② フロントエンド開発にどのくらい参加していますか？ ③ 会社でのポジションを教えて下さい。 ④ 会社でのポジションを教えて下さい。 2章 フレームワークについて ディラン・シーマン:Dojoの共同作成者であるLivingSpecのCEO Reactが王様です。次の候補者は誰ですか？ State of Frontend調査の結果を見ると、確かなことが1つあります。それは、Reactが今日のJavaScriptフレームワークのマインドシェアを支配しているということです。ただし、同時に、Reactエコシステムの無駄のない代替手段として、次世代のリアクティブフレームワークが間もなく登場する可能性があるようです。そして、それはすべてTypeScriptの人気の高まりと大いに関係しています。 過去数年間、JavaScript開発者は、主要なフレームワークとしてReact、Vue. js、Angularに引き寄せられてきました。Ivyの出荷が大幅に遅れたこともあり、Angularへの相対的な関心は低下しました。同様に、Vue 3. 0のリリースが待望され、やや遅れたため、Vueへの関心は少し停滞しました。それはすべて、ReactがJavaScriptフレームワーク市場を支配するのに役立ち、調査の回答者の74. 2％がそれを使用しました-AngularとVue. jsのユーザーを合わせた以上です！ ただし、Reactコミュニティが世の中を気にせずに生活しているという意味ではありません。開発者がReduxから目をそらし始めたとき、最近大きな変化が起こりました。状態管理に関しては、Redux（48. 2％）よりも多くの人がReact Context APIとフック（49. 6％）を使用していることはすでにわかります。もちろん、一部はまだ両方を使用していますが、傾向は明らかです。また、補足として、大きなJavaScriptフレームワークについて説明することは重要ですが、jQueryについても忘れてはなりません。jQueryについては、ほとんど話されていませんが、依然としてWeb上で最も広く展開されているJavaScriptライブラリです。 1つ確かなことは、Reactが今日のマインドシェアを支配しているということです。 そして、JavaScriptの将来はどうですか？通常のDOM構造の上に反応性を提供しようと努めるSvelteなどの次世代の反応性フレームワークにすでに大きな関心が寄せられています。さらに別の競合相手はStencilです。これは、Webコンポーネントに焦点を当て、Svelteと同様に効率的なコンパイルに焦点を当てたフレームワークです。また、Dojoは、すぐに使用できるより高速なエクスペリエンスのためのインテリジェントなデフォルトを約束する、リアクティブなTypeScriptファーストフレームワークとして再登場しました。 これらの次世代フレームワークは小さなアプリケーションには最適かもしれませんが、大きなアプリを構築する場合はより多くの作業が必要になると主張する人もいます。確かに、過去数年間の機能をサポートする必要のあるフレームワークと同じレガシーを持たないため、これらすべてがはるかに小さいデフォルトのアプリケーションバンドルサイズを提供します。また、それらは最新の標準と言語機能と非常に一致しています。 そして、ここでTypeScriptの重要性の高まりについて話し合う必要があります。回答者の77. 2％がすでにTypeScriptを使用しており、そのほとんどがJavaScriptよりもTypeScriptを好んでいるため、フレームワークがTypeScriptのサポートを改善し、多くの回答者がTypeScriptを内部で活用し始めているのも当然です。これは、すでに確立されているフレームワーク（ReactやAngularなど）と次世代のフレームワーク（特にStencilやDojo）の両方に当てはまります。 これらすべての変更が行われているので、JavaScriptフレームワークの領域で次に何が起こるかを見るのを本当に楽しみにしています。確かなことが1つあるからです。現在、Reactが王様ですが、王位を待っている候補者はすでに数人います。 ① 昨年、どのフレームワークを利用しましたか？ ② 使い続けたい、または今後学びたいフレームワークはどれですか？ ③ 状態管理に関して、どのソリューションを使用していますか？ ④ 昨年、TypeScriptを使用しましたか？ ⑤ TypeScriptはJavaScriptよりも好きですか？ ⑥ TypeScriptの将来についてどう思いますか？ 3章 ホスティングについて ヤン・クイ：AWSサーバーレスヒーローおよび独立コンサルタント 従来のDC、クラウドジャイアント、フロントエンドに焦点を当てたホスティング State of Frontend 2020調査の結果は、ホスティングのテーマに関しては特に興味深いようです。数字を見ると、従来のDCからクラウドプロバイダーを経由して、NetlifyやVercelのようなブロックの新しい子供たちまですべてがあります。 私にとって、これらの結果からの最大の驚きは、回答者の44. 3％がまだアプリケーションを独自のWebサーバーにデプロイしていることです。繰り返しになりますが、従来のDCにはまだ巨大な市場があり、パブリッククラウドにはまだ多くの成長機会があることを思い出してください。 アマゾンウェブサービスがクラウドプロバイダーの間で最も人気のあるデプロイターゲットであることは、それほど驚くことではありません（38. 7％）。ただし、AWSのシェアがGoogle Cloud Platform（14. 2％）とMicrosoft Azure（11. 5％）を合わせたものよりも大きいことに驚かれるかもしれません（しゃれを意図したものです）。 フロントエンド開発の将来には、フロントエンドに焦点を当てたチームに使いやすい機能を提供するNetlifyやVercelなどのプラットフォームが必要です。 また、NetlifyがGCPとAzureの両方よりも浸透率が高い（23. 3％）という事実は、Netlifyがどれほど素晴らしい仕事をしたかを証明しています。これは、フロントエンド開発の将来には、フロントエンドに焦点を当てたチームのバックエンドインフラストラクチャに使いやすく強力な抽象化を提供するNetlifyやVercelなどのプラットフォームが必要であるという考え方の高まりを強化します。 AWSによるAmplifyの継続的な推進は、AWSもここで可能性を認識していることを示唆しています。そしてその一方で、GCPは、Firebaseを何年も前に買収し、それが潜在的なマーケットリーダーに成長できなかったため、チャンスを逃したと感じざるを得ません。 ① 通常、アプリケーションはどこにデプロイしますか？ ② 継続的インテグレーションを使用していますか？ ③ 昨年、どのCIソリューションを使用しましたか？ ④ コンテナ化を利用していますか？ ⑤ 昨年、どのコンテナ管理ソリューションを使用しましたか？ まとめ 専門家の考察があるので、より理解しやすいですね。2021年も断然Reactが人気のようですが、Vue. jsも伸びましたね。jQueryで使っていたような簡単なフロントエンド周りの動きをVue. jsで使い、大規模なアプリ開発はReactを利用すると良いかなと思います。 --- - Published: 2021-04-04 - Modified: 2024-07-31 - URL: https://fastcoding.jp/blog/all/info/website-font/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, SEO - タグ: Webfonts, Web業界の動向, フォント, フロントエンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさん、Webデザインになんのフォントを使っていますか？ OS標準フォント、市販フォント、Webフォント、がありますが、グラフィックデザインと違ってWebサイトで使える（推奨）フォントは限られています。今回はそんなフォントについて、基礎からしっかりおさらいしてみます。 目次 そもそもフォントって何？ ① OS標準フォント ② 市販フォント ③ Webフォント Webサイトに使う推奨フォントはコレ Webフォントを使うなら！サブセット化してページ表示を高速化する まとめ そもそもフォントって何？ 「フォント (Font)」は、「ある書体を表現するための、ひと揃いの活字」── 活版印刷に使う、金属製の活字 ── というのが本来の意味です。 なので、正確には、 「みなさん、デザインになんのフォントを使っていますか？」 は、間違いで、 「みなさん、デザインになんの書体を使っていますか？」 が正解になります。 そんな細かな認識の違いはさておき、近年ではパソコン上のフォントデータファイルのことを指して「フォント」と呼ぶケースが多いです。 フォントには、 もともとパソコンにインストールされているOS標準フォント 市販されている有料フォント(無料もある) Web上にデータが置いてあるWebフォント の３つがあります。 ① OS標準フォント OS標準フォントは、もともとパソコンに入ってるフォントですが、OSによってインストールされているフォントが異なります。 Windowsに標準搭載のフォント一覧 Windows 10 によってインストールされるフォント Windows 8. 1 によってインストールされるフォント ※こちらの投稿は削除されています（2024年7月31日 更新） Windows 8 によってインストールされるフォント Windows 7 によってインストールされるフォント Macに標準搭載のフォント一覧 macOS Big Sur に組み込まれているフォント macOS Catalina に組み込まれているフォント macOS Mojave に組み込まれているフォント macOS Sierra に組み込まれているフォント iOSに標準搭載のフォント一覧 iOS 13 System Fonts Androidに標準搭載のフォント Android端末は、OSのバージョンによって標準フォントが異なります。 Android 6. 0 Marshmallowからは、和文は「Noto Sans CJK」、欧文は「Roboto」が標準フォントとして採用されています。また、明朝系のフォントは１つも入っていません。 注意！ 日本国内のメーカーはAndroid端末の日本語フォントを独自に変更しているケースがあります。そのため、機種によってフォントが変わっていることもあるので注意が必要です。 ② 市販フォント フォントを購入・インストールして利用することもできます。無料で公開しているフォントもたくさんあります。 和文（日本語）のフォントを提供している主な会社 モリサワ 新ゴ / 見出ゴ / 凸版文久 / 太ミン / リュウミン / 黎ミン / 見出ミン 秀英明朝 / ヒラギノ明朝 / フォーク / じゅん / 新丸ゴ フォント一覧へ フォントワークス 筑紫明朝 / 筑紫ゴシック / ロダン / セザンヌ / スーラ / マティス / 大江戸勘亭流 古今江戸 / グレコ / クレー / ハミング / スキップ / ランパート / ロックンロール フォント一覧へ タイププロジェクト AXIS Font / TP明朝 / AXISラウンド / 東京シティフォント / 濱明朝 / 金シャチフォント モトヤ モトヤ明朝 / モトヤゴシック / モトヤシーダ / モトヤマルベリ / モトヤアポロ アドビ(Adobe） 源ノ角ゴシック / かづらき / 小塚明朝 / 小塚ゴシック / りょう イワタ イワタミンゴ / イワタ明朝体 / イワタ新ゴシック / イワタ丸ゴシック / 朝日書体 SCREEN（スクリーン） ヒラギノ角ゴシック / ヒラギノUD角ゴシック / ヒラギノ明朝体 / ヒラギノ丸ゴシック体 字游工房（じゆうこうぼう） 游明朝体 / 游ゴシック体 / 游教科書体 ② Webフォント Webフォントは、Webサーバ上にデータが置かれており、読み込んで利用するフォントです。閲覧環境に関係なく、どのデバイスでも同じフォントが表示されます。 有料Webフォント TypeSquare 主なフォント:新ゴ / リュウミン / じゅん 提供会社：モリサワ Adobe Typekit 主なフォント：源ノ明朝 / 源ノ角ゴシック / 小塚ゴシック / 小塚明朝 / Futura 提供会社：アドビシステムズ fonts. com 主なフォント：Helvetica / DIN / Futura / AXIS 提供会社：Monotype 無料Webフォント Google が提供しているGoogle Fontsは無料で使用することができます。導入の手順も簡単です。フォントをダウンロード・インストールすれば、デザインに使用できます。 Google Fonts 日本語フォント:https://googlefonts. github. io/japanese/ 主なフォント：M PLUS 1p / はんなり明朝 / こころ明朝 / さわらびゴシック など Webサイトに使う推奨フォントはコレ (1) Webサイトで利用するフォントは、デザインする段階で選定を行いましょう！ デザイン時とコーディング後で利用しているフォントが変わるとデザインのイメージが変わってしまう場合があります。 (2) Webサイトに利用するフォントは、表示速度や見易さを重視しましょう。 グラフィックデザインの場合は、最終的にフォントをアウトライン化して、ベクトルデータとして扱うので好きなフォントを自由に利用する事ができますが、Webサイトのデザインで利用する場合は、フォントをデータのまま扱うので、ユーザーのOS環境によって表示されるフォントに違いが生じる場合がありますし、フォントのデータが重いとページの表示速度に影響が出たりするので、フォントの選定には注意が必要になります。 特にフォントにこだわりが無い場合 OS標準フォントをfont-familyで指定する方法を推奨 ユーザーのOS環境よって、標準フォントが異なります。CSSでfont-familyに表示させたいフォントをまとめて記載します。 OS別、フォント一覧（比較的使用されているフォントのみ） デザインの段階で、以下のフォントを使用しておくと良いでしょう。 ゴシック体 Windows10 ＭＳ ゴシック / ＭＳ Ｐゴシック / メイリオ / Meiryo UI / 游ゴシック Yu Gothic UI / ヒラギノ角ゴシック / ヒラギノ角ゴ ProN ヒラギノ角ゴ Pro / ヒラギノ丸ゴ ProN W4 / ヒラギノ丸ゴ Pro W4 macOS メイリオ / Meiryo UI / 游ゴシック体 / ヒラギノ角ゴシック / ヒラギノ角ゴ ProN ヒラギノ角ゴ Pro / ヒラギノ丸ゴ ProN W4 / ヒラギノ丸ゴ Pro W4 / Osaka iOS ヒラギノ角ゴシック / ヒラギノ角ゴ ProN / ヒラギノ角ゴ Pro ヒラギノ丸ゴ ProN W4 / ヒラギノ丸ゴ Pro W4 明朝体 Windows10ＭＳ 明朝 / ＭＳ Ｐ明朝 / 游明朝 macOS 游明朝体 / ヒラギノ明朝 ProN / ヒラギノ明朝 Pro iOS ヒラギノ明朝 ProN / ヒラギノ明朝 Pro 欧文フォント Windows10Arial / Arial Black / Segoe UI / Verdana / Times New Roman macOS Arial / Arial Black / Helvetica / Helvetica NeueVerdana / Times New Roman iOS Arial / Helvetica / Helvetica Neue / Verdana / Times New Roman フォントにこだわりがある場合 Webフォントから好みのフォントを選んで読み込むか、フォントデータをサーバーにアップして表示させる方法があります。 いずれもフォントデータを読み込むのでデータが重たい（日本語フォントは文字数が多いので重たい）と表示速度に影響があります。ですが、絶対にダメという訳ではありません。Webフォントを利用すると、デバイスに関係なくどんな環境でも、同じフォントが表示されるのでデザインを損ねることはありません。 まとめると SEOや表示速度を気にするなら→OS標準フォントを、デザインを損ねず同じフォントを表示するならWebフォントを利用します。 Webフォントを使うなら！サブセット化してページ表示を高速化する 見出しのみかっこよくしたいなどあると思います。そんな時は、表示させたい文字のみを読み込む事で、表示速度を改善する方法があります。 詳しくは、こちらの記事にまとめています。 まとめ 今回は、フォントについてまとめてみました。基本のフォントは、OS標準フォントを利用し、見出しのみサブセット化して読み込んだWebフォントを使うっていう感じが良いのかなと思います。 自社でWebデザインをすると、コーディングに適さないデザインだったりSEOやフォント設定など、色々と修正が出てしまう事が多いです。そんな時は、デザインからコーディングまでファストコーディング（FASTCODING）にお任せ下さい！ --- - Published: 2021-03-22 - Modified: 2025-07-15 - URL: https://fastcoding.jp/blog/all/info/202103-animation-site/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: Webデザイン, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年に国内でリニューアルされたWebサイトの中でアニメーションを取り入れてるサイトを主に、まとめてみました。 商品やサービスのイメージを的確にユーザーに伝えるには、言葉や画像では、なかなか伝わり難い事が多々あります。アニメーションを取り入れる事で、商品のストーリーやイメージを解り易く目に見える形にすることができ、商品理解を促進することができます。 目次 国内のアニメーションサイト SmartHRの企業サイト North Graphic LIONS GOOD NEWS 2020 LIGHTREVO ELITE レシート買取アプリONE SEED RECRUITING SITE スノーサンド POLA2029年ビジョン 海外のアニメーションサイト Design Embraced Animus SmartHRの企業サイト まとめ 国内のアニメーションサイト SmartHRの企業サイト とても凝ったアニメーションをメインビジュアルに取り入れています。結構な尺があるのですが、複雑で綺麗なアニメーションに見とれて最後までみてしまいました。 https://smarthr. co. jp/ North Graphic さすが、Webデザイン会社さんです。シンプルなアニメーションを複数合わせているので、凝った感じに見えます。 デザインからシステムまで総合的にサービスを提供されているイメージができます。 https://www. northgraphic. net/ LIONS GOOD NEWS 2020 メインビジュアルが表示されるまでに凝ったアニメーションを取り入れているサイトが増えました。こちらもかなり見応えのあるアニメーションです。 スクロールするとクルクル回る仕組みは、新しいですね。ワクワクする作りです。 https://cannesprlions. com/lionsnews/ LIGHTREVO ELITE 商品で一番アピールしたいスパイクの裏側をアニメーションさせています。軽量で柔軟に動けるイメージが湧きます。 https://www. mizuno. jp/baseball/products/lightrevo. aspx レシート買取アプリONE レシート買取アプリがいかに使い易いかをアニメーションで説明しているので誰でも簡単に理解できます。 https://wow. one/app/ ※現在はページが表示されません（2024年8月26日 更新） SEED RECRUITING SITE 6タイプくらい背景写真があります。リロードすると、違う背景が楽しめます！！スクロールすると固定画面でアニメーションが進んで行きます。綺麗なサイトですね。シンプルだけど凝っている感じが個人的に好きです。 https://www. seed-recruit. com/ スノーサンド 色々なアニメーションが上品に使用してあります。背景を切り替えたり、画面を固定させてみたり、ちょっとした動きに細部までのこだわりを感じます。 https://www. snowsand. jp/ ※現在はページが表示されません（2024年8月26日 更新） POLA2029年ビジョン 手のイラストがスクロールに合わせてどんどん変形していきます。終わったと思ったら、最初からアニメーションが始まり、ずーとループしていきます。 イラストが弾むような弾力のあるスライムのような動きのアニメーションです。 https://www. pola. co. jp/wecaremore/ ※現在はページが表示されません（2025年7月14日 更新） 海外のアニメーションサイト Design Embraced とにかく、クルクル回る。個性的なので使いどころがムズカそうですが、つい遊んでしまいます。 https://www. designembraced. com/ Animus 動画とアニメーションを上部に合わせています。筆書きを抜いたようなアニメーションがいいですね。 https://www. animusstudios. com/ Sgrppa 独特の世界観です。動きは単純な気もするのですが。。。 https://www. sgrappa. com/ Inside-the-Mind-of-Samuel-Day スクロールしていくとアニメーションが進んでいきます。配色がいかにも海外って感じがします。 https://www. samuelday. de/ まとめ 国内のアニメーションサイトは、やはり商品やサービスにフォーカスする為に、工夫されているのでカッコイイやオシャレよりも、分かり易や品、操作性が高い感じがしました。海外のサイトは、インパクトがあって操作性に遊びがあり楽しい感じでした。 2021年も、アニメーションは多くのサイトで取り入れていくと思うので、定期的にチェックしておきたいですね。 --- - Published: 2021-03-08 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/object-fit/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: CSS, Webデザイン, Web業界の動向 こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、簡単に画像をトリミングできるCSSをご紹介します。サイズのバラバラな画像を並べる場合に、わざわざ画像をトリミングする必要がないのでとても便利です。 目次 object-fit設定 object-fit プロパティーで使える値 1. サイズを指定して画像をトリミング 2. サイズを指定してトリミングせず余白を表示 3. 高さを固定し、横幅は画面いっぱいに表示 4. 画像の表示する位置を指定する object-fitのブラウザ対応状況 まとめ object-fit設定 「object-fit」は、CSSで画像をトリミングすることができるプロパティです。画像サイズがバラバラな場合や、表示したいサイズじゃない場合でも、画像をトリミングして表示することができます。下記のようにimgタグにクラス名を付けてCSSを記述します。imgタグもしくは、その親要素に対してサイズを指定すると、表示したいサイズで画像を表示することができ、余白をつけたり、画像の位置を指定したりできます。 object-fit プロパティーで使える値 fill ボックスのサイズに合わせて画像が縦横方向に拡大・縮小されます。縦横比が維持されないので、サイズにより画像が伸びたり潰れたりします。 cover 縦横比を保持して、ボックスが画像で埋まるようにリサイズされます。縦横のうち小さい方を基準にしてリサイズされ、ボックスからはみ出した部分はトリミングされます。 contain 画像の縦横比を維持して、ボックスの中に画像のすべてが収まるようにリサイズされます。 none リサイズせず、そのままのサイズで表示される scale-down 「contain」と「none」のうち、サイズが小さい方に合わせて表示される 1. サイズを指定して画像をトリミング 画像に対して 画像の高さと幅を指定し、object-fit: cover; を追加します。 指定は以下。 See the Pen object-fit-cover by 野田 英里 (@fikgpnyd) on CodePen. 2. サイズを指定してトリミングせず余白を表示 object-fit: contain;を指定して、画像をトリミングせず、余白を表示してボックスの中央に画像を表示します。分かり易いように、画像の背景を白にしています。 See the Pen object-fit-contain by 野田 英里 (@fikgpnyd) on CodePen. 3. 高さを固定し、横幅は画面いっぱいに表示 縦の高さのみを固定して、横幅は画面や親要素いっぱいに表示させたい場合も object-fit: cover; を指定します。 See the Pen object-fit-cover2 by 野田 英里 (@fikgpnyd) on CodePen. 4. 画像の表示する位置を指定する object-fit: cover; で画像の縦横比を保持したまま画像を中央で表示しましたが、画像を中央以外の位置でトリミングしたい時もあるかと思います。そんな時は、 object-position プロパティーを指定します。 See the Pen object-fit-position by 野田 英里 (@fikgpnyd) on CodePen. object-fitのブラウザ対応状況 残念ながら object-fit、object-position プロパティーはIEとEdgeに未対応です。 object-fit-imagesを利用して対応させる 「Github」からobject-fit-imagesの「dist」フォルダー内にある「ofi. min. js」ファイルをダウンロードします。 ① ファイルを保存したらHTMLで読み込みます ② imgタグにクラス名（任意）を付けて、object-fit の記述 IEに対応させるための特別スタイルとして font-family: 'object-fit: contain;' を指定します。 ③ スクリプトを呼び出す 最後にHTMLの の前にスクリプトを呼び出すコードを追加すれば完了です。 ('クラス名')で、任意のクラスが与えられている画像にのみ対応させます。 まとめ CSSを一行追加しただけの簡単な指定なので使いやすいですね。ユーザーがアップロードた画像を表示しなければならない場合にも重宝すると思います。以前紹介したブロックを綺麗に並べて表示させる「CSS Flexbox」と合わせて利用すると簡単に整列されたサイトが完成しそうです。 --- - Published: 2021-02-25 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/lazyload/ - カテゴリー: React, Vue.js, Web業界の動向・情報, SEO, 便利サービス - タグ: CSS, JavaScript, SEO, Web業界の動向, ページスピード, レイシーロード こんにちは。FASTCODINGデザイナーの七転び八重子です。 大量の画像を表示するWebページは、表示速度が遅くなりがちです。ページ速度が遅くなると、ブラウザが重くなるので、画面操作に支障が出て、UIが低下してしまいます。対処方法として、CSSスプライトやExpiresヘッダーを利用する方法がありますが、今回は「Lazy Load（レイジーロード）」を利用して、画像を遅延ロードさせる事で、ページスピードを改善する方法をご紹介します。 目次 画像を遅延ロードさせる理由 ① ネイティブLazyloadの設定 ② Lazyload未対応ブラウザでは、JavaScriptライブラリを設定。 scriptタグの配置 imgタグに"lazyload"を追加 ③ Lazyload対応ブラウザの場合、JavaScriptを読み込ませない。 lazyloadのサンプル まとめ 画像を遅延ロードさせる理由 ページにアクセスした瞬間からブラウザは、HTMLに含まれる全ての画像ファイルを読み込みます。全て読み込むということは、ビューポート内に存在しない画像（ユーザーがほとんど閲覧しない下部の画像）でも、読み込んでしまうので、当然ブラウザは重くなります。 そこで、ブラウザのビューポート内にある画像のみを読み込みし、それ以外にある画像はスクロール位置に合わせてロードさせる事で、ページスピードを高速化することができます。 遅延ロードの方法は２つ 遅延ロードさせる方法は、ブラウザのネイティブLazyload設定と、JavaScriptライブラリの使用の２つがあります。 2021年2月現在、72%のブラウザがネイティブで遅延ロード（loading属性）をサポートしています。 loading属性のサポート状況 現在のサポート状況を踏まえて、以下のポイントで実装してみます。 ネイティブの遅延読み込みを設定。 Lazyload未対応ブラウザでは、JavaScriptライブラリを設定。 Lazyload対応ブラウザの場合、JavaScriptを読み込ませない。 ※基本的に上記で良いのですが、レスポンシブコーディングで、このブラウザのネイティブlazyload機能を使用する場合、画像周りのスタイル設定（CSS設定）を追加する必要があります。（デザインに寄ります） ① ネイティブの遅延読み込みを設定。 loading="lazy"を書いておくと、ブラウザによって適切なタイミングでロードされます。 loading属性を利用する事で、ブラウザはビューポート外の画像やiframeをスクロール位置に合わせて読み込みするようになります。 loading属性は3つの値をサポートします。 lazy：遅延ロードに適した値です。 eager：遅延ロードには適してません、すぐにロードする値です。 auto：遅延ロードするかどうかをブラウザに委ねます。 ※loading属性を定義しない場合は、loading=autoを定義した場合と同じ。 ② Lazyload未対応ブラウザでは、JavaScriptライブラリを設定。 合わせて、Lazyload未対応ブラウザの場合には、JavaScriptライブラリ「lazysizes」を適応させるように設定していきます。jQueryやVue. jsなどは必要ありません。ビューで検知した要素にClassを設定することで、背景画像や::befor,::afterにもLazyLoadを行う事が可能です。 scriptタグの配置 ダウンロード：aFarkas/lazysizes imgタグに"lazyload"を追加 を追加 src属性ではなく、data-src属性で画像パスを指定する srcを空にしてはいけないので、1x1pxの透明な画像のプレースホルダーを使用 基本の設定 レスポンシブでpictureタグを使う場合 ・「srcset」を「data-srcset」に変更します｡ ③ Lazyload対応ブラウザの場合、JavaScriptを読み込ませない。 JavaScriptで、ユーザーが使用しているブラウザがネイティブLazyloadをサポートしているかどうかを検出します。 JavaScriptの最終コード lazyloadのサンプル See the Pen lazyload by 野田 英里 (@fikgpnyd) on CodePen. まとめ 画像の遅延ロードをまとめてみました。スマホなどのサイトは、縦に長くなるのでこの方法はページスピード対策におすすめしますが、レスポンシブデザインの場合に、ネイティブlazyload機能を使用する場合は、画像周りのスタイル設定（CSS設定）を追加する必要があります。（デザインに寄ります） どちらにしても、Webサイトを制作する場合は、運用レベルまでしっかりと意識して、取り入れると良いと思います。 ページスピード対策でお困りですか？ ファストコーディングではSEOに強いHTMLコーディングを設立当初から実施しており、PageSpeed Insights対策の経験豊富なディレクターが多数在籍しております。新規サイトはもちろん、既存サイトのSEO対策にも必須の「 PageSpeed Insights対策 」は是非弊社にご相談ください。 --- - Published: 2021-02-22 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-6/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: CSS, JavaScript, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第6回は、「アニメーションを最適化してパフォーマンスを高める」です。これまでの特集で、CSS、JavaScriptアニメーションの基本からおすすめライブラリをまとめましたが、アニメーションをWebサイトに取り入れる際に、一番大事なのは、パフォーマンスを維持する事です。 例えば、アニメーションが1秒間に60フレーム（60fps）未満の速さでレンダリングされると、滑らかな動きにならず、UXは低下すると言われています。せっかくこだわったアニメーション！しっかり最適化しましょう。 目次 CSSアニメーションを最適化する アニメーションの開始をほんの少し遅らせる アニメーションの同時再生を避ける スローモーションでアニメーションを確認する SVGを利用する JavaScriptアニメーションを最適化する イベントとアニメーション分離する Web Workersを使って別スレッドで実行させる jQueryを使用しない 画像は事前に読み込んでおく アニメーションスピードテスト まとめ CSSアニメーションを最適化する アニメーションの開始をほんの少し遅らせる ブラウザの初期表示の際、ブラウザはサイトの処理に追われます。最初のイベント開始を少し遅らせる事で、全体的なパフォーマンスの向上に繋がります。 アニメーションの同時再生を避ける １つのアニメーションならスムーズに動いていたとしても、同時に2つ以上のアニメーションが実行されると動作が遅くなる可能性が高いです。全てのアニメーションを一度に実行しないように、開始のタイミングを調整しましょう。 スローモーションでアニメーションを確認する スローモーションで再生してもアニメーションがきれいな場合は、通常再生でもカクカク動く事はありません。60fps（1秒間に60フレーム）を意識してアニメーションをスムーズに動かしましょう。 SVGを利用する SVGは、解像度を下げずに拡大縮小できるため、アニメーションに向いています。 Adobe IllustratorでSVGを作成し、CSSを適用して外観を変更することができます。 JavaScriptアニメーションを最適化する イベントとアクションの分量を考える JavaScript、CSSアニメーションのどちらにも言えますが、「イベント」と「アクション」を考えて設計すると、きれいで速いコードになります。 ・イベント＝どのタイミングで ・アクション＝どんなアニメーション つまり、沢山発生するイベント×表示の時間が長いアニメーションは、処理速度が遅くなります。解決する方法として、 ・沢山発生するイベントだけど簡単なアニメーションにする ・最初しか発生しないイベントで長いアニメーションにする そしてアニメーションどうしをできるだけ同じタイミングで実行させないようにすると、パフォーマンス維持できます。 Web Workersを使って別スレッドで実行させる Webページに膨大な量のJavaScriptを追加すると読み込みに大きな負荷がかかります。Web Workersを使えば、JavaScriptアニメーションを別のスレッドで実行することができます。 Web Worker(ウェブ・ワーカー)とは？ 全てのタスクがシングルスレッドで処理されるJavaScriptの持つ問題を解消するための仕様である。JavaScriptで長時間かかる処理を実行すると、入力や画面の描画処理がブロックされて、アプリケーションが操作不能となってしまうため、処理を分割して何度もSetTimeout等で呼び出すなどの工夫が必要であった。しかし、Workerを使用することによって、一部の操作について並行処理（バックグラウンド処理）が可能となる。 引用：フリー百科事典『ウィキペディア（Wikipedia）』 jQueryをできれば使用しない Queryの依存なしを推奨する流れが3年ぐらい前からありますが、理由は、Queryと同じ機能をもち、はるかに高速でサポートも多いライブラリあること、バージョン管理が必要などが理由のようです。 ですが、jQueryがダメと言う訳ではありません。 実装が簡単なのでコスト面は安くすみます。用途と使い方を間違えなければ、利用した方が良い場合もあります。念の為以下の２点を注意して利用しましょう。 jQueryを利用する場合の注意点 ・ページの読み込み時点で実行するものは使わない（ユーザークリックやスクロール量で開始するアニメーションに利用） ・常に最新版を利用する 画像は事前に読み込んでおく 画像読み込みがあるアニメーションは、事前に画像を読み込んでおいて表示するような処理にすることで、読み込み時の速度（ネットワークの速度）に依存しなくなります。アニメーション中にネットワーク速度が遅くなると、画面が固まり易くなります。 アニメーションスピードテスト こちらの記事でも紹介したライブラリの速度をテストできる便利サービスです。このテストはあくまでドットを動かすというアニメーションに限ったものなので、アニメーションの種類によっては変わってくると思います。参考までに利用してみて下さい。 JavaScript Animation Speed Test まとめ 今回は、アニメーションの最適化をまとめました。 基本的には、読み込み開始タイミング調整、同時再生注意、イベント回数とアニメションの長さを考慮してアニメーションを組むと良いです。 どのライブラリを利用した方が良いのか、0からコードを書く方が良いのか、など選択肢は様々ありますが、できるだけパフォーマンスの維持を考慮してアニメーション制作をしましょう。 Webサイトのパフォーマンスが落ちないように最適なアニメーションの制作なら、ファストコーディングまで。ファストコーディングは、アニメーション制作を専門に行うチームが、全ての環境で高いパフォーマンスを維持したアニメーション制作を提供しています。お困りの際は、ぜひご相談下さい。 --- - Published: 2021-02-18 - Modified: 2025-03-13 - URL: https://fastcoding.jp/blog/all/info/animation-5/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, 便利サービス - タグ: JavaScript, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第5回は、「JavaScriptアニメーションライブラリ2021年2月まとめ」です。前回、JavaScriptアニメーションについて、基本をまとめましたので、今回はJavaScriptおすすめライブラリのまとめです。 目次 汎用系JavaScriptアニメーションライブラリ 標準仕様！Web Animations API Anime. js GreenSock GSAP（旧Tweenmax） Lottie CreateJS 専門系JavaScriptアニメーションライブラリ Swiper：画像スライダー Bounce. js：バウンドするようなアニメーション AOS：スクロール量でスライドイン Animsition：ページ遷移の前後にアニメーション Vivus：SVGアニメーション まとめ 今回、ご紹介するのはQueryの依存なしのライブラリに限定し、ダウンロード数順にご紹介します。 Queryの依存なしを推奨する理由は、Queryと同じ機能をもち、はるかに高速でサポートも多いライブラリがありますし、バージョン管理が必要など、3年前くらいから脱Queryの流れがあります。 ですが、jQueryがダメと言う訳ではありません。 用途と使い方を間違えなければ、利用した方が便利な場合もあります。以下の２点を注意して利用しましょう。 jQueryを利用する場合の注意点 ・ページの読み込み時点で実行するものは使わない（ユーザークリックやスクロール量で開始するアニメーションに利用） ・常に最新版を利用する 汎用系JavaScriptアニメーションライブラリ 標準仕様！Web Animations API 「Web Animations API」は、W3C Working Draftで定義されているアニメーションのための標準仕様です。 ChromeやFirefox、Safariで対応、今後の展望が期待できる技術なので勉強する価値があります。ブラウザ対応状況によって、現状ではPolyfillを利用することになると思います。 W3C Working Draft：Web Animations ダウンロード：web-animations/web-animations-js Anime. js 「Anime. js」は、軽く、高速で比較的かんたんに実装できるJavaScriptライブラリです。 GSAPやTweenJSに比べると同時実行性能が劣るため、多くのオブジェクトを一度に動かすのには不向きです。HTMLページのユーザーのアクションに対するフィードバックやステータスの変化などに利用するのが妥当です。 公式サイト：Anime. js ダウンロード：juliangarnier/anime GreenSock GSAP（旧Tweenmax） 「GreenSock GSAP」は、同時実行性が高く、多くのオブジェクトを滑らかに動かす事ができるJavaScriptライブラリです。 ただし、ライセンスがMITではありません。基本は無料で利用できますが、サイト上で何らかの有料課金が存在する場合は優良ライセンスが必要になります。 公式サイト：GreenSock GSAP ダウンロード：greensock/GSAP Lottie 「Lottie」は、Airbnbが開発した、マルチプラットフォームに対応した（iOS、Android、Web、React Native）アニメーションライブラリです。SVGファイルで解像度を気にせずに拡大縮小が可能で、動画ファイルに比べてファイルサイズが軽量です。 公式サイト：Lottie ダウンロード：airbnb/lottie-web CreateJS 「CreateJS」は、大きな４つのライブラリからなり、HTML5 Canvasでの制作を扱うためのJavaScriptライブラリです。グラフィック描写に長けており、ほとんどのブラウザにも対応しています。 公式サイト：CreateJS ダウンロード：CreateJS 専門系JavaScriptアニメーションライブラリ Swiper：画像スライダー 「Swiper」は、モバイルのスワイプ動作におけるカルーセルの切り替わりアニメーションを実装できるJavaScriptライブラリです。 demoで動きを確認できます。 公式サイト：Swiper ダウンロード：nolimits4web/swiper Bounce. js：バウンドするようなアニメーション 「Bounce. js」は、バウンドするようなアニメーションを簡単に作成できるJavaScriptライブラリです。demoを見るとイメージ湧きやすいです。 ※こちらの公式サイトはすでに閉鎖されているようですので、ご注意ください。（2025年3月現在） 公式サイト：Bounce. js ダウンロード：tictail/bounce. js AOS：スクロール量でスライドイン 「AOS」は、スクロールに応じてスライドインなどのアニメーションを簡単に実装できるJavaScriptライブラリです。 公式サイトで動きの確認ができます。 公式サイト：AOS ダウンロード：michalsnik/aos Animsition：ページ遷移の前後にアニメーション 「ANIMSITION」は、ページ遷移の前後にアニメーションを入れることができるJavaScriptライブラリです。滑らかなページの動きが、気持ちいいです。サイトに取り入れたいなと思います。。 公式サイト：ANIMSITION ダウンロード：blivesta/animsition Vivus：SVGアニメーション 「Vivus」は、SVGをアニメーションさせるJavaScriptライブラリです。 公式サイト：Vivus ダウンロード：maxwellito/vivus まとめ 今回は、JavaScriptライブラリまとめましたが、それぞれ一長一短と行ったところ、どんな場面でどのライブラリを選択するか、目的や環境に合わせて選択する必要があります。 Webサイトのパフォーマンスが落ちないように最適なアニメーションの制作なら、ファストコーディングまで。ファストコーディングは、アニメーション制作を専門に行うチームが、全ての環境で高いパフォーマンスを維持したアニメーション制作を提供しています。お困りの際は、ぜひご相談下さい。 --- - Published: 2021-02-15 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-4/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, 便利サービス - タグ: CSSアニメーション, JavaScript, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第4回は、「JavaScriptアニメーション基本・作り方まとめ」です。CSSアニメーションについて、基本からおすすめライブラリをご紹介しましたので、今回はJavaScriptです。一見すると、難しいように思いますが、まずは基本を簡単におさらいしてみようと思います。 目次 JavaScriptでアニメーションを作る！ function(関数)の書き方 ステップ① CSSでアニメーション始めの状態を指定する ステップ② CSSでアニメーション終わりの状態を追加する ステップ③ JavaScriptでボタンをクリックしたら、要素のクラス名を変更する指定をする 使えそうなサンプル集 下からスライドインする ニュースティッカー ぬるっと開くアニメーション付きのアコーディオン まとめ JavaScriptでアニメーションを作る！ CSSアニメーションで様々な動きを付ける事ができましたが、JavaScriptを利用すると、アニメーションが起きるタイミングを細かく指定できます。 今回は、ボタンをクリックしたら、要素が形とカラーを変えながら動くというアニメーションを作ってみようと思います。 ステップ① CSSでアニメーション始めの状態を指定する ステップ② CSSでアニメーション終わりの状態を追加する ステップ③ JavaScriptでボタンをクリックしたら、要素のクラス名を変更する指定をする ステップ③のアニメーションの制御には、function(関数)を利用します。 function(関数)の書き方 関数とは、複数の処理をひとまとまりにしたものです。メソッドと呼ばれます。 例えば、メッセージを表示させたり、ポップアップを表示させたり、同じような処理を何度も繰り返す時は、処理を予め定義しておいて、必要なタイミングで呼び出すような形にすれば、コード全体の構造化と効率化を向上させることが可能です。 function（関数）の定義 function（関数）の定義は、functionに「関数名」と「引数」の指定、「処理内容の記述」から成り立ちます。パラメータを定義しない場合でも（ ）は必須です。 function（関数）の呼び出し 関数の呼び出しは、関数名を直接記述するだけです。 See the Pen function1 by 野田 英里 (@fikgpnyd) on CodePen. それでは、実際に簡単なアニメーションを作ってみましょう。 ステップ① CSSでアニメーション始めの状態を指定する HTMLとCSSで状態を指定。アニメーションのキッカケになるボタンも合わせて作ります。 See the Pen JS smaple1 by 野田 英里 (@fikgpnyd) on CodePen. ステップ② CSSでアニメーション終わりの状態を追加する 動きをつける要素にclassを追加します。 See the Pen JS sample2 by 野田 英里 (@fikgpnyd) on CodePen. ステップ③ JavaScriptでボタンをクリックしたら、要素のクラス名を変更する指定をする JavaScriptで変数targetに定義した動きをつけたい要素（anime_test）にclassが付いていなかったら、activeというclassが付くように指定します。 HTMLのボタンのソースに、onclickという属性を追加します。 See the Pen JS sample3 by 野田 英里 (@fikgpnyd) on CodePen. 使えそうなサンプル集 下からスライドインする ニュースティッカー See the Pen JS sample4 by 野田 英里 (@fikgpnyd) on CodePen. ぬるっと開くアニメーション付きのアコーディオン See the Pen JS sample5 by 野田 英里 (@fikgpnyd) on CodePen. まとめ 今回は、JavaScriptをまとめてみました。 アニメーション利用する上で、よくコピペで実装など気軽に利用できるモノもありますが、Webサイトのパフォーマンスが落ちないように気をつける必要があります。ファストコーディングは、アニメーション制作を専門に行うチームが、全ての環境で高いパフォーマンスを維持したアニメーション制作を提供しています。お困りの際は、ぜひご相談下さい。 --- - Published: 2021-02-10 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-3/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, 便利サービス - タグ: CSS, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第３回は、「CSSアニメーションライブラリまとめ」です。任意の要素にクラスを付与するだけでアニメーションを実装できる便利なライブラリをまとめてみました。もちろん、動的にアニメーションの再生を制御したい場合は、JavaScriptによる処理が必要になります。 目次 CSSでアニメーションライブラリ 文字エフェクトは、「Animate. css」 ホバーアニメーションは、「HoverCSS」 画像ホバーアニメーションは、「imagehover. css」 震える系アニメーションは、「CSShake」 in/out系アニメーションは、「Magic」 風変わりなアニメーションは、「Tuesday」 ハンバーガーメニューは、「Hamburgers」 普通のアニメーションに飽きたら、「cssanimation. io」 まとめ CSSでアニメーションライブラリ 様々な種類のCSSフレームワークやライブラリが提供されていますが、今回は、その中でもGitHubリポジトリのスター数が多いライブラリをご紹介したいと思います。多くスター数があるからと言って、必ずしも良いとは限りませんが、一つの指標として「長い物には巻かれろ」使ってみるのはありですね。 文字エフェクトは、「Animate. css」 公式サイトで動きを確認してみてください。 公式サイト：Animate. css ダウンロード：animate. css/ at master · animate-css/animate. css ホバーアニメーションは、「HoverCSS」 主にボタンなどホバーさせた時のアニメーションを簡単に実装できます。 公式サイト：Hover. css v2 画像ホバーアニメーションは、「imagehover. css」 主に画像をホバーさせた時のアニメーションに特化しています。 公式サイト：Pure CSS Image Hover Effect Library ダウンロード：ciar4n/imagehover. css 震える系アニメーションは、「CSShake」 震える系アニメーション、公式サイトで動きを確認できます。とにかく震えるwww 公式サイト：CSShake ダウンロード：elrumordelaluz/csshake in/out系アニメーションは、「Magic」 ちょっと変わったアニメーションです。使いどころが難しそうですね。。 公式サイト：MAGIC EFFECTS ダウンロード：miniMAC/magic 風変わりなアニメーションは、「Tuesday」 A quirky CSS Animation Library. と言うくらいなんで、風変わりなんでしょう。。 公式サイト：It's Tuesday. ダウンロード：shakrmedia/tuesday ハンバーガーメニューは、「Hamburgers」 ハンバーガーメニューをタップした時のアニメーションです。 公式サイト：Tasty CSS-animated hamburgers ダウンロード：jonsuh/hamburgers 普通のアニメーションに飽きたら、「cssanimation. io」 見てるだけでも楽しい動きですね。使えるアニメーションが多いと思います。 公式サイト：cssanimation ダウンロード：yesiamrocks/cssanimation. io まとめ CSSアニメーションのおすすめライブラリでした。ここに、再生や逆再生などの細かな動きを付ける場合や複雑なアニメーションの場合は、JavaScriptアニメーションを利用します。 アニメーション利用する上で、よくコピペで実装など気軽に利用できるモノもありますが、Webサイトのパフォーマンスが落ちないように気をつける必要があります。ファストコーディングは、アニメーション制作を専門に行うチームが、全ての環境で高いパフォーマンスを維持したアニメーション制作を提供しています。お困りの際は、ぜひご相談下さい。 --- - Published: 2021-02-08 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-2/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, 便利サービス - タグ: CSS, Web業界の動向, アニメーション こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第二回は、「CSSアニメーションの基本・作り方まとめ」です。CSSアニメーションで実際に、利用場面が多いボタンエフェクトや要素をスライドインさせる動きを作ってみようと思います。 アニメーション特集１「アニメーションはCSSとJSのどちらを使うべきなのか？」はこちら。 目次 CSSでアニメーションを作る方法は2つ 簡単に実装できる transition 細かく設定できる animation transitionでクリック時にボタンに動きを付ける animationでボタンに動きを付ける animationで要素をふわっと下からスライドインさせる まとめ CSSでアニメーションを作る方法は2つ CSSのみでアニメーションを作る方法は、【 transition 】と【 animation 】の2つです。 transition 単純な動きのアニメーションに利用する ・ループできない ・自動再生ができない（hover等のきっかけが必要） ・再生後にプロパティが元に戻る animation 複雑な動きのアニメーションに利用する ・ループできる ・自動再生ができる ・再生後にプロパティの継続ができる ・細かな指定ができる 簡単に実装できる transition ボタンのホバーなどに使用する場合は、transitionを利用します。 利用できるプロパティ transition-property ： 対象のプロパティ transition-duration ： かかる時間 transition-timing-function ： 速度 transition-delay ： 何秒後に開始するか CSSテンプレート ベンダープレフィックス（-webkit-、-moz-）も忘れず記述しましょう。 細かく設定できる animation animationの場合は、transitionよりもフローが多く、keyflameで動きの内容を決めて、animationで動作させます。 keyflameで動きを決める どんな動きにするのかをkeyflameで指定します。 動きの名前は、任意です。このkeyflame自体の名前で、animationで動作をさせる時に使います。 進行度(%)は、そのアニメーションの進行を％で表示します。0%は始まっていない状態、100%で完了した状態になります。複数指定することができ、10%、20%と刻んでいけば、かなり細かい設定が可能です。 利用できるプロパティ animation-name ： キーフレームの名前 animation-duration ： かかる時間 animation-timing-function ： 速度 animation-delay ： 何秒後に開始するか animation-iteration-count ： 回数・ループ指定 animation-direction ： 再生する方向 animation-fill-mode ： アニメーション前後のプロパティの状態 animation-play-state ： 一時停止・再生の指定 @keyframes ： アニメーションの変化の指定 CSSテンプレート transitionでクリック時にボタンに動きを付ける ホバーでアニメーションが１回再生されます。 See the Pen CSS transition list by 野田 英里 (@fikgpnyd) on CodePen. animationでボタンに動きを付ける 自動再生でループ、または１回再生などが設定できます。 See the Pen CCS animation list by 野田 英里 (@fikgpnyd) on CodePen. animationで要素をふわっと下からスライドインさせる ファーストビューの要素をスライドインアニメーションさせています。 Webサイトでよく見られる手法ですね。 See the Pen CCS animation slideIn１ by 野田 英里 (@fikgpnyd) on CodePen. ※もう一度、見たい場合は、右下の「Rerun」をクリックして下さい。 まとめ CSSアニメーション、簡単に実装できましたね。ここに、再生や逆再生などの細かな動きを付ける場合や複雑なアニメーションの場合は、JavaScriptアニメーションを利用します。 アニメーション利用する上で、よくコピペで実装など気軽に利用できるモノもありますが、Webサイトのパフォーマンスが落ちないように気をつける必要があります。ファストコーディングは、アニメーション制作を専門に行うチームが、全ての環境で高いパフォーマンスを維持したアニメーション制作を提供しています。お困りの際は、ぜひご相談下さい。 --- - Published: 2021-02-01 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/animation-1/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, 便利サービス - タグ: JavaScript, Web業界の動向, アニメーション, ディレクション こんにちは。FASTCODINGデザイナーの七転び八重子です。 WebサイトのUI/UXに欠かせないアニメーション。ボタンをふわふわ動かしたり、要素をスライドインさせたり等、アニメーションを取り入れる事でユーザーを誘導することができ、コンバージョンにも大きく影響します。ですが、使い方を間違えると、逆にUXは低下することもあります。今回はそんな、アニメーションをシリーズでまとめて見ようと思います。第一回は、「アニメーションはCSSとJSのどちらを使うべきなのか？」です。 目次 アニメーションを正しく理解する その１ 滑らかなアニメーション その2 アニメーションにおけるブラウザ処理の負担 CSSアニメーションとJavaScriptアニメーションの比較 CSSアニメーション JavaScriptアニメーション 結論 まとめ Webアニメーションを正しく理解する Webサイトで見られる、ボタンをふわふわ動かしたり、グラフを描画したり、要素をスライドインさせたりといったアニメーションは、ユーザーを目的のページに誘導するUI/UXに欠かせない手法ですが、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合は、パフォーマンスを維持する必要があります。 その１ 滑らかなアニメーション アニメーションはテレビと同じ様に静止画を高速で切り替えることで動いているように見せています。 1秒ごとの画面(フレーム)の切り替わる回数をFPS（Frame Per Secondの略）といい、ブラウザでサイトを見た際には最高で60fpsとなります。 １秒間に６０フレームを更新しているわけですが、アニメーションに重い処理があると、更新のタイミングまでに処理が間に合わず、フレームレートを下げてしまいます。アニメーションがカクカクする場合は、処理に負担がかかっているので見直す必要があります。 その2 アニメーションにおけるブラウザ処理の負担 ブラウザではParse(パース) > Style(スタイル) > Layout(レイアウト) > Paint(ペイント) > Composite(コンポジット)の流れで画面にどの様に表示すればよいのかを計算しています。ブラウザの初期表示の際には、この処理フローを最初から順に行いますが、表示内容に更新があった場合は必要な工程のみを処理し、再計算が不要な工程は省略されます。つまり、どの変更がどのフローに関連しているのかを知っておくと、ブラウザの負担を大きく減らすことができます。 ！ブラウザの処理フローにおいて、どこに負担がかかるのかを知っておく必要がある！ Javascriptである要素の高さを変更した場合 Layoutに関わる変更が発生した場合は、Styleからすべての工程を再計算する事になります。このため多くの計算を必要とし、パフォーマンスが低下する原因となります。また、高さを変更した要素に子要素がある場合には、子要素の再計算も行う必要があります。更に、Layoutの処理はメインスレッド上で動いているので、他のJavascriptの処理に影響される事になります。 ある要素の色を変更した場合 ある要素の色を変更した場合、Layout(位置や高さ)は関係ないのでスキップされて、Paint、Compositeが呼ばれます。Layoutの処理がない分、処理時間は短くなりますが、メインスレッドが使用されるので、処理が重くなる場合もあります。 CSSアニメーションとJavaScriptアニメーションの比較 Webサイト上でアニメーションを実行するには、主にCSSの使用もしくはJavaScriptの使用の２つの方法があります。どちらの方法を選択するのかは、実現しようとするアニメーションの種類によって変わってきます。 CSSアニメーション CSSアニメーションは、ブラウザが画面への描写を行う処理フローにおいて、コンポジットスレッドによって実行されます。 したがって、メインスレッドよって実行されるJavaScriptアニメーションと違い、挙動が軽くなり、実装が簡易というメリットがあります。 マウスオーバーでボタンを動かしたり、サイドからナビゲーションメニューをスライドさせたり、ツールチップを表示するなど、UI要素の状態がシンプルで自己完結的な場合は、CSSアニメーションを使用すると良いです。しかし、現状、ベンダープレフィックスを付けないと動作しないブラウザもあるため-webkit-は必ず付けたほうが良く、IE9以下は未対応の為、JavaScriptも併用する必要があります。 JavaScriptアニメーション JavaScriptは、CSSと異なり常にメインスレッドによって実行されます。しかし、JavaScriptを使用すると、アニメーションをより細かく制御できるようになります。例えば、ユーザーが一時停止したり巻き戻したりできるアニメーションや、パララックススクロールなどを実装する場合は、JavaScriptが必須です。また、 JavaScriptを使用してCSSアニメーションを制御することもできます。 結論 UI要素の状態がシンプルで、切り替えなど一度切りの遷移の場合には、CSS アニメーションを使用します。 CSSで実装するアニメーションの例 ・クルクル動くloading ・ホバーエフェクト ・アニメーションするチェックボックス ・要素のスライドイン ・ボタンをブルブルさせたり、ふわふわ動かす などなど アニメーションを細かく制御する必要がある場合は、JavaScriptを使用します。 JavaScriptで実装するアニメーションの例 ・停止、一時停止、スローダウン、逆再生が必要な場合 ・パララックス ・CSSアニメーションを制御 などなど、CSSと組み合わせて使うことが多くなります。 まとめ アニメーション利用する上で、よくコピペで実装など気軽に利用できるモノもありますが、Webサイトのパフォーマンスが落ちないように気をつける必要があります。ファストコーディングは、アニメーション制作を専門に行うチームが、全ての環境で高いパフォーマンスを維持したアニメーション制作を提供しています。お困りの際は、ぜひご相談下さい。 --- - Published: 2021-01-18 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/ssg/ - カテゴリー: React, Vue.js, Web業界の動向・情報, 便利サービス - タグ: Web業界の動向, フロントエンド開発, 静的サイトジェネレーター こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年は、フロントエンド開発の需要はますます高くなる見込みです。 フロントエンドのデベロッパーは、一昔前は、HTMLとCSSとjQueryをある程度知っていれば十分でしたが、昨今は、開発のスキルはもちろん、ツール、ライブラリ、フレームワークなど、常に進化し続けているシステムに対応しなければなりません。。。今回はその中で注目すべき「静的サイトジェネレータ」をまとめてみました。 目次 静的サイトジェネレータとは？ 静的サイトジェネレータのメリット メリット1. サイト表示の高速化 メリット2. コストの削減 メリット3. セキュリティリスクの低減 メリット4. バックアップが楽々 静的サイトジェネレーターのデメリット・課題 デメリット1. プログラミング知識が必須 デメリット2. 動的な機能を付けれない デメリット3. ビルド処理によるタイムラグ 有名な静的サイトジェネレーター まとめ 静的サイトジェネレータとは？ 静的サイトジェネレーターとは、英語名でStatic Site Generator（SSG）と書き、静的なサイトをビルド処理(※)によって生成することができるソフトウェアの事です。Webページのパフォーマンスを向上させ、高速にクライアントへ提供できます。 ビルドとは？ 簡単に言うと「ソースコードにバクがないか解析を行い、問題がなければ実行できる形のファイルに変換し、組み立てること」です。本番サーバーにアップする前に、開発環境下で処理を行います。そこで育成されたファイル群をサーバーアップします。よくコンパイルと混同されがちですが、コンパイルはビルド処理の中に含まれる作業の一つです。 CMSとSSGの違い WordpressのようなCMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものですが、それに対しSSGは、ビルド時に全てのHTMLを最初に生成します。生成されたファイルを、Netlify（ネットリファイ）などのホスティングサービスを用いて、サーバーレスで公開する仕組みになります。 静的サイトジェネレータのメリット メリット1. サイト表示の高速化 静的サイトジェネレーターで生成されたWebサイトは、CMSと違って、サーバーでHTMLを動的に生成しないため、「ページ読み込みのスピードが早い」メリットがあります。Webサイトの高速化は 特にサイトの流入数や離脱率に影響するので、SEOにおいても重要になっています。 メリット2. コストの削減 WordPressをはじめとするCMSでは、Webサイトを作成するのにコンテンツを保管するDBが必要です。しかし、静的サイトジェネレーターに必要なものはWebサーバーだけでよいので、準備コストもメンテナンスコストもかかりません。 メリット3. セキュリティリスクの低減 静的サイトジェネレーターでは管理画面やDBを必要としないため、外部から侵入されたり操作される心配がありません。 メリット4. バックアップが楽々 CMSでWebサイトのバックアップをする場合、「CMSのコード」「アップロードファイル」「データベース」の3つを保存する必要があります。これらは時間差で保存すると不整合が起こることもあるので、同じタイミングで保存する必要があります。 また、バックアップの中身を確認したり過去の状態に戻したりするのには一般的に手間とコストがかかります。静的サイトジェネレーターだと、コンテンツをテキストファイルで管理できるので、 Git / GitHub 等のバージョン管理システムで比較的簡単にコンテンツを管理することが可能です。 静的サイトジェネレーターのデメリット・課題 デメリット1. プログラミング知識が必須 静的サイトジェネレーターを利用するには「ターミナルが扱える」「開発環境が用意できる」等の基礎的なプログラミング知識が必須です。 CMSでも少し凝ったことをしようとするとプログラミングの知識が必要になってきますが、 CMSの場合はプログラミング知識が無い方でもWebサイトを構築できます。 デメリット2. 動的な機能を付けれない CMSでは、「お問合せフォーム」「ブログの投稿やコメント」「アクセス制限」等の動的な機能があります。ですが、静的サイトジェネレーターは静的サイトを生成するものなので、そのような動的機能は実装には向きません。Webサイトに動的な機能を付けたい場合は、別サイトでその機能を用意したりといった対応が必要になります。 デメリット3. ビルド処理によるタイムラグ 静的サイトジェネレーターの場合、ビルド処理が必要な関係で、コンテンツの編集からサイトへの反映までにタイムラグが生じます。そのため、膨大なページ量のWebサイトには向いていません。 有名な静的サイトジェネレーター 2020年12月現在の GitHub のスター数上位３つをご紹介します。 Next. js（ネクストジェーエス） Next. jsは、オープンソースのReactフロントエンド開発Webフレームワークです。 Next. js Hugo（ヒューゴ） HugoはGo言語で実装されたWebサイト構築フレームワークです。 Hugo Gatsby（ギャッツビー） Gatsby. jsは、オープンソースのReactフロントエンド開発Webフレームワークです。 Gatsby まとめ メリット・デメリットをまとめてみましたが、使い所としては、LPや更新頻度の低いサイト（コーポレートサイトや個人ブログなど）、ページの表示速度で高いパフォーマンスが求められるサイトなどが向いているかなと思います。 サイトは高速化したいけど、動的な部分も絡むサイトなどでは、やはり専門的な知識や経験などが必要になります。今後も、こういったニーズは多くなる見込みです。 FASTCODINGは、フロントエンド開発に強いコーディング会社です。様々なニーズに対応しています。JavaScriptを用いたフロントエンド開発による高いユーザビリティや機能実装は、利用者の満足度やコンバージョン率に大きく影響を与える重要なシステム開発業務です。 フロントエンド開発にお困りでしたら、まずはお気軽にご相談から！FASTCODNGにお任せ下さい！！ --- - Published: 2021-01-15 - Modified: 2025-09-19 - URL: https://fastcoding.jp/blog/clients/readme/ - カテゴリー: ご契約者様専用 このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2021-01-15 - Modified: 2023-04-11 - URL: https://fastcoding.jp/blog/clients/psi/ - カテゴリー: ご契約者様専用 このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2021-01-12 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/design-tools-setting/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: Adobe XD, Illustrator, Photshop, Sketch, Webデザイナー, ディレクション こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトをデザインするにあたり、みなさんどのソフトを利用されているでしょうか？今回は、とても初歩的な内容ですが、Webサイトを構築する際に必要になるデザインデータについて、デザインソフト別に、基本設定から、パーツの切り出しまでの作業フローをまとめてみました。 目次 アートボードのサイズ Adobe XD の設定とデザイン書き出しフロー Sketch の設定とデザイン書き出しフロー Illustrator の設定とデザイン書き出しフロー Photshop の設定とデザイン書き出しフロー まとめ アートボードのサイズ Webデザインをする際、先ずはアートボード（デザインをするカンバス）の設定をするわけですが、デスクトップ、タブレット、モバイルのデザインでそれぞれ設定するサイズが異なります。 ・デスクトップ：1300px〜 （実際のWebサイトの幅は、1080px〜1100pxが多いですが、アートボードは大きめに設定した方がデザインし易いです。） ・タブレット:768px ・モバイル：375px アートボードのサイズは、あくまでそれぞれのデバイスの中間。一番多いシェアも持つ端末のサイズを採用する事になりますが、実際には、様々なサイズでサイトが表示されるので、すべのサイズにおいて崩れないように配慮したデザインにする必要があります。 Adobe XD の設定とフロー ① 新規ドキュメントを作成 Adobe XD を立ち上げて、「新規ドキュメントを作成」から任意のアートボードサイズを選択します。 ② デザインの書き出し Adobe XD からデザイン素材を PNG、SVG、JPG、PDF 形式で書き出せます。 デザインが完了したら、書き出したいオブジェクトを選んで、「ファイル」→「書き出し」選択します。 画像を書き出し対象に指定しておくと、「ファイル」→「書き出し」すべての書き出し対象から一括書き出しができるので便利です。 Sketch の設定とフロー ① New Documentにアートボードを設定 New Documentを開いたら、左上のメニューから「Artboard」を選択します。右カラムに、デバイス別のアートボードが表示されるので選択します。後から、アートボード名やサイズを変更できます。 ② デザインの書き出し デザインが完成したら、書き出しをします。書き出すパーツを選択して、「MAKE EXPORTABLE」をクリック。 PNG/JPG/TIFF/WEBP/PDF/EPS/SVGから形式が選択でき、サイズも0. 5x/1x/2x/500w/200hから選べます。 Illustrator の設定とフロー ① 新規ドキュメントを作成 Adobe Illustrator を開いて、新規ドキュメントを選択して下さい。Web用やプリント用があります。 ② デザインの書き出し スライスツールで書き出したいパーツを切り出し、上部メニューバー「ファイル」→「書き出し」から選択する事ができます。 書き出す方法は3種類あり、「Web用に保存」「スクリーン用に書き出し」「書き出し形式」になります。 書き出せる形式は、「JPEG」「GIF」「PNG-8」「PNG-24」の4種類になりますが、透過しない場合は容量的に「PNG-8」、透過画像の場合は画質的に「PNG-24」対応で良いかと思います。 Photshop の設定とフロー ① 新規ドキュメントを作成 Adobe Illustrator を開いて、新規ドキュメントを選択して下さい。プリセットの詳細が設定できます。 ② デザインの書き出し スライスツールで書き出したいパーツを切り出し、上部メニューバー「ファイル」→「書き出し」から選択する事ができます。 イラストレーターと書き出し方法は、ほぼ一緒ですね。 まとめ どんなツールで、どんなサイズでデザインするのか、基本をまとめてみました。私はWebサイトのデザインは、Sketchを使っていますが、アイコンやイラストを作るのはベクトルデータを扱うIllustratorを利用し、写真を加工する時は、Photoshopを利用しています。それぞれに、特徴や得意な分野があるので使い分けが必要かなと思います。 --- - Published: 2021-01-04 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/iphone-size2021jan/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: Webデザイン, Web業界の動向, アートボード, ディレクション こんにちは。FASTCODINGデザイナーの七転び八重子です。 新型iPhone 12の発売に伴い、iPhone画面解像度を調べてみました。また、スマホ用Webデザインをする際に、どのサイズで作れば良いのかもまとめてみました。 目次 iPhone 12 解像度まとめ スマホ用Webデザインのアートボードサイズは何pxにすれば良い？ Retinaディスプレイに対応するには？ まとめ iPhone 12 解像度まとめ 端末画面サイズ画面解像度 iPhone 12 Pro Max 6. 7インチ CSSピクセル 926 x 428 iPhone 12iPhone 12 Pro 6. 1インチ CSSピクセル 844 x 390 iPhone 12 mini 5. 4インチ CSSピクセル 780 x 360 iPhone SE 4. 7インチ CSSピクセル 667 x 375 iPhone 11 6. 1インチ CSSピクセル 896 x 414 スマホ用Webデザインのアートボードサイズは何pxにすれば良い？ 2021年1月時点で、横幅375pxの画面サイズが多いようなので、 スマホWebデザイン用のアートボードサイズは、375px！ にするで問題無いと思います。ですが、iPhone 5Sに相当するサイズ320×668pxnの画面サイズにも対応する必要があるので、少し小さくなっても大丈夫な設計を心がける必要があります。 Retinaディスプレイに対応するには？ Retinaディスプレイとは？ AppleのiPhoneやiPad、MacBook Proなどに搭載されている高解像度でハイコントラストな色彩表現を可能としたディスプレイの名称です。 結論から先に言いますと以下の２点になります。 ・高解像度を理由にアートボードサイズを2倍にする必要は無い。 ・画像を２倍のサイズで準備する 高解像度を理由にアートボードサイズを2倍にしてデザインを作成するというケースもあるそうですが、私は等倍サイズで作成しています。理由は、実際のサイズ感でデザインしないと感覚的にデザインし難い。デザインパーツの多くは、CSS、アイコンはSVGなのでサイズによる影響がない事です。 png形式やjpg形式などのビットマップ画像は２倍サイズで用意する！ Webデザイン自体は、従来通りのサイズで問題ないのですが、画像は注意が必要です。 例えばWebサイト上で「300px×200px」の大きさの画像を表示しようとした場合、従来のモニタでは横縦300px×200px、つまり「ピクセル」が横に300個・縦に200個重なった大きさの画像を用意すれば大丈夫でした。が、解像度が2倍のRetinaディスプレイの場合は、同じ鮮明度の画像表現をしようとした場合、必要なピクセル数が横に2倍・縦に2倍の量だけ必要になります。 まとめ スマホ用は、375pxでデザインし、画像は２倍サイズで準備。これが今後、大きくは変わらないのかなと思いますが、最小サイズと最大サイズを考慮しながらデザインする必要があります。 --- - Published: 2020-12-21 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/other/illustrator-1-2/ - カテゴリー: Webデザイン, その他 - タグ: Illustrator, イラスト, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザイナーが、絵を描いたり、ロゴを作成したりする時に使うツールがIllustrator（イラストレーター）です。イラストレーターは、ベクタ形式です。文字やイラストを拡大しても、縮小しても画像が劣化しない便利なツールです。ご紹介する操作の中にも出てきますが、点と点を線で繋げて、図形を描くので拡大しても劣化せず、形を保つ事ができます。 今回は、イラストレーター実践編です。写真のぬいぐるみやマスコットをイラストにしてみましょう！ 追記。 こちらで使用したマスコット人形が著作権侵害に当たることから、別のイラストに差し替えする事になったのですが、ぬいぐるみ自体どれも著作権あるだろうとビビりまくった私は、着ぐるみなら大丈夫ではないかと思い、差し替えをしております。この着ぐるみをどれだけ可愛く見せるかも、今回のポイントです。（汗） 目次 新規ドキュメントを作る マスコットの写真を配置する 図形ツールを使う ペンツールを使う スポイトツールでカラーを抽出する レイヤーを変える 微調整して完成 まとめ １） 新規ドキュメントを作る 「ファイル」 → 「新規」 → お好みのサイズに設定 → 「OK」 お好みのサイズを決める際、「カラーモード」の設定もしておきましょう。 Webで使う場合は「RBG」、印刷物の場合は「CMYK」に設定します。 ２） マスコットの写真を配置する 今回は、マスコットの写真を元に、イラストを描くので、マスコットの写真を下敷きに使います。 「ファイル」 → 「配置」 → イラストにしたい写真を選択します → 「配置」 写真を置いたレイヤーをロックしておきます。追加したレイヤーに描画していきます。 ３） 図形ツールを使う 図形ツールは、楕円形の他にも、長方形や多角形などがあります。 ４） ペンツールを使う アンカーポイント（点）を繋げて、直線や曲線が自由に描けます。マウスをクリックするとアンカーポイントが追加されます。クリックしたままの状態で、マウスを動かすと線が曲線になり、ます。イメージ通りのカーブになったらクリックした状態を離します。 ５） スポイトツールでカラーを抽出する カラーを乗せたいオブジェクトを選択し、カラーの塗りを選択した状態で、スポイトツールを使います。もちろん、「スウォッチ」からカラーを選んだり「カラー」値を指定することもできますが、スポイトを使うと正確なカラーを抽出してくれるので楽チンです。 新しいカラーを毎回設定するのは面倒なので、「スウォッチ」に登録しておきます。 ６） レイヤーを変える 配色ができたら、オブジェクトの重なりを変えます。 手前にくるパーツと奥にあるパーツを入れ替えてあげます。 ７） 微調整して完成 ダイレクト選択ツールとパスツール（アンカーポイントの追加・削除）で、画像を微調整します。 まとめ イラストを描けるようになると、デザインの幅が広がりますね。今回の作業は、15分くらいで完了です。 --- - Published: 2020-12-14 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/mail-form/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: Webデザイン, Web業界の動向, ディレクション, メールフォーム こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Webサイトのコンバージョン率に関わる重要なメールフォームについて、離脱させないデザイン時の注意点を考慮しながら実際に作ってみました。 目次 離脱を防ぐ！メールフォームデザインの注意点 メールフォームを作ってみる 1. テキストボックス、セレクトメニューの装飾 2. 送信ボタンの装飾 3. フォントの装飾して完成！ まとめ 離脱を防ぐ！メールフォームデザインの注意点 ユーザビリティを考慮して、いかにシンプルでストレスの無いメールフォームを作るかがポイントです。 ① 個人情報の入力項目は極力減らす 入力項目が多いとそれだけで離脱の原因になります。パッと見て、サクサクと進めそうなボリュームにすることが大事です。 ② 「必須」項目は、「*」でなく文字で記載する 「＊（アスタリスク)」や「※ (米印)」と表現することがありますが、うっかり見落とされて「必須項目入力エラー」となってしまうと離脱する可能性が増します。 また、赤いカラーなどを使うと、色盲の方に認識されないので、しっかりと「必須項目」「必須」と記載しましょう。 ③ エラー表示は該当箇所のすぐ下で表示する 入力がエラーの場合は、入力欄のすぐ下にエラーを表示します。確認画面へ進む段階でエラーがありますと表示すると、再度入力が必要だったりと面倒です。 ④ ユーザに記入させるより、選択してもらう いくつかの中から選んでもらう場合は、入力するより、プルダウンかラジオぼたんで選んでもらいましょう。文字を打ち込み作業は極力減らします。 ⑤ 入力項目のタイトルをテキストボックスの中に表示しない シンプルに見せる為に、テキストボックスの中に、Your NameやAddressと記載しているフォームをよく見ますが、入力を始めると見えなくなるので、何の入力欄だったか不明になります。 メールフォームを作ってみる まずは、ベースとなるフォームです。最低限のCSSで作っています。 See the Pen mail form 1 by 野田 英里 (@fikgpnyd) on CodePen. 1. テキストボックス、セレクトメニューの装飾 角丸にしてpaddingなどを調整し、ボックスシャドウで立体感を出します。 See the Pen mail form 2 by 野田 英里 (@fikgpnyd) on CodePen. 2. 送信ボタンの装飾 カーソルをポインターにして、ボタンぽく仕上げます。 See the Pen mail form 3 by 野田 英里 (@fikgpnyd) on CodePen. 3. フォントの装飾して完成！ Google Fontsで装飾してみました。これで完成です。 See the Pen mail form 4 by 野田 英里 (@fikgpnyd) on CodePen. まとめ CTAやメールフォームは、Webサイトの中でも特に重要な部分です。出来るだけコンバージョンを上げる為に、無駄を省き、シンプルだけど丁寧なフォームを目指しましょう！！ --- - Published: 2020-11-18 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/maze/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: Web業界の動向, プロトタイプ, ユーザーテスト こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトをデザインしても、作成者の意図がそのままユーザーの理解に繋がるとは限りません。そこで、プロトタイプの段階で、ユーザーテストを簡単に行えるのが「Maze（メイズ）」です。 今回は、Mazeの使い方や料金プランをまとめてみました。 目次 Maze（メイズ）とは？ プロトタイピングツールと連携 ミッションを設定し調査が実施できる 登録できるミッション ユーザーテストのレポートが取得できる Mazeの料金プラン Mazeの使い方 ① プロトタイプの読み込み ② ミッション(mission)の設定 ③ テスト用URLをテスターにシェア まとめ Maze（メイズ）とは？ Maze（メイズ）は、プロトタイプの段階でユーザーテストが簡単に行えるサービスです。 Maze - https://maze. design/ プロトタイピングツールと連携 Mazeの管理画面から、テストしたいサイトのプロトタイプをインポート（Figma、Sketch、Adobe XD、InVision、Marvelのクラウドと連携）できます。 わざわざ、テストの為の画像を用意する必要がありません。 ミッションを設定し調査が実施できる ミッションを設定するとテスト用のURLが発行され、テスターにそのURLをシェアすればオンライン上でユーザーテストを実施することができます。 登録できるミッション Mission ミッションは、テスターが完了するタスクです。少なくとも1つのミッションが必要です。タイトル、説明、成功への期待される道を設定して、ミッションを作成します。タスクに異なる有効な完了方法がある場合は、複数の予想されるパスを追加します。 Yes/No はい/いいえを使用して、テスターに クローズドエンドの質問をします。この質問タイプを使用すると、2つの選択肢の間の好みを測定できます。テスターは1つの回答の選択肢を選択します。 Opinion Scale 意見尺度の質問では、テスターに 評価についての意見を表明するように依頼できます。ステップ数は0から10まで調整できます。 Multiple Choice 多肢選択式では、複数の回答を選択できるクローズドエンドの質問を作成できます。テスターに 、オプションのリストから1つまたは複数の選択肢を選択するように依頼します。 Open Question Wh質問でオープン質問を使用するか、質問に対するより長い自由形式のテキスト回答が必要な場合に使用します。未解決の質問を使用して連絡先情報を収集したり、フィードバックやコメントを求めたりすることができます。 Context Screen コンテキスト画面を使用すると、追加の画面を使用して参加者に指示を与えることができます。 Tree Test ツリーテストを使用して、Webサイトの階層とトピックの検索可能性を評価します。テスターは、特定のタスクを完了できるツリー内の場所を表示します。 Card Sort カードソートブロックを使用して、テスターがトピック（カード）をカテゴリにグループ化する方法を理解します。カードの並べ替えは、Webサイトの情報アーキテクチャを計画および評価するのに役立ちます。 5-Second Test 期間限定でユーザーに表示する画像を選択します。左側のメニューからフォローアップの質問ブロックを追加して、第一印象を収集します。 Legal Screen 法的ブロックを使用して、ユーザーに免責事項、機密保持契約、プライバシーポリシーなどの法的条件を確認して同意してもらいます。ユーザーには利用規約が表示され、同意または拒否するよう求められます。 ユーザーテストのレポートが取得できる テスト用URLからテスターがユーザーテストを実施すると、結果が反映されます。 テスト結果は、画面遷移フローや画面別の滞在時間、アンケート結果、ヒートマップなど分かりやすくレポートにまとめられます。 Mazeの料金プラン Mazeは無料で利用することができますが、編集権限を持つユーザーの数を増やすなど、登録できるプロジェクト数を増やす場合は、有料プランになります。 Free Starter Team 月額料金(年次請求の場合) 無料 $42 $25/seat/m 編集者数 1 1 3+ プロジェクト数 1 3 10 ブロックの数 10個まで 無制限 無制限 テスト結果のCSVエクスポート × ○ ○ パスワード保護 × ○ ○ カスタマイズ機能 × × ○ Mazeの使い方 ① プロトタイプの読み込み 各デザインツール別に、読み込みの設定方法が記載されているので、その通りに設定します。 ② 行動(mission)の設定 ユーザーに求めるアクションを登録します。 左メニュー赤枠に登録したミッションが表示され、右側に登録内容が表示されます。ここで変更可能です。 ミッションの他に、アンケート、ツリーテストなどを登録できます。緑枠をクリックすると追加したいブロックが追加できます。 ③ テスト用URLをテスターにシェア テスト用のURLをテスターにシェアしてください。テスターを購入する事もできますが、日本人では無い為こちらはまだ利用できませんね。。 まとめ Webデザイナーにとっては、お手軽に使えるサービスだと思います。日本語のサポートはありませんが、比較的分かりやすい管理画面なので、英語の苦手な私でも使えました。 無料で使えるので、お試しに利用して見てはいかがでしょうか？ --- - Published: 2020-11-11 - Modified: 2024-12-16 - URL: https://fastcoding.jp/blog/all/info/color-scheme/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: Webデザイン, Web業界の動向, 配色 こんにちは。FASTCODINGデザイナーの七転び八重子です。 配色を決めるときに、迷ったら配色を提案してくれる便利なサイトがありますが、結構たくさんあるので今回は厳選してみました。また、配色の基本をおさらいします。 目次 配色の仕方（基本） ① 最初はグレースケールでデザインする ② 色の意味合いを考慮する ③ 黒色を利用するときは彩度に注意する ④ 重要な要素はアクセントカラーを使用する ⑤ カラーホイールを使って決める方法 便利サイト5選 ① 2色の配色パターン見本 ② 3色の配色パターン見本 ③ 4色の配色パターン見本 ④ Webページを想定した配色パターン見本 ⑤ ベースカラーをコントラスト別表示してくれる まとめ 配色の仕方（基本） デザインの配色は、バランスが大事です。色数が増えるほどバランスを取るのは難しくなるので、配色は基本3色までに制限するとバランスよくデザインできます。 ▪ベースカラー（70%）:Webサイトのもっとも大きな面積を占めるベースとなる色で背景や余白などが当てはまります。 ▪メインカラー（25%）:一番テーマとなる（主張したい）色です。ロゴカラーやプロダクトカラーがこれに当てはまります。 ▪アクセントカラー（5%）:割合は低いですが、一番重要な箇所（ボタンなど）に利用します。テーマカラーの反対色を使うと、鮮やかさが引き立つので目にとまりやすくなります！ または、１つの色を基調としたトーンカラーを利用することで、洗練された統一感のある見た目を表現することができます。 ① 最初はグレースケールでデザインする 最初にデザインをしながら配色を考えると、なかなか作業が進みません。デザイン要素の配置とレイアウトを先に決めてしまった方が、生産的です。 全ての要素を配置すると、どこを目立たせたいかが分かりやすくなります。下のWebサイトは、モノトーンの中にアクセントカラーだけを入れています。 ② 色の意味合いを考慮する 色には固有の意味があり、さまざまな感情を引き出します。また、ユーザーが製品を認識するのにも直接的な影響を与えます。 Webサイトの配色を選択するときは、どのように見えるか考えるのではなく、どのような気分を感じるのかを検討する必要があります。 赤：危険・情熱・興奮・活力・自身 オレンジ：活動的・活発的・フレッシュ・健康的・暖かい 黄：楽観的・元気・楽しい・幸せ・エネルギッシュ 緑：自然・バイタリティ・地位がある・裕福・環境的・持続的・オーガニック 青：信用・落ち着いている・安定・平和的・企業・正義感・清潔・涼しい 紫：高貴・精神的・神秘的・威厳・ラグジュアリー・女性的 茶：オーガニック・健康・健全・誠実・ ピンク：女性的・若々しさ・ロマンチック・ワクワク・無邪気 黒：洗練・フォーマル・高級・上流 白：純粋・シンプル・潔白・ミニマリズム・完璧な ③ 黒色を利用するときは彩度に注意する テキスト以外で、純粋な黒（#00000）を配置すると、際立ちすぎて他の色を圧倒してしまいます。多くのWebサイトで使われているのは暗い灰色です。自然界の中でさえ、純粋な黒は存在しません。光があたる事で、深い灰色になります。色に少しだけ彩度を加えます（#00000 ではなく #232323 など） 下のWebサイトも、背景の黒に#02030Aを利用しています。 ④ 重要な要素はアクセントカラーを使用する Webサイト上で目立たせたい箇所（CTAなど）は、アクセントカラーを使用します。メインカラーの反対色を使うと目立ちます。重要なボタンなどは、ABテストをしてクリックされやすいカラーを剪定すると良いでしょう。 ⑤ カラーホイールを使って決める方法 カラーホイールは、「赤」「黄」「青」を基準とした12色をサークル上に配置したものです。配色を手軽に作成できるので、初めての方は便利です。 補色（Complementary） 選択したメインカラーの反対側にある色との組み合わせを指します。 何かを目立たせたいとき、もっとも簡単な方法ですが、バランスや調和からは離れた組み合わせになります。 類似色（Analogous） 選択したメインカラーの両隣にある色を加えた配色を指します。一番使いやすいカラーです。 単色、モノクロ（Monochromatic） 単色をベースに、トーン、色合いを調整して配色をつくります。このカラーにベースカラーとアクセントカラーを加えて、Webサイトをデザインするととてもまとまりのあるサイトになります。私はこの方法を良く採用しています。 便利サイト5選 ① 2色の配色パターン見本 Khroma は、自分の好みの色を50色選択するだけで人工知能（AI）が機械学習を行い、その人におすすめのカラーパレットを自動的に生成してくれるサービスです。 使い方は、簡単です。「Get Started」をクリックして、自分の好きなカラーを５０色選び（ここは多いですが丁寧に選びましょう）、「Start Training」をクリックするだけです。 Khrom - http://khroma. co/ ② 3色の配色パターン見本 COLOR SUPPLY は、色相環からカラーパレットを作成できます。 使い方は、まず好きな色を色相環から選び、下記の配色方法を選択します。 ・Complementary（補色） ・Analogous（類似色） ・Triad（正三角形の配色） ・Split-Complement（分裂補色） ・Square（四角の配色） COLOR SUPPLY - https://www. colorsupplyyy. com/app ③ 4色の配色パターン見本 Color Hunt は、4色の配色パターン見本サービスです。各カラーはクリックでコピー可能です。 お気に入りの登録数によってそれぞれの配色パターン見本の人気が分かります。上部メニュー「Popular」を選択するとよく使われている配色パターンが表示されます。 Color Hunt - https://colorhunt. co/ ④ Webページを想定した配色パターン見本 Happy Hues は、カラーパレットを選択するたびに、サイト全体の配色が変わります。サイトの配色イメージがひと目で確認できます。 Happy Hues - https://www. happyhues. co/ ⑤ ベースカラーをコントラスト別表示してくれる CopyPalette は、一貫性のある単色のカラーパレットを簡単に生成でき、Sketch, Figma, AdobeXDなどにコピペで利用できるツールです。 CopyPalette - https://copypalette. app/ まとめ 配色の基本は、Webデザインだけでなく、様々なデザインに共通しています。ちょっとした事ですが、好きに色を選ぶより、Webサイトがワンランクおしゃれになると思います。是非活用下さい。 --- - Published: 2020-11-04 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/google-fonts-subset/ - カテゴリー: React, Vue.js, Web業界の動向・情報, ディレクション, SEO - タグ: CSS, SEO対策, Webfonts, Web業界の動向, ページスピード, 高速化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webフォント（Google Fonts）って利用されている方多いと思いますが、例えば、サイトタイトルや見出しだけ利用しているといった場合は、全ての文字を読み込むと時間がかかります。そこで、必要な文字だけを指定する事（サブセット化）で軽量化する事で読み込み速度を短縮することができます。今回は、その方法をまとめてみました。 目次 サブセット化とは？ STEP① Google Fonts の設定 STEP② サブセット化の設定 まとめ サブセット化とは？ サブセット化とは、「必要なフォントのみ抜き出す」事です。 フォントにはアルファベットや数字、記号など様々な文字が含まれていますが、全て使うわけでは無いので使う文字のみ抜き出して軽量化する事でページの読み込みがスムーズになります。 STEP① Googleフォントの設定 まず、設定したいフォントをから選びます。 日本語の場合は、 HTMLファイルへの記述 下記のコードを、HTMLファイルの＜head＞内に記述します CSSファイルへの記述 CSSファイルの、フォントを適用させたい要素に対して記述します。今回は、h2見出しのテキストのみ「はんなり明朝」にしたいので、h2 タグのみフォントが適用されるよう記述します。 ここまでは、通常のGooglefontsの設定です。次にサブセット化してみましょう。 STEP② サブセット化の設定 サブセット化はとっても簡単です。先ほどHTMLファイルへの記述したURLにを記述するだけ。 See the Pen eYzpdvJ by 野田 英里 (@fikgpnyd) on CodePen. まとめ めっちゃ簡単な設定でしたね。ちょっとした事ですが、ページスピードスコアにも関係しますし、しっかり対策していきたいですね。 --- - Published: 2020-10-28 - Modified: 2021-02-02 - URL: https://fastcoding.jp/blog/all/info/font-awesome/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: Webアイコンフォント, Webデザイン, Web業界の動向 こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年にFont Awesomeから最新バージョンがリリースされます。 その前に、アイコンをフォントとして扱える便利ツールFont Awesomeの使い方をまとめて見ました。 目次 Font Awesomeって何？ Font Awesome の5つのタイプ Font Awesome 無料版と有料版の違い Font Awesome 6 が2021年リリース！ Font Awesome 5 を使う準備 ＜方法1＞ CDNを使う（オススメ） ＜方法2＞ サーバーにアップロードする Font Awesome 5 を表示する ＜手順1＞ 使いたいアイコンフォントを探す ＜手順2＞ アイコンフォントのコードをコピー ＜手順3＞ アイコンを表示させたい位置にペースト 表示したアイコンを加工してみる ＜その1＞ アイコンのサイズを変える ＜その2＞ アイコンの色を変える ＜その3＞ アイコンの幅を統一する ＜その4＞ アイコンを回転させる（アニメーション） ＜その5＞ アイコンにボーダーをつける ＜その6＞ アイコンを重ねる まとめ Font Awesomeって何？ Font Awesomeとは、商用利用が可能で、Webサイトやアプリケーション、WordやPDFなどのドキュメントに埋め込めるWebアイコンフォントです。 Font Awesome - https://fontawesome. com/ Webアイコンフォントとは？ Webサイトでフォントと同じように表示できるアイコンのことです。画像アイコンと違い、拡大してもくっきり表示され、色やサイズの変更や、アニメーションを加える事もできます。 Font Awesome の5つのIcon Style ・Solid 塗り潰したタイプ ・Regular ラインタイプ ・Light 細いラインタイプ ・Duotone 濃淡で立体的 ・Brands ブランドロゴ 上記5つのIcon Styleが存在します。 Font Awesome 無料版と有料版の違い 無料版も有料版も、商用利用可能で、使用できますが、使用できるアイコンが限定されています。 無料版では、限定されたアンコンに加え、「Light」「Duotone」が使えません。 Font Awesome 6 が2021年リリース！ 2021年、Font Awesome 6 がリリースされますが、「$99 per year」とありますので、有料版は年間99ドルになります。 4,845種類のアイコンが、7,842種類に増えます。 新しいIcon Styleが追加 新しく「Thin」という、スタイルが追加されます。 独自のアイコンをアップロードできる Font Awesome 6では、独自のアイコンをキットにアップロードして、Font Awesomeアイコンと一緒に簡単に使用できるようになります。 Font Awesome 5 を使う準備 ＜方法1＞ CDNを使う CDNを活用すると、HTMLにタグを貼り付けるだけなので導入がとても簡単です。 個人的にはこの方法をオススメします。新しいアイコンが追加される度に、アイコンをダウンロードし直す必要がありません、またサーバーへの負荷を減らすこともできます。 CDNとは？ CDNとは、Content Delivery Networkの略で、同じコンテンツをユーザーの端末に効率的に配布するために使われる仕組みです。ものすごく簡単に説明すると、専用のサーバー上にある画像やフォントなどのデータを読み込んで自分のWebサイトに表示させます。つまりアイコンをダウンロードして自分のサーバーにアップロードしなくても使うことができるのです。 アカウント登録して「Kit's Code」を＜head＞内に貼り付けます。 アカウント登録を済ませると、専用のKit's Codeが割り当てられます。 ＜方法2＞ サーバーにアップロードする サーバーにファイルを配置する場合は、下記のページでファイルをダウンロードしてください。 Font Awesome ダウンロードページ ＜head＞内に、JavaScriptのファイルを読み込みます。 Font Awesome 5 を表示する ＜手順1＞ 使いたいアイコンフォントを探す アイコン一覧から使いたいアイコンを選びます。グレーアウトしているアイコンは、有料版のみ利用可能なフォントです。左メニューから、絞り込みができます。 ＜手順2＞ アイコンフォントのコードをコピー 使いたいアイコンをクリックして詳細ページへ、「Start Using This Icon」をクリックして、コードをコピーします。 ＜手順3＞ アイコンを表示させたい位置にペースト 表示したアイコンを加工してみる ＜その1＞ アイコンのサイズを変える 以下のコード fa lg をi 内に書くことでサイズを大きくすることができます。 fa-lg (1. 333... 倍) fa-2x (2倍) fa-3x (3倍) fa-4x (4倍) fa-5x (5倍) ＜その2＞ アイコンの色を変える 【HTML】 【CSS】 スタイルでカラーを設定してあげるだけです。簡単ですね。 ＜その3＞ アイコンの幅を統一する 以下のコード fa-fw をi 内に書くことでアイコンの幅を揃えることができます。 【HTML】 【CSS】 ＜その4＞ アイコンを回転させる（アニメーション） 以下のコード fa-spin をi 内に書くことでアイコンをクルクル回転させることができます。 【HTML】 ＜その5＞ アイコンにボーダーをつける 以下のコード fa-border をi 内に書くことでアイコンの周りにボーダーを追加できます。 【HTML】 ＜その6＞ アイコンを重ねる アイコン同士を重ねて表示する事もできます。 【HTML】 ①class名が fa-stack のspanタグの中に、２つのアイコンを入れる ②背面にくるアイコンを最初に記述、class名に fa-stack-2x を追加 ③次に前面のアイコンを書き、class名に fa-stack-1x を追加 まとめ とても、簡単でしたね。今年からアカウント登録して「Kit's Code」が発行されるので、前のようにバージョンの記載が無くなって、さらに便利になりました。 色々なアイコンを使うには、年間99ドル必要になりますが、まずは、無料でお試し下さい。 --- - Published: 2020-10-21 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/pagespeed/ - カテゴリー: Web業界の動向・情報, ディレクション, SEO, 便利サービス - タグ: SEO対策, Web業界の動向, ページスピード, 高速化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさんSEO対策の一つ、「ページスピード対策」してますか？ ページスピードが遅いと検索結果でのランキングが下がってしまう可能性があります、他にも、ユーザーが離脱しやすくなtたり、コンバージョン率にも影響すると言われています。今回は、改めてページスピード対策をまとめてみました。 目次 ページスピード対策の重要性 PageSpeed Insights（ページスピードインサイト）を利用する 1) フォールドデータ 2) ラボデータ 3) 診断と監査 サイトスピードを改善する11の方法 1) CSS、HTML、JavaScriptを縮小する 2) 適切なサイズの画像 3) 使用していない CSS を削除する 4) テキスト圧縮の有効化 5) サーバーの応答時間を短縮する 6) 複数ページリダイレクトの回避 7) ウェブフォント読み込み中の全テキスト表示 8) オフスクリーン画像の遅延読み込み 9) 次世代フォーマットでの画像の配信 10) レンダリングを妨げるリソースの除外 11) メインスレッド処理の最小化 まとめ ページスピード対策の重要性 ページスピードとは、Webサイト上のページが読み込まれ、そのページ上のすべてのコンテンツが表示されるまでにかかる時間のこと。ユーザーエクスペリエンスに大きな影響を与えるので、Googleは検索ランキングの指標の一つとしています。 ・ページの読み込み時間が1秒から5秒になると、直帰率は90％まで増加 ・モバイルサイトに訪問したユーザーが５３％が、ロードに3秒以上かかるウェブサイトから即離脱 このように、PCページ、モバイル向けページともに、サイトにアクセスしてからページが表示されるまでのスピードを早めるようなSEO対策を施すことが大切です。 PageSpeed Insights（ページスピードインサイト）を利用する PageSpeed Insights 使い方は簡単です。サイトにアクセスして、調べたいWebサイトURLを検索バーに入力して「分析」ボタンをクリックするだけです。 PageSpeed Insightsの測定で表示される情報 フィールドデータ：Chrome UX Report（CrUX）のレポートが出せる ラボデータ：Lighthouseで分析を行った結果 改善できる項目：ページ表示速度の向上を狙うための改善案 診断：ページ表示速度がWeb開発にて適している設定に近いかの項目 合格した監査：問題がないと判断された項目 1) フォールドデータ Googleがページの表示速度の判断として使用しているデータであるChrome UX Report（Chrome上でのサイトのUXパフォーマンスを確認できる）からレポートを出してくれます。 下記画像の赤枠「提供元の概要を表示」をクリックすることで、Chrome UX Reportと比較した全てのページの速度の判定が見られます。 First Contentful Paint（FCP）とは? 対象サイトへのアクセス開始からDOM要素の表示開始時点までの時間となります。大まかに表現すれば、JavaScriptやCSSアニメーション等のエフェクトを除いた、最低限のページを表示するための準備が整うまでの時間ということになります。 First Input Delay（FID）とは？ 対象サイトにおいて、何かしらのユーザ操作（リンクをクリック、ボタンをタップ、JavaSciptを用いた操作等）が行われてから反応が返ってくるまでの時間となります。 Largest Contentful Paint（LCP）とは？ 対象サイトが最も大きなコンテンツ（画像・動画の初期表示画像・背景画像のある要素・テキストを含むブロックレベル要素など、そのページでメインとなるコンテンツ）が表示されるまでの時間。Core Web Vitalsの指標の一つでもありますが、2. 5秒以内に表示されると優良です。 Cumulative Layout Shift（CLS）とは？ 「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標。 こちらも、Core Web Vitalsの指標の一つでユーザーが意図せぬレイアウトのずれがどれぐらい発生したかを、独自の「レイアウトシフトスコア」で表す。 Core Web Vitalsについてはこちらでもまとめています。 2) ラボデータ Lighthouseで得られたデータを元に、以下の 6つの指標 が表示されます。 フィールドデータと同じように、各指標が「早い（グリーン）」「平均（オレンジ）」「遅い（レッド）」に色分けして表示されます。 First Contentful Paint とは？ コンテンツまたは、画像が初めて表示されるまでの時間。 Time to Interactive とは？ ユーザーがメインとなるコンテンツが表示されたと判断するまでの時間。 Speed Index とは？ ページのコンテンツが見えるまでの時間。 Total Blocking Time とは？ タスクの処理時間が 50 ミリ秒を上回った場合の、コンテンツの初回描画から操作可能になるまでの合計時間（ミリ秒）。 Largest Contentful Paint とは？ 最大コンテンツの描画は、最も大きなテキストまたは画像が描画されるまでにかかった時間。 Cumulative Layout Shift とは？ ビューポート内の視覚要素がどのくらい移動しているかを測定する指標 3) 診断と合格した監査 診断は、アプリケーションに関する改善点を上げてくれます。こちらも改善することで、時短の効果が得られます。 合格した監査は、PageSpeed Insightsのツールで改善の必要がないと判断された項目が見れます。 サイトスピードを改善する11の方法 1) CSS、HTML、JavaScriptを縮小する ミニファイと呼ばれるファイル圧縮で、余分なスペース、改行、インデントなどの不要なバイトを取り除き圧縮します。 2) 適切なサイズの画像 ビューポート（表示領域の大きさ）に合わせて適切な解像度に調整した画像を利用するようにHTMLやCSSを編集します。 3) 使用していない CSS を削除する 利用していないエントリーを削除します。またページ毎に必要最低限なCSSのみを利用するといったファイル構造の変更も効果を発揮します。 4) テキスト圧縮の有効化 HTTP通信上の圧縮（gzip, deflate等）を設定します。主にサーバー設定の調整となります。 5) サーバーの応答時間を短縮する 速度の遅いアプリケーション ロジック、遅いルーティング、遅いデータベース クエリ、フレームワーク、ライブラリ、リソースによるCPUの消費、メモリ不足など改善し、サーバーの応答時間は 200ミリ秒以下に減らします。 6) 複数ページリダイレクトの回避 リダイレクトは増えれば増えるほど速度低下を招きます。基本的にはリダイレクトを解除します。 7) ウェブフォント読み込み中の全テキスト表示 ウェブフォントを利用する場合に、フォントデータが読み込まれるまでの表示フォントを指定します。 8) オフスクリーン画像の遅延読み込み ファーストビュー以下の要素に存在する画像の読み込みを遅延させます。lazyload等のプラグインを利用します。 9) 次世代フォーマットでの画像の配信 現在、Webサイトで使用されている画像はJPG、GIF、PNGなどが一般的ですが、Google PageSpeed Insightsでは、JPEG 2000、JPEG XR、WebP などの画像フォーマットの使用が、ページの表示速度向上に繋がると推奨されています。画像フォーマット自体を次世代フォーマットに変更する場合、一部のブラウザで表示できなくなることがあります。対応したいブラウザによって対応を判断します。 10) レンダリングを妨げるリソースの除外 主にファーストビュー内に含まれるCSSやJavaScriptによる画面描画要素のインライン化、より高速に処理できる手法への置き換え等を行います。 11) メインスレッド処理の最小化 CSSやJavaScriptによる効果を、より高速に処理できる手法へ置き換えたり、削減します。 まとめ 今回は、SEO対策の一環としてページスピード対策についてまとめてみました。UX体験を向上させるというGoogleの指針通り、今後も表示速度を上げて、Webサイトの閲覧を快適にしていく為の流れや手法はどんどん改善されていくと思われます。PageSpeed Insightsは、2019年にアップデートされているので、今後も定期的にチェックして対応する必要がありますね。 --- - Published: 2020-10-14 - Modified: 2024-11-06 - URL: https://fastcoding.jp/blog/clients/psiwordpress/ - カテゴリー: ご契約者様専用 このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード: --- - Published: 2020-10-01 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/designswidth-2020/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, ディレクション - タグ: Webデザイン, Web業界の動向, ディレクション こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトのデザインの際、皆さんは何ピクセルにしていますか？２、３年変えてないって方は、要注意です。 今回は、Webデザイナーの皆さんが気になるWebサイトの横幅サイズ、2020年10月現在、何ピクセルが正解なのかリサーチしてみました。 目次 Webサイト横幅サイズとファーストビューの結論 2020年10月現在のブラウザシェア ディスクトップ モバイル 多くの企業サイトで採用されている横幅を調べてみた モバイルで推奨する最小フォントサイズ まとめ Webサイト横幅サイズとファーストビューの結論 これまで横幅サイズのみ注目していましたが、今回は、ファーストビュー（Webサイトに訪問したユーザーが1番はじめに見るページの表示範囲）も合わせて考慮します。 PCの横幅は、縦はでOK！ ファーストビューは、横幅960px、980px、1000px、1024px、1040px、1080px 高さ550pxまでのサイズで！ スマートフォンはRetinaディスプレイを考慮して倍サイズの横幅でOK！ ファーストビューは、横幅360px 高さ600pxまでのサイズで！ では、ここからはこの結論に至った理由を説明したいと思います。 2020年10月現在のブラウザシェア ファーストビューのサイズ、そして横幅を決める上で、まずユーザーがどれくらいのディスプレイ解像度で見ているかを調べる必要があります。 おなじみ、StatCounterでチェック。 ディスクトップ 2年前と比較すると、日本では1024×７６８px幅のパソコンがシェアランキングに登場しなくなったので、気持ちワイドになった？と言うところでしょうか。 世界的にみても、全体の2. 79%なので、この調子だと無くなっていくと思われます。 モバイル モバイルは変わらずと言う感じでしょうか。 この統計結果から、以下のように設定しました。 多くの企業サイトで採用されている横幅を調べてみた ブラウザのシェア率は分かりましたが、実際に大手企業のサイトがどの幅を採用しているのか気になります。 以下は、私が調べた結果です。 やはり、950px〜1200pxあたりに集中している結果となりました。 モバイルで推奨する最小フォントサイズ モバイルを実寸サイズでデザインする場合（３２０ｐｘとか３７５ｐｘ）は、最小フォントサイズは、を推奨します。レティーナ用に２倍サイズでつくるなら最低になります。 これは、一部のスマホ機種で１０ｐｘ未満のフォントサイズは１０ｐｘに勝手に強制されて実現できないと事と、UX的な側面が理由です。 まとめ FASTCODINGでは、Webサイトの幅は1080pxを基本にしています。今後、解像度が上がるとしても当分はこの推移は続くのかなと、個人的には思っています。 また、一年後にこのテーマについて調べたいと思います。 --- - Published: 2020-09-30 - Modified: 2025-10-11 - URL: https://fastcoding.jp/blog/all/info/pagespeed-plugin/ - カテゴリー: Web業界の動向・情報, ディレクション, WordPress, 便利サービス - タグ: SEO対策, Web業界の動向, WordPress, ページスピード, 高速化 こんにちは。FASTCODINGデザイナーの七転び八重子です。 WordPressに便利なプラグイン！今日は、ページスピードを上げてくれるプラグインをご紹介したいと思います。 目次 ページスピードの重要性 ページスピードを上げるWordPressプラグイン 1） WebP Express 2） PageSpeed Ninja ページスピードをテストする まとめ ページスピードの重要性 2012年、Googleはページ表示速度がランキング要因の一つであることを公表しています。2018年7月からは、ページスピードがモバイル検索のランキング要因として使用されるようになりました。 また、ページ表示速度の向上はUX（ユーザー体験）の向上にもなります。一般に表示が遅れるごとにコンバージョン率、顧客満足度は大幅に低下します。表示に3秒以上かかるページは40%以上のユーザーが離脱するとまで言われています。 ページスピードに関しては、こちらの記事も合わせてどうぞ。 ページスピードを上げるWordPressプラグイン 1） WebP Express 次世代画像フォーマットをWordPressで利用できるようにするプラグインです。 画像を軽量化することでページの読み込み速度も改善されます。Googleも「WebP」を推奨しています。 Googleのでサイトの測定を行うと、 JPEGやPNGやGIF画像などを使用している場合は、「改善できる項目」に「次世代フォーマットでの画像の配信」と表示されます。 WebP（ウェッピー）とは? Googleが開発している画像フォーマットで、 画像サイズを小さくできるという特徴があります。JPEG画像やPNG画像と比べて容量が20～30%ほど削減できると言われています。 ① インストール→有効化 WordPressの管理画面上から該当プラグインを検索してインストール、もしくは以下よりダウンロードして、管理画面からアップロードし有効化します。 WebP Express – WordPress プラグイン | WordPress. org 日本語 ② 管理画面から設定 WordPress管理画面左メニューの「設定」→「WebP Express」から下記を設定して下さい。 ① でを選択 ② をチェック ③ をクリック ④ にチェック ⑤ を選択 2） PageSpeed Ninja PageSpeed Ninjaは、Google Pagespeed Insightsで指摘された問題点を修正したい項目だけを選んで、ワンクリックで修正できるプラグインです。 ① インストール→有効化 WordPressの管理画面上から該当プラグインを検索してインストール、もしくは以下よりダウンロードして、管理画面からアップロードし有効化します。 PageSpeed Ninja – WordPress. org ② 管理画面から設定 WordPress管理画面左メニューの「設定」→「PageSpeed Ninja」から下記を設定して下さい。 まず、このような画面が表示されるので、必要に応じてチェクを外して下さい。 デスクトップ・モバイルの設定項目 ① Avoid landing page redirects リンク先ページのリダイレクトを無効にします。 ② Enable compresstion GZIP圧縮を有効にします。 GZIP圧縮とは、ファイルサイズを小さくする圧縮方法の1つです。 gzip 圧縮を取り入れることで、ユーザと Web サーバ間でやりとりされている HTML ドキュメントのファイルサイズが小さくなり、転送速度が向上します。 ③ Levarage browser caching ブラウザのキャッシュを利用します。 ④ Reduce server responce time サーバーの応答時間を短くします。 ⑤ Minify CSS CSSファイルを圧縮して軽量化します。 ⑥ Minify HTML HTMLを圧縮して軽量化します。 ⑦ Minify JavaScript JavaScriptを圧縮して軽量化します。 ⑧ Eliminate render-blocking JavaScript and CSS in above-the-fold content レンダリングブロックをするCSSとJavaScriptを除去します。 レンダリングブロックとは、ブラウザのコンテンツのファーストビューに関する表示処理がブロックされる現象を改善します。 ⑨ Optimize images 画像を最適化します。 ⑩ Prioritize visible content 可視化コンテンツの優先順位付け ユーザビリティの設定項目 ① Avoid plugins Flash / ActiveX / Silverlight などの埋め込みプラグインを除去します。 ② configure the viewport ビューポートを設定します。 ビューポートとはウェブページを表示するための領域のこと。 ③ Size content viewport ビューポートへのコンテンツサイズ ④ Size tap targets appropriately 適切にタップターゲットへのサイズを決めます。 タップターゲットとは、スマートフォンやタブレットでタップすることができるエリアのことで、操作性を考慮するとタップターゲットのサイズを大きくすることでユーザビリティの向上を図ることができます。 ⑤ Use legible font size 読みやすいフォントサイズを使用します。 ページスピードをテストする ・WebPに対応することでどのくらい軽量化できるかを計算してくれるツール ページまるごとWebP変換・効果測定（https://sim. lightfile. net/webp/）※こちらのサービスは、現在は提供を終了しているようですのでご注意ください。（2025年10月現在） ・ホームページ表示速度の分析 PageSpeed Insights まとめ サイトスピードは、SEOやUX的に近年重要視されていますが、対策方法は複数あるので全て対応するのは大変な作業でもあります。WordPressを利用しているとプラグインがたくさんあるので便利ですね。 --- - Published: 2020-09-24 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/structured-data/ - カテゴリー: React, Vue.js, Web業界の動向・情報, SEO - タグ: Web業界の動向, 構造化データ こんにちは。FASTCODINGデザイナーの七転び八重子です。 去年あたりから広く知られるようになった「構造化データ」。 検索エンジンに、HTMLで書かれたWebページを理解できるようにするマークアップ方法で、検索結果の表示が目立つ（カードタイプ、写真、枠）ようになります。 今回は、まだ対応していない方向けに、目的別の方法をまとめてみました。 目次 構造化データとは？ 構造化データマークアップの記述方法（シンタックス） 目的別の記述例（リッチリザルトを表示する） 1） ニュース、ブログ、スポーツの記事を表示 2） を表示 3） 商品に関する情報を表示 4） 特定のトピックに関する質問と回答の一覧を表示 5） イベント一覧を表示 構造化データを検証する まとめ 構造化データとは？ 構造化データとは、検索エンジンに、HTMLで書かれたWebページを理解できるようにするマークアップ方法のことです。 構造化データを使用すると検索結果に画像やレビュー評価などの「リッチリザルト」が表示されたりと直接コンバージョンに繋がる事から、SEO対策としても重要です。 例えば、「コンビニ アルバイト」などで表示されるGoogleしごと検索「Google for jobs」も構造化データを用い、検索結果に表示しています。 リッチリザルトとは？ リッチリザルトとは、Googleの通常の検索結果（リンクとスニペット）とは異なり、結果を表示する位置や表示形式をさまざまに変化させたものです。検索結果にリッチリザルトが表示されるとユーザーの目に留まりやすくクリックされやすい傾向があります。 リッチリザルトと言う呼び方は比較的新しく、以前はリッチスニペットなどと呼ばれていました。リッチリザルトはリッチスニペットを包含する形で概念の大きいもので、リッチリザルトにはリッチスニペットではないものも含まれます。 リッチリザルトの注意点 構造化データマークアップを実装したからといって必ずリッチリザルトが表示されるとは限りません。また、カンマ一つ、１カ所でもマークアップの記述が間違っていると正しく認識されず、リッチリザルトが表示されません。記述したマークアップが正しいか、実装前にGoogleが提供しているテストツールで検証することをおすすめします。 構造化データマークアップの記述方法（シンタックス） 構造化データマークアップの記述方法（シンタックス）は「Microdata」「RDFa」「JSON-LD」の3種類ありますが、Googleは「JSON-LD（ジェイソンエルディー）」を推奨していますので、今回は「JSON-LD」での記述をご紹介します。 「JSON-LD」はHTML上に記述する箇所を1カ所にまとめることができるため、修正・加筆などの管理が容易というメリットがあります。 目的別の記述例（リッチリザルトを表示する） 1） ニュース、ブログ記事を表示 記事（Articles）の構造化データは、AMP対応のページの場合と、非AMPページの場合で、マークアップする属性が若干異なります。 AMP対応のページの場合 以下の内容を書き換えて、＜head＞内に記述して下さい。 AMP非対応のページの場合 以下の内容を書き換えて、＜head＞内に記述して下さい。 AMP（アンプ）とは？ 「Accelerated Mobile Pages」通称で、直訳すると「モバイルページの高速化」です。スマホでのUX向上の為、GoogleとTwitterが共同開発した「「サイトスピード高速化システム」です。コンテンツをキャッシュすることでデータ量が少なくなりアクセスにかかっていた時間を、大幅に短縮するので、ニュース記事など、定期的に更新される動的なコンテンツで大きな効果を発揮するフレームワークです。 2） を表示 以下の内容を書き換えて、＜head＞内に記述して下さい。 3） 商品に関する情報を表示 以下の内容を書き換えて、＜head＞内に記述して下さい。 4） 特定のトピックに関する質問と回答の一覧を表示 以下の内容を書き換えて、＜head＞内に記述して下さい。 5） イベントを表示 標準イベントの場合 イベントの開催場所が物理的な場所であり、スケジュールどおりに開催されるイベントのことです。他、オンラインイベントや、オンラインとオフラインが混在したイベント、ステータスが変更されたイベントなど、記載する項目が変わってきます。 以下の内容を書き換えて、＜head＞内に記述して下さい。 eventAttendanceMode オンラインで開催されるイベントかどうかを指定します。 ・OfflineEventAttendanceMode：実際の場所で開催（デフォルト） ・OnlineEventAttendanceMode：オンラインで開催 ・MixedEventAttendanceMode：オフラインとオンラインの両方 例） https://schema. org/ eventStatus イベント日程の変更状態です。 ・EventScheduled：開催予定（デフォルト） ・EventCancelled：イベント中止 ・EventMovedOnline：オンラインに変更 ・EventPostponed：延期（日程未定） ・EventRescheduled：日程変更 例） https://schema. org/ performer. type イベントの出演者の種別です。 @PerformingGroup：団体 @Person：個人 organizer. type イベント主催者の種別です。 @Organization：組織 @Person：個人 構造化データ/リッチリザルトを検証する 構造化データテスト 構造化データが正しく記載されているかどうかは、「 構造化データテストツール 」を使用して確認する事ができます。 主なエラーリストは「 構造化データエラーの一覧 」で確認可能です。 リッチリザルトテスト リッチリザルトテストの対象ページ、記述になっているかは、「 リッチリザルトテスト 」を使用して確認する事ができます。 まとめ 構造化データやAMP（モバイル高速化）への対応は、まだまだこれから少しづつマークアップ方法などがアップデートして行きそうなので、細かなチェックが必要になります。 --- - Published: 2020-09-15 - Modified: 2020-09-15 - URL: https://fastcoding.jp/blog/all/info/can-i-use/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Can I Use （ブラウザの対応表）をブログに埋め込んでみたいと思います。 Web業界では、皆さんが利用されている便利サイトだと思いますが、最新のブラウザの対応状況を、技術系のブログなどに埋め込めたら便利ですね。 目次 Can I Useって何？ 埋め込みタイプ ブログに埋め込む STEP1 埋め込み設定を選択する STEP2 Generateでコードを生成 まとめ Can I Useって何？ CSSのプロパティやhtml5要素の各ブラウザの対応状況が確認できるサービスです。新しい、プロパティはこのサイトで、対応状況を確認します。 Can I Use - https://caniuse. com/ 埋め込みタイプ Can I Use には、３つの埋め込みタイプがあり、用途や状況によって使い分けができます。 Interactive Embed 常に最新を表示。Can I Useそのまま表示します。配色も設定可能。 Live Image JavaScriptがサポートされていない場所で使用する場合は、代わりにライブ画像を使用できます。画像は毎日更新されます。 Static Image 特定の時間の機能サポートをキャプチャしたい場合は、静止画像を作成することもできます。 ブログに埋め込む The CanIUse Embed で、表示したいスクリプトや表示方法などを設定して、育成されたソースコードをサイトに貼り付けするだけです。 The CanIUse Embed - https://caniuse. bitsofco. de/ STEP1 埋め込み設定を選択する ① Choose a Feature 埋め込みたいプロパティ等を選択します。 ② Choose a Feature 先に説明した、埋め込みタイプを選択します。 ③ Select the Browser Versions to Display 対応表の表示範囲を指定します。 ④ Select Embed Type 埋め込み方法の選択です。 STEP2 Generateでコードを生成 Generateをクリックして生成されたコードをブログ内にペーストします。埋め込みコードの下にプレビューが表示されます。 Include Script （Interactive Embed選択時のみ） Interactive Embedを選択した場合にのみ、スクリプトの記述が必要です。 caniuse-embed. min. jsをHTMLの＜head＞～＜/head＞内もしくは＜/body＞の直前に記述します。 Get the Embed Code 表示させたい場所に、コードをペーストします。 まとめ とても、簡単でしたね。環境や条件によって埋め込みタイプが選べるので便利ですね。Interactive Embedのみですが、スクリプトを埋め込みするので、ページスピードには多少影響あるかもしれません。個人的には、LIVE画像が一番便利かな思います。 --- - Published: 2020-09-09 - Modified: 2021-04-06 - URL: https://fastcoding.jp/blog/all/info/web-vitals/ - カテゴリー: React, Vue.js, Web業界の動向・情報, SEO - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 Googleは2020年5月28日、検索ランキングの要因に、Webページの「ユーザーエクスペリエンス」をより重視することを発表しました。これまでの基本指標に加え、「Core Web Vitals（コアウェブバイタル）」を2021年を目処に ランキングの指標に加えるようです。 今回はこの「Core Web Vitals（コアウェブバイタル）」について、まとめてみました。 目次 Core Web Vitals（コアウェブバイタル）とは？ 3つの指標「LCP」「FID」「CLS」とは？ 1) LCP（Largest Contentful Paint） 2) FID（First Input Delay） 3) CLS（Cumulative Layout Shift） 「Core Web Vitals」に対応する3つの支援ツール 1) Google Search Console （グーグルサーチコンソール） 2) Google PageSpeed Insights （ページスピードインサイト） 3) Lighthouse （ライトハウス） まとめ Core Web Vitals（コアウェブバイタル）とは？ Core Web Vitals とは、GoogleがUXの向上を実現するために取り入れた、ユーザーの体験の満足度に繋がる指標のこと。 定義されているのは、以下の３つ ・読み込み時間 ・インタラクティブ性 ・ページ コンテンツの視覚的な安定性 3つの指標「LCP」「FID」「CLS」とは？ 3つの指標とは、読み込み時間を意味するLPC（Largest Contentful Paint）、インタラクティブ性を意味するFDI（First Input Delay）、 ページコンテンツの視覚的な安定性を意味するCLS（Cumulative Layout Shift）です。 Core Web Vitalsの各指標には、明確な推奨値が設けられています。 Googleによると、3指標の基準を全て満たしたページでは読み込みが完了前に離脱するユーザーが24%減少したとのことです。 1) LCP（Largest Contentful Paint） LCP（Largest Contentful Paint）は、ページのメインコンテンツが読み込まれるまでの待機時間を示す指標です。 LCPが良好と判断される基準は、ページを閲覧したユーザーの75パーセンタイル（100サンプル中の上位75番目）が、ページが読み込みを開始してから、2. 5秒以内にページ内のメインコンテンツが読み込まれることが理想とされており、 4. 0秒以上要すると不良と判断されます。 2) FID（First Input Delay） FID（First Input Delay）とは、ユーザーが最初にページ上のボタンやリンクをタップもしくはクリックしてからブラウザが応答できるようになるまでの時間のことです。 FIDにはLCPと同様に75パーセンタイルの基準が設けられており、100ミリ秒未満であることが理想とされ、300ミリ秒を超えると不良となります。 3) CLS（Cumulative Layout Shift） CLS (Cumulative Layout Shift) とは、読み込みに応じて発生するレイアウトのずれのことです。記事が表示されたのに、遅れて突然バナー広告が表示され、閲覧していた記事が下にズレたり、 中断されたりというような経験があるかと思います。 CLSはviewport内で、（影響を受けた面積）×（移動した距離）で表されます。 例えば、図のように中央に広告が出現し、画面の下半分がずれたような場合を仮定すると、影響を受けた面積の割合は0. 5です。出現した広告の大きさがviewportの高さの20%であったとすると、下半分の要素が移動した距離は0. 2となります。 これにより、CLS = 0. 5*0. 2 = 0. 1 と計算されます。 CLSの75パーセンタイルの基準は0. 1未満が良好、0. 1以上0. 25未満が要改善、0. 25以上が不良となっています。 「Core Web Vitals」に対応する3つの支援ツール 1) Google Search Console （グーグルサーチコンソール） Google Serch Console （グーグルサーチコンソール）は、Googleが提供する、サイトの掲載順位を監視、管理、改善するのに役立つ無料解析サービスです。 例えば、検索結果で自サイトのページがどれくらい表示やクリックがされているかなどのデータが見れます。その他、サイトが検索エンジンにどう見られているか、ペナルティを受けているかなども見ることが可能です。 Google Search Console 2) Google PageSpeed Insights （ページスピードインサイト） PageSpeed Insights （ページスピードインサイト）は、Googleが提供する表示速度の最適化に重きを置いたツールで、Webページのコンテンツを解析して、ページの読み込み時間を短くするための方法を提案してくれます。最近リニューアルが行われました。 スコアは0～100 ポイントの範囲で採点され、スコアが大きいほど良好なパフォーマンスになります。85ポイント以上のスコアはパフォーマンスの高いページと評価されるので、できる限り85ポイント以上を目指しましょう。スコアは解析するタイミングによって多少上下するので、時間を分けて複数回測定することで、より偏りの少ない解析結果を得ることができます。 Google Search Console 下記の10項目について、ページがきちんと最適化されているか分析・評価します。 ・画像を最適化する ・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する ・JavaScript を縮小する ・CSS を縮小する ・HTML を縮小する ・リンク先ページのリダイレクトを使用しない ・表示可能コンテンツの優先順位を決定する ・圧縮を有効にする ・ブラウザのキャッシュを活用する ・サーバの応答時間を短縮する こちら、Google PageSpeed Insights対策についてまとめています。 3) Lighthouse （ライトハウス） Lighthouse（ライトハウス）は、Googleが提供しているWebアプリやWebページの評価機能を持つChrome拡張機能です。 「パフォーマンス」「アクセシビリティ」などの項目で特定のWebアプリやWebページをチェックでき、結果を見ながら品質改善につなげてもらうためにGoogleが提供しているものです。 2018年、これに「SEO」の項目が追加され、SEOチェックツールとしても使えるようになりました。 Lighthouse Lighthouseで確認可能なチェック項目は、以下の５つです。 ・Performance（パフォーマンス） ページの読み込みや、ユーザーの操作によって生じるレスポンスの速さなど、主にサイト内のスピードに関する評価が表示されます。 ・ProgressiveWebApp（プログレッシブウェブアプリ） WebサイトをPWA化するうえで必要なチェックリストを基にスコアが付けられます。 ・Accessibility（アクセシビリティ） サイトの訪問者、検索エンジンのロボットに対して最適な作りになっているかの評価が確認できます。 ・Best Practices（ベストパフォーマンス） モバイルに対応したサイトの品質向上に向けたアドバイスなどを確認できます。 ・SEO canonicalが正しく設定されているかなど基本的なSEOの内容を確認できます。 まとめ Core Web Vitalsについてまとめましたが、2021年からは、LCP・FID・CLSという３つの指標をSEOに加え、支援ツールを使って、ユーザーの検索体験（UX）の最適化を進める必要があります。次回は、3つの支援ツールの見方や使い方をまとめてみたいと思います。 --- - Published: 2020-09-01 - Modified: 2021-02-02 - URL: https://fastcoding.jp/blog/all/webdesign/css-diagonal-layout/ - カテゴリー: React, Vue.js, Webデザイン - タグ: CSS, Webデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、CSSで実装可能な、背景を斜めに区切ったレイアウトにする方法をご紹介します。 ちょっとした工夫ですが、結構オシャレになっちゃいます。 目次 斜めデザインを利用したサイト clip-path を利用した方法 border を利用した方法 transform:skew を利用した方法 便利なサイト まとめ 斜めデザインを利用したサイト 背景カラーだけでなく、写真を斜めにしてもオシャレ。単調なサイトに躍動感、スピード感が出ますね。 ①clip-pathを利用した方法 4つの頂点の位置をX軸、Y軸の値で指定する方法です。 ブラウザの対応状況は、以下の通り。IEは相変わらずです。。。 では、実践へ See the Pen ExKgdor by 野田 英里 (@fikgpnyd) on CodePen. ②borderを利用した方法 セクション間に、borderで三角形を作り、擬似要素（before,after）で配置する方法です。 全てのブラウザで対応しています。では、実践へ。 See the Pen border-triangle by 野田 英里 (@fikgpnyd) on CodePen. ③transform:skew を利用した方法 セクション間に、transform: skew を使って平行四辺形を作り、擬似要素（before,after）で配置する方法です。 全てのブラウザで対応しています。では、実践へ。 See the Pen transform:skew by 野田 英里 (@fikgpnyd) on CodePen. 便利なサイト Clippy — CSS clip-path maker その名の通り、図形の座標が簡単にわかる便利なサイトです。 Clippy （https://bennettfeely. com/clippy/） まとめ 「①clip-pathを利用した方法」が一番、簡単で使いやすいかなと思いますが、IEが対応ブラウザの場合は、Cross-browser clip-path polyfillなどを使って対応する必要があります。 --- - Published: 2020-08-16 - Modified: 2020-09-03 - URL: https://fastcoding.jp/blog/all/info/css-flexbox2/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, その他 - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回「Flexbox（フレックスボックス）」を使ったレイアウトの仕方をまとめてみました。今回は、親要素（. flex-container）と子要素（. flex-item）に指定するプロパティのまとめです。 目次 CSS Flexboxの基本の記述 親要素（. flex-container）に指定するプロパティ １. 子要素の並ぶ向き - flex-direction: ○○; ２. 子要素の折り返し - flex-wrap: ○○; ３. 水平方向の揃え - justify-content: ○○; ４. 垂直方向の揃え - align-items: ○○; ５. 複数行にした時の揃え - align-content: ○○; 子要素（. flex-item）に指定するプロパティ １. 順序の指定 - order: ○○; ２. 子要素の横幅が広がる比率 - flex-grow: ○○; ３. 子要素の横幅が縮む比率 - flex-shrink: ○○; ４. 子要素の幅を指定 - flex-shrink: ○○; ５. 子要素の垂直方向の揃え - align-self: ○○; まとめ CSS Flexboxの基本の記述 CSS Flexboxの基本は、 ・コンテナ（親要素） ・アイテム（子要素） という2つの要素によって構成されます。コンテナ（親要素）の中に、アイテム（子要素）を入れてHTMLは完了です。 この場合、 親要素が flex-container 子要素が flex-item になります。プロパティーを設定して、レイアウトを調整していきます。 親要素（. flex-container）に指定するプロパティ １. 子要素の並ぶ向き - flex-direction: ○○; ２. 子要素の折り返し - flex-wrap: ○○; 横並びと折り返しを一括指定 flex-direction と flex-wrap を一括指定できるのが、 flex-flow です。 ３. 水平方向の揃え - justify-content: ○○; ４. 垂直方向の揃え - align-items: ○○; ５. 複数行にした時の揃え - align-content: ○○; 子要素（. flex-item）に指定するプロパティ １. 順序の指定 - order: ○○; 通常はHTMLの順番に並びますが、並ぶ順番を指定することが可能です。マイナスの指定も可能です。 ２. 子要素の横幅が広がる比率 - flex-grow: ○○; 親要素にスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい横幅が伸びるかを指定します。マイナスの指定はできません。 ３. 子要素の横幅が縮む比率 - flex-shrink: ○○; flex-grow と逆です。親要素にスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。マイナスの指定はできません。 ４. 子要素の幅を指定 - flex-basis: ○○; width と同じように子要素の幅の値を指定できます。auto 指定した場合は子要素のコンテンツのサイズが適応されます。 ５. 子要素の垂直方向の揃え - align-self: ○○; 親要素に指定する align-items と全く同じですが、この align-self 指定は、親要素に記述する align-items よりも優先されます。 flexで子要素の指定をまとめる flex-grow、flex-shrink、flex-basisをまとめて指定できます。 . item1 { flex: 0 1 250px; /* flex-grow、flex-shrink、flex-basisの順 */ } まとめ 今回は、「Flexbox（フレックスボックス）」のプロパティをまとめました。慣れるまでは、大変ですがよく使う指定は覚えてしまいましょう！！ --- - Published: 2020-07-28 - Modified: 2020-08-18 - URL: https://fastcoding.jp/blog/all/info/figma2/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他, 便利サービス - タグ: Figma, Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回UIデザインツール「Figma（フィグマ）」の入門編で、料金プランからアカウント登録、初期設定までをまとめました。今回は、実践編です。基本的な操作方法をご紹介します。 目次 ツールバーの操作 レイヤーパネルの操作 ページ・フレーム・オブジェクトの作成 プロトタイプを作成 ファイルの共有とCodeモード まとめ １） ツールバーの操作 画面上部の黒い帯状の部分がツールバーです。 １. サーチ/メニュー 階層タイプの基本メニューが表示されます。 ２. フレーム/スライス フレーム・スライスを作成します。Sketchで言う「Artboard」です。各種デバイスサイズから選ぶこともできます。 ３. シェイプツール 様々な図形やラインの描画ツールです。 ４. ペン/鉛筆ツール ペンは点と点を繋いで線を描画します。Sketchで言う「Vector」です。 鉛筆は、フリーハンドで描画します。Sketchで言う「Pencil」です。 ５. テキスト テキストを入力します。 ６. 手のひらツール 画面の表示位置をちょっとずらしたりする(パンする)時に使うツールです。 ７. コメント 【便利機能】 任意の場所にアンカーを付けて、コメントを残せます。コメントはステータスが付けれるので、複数人でデザイン編集する場合に重宝します。 ８. ファイル名変更 開いているファイル名が表示されます。ファイル名を変更することもできます。 ９. オブジェクト編集 図形をベクトル編集できます。 １０. コンポーネント作成 【便利機能】 コンポーネントとは、デザインで再利用できるUIの部品（パーツ）のことを言います。例えば、ボタン、アイコン、モーダルなどを登録しておくと便利です。 複数の画面に渡って同じパーツがあるとき、元となるコンポーネントを編集すると、全てのパーツに修正内容を反映することができるため、作業の効率化とアプリ全体の統一性を保つことができます。 １１. マスク オブジェクトのシェイプの形状にに合わせて、選択したオブジェクトを切り抜くことができます。 １２. 画像の切り取り 画像の切り取りと、簡単なエフェクトができます。 ２） レイヤーパネルの操作 Figmaの左サイドバーがレイヤーパネルです。 ページ ＞ フレーム ＞ グループ ＞オブジェクト（テキストやシェイプなど） の順でまとまっています。Sketchと一緒ですね。 レイヤーはそれぞれ、専用のアイコンで表示されます。選択すると青くアクティブになります。 レイヤーパネルで表示順を直接変更するか、ショートカットメニューから操作できます。 Bring Forward - 最前面へ Bring Front - ひとつ全面へ Send Backward - 最背面へ Send to Back - ひとつ背面へ ３） ページ・フレーム・オブジェクトの作成 ページを作成する 新規ファイルを作成したら、左サイドバーから「Page1」の部分をクリックして、ページリストを開きます。「page1」を任意の名前に変更します。Pages横のでページを追加できます。または、「page1」のショートカットメニューから「Duplicate Page」で同じページを増やすこともできます。 フレームを作成する Sketchで言う「Artboard」の作成です。上部ツールバーの「Frame」を選択すると、右サイドメニューに各種デバイスが表示されるので、そこから選ぶか、「Slice」で好きなサイズのフレームを作成します。 オブジェクトを作成する フレームまでできたら、あとは、オブジェクトを置いてデザインするだけです。テキストや写真やボタンなどのパーツを作ってデザインしましょう！ ４） プロトタイプを作成 Figmaではプロトタイピング機能を使用して、リンクや画面遷移をつけたプロトタイプを作ることができます。 プロトタイプとは？ Figmaにおけるプロトタイプ機能は、作ったデザインを元に画面遷移やマイクロインタラクションを再現できる機能です。 プロトタイプは、「Interaction」、「Show Prototype Settings」を設定できます。 Interaction 画面遷移時やプルダウンメニューの表示など、アクションやアニメーションなど細かな設定ができます。 Triggers Triggersはクリック・タップ・ホバーなど、どんなアクションをきっかけにページが切り替わるか選択できます。 Action ActionはTriggerが発動した時に行うアクションの種類を指定します。 Animation AnimationはActionがどのように行われるかを指定することができます。 Show Prototype Settings シミュレーションのデバイスの種類・背景色・スタートするフレームなど、プロトタイプをどのように表示するか設定ができます。 ５） ファイルの共有とCodeモード ファイルの共有 最後に、デザインが完了したら、他のユーザーにファイル共有したり、共同作業メンバーとして招待することもできます。 プロジェクト一覧から共有する プロジェクト画面のシェアボタンから共有する Codeモード 右サイドのプロパティパネル上部にある「Code」を選択します。 プルダウンから、「CSS/iOS/Android」を選択、「Code」のタブは、コードが出力されます。「Table」のタブは、選択中のオブジェクトの様々なプロパティが表示されます。 ６） まとめ Figmaを実際に利用しながら、インストールから、実践までをまとめてみましたが、Sketchユーザーにとっては、とても使いやすいツールでした。Sketch自体も、使い方は簡単だったので、ほとんどのデザイナーさんは、ストレスなく導入できると思います。何と言っても、ブラウザで起動（インターネットがあればどこのパソコンからでも作業可能）する事が私にとってはめちゃくちゃ便利です。将来的にパソコンを持ち運びしなくても仕事ができる日がやってくるのではと思っています。 --- - Published: 2020-07-21 - Modified: 2020-09-02 - URL: https://fastcoding.jp/blog/all/info/css-flexbox1/ - カテゴリー: React, Vue.js, Webデザイン, Web業界の動向・情報, その他 - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 CSSでレイアウトを組む時、一昔前はfloatなどを使ってレイアウトを組む方法が一般的でしたが、最近では「Flexbox（フレックスボックス）」を使ってレイアウトする方法がよく使われるようになっています。Can I Useによる、2020年7月現在のFlexboxのブラウザ対応状況は、基本的にどのブラウザも最新バージョンではFlexboxに対応していますが、IEには若干注意が必要です。 Internet Explorerの対応状況 最新のIE 11で、いくつかバグが報告されているため、Flexboxを使用する場合はIEでの動作確認を行った方が良さそうです。いつまでも問題の尽きないブラウザですね。。。 ちなみに、Statcounter global statsで2009年時点での、日本のブラウザーシェアでは1位がIE11で66. 85%を占めていましたが、この11年で、Chromeが48. 66%、IEはなんと5. 37%まで落ちています。世界的にみると、Chromeは65. 47%のシェアを獲得しています。 Source: StatCounter Global Stats - Browser Market Share 目次 CSS Flexboxとは？ CSS Flexboxでデモサイトのレウアウト作成！ １. ベースのナビゲーションを作る ２. ナビゲーションを横並びにする ３. ３つのセクションを追加する ４. 横幅の比率を変更する ５. レスポンシブ対応にする まとめ CSS Flexboxとは？ CSS Flexboxの正式名称は「Flexible Box Layout Module」。その名の通り、「フレキシブルで簡単にレイアウトが組める」と言うもの。CSSにたった一行プロパティを設定するだけで、横並びになり、余白まで調整してくれます。CSS3から実装され、結構前からありましたが、近年、ようやくモダンブラウザでの利用に難がなくなり、実用的なレイアウト作成方法となりました。 CSS Flexboxの基本は、 ・コンテナ（親要素） ・アイテム（子要素） という2つの要素によって構成されます。コンテナ（親要素）の中に、アイテム（子要素）を入れてHTMLは完了です。 このコンテナやアイテムにプロパティーを設定して、レイアウトを調整していきます。それでは、実際にレイアウトを組んでみましょう！ CSS Flexboxでデモサイトのレウアウト作成！ 完成予想図 １. ベースのナビゲーションを作る HTML CSS See the Pen KKVbrPW by 野田 英里 (@fikgpnyd) on CodePen. ２. ナビゲーションを横並びにする メニューアイテムの親要素である . G-nav に display: flex; を加える。 See the Pen parts2 by 野田 英里 (@fikgpnyd) on CodePen. ナビゲーションを中央に表示にする justify-content プロパティーで、要素と要素の間や、表示位置をカスタマイズできます。値を center にすると、要素がセンター表示に並びます。 See the Pen parts3 by 野田 英里 (@fikgpnyd) on CodePen. ３. ３つのセクションを追加する 続いて、ナビゲーションメニューに、コンテンツとして3つの section を追加します。 HMTL CSS See the Pen parts4 by 野田 英里 (@fikgpnyd) on CodePen. 3つのカラムも横並びにする 続いて、ナビゲーションと同様、コンテンツ部分も横並びにするので . main クラスに display: flex; を追加します。 See the Pen parts5 by 野田 英里 (@fikgpnyd) on CodePen. Flexboxは、異なる高さのボックスを、このように自動的に一番長いボックスに合わせて高さを調整してくれます。ここが便利ですね。ボックスの幅がバラバラなので ４. 横幅の比率を変更する ボックスの幅がバラバラなので、flex プロパティーを使って横幅を調整します。flex プロパティーは flex-grow、flex-shrink、flex-basis という3つのプロパティーのショートハンドです。個別に指定することも、省略することも可能です。 等間隔にしてみる flex-growを利用します。今回は、ショートハンドで flex: 1; と指定します。 IE11にはショートハンドではなく flex-grow: 1; と指定します。 See the Pen parts6 by 野田 英里 (@fikgpnyd) on CodePen. 真ん中のセクションのみ倍の幅にしてみる 等間隔だと、真ん中のセクションだけ文字が長いのでバランスが悪いです。そこで、真ん中のセクションだけ幅を２倍にして、バランスを取ります。 See the Pen parts7 by 野田 英里 (@fikgpnyd) on CodePen. ５. レスポンシブ対応にする 最後に、モバイルでの閲覧を考慮し、メディアクエリーを使ってレスポンシブレイアウトに対応させます。 要素の配置方向を指定するプロパティー flex-direction を利用します。。デフォルト値は row で、左から右の横並びが指定されています。今回は column を使って横幅が800px以下になったら横並びから縦並びに変更する指定をします。 これで完成です。 まとめ 今回は、「Flexbox（フレックスボックス）」を使ってレイアウトを実践してみました。2020年に入って、モダンブラウザの対応状況も改善されたので、更に便利に使えるようになりましたね。 --- - Published: 2020-07-15 - Modified: 2020-08-20 - URL: https://fastcoding.jp/blog/all/info/photo-sozai2020/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他, 便利サービス - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザインやモックアップに欠かせない写真素材。どんな写真を使うかでデザインのイメージが大きく変わりますが、今回は色々な写真素材サイトの中から、私が実際に利用している無料のサイトを厳選してみました。 厳選ポイント 今回は、以下5つのポイントで厳選しました。 ・無料ダウンロード ・商用利用可能 ・著作権表記不要 ・画像の解像度 ・写真点数 目次 無料写真素材を使用する時の注意点 オススメ無料写真素材サイト 1. pixabay 2. Kaboompics 3. BURST 4. StockSnap. io 5. Reshot 6. Foodiesfeed まとめ 無料写真素材を使用する時の注意点 無料ダウンロード、著作権表記不要、商用利用可能の場合でも、下記の内容に関しては気をつけて利用しましょう。 ＜注意点＞ ・再配布の禁止 ・販売の禁止 ・公序良俗に反する素材の禁止 無料写真素材を利用する場合は、必ず配布元のサイトに記載のあるライセンスを確認して使用するようにしましょう。 オススメ無料写真素材サイト pixabay Pixabayは、「CC0」の写真のみを集めた海外の無料写真素材サイトです。160万枚以上の無料写真素材、ベクターイメージ、イラスト、動画をダウンロードすることができます。海外のサイトですが、日本語にも対応しており日本語検索も可能ですが、「打ち合わせ」よりは、「会議」もしくは「meeting」と検索した方が、検索結果が良くなるようです。 提供されている素材は基本的に著作権表記無しで利用可能ですが、一部の写真でライセンスが異なるようです。ダウンロードページの右側に「Pixabay License」と表示されていれば著作権表記不要の素材です。ダウンロードの際は注意して下さい。 OOCとは？ 「CC0」とは、著作権の意思表示「クリエイティブ・コモンズ・ライセンス(CCライセンス)」の1つです。 CCライセンスの中でも、「CC0」はすべて個人利用・商用利用可能で加工・編集も自由に行うことができるというものです。 pixabay 素材 写真・イラスト・ベクトル・動画 ダウンロード 無料 会員登録 不要 著作権表記 不要 商用利用 OK pixabay 「Tokyo」 で検索してみた結果 Kaboompics 写真のメインカラーとカテゴリーで検索ができます。カテゴリー検索をすると、複数の小テーマが表示されます。１テーマで角度や配置を変えた複数の写真があるので似た写真がたくさん欲しい時は便利です。写真はオシャレな雰囲気のものが多いので、そのまま加工なしで使えます。撮影の参考にもなります。 ダウンロードは、サイズを選ぶか、任意のサイズを入力してダウンロードする事もできるので、小さな写真で良い場合、後で加工が不要なのでとても便利です。 Kaboompics 素材 写真 ダウンロード 無料 会員登録 不要 著作権表記 不要 商用利用 OK Kaboompics カテゴリー 「ANIMALS」 で検索してみた結果 BURST BURSTは、オンラインストアの運営を行う Shopify という企業が運営している写真素材サイトです。BURSTで扱われている素材は5600x3700px 以上の高画質な写真ばかりなのですが、それが「CC0」で使えます。 BURST 素材 写真 ダウンロード 無料 会員登録 不要 著作権表記 不要 商用利用 OK BURST 「Wedding」で検索してみた結果 StockSnap. io StockSnap. ioも、「CC0」で利用可能です。検索は、更新日時、人気トレンド、閲覧数、ダウンロード数別に並び替えることができるので、使いやすいサイトです。 StockSnap. io 素材 写真 ダウンロード 無料 会員登録 不要 著作権表記 不要 商用利用 OK StockSnap. io 「Asia」で検索してみた結果 Reshot 個性的でオシャレな写真が多いイメージです。 Reshot 素材 写真 ダウンロード 無料 会員登録 不要 著作権表記 不要 商用利用 OK Reshot 「Orange」で検索してみた結果 Foodiesfeed タイトル通り、食品を専門とした無料写真素材サイトです。飲食店のWebサイトや広告などに使うには重宝します。配布されている写真はすべて高画質で6000×4000px大きなサイズでダウンロードすることができます。 Foodiesfeed 素材 料理、果物、コーヒなど食材写真 ダウンロード 無料 会員登録 不要 著作権表記 不要 商用利用 OK Foodiesfeed 「Fish」で検索してみた結果 まとめ 海外のサイトはクウォリティが高い写真が多いですね。しかも、加工してある写真がほとんどです。 日本の無料写真素材サイトもここまでのレベルで使えるといいのですが、日本だとやはり有料サイトになりますね。 --- - Published: 2020-06-29 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/figma1/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他, 便利サービス - タグ: Figma, Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 普段デザインでは、Sketchを主に利用している私ですが、同じくUIデザインツール「Figma（フォグマ）」を実はまだ触った事がありません。そこで、更なるスキルアップの為に、Figmaを導入する事にしました。今回は、そもそもFigmaで何ができるのか、その特徴や導入の入門編をまとめてみました。 目次 Figma（フィグマ）とは Figmaの料金プラン アカウントの登録と初期設定 Figmaのファイル管理 Sketchファイルのインポート方法 まとめ １） Figma（フィグマ）とは Figmaは2016年9月にリリースされたUIデザインツールです。Sketchの後方に開発されたので、を利用しているデザイナーさんであれば、感覚的に使え導入しやすいツールだと思います。 最大の特徴は、1つのファイルを複数人で編集することができるリアルタイムコラボレーションです。Web上で利用できる為、アカウントさえあれば誰でもどのパソコンからでもブラウザで起動してデザインを閲覧、編集、コメントすることができます。また、ファイルの保存先もクラウドなので、デザインしたパソコンじゃなくても、外出先の別のパソコンからでもファイルを開く事ができます。 オンラインで同時にプロジェクトを進行できるので、現代の働き方にマッチしたアプリとして人気になるのも頷けますね。 ＜Figmaの特徴まとめ＞ ・複数人で共同編集ができる ・Webブラウザ上で作業（デザイン）ができる ・個人、少人数なら無料で使える （複数人で利用する場合は有料プランあり） ・gitのデザイン版のようにバージョン管理できる ・Sketchファイルをインポートできる ・インタフェースは英語 Sketchのような使用感 Sketchの後発のツールだけあって、効率的にUIデザインができる機能を備えています。Sketchでもお馴染みのシンボル機能（Figmaではコンポーネントと呼ぶ）は、ボタンやアイコンなどの繰り返し使うようなパーツはグループ化して一括管理することができます。Sketchのようにシンボルのページを自動育成してくれないので、専用のページを設けて置くと作業しやすいです。 その他、よく使うスタイルをまとめたり、ライブラリ公開でチーム内であればどのプロジェクトでも共通のデザインデータを利用可能です。（ライブラリは有料機能です。） このように、FigmaはSketchを使っているデザイナーであれば、とても使いやすいツールです。 --- - Published: 2020-06-12 - Modified: 2020-08-20 - URL: https://fastcoding.jp/blog/all/info/neumorphism/ - カテゴリー: Webデザイン, Web業界の動向・情報, その他 - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 昨年末から新しいWebデザインのトレンドとして注目されている「ニューモーフィズム（Neumorphism）」 今回は、ニューモーフィズムの特徴とデザインの仕方をまとめてみました。 目次 ニューモーフィズムとは？ ニューモーフィズムのルール Sketchでデザインしてみる ニューモーフィズムのメリットとデメリット ニューモーフィズムを使ったデザイン コピペで使える無料オンラインサービス まとめ １） ニューモーフィズムとは？ ニューモーフィズム（Neumorphism）とは、昔流行った、立体的で質感のあるリアルなデザイン「スキューモーフィズム」とシンプルでミニマムな「フラットデザイン」や「マテリアルデザイン」を組み合わせた新しいスタイルのデザイン手法です。 New（新しい）＋Skeumorphism（スキューモーフィズム） ＝Neumorphism（ニューモーフィズム） ２） ニューモーフィズムのルール ニューモーフィズムは、オブジェクトの影に明暗2色のドロップシャドウを使い、浮き上がったり、くぼんでいるように見せるのが特徴です。 オブジェクトは丸みをつけることで、滑らかな質感も与えています。 画像のように、マテリアルデザインは要素を重ねて奥行きを表現していますが、ニューモーフィズムは凹凸によって奥行きを表現することで、より現実的な表現になっています。 ３） Sketchでデザインしてみる では実際に、浮き上がったボタンをSketchで制作してみましょう！ Step1 背景色とボタンのカラーを合わせる ボタンの形はラウンドにします。 １枚の紙からボタンの凹凸を作るので、背景とボタンのカラーは同じ色にしておきます。 ＜背景とボタンのカラー＞ ＃EBECF0 ＊ボタン枠の青いハイライトは無視してください。 Step2 ２つの影を作る 右メニューのSTYLEで、Shadowsを２つ設定します。 一つ目は、ボタンカラーより暗いカラーにしますが、この時に色味は変えないでください。 ＜影になる部分：右下＞ #A6ABBD X 10 Y 10 Blur 20 ＜光が当たる部分：左上＞ #ffffff X -10 Y -10 Blur 20 Step3 ボタンのカラーにグラデーションをプラス 最後にボタンに、影が馴染むように、若干のグラデーションを加えます。左上が白、右下が黒にして、Opacityを40%にします。 これで、文字を入れたら完成です。 いかがでしょうか？ SketchのSTYLEを追加しただけで、浮き上がったボタンが作れました。 他、イラストレーターやフォトショップでも作れますが、手順だけでいうと、Sketchは圧倒的に早く作れちゃいます。 ４） ニューモーフィズムのメリットとデメリット メリット ・日本ではまだあまり見かけない、新鮮で近代的なデザインが目を引く ・ベースが一色なので、ダークテーマへの切り替えがし易い。 ニューモーフィズムは、少ない配色でシンプルでありながら、凹凸によってできる滑らかな奥行きが、見る人に新鮮な印象を与えます。まさに、そのトレンドである事、新しさが、ニューモーフィズムを取り入れる最大のメリットと言えます。 デメリット ・UIデザインとしては、わかりずらい。 ・効率的なCSSの記述ができない デメリットとしては、ユーザビリティの観点で見た時に、背景色とボタンが同色である事が多いので、これではコントラストが弱く境界線が不明確で、パッと見では操作がしずらく、特にボタンなどの場合「ON/OFF」が認識しにくくなってしまいます。 ５） ニューモーフィズムを使ったデザイン Dribbbleでニューモーフィズムを取り入れたデザインはたくさん見つけることができます。 Audiobook App - Neumorphism style ダークテーマで綺麗にまとめています。UIも分かりやすくされています。 Neumorphic UI Elements UIデザインでよく使われるようなパーツデザインです。 Neumoephic-shoping-shoes シンプルなサイトは、ニューモーフィズムデザインが映えますね。 ６） コピペで使える無料オンラインサービス Neumorphism. io （Generate Soft-UI CSS code） サイズやカラーを変更して、お好みのボタンを作れます。CSSがコピペで使えるのでとても便利なサイトです。 ７） まとめ 今回は、ニューモーフィズムデザインをまとめてみましたが、日本ではまだまだ見かけないデザイン手法かもしれませんが、上手く取り入れたら素敵なサイトになりそうですね。 --- - Published: 2020-04-13 - Modified: 2020-08-18 - URL: https://fastcoding.jp/blog/all/info/adobe-capture/ - カテゴリー: Webデザイン, Web業界の動向・情報, 便利サービス - タグ: Web業界の動向, アプリ, デザイン, 便利サービス こんにちは。FASTCODINGデザイナーの七転び八重子です。 デザイナーのみなさん、手書きのイラストや写真を編集・加工する際は、どんなツールを利用していますか？ 私の場合は、スキャンしてパソコンに取り込み、Illustratorのトレースを使ってベクトルデータにして編集していました。これ、結構時間もかかるし大変なんですよね。。。 そこで今回、ご紹介するのは、そんな作業を格段に楽にしてくれる「Adobe Capture」です。 このアプリを利用すれば、イラストの取り込みが格段に早くなるだけでなく、写真をいい感じのイラストにすることも簡単です。 目次 Adobe Captureとは？ これだけ覚えておけば良い便利な機能3つ 「シェイプ機能」 イラストを自由に編集 「カラー機能」 写真からカラーパレットを作る 「パターン機能」 取り込んだイラストでパターンを作る まとめ Adobe Captureとは？ Adobe社が配布しているiPhone・iPad・Android端末用アプリです。無料で利用することができます。 アプリでできるコト！ ・写真やイラストなどをベクター素材に変換することができる。 ・写真の色を抽出して、カラーパレットやグラデーションを作れる。 ・取り込んだイラストからパターンを作れる。 専用アプリから写真や手書きのイラストを撮影し、簡単な編集ができます。できたデータをライブラリに出したら、Adobe Creative Cloudの機能を使用してIllustrator・Photoshopで開けますので、そのまま作業することができます。すでにベクターデータとして取り込まれているので編集作業はとても簡単です。 アプリをダウンロードしましょう！ ・ iPhoneからダウンロード ・ Androidからダウンロード これだけ覚えておけば良い便利な機能3つ １）「シェイプ機能」イラストを自由に編集 シェイプ機能を使用して、手書きのイラストや素材、写真などを撮影して編集します。 トレース、スムージングなどで撮影したイラストをイメージ通りに調整して、保存するとそのままIllustrator・Photoshopで開き編集が行えます。 STEP1 調整して撮影 アプリを立ち上げて、取り込みたいイラストや写真をカメラで撮影します。 カラー・モノクロが選べます。また、色合いやコントラストを調整できるので、イメージ通りに調整してから撮影（決定）します。 ＊スマートフォンのカメラロール一覧やCreative Cloud、Stockなどから写真やイラスト素材を選択することもできます。 STEP2 トレースやスムージングでイメージ通りに調整 STEP1で撮影すると、このような編集可能な画面に切り替わります。トレース、不要なモノの削除、線の追加など、簡単な編集が可能です。 STEP3 ライブラリに保存 保存すると、IllustratorやPhotoshopで開いて作業することができます。 ２）「カラー機能」写真からカラーパレットを作る STEP1 カラーを取り込み 画面上部のメニューで、単色のカラーかグラデーションか選択できます。 自動的に、抽出ポイントが選定されますが、ポイントを動かすことができるので、抽出したい場所が任意で選べます。 STEP2 カラーを調整する RBGの値を表示してくれるので、ここで細かな調整が可能です。 STEP３ ライブラリに保存 ３）「パターン機能」取り込んだイラストでパターンを作る オリジナルのパターン作りに！写真からパターン作れるので、とても楽しい機能です。 STEP1 パターン化したイメージの取り込み 仮にマウスを取り込んでみました。こんな風に水玉模様のパターンに変身です。 STEP2 角度を調整する イメージの角度を変えて、パターンの形を調整します。画像のように、水玉チックに調整してみました。 STEP３ ライブラリに保存 まとめ このアプリは、本当にかなり重宝しています。取り込みのデータに、多少誤差？と言いますか、調整した状態が反映されてないケースが見受けられましたが許容範囲です。使用みて思いましたが、写真データをいい感じのイラストに起こすのに最高のツールです。例えば、魚の写真を取り込むと、魚拓がすぐに作れちゃいます。笑 --- - Published: 2020-04-01 - Modified: 2024-10-31 - URL: https://fastcoding.jp/blog/all/info/2020seo/ - カテゴリー: Webデザイン, Web業界の動向・情報, SEO こんにちは。FASTCODINGデザイナーの七転び八重子です。 2019年、Goole Chromeが検索アルゴリズムのアップデート（BERT）を行いました。これにより検索結果の精度がより向上しました。 Googleの検索精度は年々進化しています。それに伴い、SEOはどう変わったのでしょうか？数年前まで、SEO対策は専門の業者に依頼していましたが、最近はSEOはやらなくてもいいのではないかと放置されてしまう会社も増えてきたように思います。そんな、SEOの動向とこれから抑えて置きたいポイントをまとめてみました。 目次 SEO業者が減ってきている！？ Googleのスパム対策の強化とアルゴリズム改善 外部のリンクを集めれば良いというSEO対策が通用しなくなった？ Googleが推奨するホワイトハットSEO 2020年SEO対策でするべき事 ロボットに好かれるコーディングで作る CTA（Call To Action）の工夫とテスト より良いコンテンツを作る ページスピードを改善する まとめ SEO業者が減ってきている！？ 2000年～2010年頃、SEO対策といえば外部リンク施策が中心でした。多くのSEO会社が外部施策を中心にSEO対策を行っていましたし、いかに効果の高い外部施策が打てるかがSEO会社の評価でもありました。ですが、検索順位を決定するロボット（アルゴリズム）の穴を突いて不正に検索順位を上昇させるため、「ブラックハットSEO」や「SEOスパム」などと呼ばれる手法が横行しました。 以前はこうしたスパム的なSEO対策が、比較的かんたんに通用していました。結果、低品質のWebサイトでも強引に上位に表示されました。 しかし、このような好ましくないSEO対策に対処するために、検索エンジン側もさまざまな取り組みを行っています。 その結果、スパムに近いSEO対策を行っていたSEO会社は年々減少を続けています。 １） Googleのスパム対策の強化とアルゴリズム改善 2011年、低品質のWebサイトを上位に表示されにくくするパンダアップデート。続けて、2012年、スパム行為などの不正のあるWebサイトの表示順位を下げるペンギンアップデートが発表されました。また、同年に登場したWebサイト管理サービス「Google ウェブマスターツール(現Google Search Console)」では、スパム行為に対する警告が発信され、検索エンジンからさまざまなペナルティが課せられるようになっています。 それまでグレーだった外部リンク施策ですが、これで完全にブラックな施策になってしまったということでしょうか・・・ ２） 外部のリンクを集めれば良いというSEO対策が通用しなくなった？ Googleは公式に検索順位に重要な要因を外部対策である被リンクと発表しています。 つまり、現在も「リンク施策」は有効なのです。 ここで、気をつけるべきポイントが、 「質の高い優良なサイトからのリンクのみを集めることです。」 良質なサイトとは、googleから評価されているサイトのことで、内部対策や外部対策などの基本的なことをきちんと行っている外部リンクです。 では、良質なサイトからリンクを集めるにはどうしたら良いでしょうか？SEO会社に依頼するもの一つの方法ですが、先ずは「より良いコンテンツを地道に作る」必要があります。 良いコンテンツのあるサイトは、関連サイトやブログからリンクを貼ってもらえやすくなります。 ３） Googleが推奨するホワイトハットSEO 「ホワイトハットSEO」とは、検索エンジンのガイドラインに沿って、サイトを最適化し、上位表示するための施策になります。 ・Google検索エンジン最適化スターターガイド Googleが目指すべきユーザーの利便性を考えた結果となるように設計されたガイドラインで、適切な施策を行う際の重要なポイントがまとめてあります。 ・ウェブマスター向けガイドライン（品質に関するガイドライン） この中ではブラックハットSEOに当てはまるような施策について使用しないように注意喚起が記載されています。 ・コンテンツの自動生成 ・リンクプログラムへの参加 ・クローキング ・不正なリダイレクト ・隠しテキストや隠しリンク ・誘導ページ ・十分な付加価値のないアフィリエイトサイト ・オリジナルのコンテンツがほとんどまたはまったく存在しないページの作成 ・ページへのコンテンツに関係のないキーワードの詰め込み ・フィッシング、ウイルス、トロイの木馬、その他のマルウェアのインストールといった悪意のある動作を伴うページの作成 ・リッチスニペットマークアップの悪用 ・Googleへの自動化されたクエリの送信 などが挙げられています。 2020年SEO対策でするべき事 SEOと言っても、単に検索順位を上げることだけが目的ではありません。 検索順位を上げ、ネット集客を最大化するのはもちろんですが、サイトを運営する上で重要な指標のひとつが、「コンバージョン率」です。商品・サービスの購入やお問い合わせなど、Webサイトの目標であるコンバージョンを達成することが最終的な目的です。 検索結果ページでWebサイトを上位に表示させることは、あくまで目的に至るまでのプロセスでしかありません。 本当のSEO対策は、検索結果ページでの上位表示、良質なコンテンツから、CTA（Call To Action）の工夫に至るまでのサイト全体の最適化を行うことです。 １） ロボットに好かれるコーディングで作る SEO対策で、外部リンクやコンテンツを増やしても、検索エンジンのロボットに適切に伝わらないと、効果も半減してしまいます。 コンテンツをロボットが読み易くする為に、セマンティックコーディングや構造化データがあります。 セマンティックコーディング セマンティックとは、ウェブの情報を、コンピューター自身が理解しやすいように、HTMLタグに意味を持たせることです。セマンティックコーディングされたHTMLの「わかりやすさ」は、例えばCSSや画像表示を無効化すると一目瞭然です。Webサイトが見出し、小見出し、本文とその付録、といった形で定義されていることがわかります。見た目の装飾は一切ありませんが、検索エンジンはこの状態のWebページを見ています。ここから見出しや要約文、ナビゲーション情報などを抜き出して検索結果に表示をしているわけです。 構造化データ HTML5によるセマンティックコーディングの導入により、検索エンジンは今まで以上にサイトコンテンツを知ることができるようになりました。しかしながらまだ完全とは言えません。HTMLを用いて個々の文や節に意味づけをすることはできますが、ページ全体を要約し、何のトピックについて書かれているかを明らかにすることは困難です。そこで考え出されたのが構造化データです。以前よりmetaタグというものがありましたが、metaというのは、その情報に関する補足情報を意味します。これを用いて、例えばFacebookでシェアされたときの画像はこれにする、このページの作者は誰々である等の、Webページに対する補足情報を追加しようというのが構造化データです。 FASTCODINGでは、上記、セマンティックコーディングや構造化データでの「SEOに強いHTMLコーディング」を提供しております。最近は、コーディングの見直し案件も増えています。 ２） CTA（Call To Action）の工夫とテスト CTAとは「Call To Action」の略であり、サイトに訪れたユーザーに「購入」や「資料請求」「お問い合わせ」など、何かしらの行動を起こしてもらうための要素です。CTAを工夫することで、より高いコンバージョン率を狙うことができます。 CTAは設置する場所を工夫する ・ヘッダー/フッター/サイドバー ・コンテンツ（記事）の途中や直後 ・LPのファーストビュー、コンテンツとコンテンツの間 選択肢を減らす 「資料請求」が種類別に5つあっても、ボタンは１個。選択肢が増えるとユーザーが迷います。 テキストを工夫する ただの「お問い合わせ」より、「〇〇をいますぐ解決！」など、ユーザーの求めるテキストにすると効果的です。 ボタンを目立たせる ボタンはサイトのベースカラーではなく、アクセントカラーにする、マウスオーバーでサイズやカラーを変えるなど、目立つように工夫します。 ABテストをする 赤いボタンと青いボタン、テキストの違いなどでクリック率がどのくらい変化するかテストしながら、改善していくことでコンバージョンを上げることができます。 3） より良いコンテンツを作り続ける 時間はかかりますが、よりユーザーが求める情報を発信していく他ありません。 コンテンツの情報量ももちろんですが、ブログやニュース記事などで、常に新しい情報を発信していくことも効果的です。 小手先のSEO対策では、持続性がありませんし、仮に検索上位に表示できても、コンテンツに魅力が無ければ、ユーザーは離脱してしまいます。 4） ページスピードを改善する Googleでは公式ブログで、ページの表示速度はSEOランキングに影響を与えることを明言しており、重要な施策です。 PageSpeed Insights でスピードテストができます。ウェブページのURLを入力するだけで簡単に診断してくれます。 ページスピードを改善する対策の一例 ・CSS の最小化 ・適切なサイズの画像 ・テキスト圧縮の有効化 ・複数ページリダイレクトの回避 など、対策項目はたくさんあります。 FASTCODINGでは、ページスピード対策の施策を行なっております。こちらまで「ページスピード対策！貴社のサイトを超高速にします」 スピードテストの指標の見方も紹介しています。 まとめ SEO対策というと、最近ではコンテンツ重視の記事をよく見ますが、外部リンクもコンテンツと同様に重要な要素であることが分かりました。とはいえ、優良サイトからのリンクを集めるにはやはり、地道に良いサイトを作る以外に無いという事でしょうか。 --- - Published: 2020-03-16 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/google-mobile-first-index/ - カテゴリー: Web業界の動向・情報, SEO - タグ: SEO対策, Web業界の動向 こんにちは。FASTCODINGデザイナーの七転び八重子です。 2020年3月5日、Googleは公式ブログにて、2020年9月から全Webサイトを「モバイルファーストインデックス（MFI：Mobile First Indexing）」に移行することを発表しました。 以下公式ブログ https://webmasters. googleblog. com/2020/03/announcing-mobile-first-indexing-for. html 今回は、MFIに変わると何がどうなるのか？対処法などをまとめたいと思います。 目次 モバイルファーストインデックス（MFI）とは？ MFI移行への背景と経緯 MFI移行によって影響を受けるWebサイト 対処法 １） レスポンシブデザイン対応 ２） コンテンツの見直し ３） ページスピード対策 まとめ モバイルファーストインデックス（MFI）とは？ モバイルファーストインデックス（MFI：Mobile First Indexing）とは、Googleのインデックスする基準がモバイルサイトになる、ということです。 つまり、Google検索結果の表示基準が変わるのでSEOや検索結果に大きな影響があります。 これまで：モバイルファーストインデックス移行前 PCサイトのコンテンツ評価を検索結果のランキングに使用。 モバイルからの検索も、同様にPCサイトの評価を基準にして表示されていました。 これから：モバイルファーストインデックス移行後 モバイルサイトのコンテンツ評価を検索結果のランキングに使用。 デスクトップからの検索も、同様にモバイルサイトの評価を基準にして表示します。 このように、モバイルサイトが評価のメインとなり、PCサイトがサブになり、逆転するわけですが、PCサイトが全くインデックスされないという訳ではありません。 MFI移行への背景 時代はモバイルファーストへ 近年、スマートフォンの普及に伴い、どこからでも手軽にアクセスできるモバイルでの検索が増えています。 2015年5月15日に、Googleが以下のとおり公式に発言しています。 In fact, more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan. アメリカや日本を含む10か国においては、モバイルデバイスからのGoogle検索が、コンピュータからの検索より多く行われています。 （公式ブログ） そして、現在は全世界でモバイルからの検索数がデスクトップからの検索を上回っています。 MFI移行までの経緯 移行までの経緯をまとめて見ました。 ・２０１５年 モバイルからの検索がデスクトップを上回る ・２０１６年 Googleモバイルファーストインデックス計画を発表（公式ブログ） ・２０１７年 １２月一部のサイトから展開を開始 ・２０１８年 半数以上のサイトに展開 ・２０２０年 ９月全Webサイト完全移行！ ２０１８年の時点で、７０％のWebサイトがMFIへ移行済みとされていますが、これらのサイトはGoogleが移行してもランキングに影響がない確認を行ったサイトです。 つまり、これからの移行では、既存のサイトにも大きな影響が出る可能性があるということです！ MFI移行によって影響を受けるWebサイト ・同じURLだがPCサイトとモバイルサイトを動的配信している 動的な配信とは、ページ（モバイル、タブレット、パソコン）をリクエストしたユーザー エージェントに応じて、同じ URL で異なる HTML（および CSS）をサーバーから返すようにサイトを設定する方法です。 ・そもそもモバイルサイトが無い／あるけどコンテンツが少ない モバイルファーストインデックスになることで、「モバイル」のページを基準に評価されます。モバイルページが無い、もしくはコンテンツが少ないことで、今までの検索結果順位をキープできなくなる可能性があります。 対処法 １） PCサイトのレスポンシブ化 レスポンシブ化とは、デバイスの画面サイズに依存しないWebサイトを構築する手法です。パソコン用に作られたサイトをレスポンシブ化して、スマートフォンでもきれいに見えるようにすることで、モバイルファーストインデックスに対応します。この手法は、Googleも推奨しています。 また昔はPC用とスマホ用の2つのサイトを構築していましたが、レスポンシブデザインだと、同じHTMLでデザインはデバイス毎い最適化されるので、管理がとても楽になります。 ファストコーディングでは、スマートフォン用のデザインが無くても、既存のPCサイトをレスポンシブ化させることも可能です。是非お問い合わせください。 ２） コンテンツの見直し PCサイトとモバイルサイトでコンテンツ量が違う場合、（モバイルは画面サイズが小さいので非表示にしている。等）は、コンテンツを同等にするなど見直しが必要です。 モバイルがインデックスの要になるので、モバイルのコンテンツが少ない場合は検索結果に影響が出てしまいます。 ３） ページスピード対策 ますます大きな割合を占めるようになったモバイルに、Googleが対応し始めたことを示していたのは、モバイルファーストインデックスだけではありません。 ２０１８年ページの読み込み速度を、モバイル検索結果の表示順位を決める際の要素として追加しました。さらに同年７月からは、読み込みが遅いページの表示順位をあえて下げることにも踏み切ったのです。 ファストコーディングでも、ページスピード対策へのお問い合わせが増えています。 ファストコーディングではPageSpeed Insights対策の経験豊富なディレクターが多数在籍しております。新規サイトはもちろん、既存サイトも対応可能です。 まとめ 現在構築中のサイトは、ほぼレスポンシブデザインに対応しているかと思いますが、更新していない古いままのサイトの場合は早急に対応する必要があります。 ファストコーディングでは、デザインからコーディング、ページスピード対策やSEO対策までしっかりと考慮したWebサイトの制作が可能です。 この機会にぜひお問い合わせください。 SEOに強いコーディング代行はFASTCODING --- - Published: 2020-03-03 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/flash-animation/ - カテゴリー: React, Vue.js, Web業界の動向・情報 - タグ: Flash, JavaScript, Web業界の動向, フロントエンド こんにちは。FASTCODINGデザイナーの七転び八重子です。 Adobe Flashがいよいよ、2020年末でサポート終了となります。 今回は、Flash終了に伴うリスクとHTML5への移行方法をまとめてみました。 目次 Flash終了の要因とリスク １） セキュリティリスク ２） スマートフォンの普及 ３） タッチスクリーンに対応できない ４） 各ブラウザもサポート終了へ FlashからHTML5やJavaScriptへ移行する方法 １） HTML5を使う方法 ２） CSS3を使う方法 ３） JavaScriptを使う方法 Flashの移行の流れ １） アニメーションや機能の定義 ２） 実装方法の決定 ３） 実装とテスト まとめ Flash終了の要因とリスク １） セキュリティリスク 2007年にスティーブ・ジョブズが発表した文書「Thoughts on Flash」の中で、Flashのセキュリティの脆弱性が指摘されています。結果としてiPhoneにFlashが搭載されることはありませんでした。その後Adobeは2011年モバイル向けのFlashの開発終了宣言をするに至っています。 いますぐに、Flashによってシステムが破壊されたり、ローカルファイルに保存した情報が盗まれる可能性は低いですが、Flash PlayerやPDFに埋め込まれたFlashを再生できるAdobe Readerにはシステムのクラッシュや悪意のあるプログラムの実行を許す脆弱性がいくつか発見されています。 2014年にはFlashを利用したWebサイトが80%ほどあり、広く利用されていたことから、ハッカーから狙われる標的となり強く問題視されるようになりました。 そして2020年の今年末、いよいよAdobeによるFlash Player（Flashをブラウザ上で再生するプラグイン）のサポートが完全に終了することから、今後ますますFlashを狙った攻撃は増加、その被害も増加していくことが想像できます。 2） スマートフォンの普及 下記の統計のように、家でしか使えないパソコンより、外出先でも手軽に使えるスマートフォンが普及したことにより、外出先でお店を検索したりWebサイトを閲覧する機会が増えました。ですが、iPhoneやタブレットは最初からFlashに対応しておらず、Flashコンテンツが埋め込まれている部分は余白さえ表示されません。これでは、ユーザーにとって意味の通じないページになり、大きな機会損失となっている可能性があります。 2013年から2019年のスマホ利用率・年代別トピック ・20代：2013年66. 2％ → 2019年91. 0％ ・30代：2013年54. 7％ → 2019年90. 5％ ・40代：2013年43. 8％ → 2019年87. 5％ ・60代：2013年17. 9％ → 2019年68. 5％ 参考サイト：Marketing Research Campより ３） タッチスクリーンに対応できない 先ほどのスマートフォンの普及によって、タッチスクリーンが支流になりましたが、Flashは、タッチスクリーンに対応できません。 Flashコンテンツでは「マウスオーバー」と「クリック」を別々の動作として認識していることが多いですが、タッチスクリーンでは「マウスオーバー」に対する動作は「指がタッチスクリーンを触っていない」状態であり、このため、例えば動画プレイヤーでマウスオーバーによってコントロールメニューを表示させるような挙動をそのままタッチスクリーンで実現することができません。 ４） 各ブラウザもサポート終了へ Flash終了の発表を受けて、各ブラウザもFlashへの対応を進めています。 ・Google chrome：2020年末サポート終了。 ・Mozilla（Firefox）：2019年デフォルトで無効化。2020年にはFlashの機能削除。 ・Microsoft（IE/Edge）：2019年中にFlashをデフォルトで無効化、2020年末Flash機能を削除。 FlashからHTML5やJavaScriptへ移行する方法 １） HTML5を使う方法 アニメーションを動画で制作し、＜video＞タグで表示する方法です。 Flashを利用しなければ動画を利用できなかったHTML4の欠点ともいえる部分を補えるようになったのが現在の標準技術である「HTML5」です。 HTMLはタグと呼ばれるものを利用してWebサイトを構築するわけですが、HTML5だと＜video＞や＜audio＞といったタグを利用することにより、動画や音声を埋め込むことが簡単にできるようになりました。 ２） CSS3を使う方法 CSS3からアニメーションを扱うためのプロパティ 「transition」 と 「animation」 が増えました。 シンプルなアニメーションには「transition」本格的なアニメーションは「animation」 「transition」も「animation」も共にCSSのプロパティで動作を決めることが出来ます。 「transition」は、「animation」に比べると比較的簡単な（に）アニメーションを作ることが出来るプロパティです。 たとえばこういったボタンのエフェクトは以前はJavaScriptが必要でしたが、CSSだけで作成ができます。 マウスカーソルをのせてください! 「animation」もCSSを用いてアニメーションを作成するためのプロパティです。「transition」に比べれば もう少し細かく動作を指定することが出来ます。 キーフレームという考え方を利用し、時間単位で動作を指定できるのでかなり細かい描写が可能になります。 サンプル animation | CSS-Trick ３） JavaScriptを使う方法 画面全体をFlashで構成していたようなサイトの場合は、JavaScriptを使用します。 複雑なアニメーションや、アニメーション中にリンクを置く場合は、CSS3では限界があります。 JavaScriptを使うことでFlashよりもさくさく動くアニメーションを作ることが出来ます。 JavaScriptでできるコト ・よくあるリッチなスライダー （ゆっくり消えて次の画像を表示するなど） ・カウントダウンタイマーが作れる （イベントまで日数や時間を表示できる） ・ソートや検索機能が作れる ・リアルタイムで動くグラフが作れる ・文字を変形させる などなど この他にもできるコトはたくさんあります。 JavaScriptでのアニメーション開発は是非弊社にご相談くださいませ。 FASTCODING Flashの移行の流れ １） アニメーションや機能の定義 現在どんなアニメーションや、機能が使われているかを確認します。Flaファイル（SWFの変換前のファイル）があればそれを見ながら進めます、無い場合は実際の動きをみながら確認します。 ２） 実装方法の決定 HTML5、CSS3、JavaScriptのどの方法で実装するかを決定します。 動画を簡単に作成することが出来るのであればそれが一番早いですが、おおよその場合は、アニメーション中にリンクを置いたりすると思うので、JavaScriptを使うことになります。 JavaScriptを使う場合でも、実装方法は色々あります。既存のライブラリを使ったり、一部だけ動画を使ったり、また実装方法によってはサイトの表示スピードが落ちることもあるので注意が必要です。 ３） 実装とテスト 色々なブラウザや端末でテストが必要です。特にFlash全盛期はスマホがなかったので、スマホを考慮していないアニメーションがいっぱいあります。 これからはむしろスマホファーストで作らなければならないので、PCだけじゃなくスマホでもしっかり検証します。 まとめ Webの発展による時代の流れは、本当に早いものです。以前は主流だったFlashもまもなく終了します。 現在もFlashを実装したWebサイトを所有している場合は、なるべく早めに対応しましょう。 まずは弊社にご相談くださいませ。 --- - Published: 2020-03-02 - Modified: 2021-10-07 - URL: https://fastcoding.jp/blog/all/other/tool-aun/ - カテゴリー: ディレクション, その他, 便利サービス - タグ: ディレクション, 作業効率化 （記事更新：2020年8月18日） こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトの制作で修正依頼を出す際にどのようなツールをお使いですか？ 今日、ご紹介するのは、Web制作の現場で、バグや修正の指示をスムーズにするために作られた「AUN（あうん）」です。 目次 AUN（あうん）とは AUNの使い方 1. AUNに画像を取り込む 2. 取り込んだ画像にメモを書き込む 3. 画像（キャプチャー）を追加する 4. 画像（キャプチャー）を共有する まとめ AUN（あうん）とは サイトのキャプチャーや画像にメモを貼って、共有できるツールです。 ・利用料金：無料 ・会員登録不要 ・専用アプリのインストール不要 ・Windows・MACどちらでも使用可能。 ・画像保存期間：７日間（無料ユーザー） プレミアム登録すると ・画像保存期間：365日 ・パスワード設定可能 ・保存時の待ち時間なし 個人的に使うならプレミアムじゃなくて無料で十分ですね。しかも、会員登録不要ってことは、毎回ログインする必要も無いので本当にサクッと使えます。 AUN: ビジュアルコミュニケーションツール（ https://aun. tools ） AUNの使い方 １） AUNに画像を取り込む AUNは3種類の画像の取り込み方があります。 ① WEBページのURLを入力して取り込む キャプチャーしたいページのURLを入力して、デバイスを選択します。デスクトップ・タブレット・スマートフォンから選べます。 キャプチャーしたページを「トリミング（切抜き）」するか選択できます。 Basic認証ページを取り込む Basic認証がかかっているページでも取り込む事ができます。「高度なキャプチャー設定を表示」をクリックして、ユーザーIDとパスワードを入力します。 ② PC内の画像を取り込む パソコンに保存している画像を取り込みできます。 ③ クリップボードから取り込む スクリーンショットを取って、ペーストして取り込みます。 スクリーンショットの撮り方 ２） 取り込んだ画像にメモを書き込む 画像の上でメモをしたいエリアをドラッグで選択します。 メモは、左サイドに番号順に並びます。メモをダブルクリックで、編集可能です。また、メモした箇所を移動する事もできます。 ３） 画像（キャプチャー）を追加する 修正指示が、複数ページある場合は、画像を追加することができます。画面右上の「+ページ追加」をクリックで簡単に追加できます。追加方法は、初回と同様になります。 ４） 画像（キャプチャー）を共有する 右上に「保存して終了」というオレンジのボタンがあるので、そちらをクリックします。 ファイル名を決めて「保存する」へ進みます。パスワードを設定したい場合は、プレミアム会員になる必要があります。（有料） 共有リンクが発行されます。間違えてURLをコピーせずに閉じてしまっても大丈夫です。閉じた後の画面では共有するためのリンクのコピーを確認でき、編集も可能です。 まとめ 欲を出せば、テキスト以外に矢印や図形など、修正説明に便利な機能があれば良いなーと思いましたが、サクッと使えるこちらのサービスはかなり重宝しています。 --- - Published: 2020-02-03 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/info/extension2020/ - カテゴリー: Webデザイン, Web業界の動向・情報, 便利サービス - タグ: 作業効率化, 初心者 こんにちは。FASTCODINGデザイナーの七転び八重子です。 みなさん、どのブラウザ使ってますか？私は、ほぼChrome(クローム)です。人気ですねよ〜 今回は、改めてクロームを使う理由と、オススメの拡張機能をまとめてみました。 目次 Chrome（クローム）の人気の秘密 －高速でシンプル －とにかく動作が安定している「サンドボックス方式」 －どのパソコンでも同じ設定が使える Webデザイナーにおすすめの拡張機能１０選 １） ColorPick Eyedropper ２） Clear Cache ３） Muzli ４） Awesome ScreenShot ５） CSSViewer ６） 文字数カウンター ７） Fonts Ninja ８） View Image Info (properties) ９） Page Ruler １０） Page Analytics (by Google) 作業効率アップにおすすめ５選 １） ato-ichinen ２） Quick Notes ３） Search Result Previews ４） SimpleExtManager ５） Chrome リモートデスクトップ まとめ Chrome（クローム）の人気の秘密 クローム(Chrome）は、Googleが開発したブラウザです。 Googleと聞くとGmailやGoogleMap,Googleカレンダーといったウェブアプリケーションに慣れ親しんだ人が多いかと思います。そんな、ウェブアプリケーションの開発やユーザーの検索体験の向上を進めてきたGoogleならではのアイデアがふんだんに盛り込まれているのがクロームです。 高速でシンプル クロームのインターフェースは非常にシンプルです。アイコンやツールバー類の表示は極力抑えられており、「タブ」が最上部に位置し、その下にURLバー、ツールバーが並びます。 URLバーと検索バーは一体化しており、URLの直接入力も検索も一箇所です。入力した途中から、下部には検索ワードの予測候補がリストアップされ、検索ワードをさらに入力すれば予測候補の絞り込みも行われます。 そしてなんと言っても私が一番素晴らしいと感じているのは、高速な起動とページ表示の速度です。これは実際に試してみるとわかるのですが、本当にポンと起動します。 クロームでは、レンダリングエンジンに、高速さに定評のある「WebKit」を採用し、JavaScriptを処理するためのエンジン部分Googleが開発した「V8」と呼ばれるJavaScriptエンジンが内蔵されています。これらの技術は、クロームのバージョンアップと連動し今後も着実に向上していくと思われます。 とにかく動作が安定している「サンドボックス方式」 他のブラウザとクロームの一番の違いはページの処理の仕方です。クロームは「サンドボックス」という仕組みを使っており、複数のタブで開いたページを別々に処理しています。他のブラウザは、複数のタブで開いたページを一緒に処理しています。 仮にどこかのページが固まってしまった場合、他のブラウザは、ブラウザ全体の機能が停止するので全てのページを閉じる必要があります。せっかく検索して見つけたページをもう一度、表示する必要があり大変です。 ですが、クロームは、問題が起きたページを閉じるだけで他のページには影響がありませんので、そのままブラウザを利用することができます。 どのパソコンでも同じ設定が使える 職場、家、外出先と複数のパソコンを使っているとそれぞれのパソコンにブラウザの設定をしないといけませんが、その都度設定するのは大変です。クロームなら複数のパソコンを使っていてもGoogleアカウントにひも付けて設定を保管し、どのパソコンでも同一の環境でクロームを使うことが可能です。 デザイナーにおすすめの拡張機能１０選 １） ColorPick Eyedropper カラーピッカーで画面上の色を取得できる 素敵なWebサイトのカラーが一発で分かるので参考になりますね。 Chromeウェブストア ColorPick Eyedropper ２） Clear Cache キャッシュを簡単に削除できる Web制作途中に、ブラウザで表示チェックしますが、古いキャッシュが残っているせいで表示が崩れたりする場合に役立ちます。 Chromeウェブストア Clear Cache ３） Muzli 海外のクリエイティブな情報をいち早くゲットできる クロームを起動するたびにMuzliが自動で開き、サイト、イラスト、写真など、クリエイティブな情報を見ることができます。また、100以上のデザインサイトへアクセスが可能で、よく見るサイトなどはアクセスしやすいようにカスタマイズすることもできます。 Chromeウェブストア Muzli ４） Awesome ScreenShot Webページの画面キャプチャーを取得・加工ができる キャプチャーする範囲を指定できたり、テキストや矢印、図形などを配置したりと簡単な加工ができるので重宝しています。 Chromeウェブストア Awesome ScreenShot ５） CSSViewer マウスを乗せた部分のCSSを確認できる Chromeウェブストア CSSViewer ６） 文字数カウンター なぞった文字の文字数が分かる Chromeウェブストア 文字数カウンター ７） Fonts Ninja サイトで使われているフォントにカーソルを置くだけで確認・購入・ダウンロードまでできてしまう Chromeウェブストア Fonts Ninja ８） View Image Info (properties) サイト上の画像サイズをワンクリックで計測できる Chromeウェブストア View Image Info (properties) ９） Page Ruler WEBページの画像や余白のサイズを測れる Chromeウェブストア Page Ruler １０） Page Analytics (by Google) ページ毎のアクセス状況を簡単に確認することが出来る ページ単位のアクセス数を確認するのはAnalyticsでは少々面倒です。この拡張機能を使えばとても簡単に確認できちゃいます。 Chromeウェブストア Page Analytics (by Google) 作業効率アップにおすすめ５選 １） ato-ichinen Google検索結果を1年以内に限定できる なるべく新しい情報を得たい場合は、とても重宝します。 Chromeウェブストア ato-ichinen ２） Quick Notes サイト閲覧中に即時メモができる わざわざ、メモ帳を立ち上げる必要はありません。 Chromeウェブストア Quick Notes ３） Search Result Previews 検索結果にサイトのプレビューを追加してくれる アクセスしなくてもサイトの雰囲気やデザインが見れるので、より目的にあったサイトが探しやすくなりますね。 Chromeウェブストア Search Result Previews ４） SimpleExtManager Chrome拡張機能を一括で管理ができる 複数のプラグインを簡単操作でオン・オフ切り替えができます。 Chromeウェブストア SimpleExtManager ５） Chrome リモートデスクトップ 外出先から自宅のPCにアクセスできる Chromeウェブストア Chrome リモートデスクトップ こちらは、また次回、設定方法の詳細をお伝えいたします。 まとめ クロームの拡張機能は、まだまだ隠れた便利機能があると思いますが、今回は主に自分が使っている拡張機能をご紹介しました。 --- - Published: 2020-01-20 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/googlebert/ - カテゴリー: Web業界の動向・情報, SEO - タグ: google BERT, SEO対策 こんにちは。FASTCODINGデザイナーの七転び八重子です。 2019年12月、Googleは検索アルゴリズムの大規模なアップデートを行いました。最新の自然言語処理モデル「BERT（バート）」を日本を含む世界の70以上の言語に適用させたことを発表しました。 追加された言語はこちら アフリカーンス語、アルバニア語、アムハラ語、アラビア語、アルメニア語、アゼリ語、バスク語、ベラルーシ語、ブルガリア語、カタロニア語、中国語（簡体字＆台湾）、クロアチア語、チェコ語、デンマーク語、オランダ語、英語、エストニア語、ペルシア語、フィンランド語、フランス語、ガリシア語、グルジア語、ドイツ語、ギリシャ語、グジャラート語、ヘブライ語、ヒンディー語、ハンガリー語、アイスランド語、インドネシア語、イタリア語、日本語、ジャワ語、カンナダ語、カザフ語、クメール語、韓国語、クルド語、キルギス語、ラオス語、ラトビア語、リトアニア語、マケドニア語、マレー語（ブルネイダルサラーム＆マレーシア）、マラヤーラム語、マルタ語、マラーティー語、モンゴル語、ネパール語、ノルウェー語、ポーランド語、ポルトガル語、パンジャブ語、ルーマニア語、ロシア語、セルビア語、シンハラ語、スロバキア語、スロベニア語、スワヒリ語、スウェーデン語、タガログ語、タジク語、タミル語、テルグ語、タイ語、トルコ語、ウクライナ語、ウルドゥー語、ウズベク語、ベトナム語、スペイン語 BERTアップデートにより、検索結果への影響が注目されていますが、今日は、そんな「BERT（バート）」をご紹介します。 目次 1） 「BERT（バート）」ってなに？ －BERT最大の特徴 －BERT導入の背景 2） BERTよりGoogleの検索結果はどう変わるのか？ 3） BERT導入に備えてやるべきSEO対策 －ユーザーの「検索意図」をGoogleが理解している －わかりやすい文章にする 4） まとめ 「BERT（バート）」ってなに？ 「BERT（バート）」は、「Bidirectional Encoder Representations from Transformers」の略称であり、自然言語処理技術（NLP）のことを意味します。私たち人間が使う言語をコンピュータに理解させるための技術です。このBERTの導入によって、自然言語処理の能力が大幅に向上するので、Google検索の精度がより強化されます。 BERT最大の特徴 BERT最大の特徴は、なんといっても人間が話す会話の流れ「文脈を理解できること」です。 これまでは、検索ワードの単語についてそれぞれ個別に理解できるものの、その単語同士のつながりである文脈までは読み取ることができませんでした。 つまり、下記の画像のように、Google検索で、入力した検索したワードに合わせてより適切なサイトを表示する事が可能になったのです。 BERT導入の背景 GoogleがBERTアップデートを行った背景には、検索クエリが複雑化した事があげられます。 スマホでの音声検索「Siri」の活用、スマートスピーカーの普及など、アメリカの調査会社ComScoreは「すべての検索の50％が、2020年までに音声検索になる」と言及しています。 そこで有効となるのが「BERT」です。音声による検索は、文脈の前後で意味が大きく変わります。また、より口語的な言い方、ニュアンスを理解することが重要になるからです。 「BERT」よりGoogleの検索結果はどう変わるのか？ 英語では検索の10%に「BERT」は影響改善を与えたと Googleは言及しています。 日本語ではどうでしょうか？ ・長い検索キーワード（音声検索や長い文章での検索）の場合 →関連性の高いコンテンツが上位表示されるように ・短い検索キーワード（単語、ビックキーワードでの検索）の場合 →これまでの検索結果とほぼ変わらない。 このように、長い検索キーワードへの影響が大きいと言えます。将来的に音声検索が支流になってくれば、今後のSEO対策の方向性が大きく変わってくる可能性があります。 BERT導入に備えてやるべきSEO対策 BERTアップデートに伴い、検索の精度は飛躍的に改善さてていますが、今の所、SEO対策として特別にすることはありません。 検索順位を上げる為には、より良いコンテンツを作るほかない これまでの検索で、自分の知りたいこととあまり関係無いコンテンツが上位表示された事はありませんか？そんな検索意図に反したサイトは今後、表示されなくなります。つまり、キーワードだけを散りばめたSEO対策はもう通じなくなっていきます。 ユーザーの「検索意図」をGoogleが理解している googleは昔から一貫して、「ユーザーにとって役に立つコンテンツをどんどん発信していきなさい」と言っています。つまり、googleの進化はユーザファーストにあるという事、つまり人の思考に合わせた検索結果を表示していくように進化していきます。 Webサイトコンテンツ作りは、これからも重要であり、いかにユーザーが欲しい情報を乗せていくか、そこに注力していく必要があります。 わかりやすい文章にする では、実際に良質なコンテンツを作る上で、大切なことはなんでしょうか？それは、わかりやすい文章です。 これまでにも説明した通り、BERTは文章の流れを理解します。長文になればなるほど、人が読んで理解しやすい内容である必要があります。例えば、主語と述語は正しい関係であるか、長い文章は、小分けしてスッキリした文章にするなどです。 まとめ 最後にBERTアップデートについてまとめておきます。 ・BERTにより、検索ワードの文脈やニュアンスの理解度が向上した ・特に長い検索ワードと関連性の高いコンテンツが、検索結果で上位表示されるようになった。 ・音声検索がこれから支流になっていく。 ・特別なSEO対策は要らないが、ユーザーが求めるコンテンツ作りがさらに重要になった。 ファストコーディングではSEOに強いサイト制作をご提供しております。コンテンツライティングが必要な場合もぜひ担当ディレクタにご相談くださいませ。 --- - Published: 2020-01-20 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/remote-desktop/ - カテゴリー: Web業界の動向・情報, 便利サービス - タグ: Web業界の動向, ディレクション, 作業効率化, 初心者 こんにちは。FASTCODINGデザイナーの七転び八重子です。 昨今のコロナウィルス問題や、働き方改革の流れを受けて、オフィス以外で仕事をする「リモートワーク」の流れが加速しています。 リモートワークのためのツールはたくさんありますが、実はGoogleChromeブラウザにも、「リモートワーク」に役立つ機能があるんです！ 今回は外出先から自宅やオフィスにあるパソコンを遠隔操作できる「Chromeリモートデスクトップ」の設定方法をまとめてみました。 目次 Chrome（クローム）リモートデスクトップって何？ Chrome（クローム）リモートデスクトップのここが便利 １） 全画面表示にするとホスト環境と変わらない使用感 ２） マルチディスプレイでも表示可能 ３） ファイル転送が可能 ４） クリップボードの同期が可能 Web版への接続方法 １） リモートホストの設定 ２） リモートクライアントからの接続 まとめ Chrome（クローム）リモートデスクトップって何？ Chromeリモートデスクトップとは、外出先のパソコンやモバイル デバイスからインターネット経由で、他のパソコン（リモートホスト）を操作する機能です。米Googleは2019年6月4日、オンライン版「Chrome リモート デスクトップ」（remotedesktop. google. com）を正式リリースしました。これまで使用していたChromeアプリ版は、6月30日にサポート終了されるので、アプリ版からWeb版への切り替えが必要です。 この変更によって、 ・Chrome以外のブラウザからでも使用可能 ・Chromeへのログインは不要 になりました。 Chrome（クローム）リモートデスクトップのここが便利 １）全画面表示にするとホスト先の環境と変わらない使用感 全画面表示にするには、右側に出るオプションメニューの「全画面表示」か「F11キーを押す」を選択。 ２）マルチディスプレイでも表示可能 オプションメニューの「ディスプレイ」で、表示するディスプレイを選択可能です。 マルチディスプレイですべてのディスプレイを表示することも、片側だけを表示することも可能です。 ３）ファイル転送が可能 オプションメニューの「ファイルをアップロード」「ファイルをダウンロード」で、ローカル・リモートのファイル転送が可能です。 ４）クリップボードの同期が可能 右側のオプションメニューの「クリップボードの同期を有効にする」をクリック。 ローカル、リモートでコピーした内容をそれぞれ貼り付けすることが可能になります。 Web版への接続方法 １）リモートホストの設定 手順１ Chrome リモートデスクトップ インストール リモートでアクセスして操作したいパソコンで下記にアクセスしてください。 https://remotedesktop. google. com/access 赤枠で囲っているダウンロードボタンをクリック。 ポップアップで画面が表示されるので、「Chrome Remote Desktop」拡張機能をインストールしましょう。 デスクトップアプリのダウンロードが完了すると、自動的にこのような画面に切り替わります。「同意してインストール」ボタンをクリック。 クリックしてインストールします。 手順２ パソコンの名前を選択し PIN を設定 インストールが完了したら、下記の画面でパソコンの名前を任意で設定します。 続けて、６桁以上の任意のPINの設定をします。後から必要になるので、メモしておいてください。 ２）リモートクライアントからの接続 １ パソコンで Chrome を開きます。 ２ 上部のアドレスバーに「remotedesktop. google. com/access」と入力し、Enter キーを押します。 ３ をクリックして、リモート アクセスするパソコンを選択します。 ４ アクセスに必要な PIN を入力します。 ５ 矢印を選択して接続します。 セキュリティ保護のため、リモート デスクトップ セッションはすべて暗号化されます。 まとめ 今回は、Chromeリモートデスクトップを使ってみました。便利ですねー。もっと早くから使っていればと思いました。みなさんも是非この便利な機能を利用してみてください。 --- - Published: 2020-01-12 - Modified: 2025-01-17 - URL: https://fastcoding.jp/blog/all/info/sketch-plugin2020/ - カテゴリー: Webデザイン, Web業界の動向・情報, ディレクション, 便利サービス - タグ: Web業界の動向, 構造化データ こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Sketchで愛用しているプラグイン、オススメをまとめて見ました。合わせて、プラグインの探し方からインストール方法もおさらいです。 目次 プラグインのダウンロード プラグインのインストール方法 オススメプラグイン6選 1. Separate Shapes 2. Rename It 3. Paddy 4. Craft 5. Stark 6. Split Shape まとめ プラグインのダウンロード プラグインは公式ページからダウンロードできます。 Sketch Plugins - https://www. sketch. com/extensions/plugins/ プラグインのインストール方法 プラグインのインストールは、「プラグインマネージャを使う場合」 と 「配布ページからダウンロードする場合」 の2つの方法があります。 プラグインマネージャを使う場合 「Runner」というプラグインのinstall機能を使えば、Sが簡単ですが、このプラグインは、Sketchをコマンドで動かせるプラグインで有名です。とても便利なので入れておきましょう。 ちなみに、有料版と無料版が提供されており、有料版は14日間のお試し期間後に20ドルの支払いが必要になりますが、「run」と「install」機能は、お試し期間を過ぎても無料で使えます。 Runner - https://sketchrunner. com/ Runnerプラグインをダウンロードする zipファイル解凍してインストール メニューバー Plugins > Runner > install 欲しいプラグインの名前を入れる 出てきたプラグインの欄をダブルクリックし、インストールする 配布ページからダウンロードする場合 配布先からプラグインをダウンロード 解凍してダブルクリックしてインストール オススメプラグイン７選 ① Separate Shapes Separate Shapes は、Adobe Illustratorのように「パスの分割」ができるプラグインです。 Sketchでは通常「パスの分割」ができないので、このプラグインは本当に重宝しています。 ② Rename It Rename It は、アートボード名・レイヤー名・シンボル名などを、一括で変更（リネーム）できるプラグインです。 例えば、つけたい名称が「icon」の場合、プラス「変数（KEYWORDS）」を設定すると、「icon-3, icon-2, icon-1」と表示されます。 ③ Paddy Paddy は、自動にレイヤー間を指定した数値を保つことができるプラグインです。 ④ Craft Craft は、UIのデザインやプロトタイプを作る際に面倒な作業を全て自動化してくれるプラグインです。 ダミーテキストやストックフォトから画像を挿入できます。 また、Sketchで作成したものをプロトタイプツール、Invisionにアップロードできる機能もあります。 ※URLが変更されているため、リンク先を削除しております。（2025年1月現在） ⑤ Stark Stark は、色盲・色弱のシミュレーションやコントラストをチェックできるプラグインです。アクセシビリティの確認作業として重宝します。 ⑥ Split Shape Split Shape は、Gナビを作るときに便利で、「column」を「5」と設定し、すると５つの長方形を作ってくれるプラグインです。 「column」の間にmarginがかかっている場合も計算してくれるので、助かります。 まとめ Sketchユーザの方なら、プラグインを使いこなせるとますます便利になりますね。私は、アイコンはもはやSketch内で作っているので、「Separate Shapes」は本当に使いまくりです。 毎年、かなりの数nの便利なプラグインが追加されているので、また定期的にまとめてみたいと思いおます。 --- - Published: 2020-01-07 - Modified: 2025-06-19 - URL: https://fastcoding.jp/blog/all/info/accessibility-2/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: マテリアルデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回、Webアクセシビリティの基礎編をやりましたが、今回は実装編です。 要注意 この基準を満たせないコンテンツが一部にでも存在すると、サイト内・ページ内の他の箇所にも干渉してアクセスを妨げる可能性があります。 【１】 動画や音声を自動再生しない 動くものに注意を奪われたり、読み上げ音声が聞きづらくなったりすることで、ページ全体の利用を妨げられる場合があります。カルーセルを含む動画や音声は自動再生を避け、ユーザー側で停止などのコントロール機能を提供しましょう。 【２】 キーボードによる操作ができる マウスなしで操作してみましょう。Tabキーでページを巡回でき，スペースキーやEnterキーでリンクやボタンを操作できるか確認しましょう。 【３】 閃光を避ける 閃光を放つコンテンツは光感受性てんかんを引き起こすことがあります。頻度によっては点滅も閃光と同じ作用があるので注意が必要です。1秒間に3回以下にする必要があります。 色の使用 【４】 色の違い ユーザーが色の違いを知覚できなかったとしても、その情報を理解できるようにする必要があります。 例えば、以下のような場合に注意が必要です。 入力フォームの必須項目をの文字の色を赤にしている。 グラフで複数の色を用いていて、それぞれの色の説明を凡例で示している。 ナビゲーションバーで、違う色を用いて現在位置を示している。 【５】 コントラスト比は４. ５:１以上 少なくとも22ポイント又は18ポイントの太字のように、サイズの大きな文字は3:1以上あればよい（アルファベット文字の場合は、18ポイント又は14ポイントの太字）。 文字と背景のコントラストを確保することは、モバイルでのWebコンテンツ利用の比率が高まるにつれ、屋外などでも読みやすくするためにも重要性が高まっています。 ただし、次のような文字は対象外です。 ・装飾文字（何も情報を伝えていない文字） ・写真の中に写っている文字 ・アクティブではない状態のUIコンポーネント（押せない状態のボタンなど） ・ロゴタイプの文字 色のコントラストチェッカー※こちらのサービスは、現在は提供を終了しているようです。（2025年6月19日更新） こちらに背景とテキストの色コードを打ち込むと、WCAG 2. 0の基準でコントラスト比が合格かどうか判定してくれるので、難しい計算式は要りません。 画像 【６】 画像の代替テキスト 代替テキスト（alt属性）とは 画像を視覚的に理解できない利用者や、画像の読み込みができない環境で、画像の内容を説明するテキストのことを言います。（検索エンジンにも内容を提供できます）。 視覚障がいを持つ方がPCを利用する際には、スクリーンリーダーや音声ブラウザが画像の内容をユーザに伝えるために代替テキストを読み上げてくれます。 装飾画像の場合 特に何も情報を伝えていない装飾画像は、代替テキストを提供する必要がないため、alt属性値を空（alt=""）にします。代替テキストが不要な場合でも、要素のalt属性を省略することはできないので注意してください。 CSSの背景画像の場合 CSSのbackground-imageプロパティを用いることができるのは、特に何も情報を伝えていない装飾画像だけです。何らかの情報や意味を伝えていて、代替テキストを必要とする画像には、background-imageプロパティを使用してはいけません。 例えば ・Windowsのハイコントラストモードなどの特定の利用環境では、全く表示されません（Windowsのハイコントラストモードは、ロービジョンの視覚障害のあるユーザーなどが利用） ・リンクボタンをCSSの背景画像として表示している場合、ユーザーの利用環境によっては表示されないので致命的な問題になります。 文字画像の場合 文字を画像化したものは、alt属性は文字と同等の内容にします。 画像リンクの場合 ＜img＞要素のalt属性を用いて、リンク先の分かるリンクテキストを記述するか、画像のテキストをそのまま記述します。 ページ 【７】 各ページには適切なタイトルを付ける ＜title＞要素を用いて、そのページの内容が分かるように記述します。スクリーンリーダーは、そのWebページを読み込んだ時に最初にこのページタイトルを読み上げます。ページタイトルが無かったり、適切でないと、内容を予測できなかったり、他のページと混同したりします。 SEO考慮する ユーザーがどのようなキーワードで検索するかを考えて、そのページにあるコンテンツに沿って、キーワードを含んだタイトルにするとSEOにも効果的です。 【８】 言語設定 Webページの言語は、＜html＞要素のlang属性を用いて指定します。これによって、テキストをより正確に描画することができる。スクリーンリーダーは、正しい発音規則を読み込むことができる。ビジュアルブラウザは、文字や書体を正しく表示することができる。メディアプレーヤーは、キャプションを正しく表示できる。結果として、障害のある利用者がコンテンツをより理解できるようになります。 Google「lang属性、全く見てない」って本当なのか？ googleが公式に発言したようです。が、これはあくまでSEOの観点から見た場合です。Webアクセシビリティとして必要項目とされているので対応しておきましょう。 【９】 文字サイズ テキストの文字サイズを標準の200％まで拡大しても、コンテンツの閲覧や操作に支障が生じないようにする。 文章構造 【１０】 ランドマークrole（ロール） role 属性は、「役割」および「状態とプロパティ」を記述するための属性として新たに追加された属性です。日本語で「役割」という意味で、その意味通りに要素に役割を持たせる働きをします。ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。 一部の例 ・role=”banner” ＝ヘッダー部分 ・role=”main” ＝メインコンテンツ ・role=”contentinfo” ＝コンテンツ情報、メタ情報 ・role=”navigation” ＝ナビゲーション ・role=”search” ＝検索機能 ・role=”complementary” ＝補助的情報部分 ・role=”application” ＝アプリケショーン HTML5を優先させる navigationランドマークとhtml5の＜nav＞要素は一緒に使用しません。 ページ中に複数のナビゲーションがある場合 ページ中に同じナビゲーションがある場合 【１１】 見出し 文書構造に応じて＜h1＞～＜h6＞要素を用いてマークアップする 見出しがマークアップによってマシンリーダブルになることで、次のようなメリットをユーザーに提供することができるようになります。 スクリーンリーダーの見出しジャンプ機能が使える ・PCでは、Hキーを押すと＜h1＞～＜h6＞要素でマークアップされた見出しだけを拾い読みすることができる ・さらに、数字の1～6のキーを押すと特定の見出しレベルの見出しだけを拾い読みすることができる（例：3キーを押すと、＜h3＞要素の見出しだけを拾い読みする） ・スマートフォンやタブレットでも、見出しジャンプ機能が使える 【１２】 リスト ・順序付きリスト ＜ol＞、＜li＞要素を用いてマークアップする ・順不同リスト ＜ul＞、＜li＞要素を用いてマークアップする ・関連リスト 全体に対して＜dl＞要素を用い、リスト内の名前（ラベル）を＜dt＞要素、値を＜dd＞要素を用いてマークアップする 【１３】 強調と重要 HTML5では、＜em＞要素と＜strong＞要素の意味合いが若干変更になっています。 ・文中で強調したい部分は、＜em＞要素を用いてマークアップします。 ・文中でコンテンツの重要性、深刻さ、緊急性を示す部分は、＜strong＞要素を用いてマークアップします。 【１４】 引用 引用文には＜blockquote＞要素、引用元は要素を用いてマークアップする テキスト 【１５】 リンク リンク先のページの内容が理解できるリンク文字列にしましょう。文中のリンク文字は下線をつけます。 例えば、「ここをクリック」、「こちら」といったリンクテキストを用いると、それがリンク先のWebページのキーワードとみなされてしまいます。SEOの観点からでも、できる限りリンクテキストだけでリンク先が分かるようにすることが重要です。 フォーム 【１６】 ＜label＞要素 フォーム・コントロール 各種テキストフィールド（＜input type=”text”＞、＜input type=”password”＞、＜input type="email"＞など） ラジオボタン（＜input type=”radio”＞） チェックボックス（＜input type=”checkbox”＞） テキストエリア（＜textarea＞） セレクトメニュー（＜select＞） フォーム・コントロールのラベルとなるテキストがある場合 label要素を使用して入力項目に対するラベルをつけます。それぞれの項目には何を入力したらいいか分かりやすい説明をつけ、エラーメッセージも理解しやすくしましょう。 × 悪い例） テキストフィールドのラベルがマークアップされていない。 ○ 良い例） 要素を用いてラベルとなるテキストをマークアップ フォーム・コントロールのラベルがない場合 フォーム・コントロールの要素（＜input＞、＜select＞など）にtitle属性を用いてラベルを提供する。 × 悪い例） ラベルとなるテキストが無い ○ 良い例） title属性を用いて不可視のラベルを提供 動画 【１７】 キャプション（字幕） 動画の音声が伝えている情報は、動画の音声を聴くことができないユーザー(聴覚障害の方、静かな環境下にいる方など)には伝わらないことがあります。そのため、動画にはキャプションを提供して、ユーザーが音声を聴くことができなくても、動画のコンテンツを理解できるようにしましょう。 必ずしも必須ではない実装項目 文字サイズの拡大機能は必須ではない 小さな文字が見えない場合に、出来たら文字サイズの拡大機能をつけましょう。と以前は対応が進められていましたが、必ずしも必須ではありません。 近年、ブラウザはズーム機能を提供しており、Webページの表示を拡大できます。わざわざWebページ側で似たような機能を提供する必要はありません。また、スマートフォンやタブレット端末で表示する際は、ユーザーが必要に応じて画面を拡大できるようにしておきます（user-scalable=noを使用しない）。 スキップリンク 「スキップリンク」は、Webページの先頭からメインコンテンツの開始位置までジャンプできるページ内リンクのことです。 スクリーンリーダーを使用している場合、Webページの先頭から順にコンテンツを読み上げていきます。そのため、メインコンテンツを読み上げる前に、ヘッダー部分や左サイドにあるサブメニューなどを毎回読み上げることになります。そこで、すぐにメインコンテンツの内容を読み上げさせたいときのために、「スキップリンク」を提供するという考え方が生まれました。 しかし、HTMLのWebページにおいては、例えば次のような手段を提供することが可能です。 ・メインコンテンツの開始位置に、＜h1＞要素でマークアップした大見出しを置く ・＜main＞要素を用いて、メインコンテンツ部分をマークアップする ・＜main＞要素の開始タグにランドマークrole（role="main"）を指定する 例えば、ほとんどのスクリーンリーダーは、＜h1＞要素やランドマークrole（role="main"）を用いたナビゲーション機能を提供しています。それを使うことによって、スクリーンリーダーのユーザーはメインコンテンツの開始位置へいつでも好きな時に移動することができます。 最後に この機会に、改めてWebアクセシビリティを勉強しましたが、必ずしも必須でない項目が見つかったりとブラウザ側の改善などで補えることも増え、これから時代に合わせてまだまだ変わる予感がします。また、いくつか紹介した実装項目も大切ですが、実はSEO対策をしっかりすることがWebアクセシビリティに繋がると捉える考え方もあります。どちらも合わせて、最善の方法を選択していければ良いですね。 --- - Published: 2019-12-16 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/accessibility-1/ - カテゴリー: React, Vue.js, Web業界の動向・情報 - タグ: JIS X 8341-3, WCAG, アクセシビリティ, ユーザビリティ こんにちは。FASTCODINGデザイナーの七転び八重子です。 アクセシビリティ対応！完璧ですか？ 昨今、公的機関のWebサイトだけでなく、一般サイトにもその対応が広まっています。 一昔前は、身体的制限のある方に向けた対応というイメージがありましたが、デバイスの多様化や、使用する側の環境も様々になり、より多くの人にWebサイトの情報やサービスを利用してもらう為には、なくてはならない対策です。 この機会に、どんな作業をしたら「アクセシビリティ対応をした」と言えるのか、改めて勉強してみようと思います。今回は、具体的な実装の前に、基礎をおさらいしてみます。ちなみに、ファストコーディングでは、WebアクセシビリティはSEOの観点からも重要だと考えています。Webサイトのリニューアル時に合わせて、対応を考えてみてはいかがでしょうか？ アクセシビリティとは Webを利用するすべての人が年齢や身体的制約、利用環境などに関係なくWebにアクセスできること。 例えば、 ・高齢で目が悪く、文字が見づらい。 ・屋外でスマホで見ていて、画面が普段よりも見づらかった。 ・コンタクトレンズや眼鏡を忘れて、文章が読みづらかった。 ・マウスが壊れたが、キーボードだけでは操作しづらかった。 ・視覚障害があり、音声読み上げソフトを利用しているが、目的の情報を探すまでに時間を要した。 など様々な状況が考えられ、それら全てに対応していこうというのが、「Webアクセシビリティ」の基本的な考えです。 ３つのガイドラインがある ウェブアクセシビリティという品質を確保する為に、細かく決められたガイドラインが主に３つあります。 ・JIS規格：「JIS X 8341-3:2016」 （2004年-2016年改定） ・W3C：「Web Content Accessibility Guidelines（WCAG）2. １」 （2010年-2018年改定） ・国際規格：「ISO/IEC 40500:2012」 （2012年） ３つもあるのかよ！と思うかもしれませんが、安心してください。 2016年に３つのガイドラインでで内容が完全に統一されています。 その後、201年6月にW3CがWCAG2. １を発表しています。 このガイドライン、サイト内の説明がややこしく、１から全て理解するのは大変です。 参考サイトから役立つページをピックアップ Webアクセシビリティに関するサイトは多岐に渡ります。その中でも、個人的に便利だなと思うサイトとそのサイト内のピックアップしたココみて！と思うページをまとめてみました。 ・WCAG 2. 0 解説書（WCAG 2. 0 を理解して実装するためのガイド2016年） WCAG 2. 0の内容を翻訳しています。 ・JIS X 8341-3:2016 達成基準 早見表（レベルA & AA） これは一番分かり易くて個人的に超絶おすすめです。 ・HTML5 Accessibility 主要ブラウザにおけるHTML5の要素や属性のサポート状況、検証結果を公開しています。英語のサイトですが、シンプルに分かりやすいです。 SEOとWebアクセシビリティ Webアクセシビリティ対策をほとんど意識せず、特別な対策はしていないにもかかわらず現状のサイトはアクセシビリティをある程度確保できている。こういったパータンって結構多くあります。 それは、検索エンジン（ロボット）に対してSEOの観点から、画像の代わりとなるテキスト情報（代替テキスト、alt属性）を指定したり、ロボットがアクセスした際、文書の構造が適切に伝わるように、タイトルや見出しなど、HTMLの文書構造を適切にマークアップするなどの施策が行われているからです。 マシンリーダビリティ コンテンツをロボットが読み易くする事を「マシンリーダビリティ」と呼びます。 検索エンジンのロボットやスクリーンリーダーは、人の目を持たないプログラムです。SEOの目的でマシンリーダビリティを向上すれば、支援技術でアクセスしやすいものになり、結果的にアクセシビリティ向上につながるのです。 検索結果が重要視される Webで何かを探そうとするユーザーは、年齢や身体的制限があるないにかかわらず、まず検索エンジンで検索する事がほとんどです。 例えば、お店のアクセス情報を知りたいと思った時、まずはお店の名前で検索します。次にサイト内のナビゲーションに「アクセス」「所在地」などの項目がないか探しますが見当たらない事もあります。その場合は検索エンジンに戻り、「店舗名 アクセス」のように検索し直します。すると、ほとんどの確率で情報がヒットするでしょう。 このように、サイト内のナビゲーションが使いにくければ、検索エンジンで直接探すほうが早く効率的な場合があります。 つまり、SEO対策を考慮したコーディングはアクセシビリティにも良い結果をもたらしてくれるわけです。 最後に 今回は、Webアクセシビリティの基礎を勉強しました。ファストコーディングでは、SEOに強い効果を期待できるセマンティックコーディング（Semantic Coding）を標準で実施しております。 HTMLに意味を持たせることで、検索エンジンが読み取りやすいコード＝SEMで重要となるターゲットキーワードに合致しやすい最適なマークアップとなります。 また、検索結果に詳しい情報を表示できるようになる構造化データの実装や、ご納品するすべてのページにおいてGoogle Pagespeed Insightsでのチェック／高得点化を標準で行っております。 弊社のSEOに最強のHTMLコーディングを是非ご体感ください。 --- - Published: 2019-11-14 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/material-design4/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: マテリアルデザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 マテリアルデザイン実践、第３弾はカードのルールと使い方について。 以前、「紙のルール」をご紹介しましたが、今回は具体的にカードを使ってどうデザインするかをまとめてみました。 カードとは？ カードは関連性のある情報をまとめたものです。カード自体がボタンになり、詳しい情報への入り口としてよく使われます。例えば「記事一覧」「商品一覧」などです。情報を詰め込まず、重要な事柄だけに絞って表示します。カード上ではテキストや写真、ボタンなどを配置することができます。このとき重要なのは「文字や画像が紙に印刷されている」というイメージを持つことです。 ●原則として「1カード1テーマ」 別々のテーマを１つのカードに含めることはできません。 １） 文字がはみ出してはいけない カードから文字や画像をはみ出してはいけません。カードの上に乗っているのではく、あくまで印刷されているからです。 ２） 立体カードの上に立体ボタンはNG カードに影を使う場合は、中に配置するボタンに影をつけないようにしましょう。フラットボタン、アウトラインボタン、テキストリンクを使います。 ３） カードを重ねない カードを重ねたりすることはできません。 ４） フローティングアクションボタンは使わない FABは、1ページに1個だけ使うことが推奨されています。カード事に使うのはNG 5） 複数枚並べるときは縦スクロール 複数枚を横に並べてスクロールさせてはいけません。画面に対して縦スクロールのみ。 6） カード内でスクロールは基本できない（ディスクトップはOK） カードに入る要素が多い場合は、スライドダウンさせます。カード内でスクロールはできません。 ↓Do https://fastcoding. jp/blog/wp-content/uploads/2019/10/8-1. mp4 ↓Don't https://fastcoding. jp/blog/wp-content/uploads/2019/10/8-2. mp4 ↓ディスクトップはOK https://fastcoding. jp/blog/wp-content/uploads/2019/10/8-3. mp4 7） 全てをカードにする必要はない 記事一覧などで情報量が少ない場合はカードを使わず、リストにした方がスッキリします。情報のボリュームによって使い分けましょう まとめ マテリアルデザインでカードについてご紹介しました。次回は、マテリアルデザイン実践のまとめとして、マテリアルデザインでやってはいけない事をまとめたいと思います。 合わせて、こちらの記事もご覧ください。 --- - Published: 2019-11-07 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/webdesign/material-design3/ - カテゴリー: Webデザイン - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回マテリアルデザインの実践で「カラーの選び方」をご紹介しましたが、今回は、実践編２「ボタンのルールと作り方」です。 マテリアルデザインでカラーを決めたら、パーツづくりとしてボタンを揃えておくとデザインがスムーズですね。 １ ボタンの種類 マテリアルデザインでは、主に５つのボタンを使います。ボタンの重要度によって、使い分けます。 重要度：高 フローティングアクションボタン（FAB） マテリアルデザインらしいボタンの一つです。FABはカラフルで、浮き上がっていています。とても目立つボタンなので、促進したいアクションのためだけに利用してください。 ポジティブなアクションに使う FABは作成やシェア、探索などのポジティブアクションを表します。 次のような使い方は避けましょう。 削除やアーカイブなどのネガティブアクション。 曖昧なアクションやアラート。 テキストの切り取りを行うなどの制限されたアクション。 ツールバーにあるべきアクション。例えば、メニュー。 １画面に一つだけ、画面ごとに操作を変えてもOK FABは、1ページに1個だけ使うことが推奨されています。また、ページによってアクションが違っても大丈夫です。 ボタンの中にテキストを加えてもOK（Extended FAB） 2018年に新しく追加されました。これまでアイコンが理解できないと操作が分かり難い面がありましたが、テキストを含めることでより分かりやすくなりました。タブレッドでは、アイコンとテキスト、モバイルではアイコンのみで表示するなど、スペース的な問題にも対応できるので良いですね。 ボタンのサイズと配置 ボタンは円形です。デフォルトで56dp、ミニサイズで40dpです。FABは、画面の端っこに配置することが多いですが、下の画像のようにタブレットとPCは24dp以上、モバイルは16dp以上の余白を設けてください。 ●hoverのシャドウとアニメーション タップ、クリック、ホバー（マウスオーバー）時には、フワッと浮き上がるように影を大きくして動きをつけます。また、タップ時にはアイコンをクルッと回転させたり、ホバー時により円形の背景色の明るさを変えることもできます。動きがあることで分かりやすくしています。 重要度：中 コンテインドボタン（立体） コンテインドボタンは、背景がカラーのボタンです。少し浮き上がったような影があるボタンと、影のないフラットなボタンの２種類があります。テキストが多くテキストとボタンの見分けが付き難い場合に使うと良いです。 ●ボタンの組み合わせ 塗りつぶしの色が同じでないボタンを隣り合わせに使用しないでください。また、複数のボタンを使用する場合、テキストボタンの横に配置することで、より重要なアクションを示します。 ボタンのサイズ ボタンの余白やアイコンのサイズなど厳密に規定があります。 重要度：やや中 アウトラインボタン 塗りのない枠線のボタンです。重要度は低く、アプリの主要なアクションではありません。 ●ボタンの組み合わせ ボタンのサイズ ボタンの余白やアイコンのサイズなど厳密に規定があります。 重要度：低 テキストボタン テキストボタンは、文字だけのテキストリンクです。文字のカラーと被らないくっきりとしたカラーをお勧めします。 まとめ マテリアルデザインで重要なボタンの種類と重要度、組み合わせについてご紹介しました。ここで利用しているアイコンも公式サイトからダウンロード可能です。また、Sketchユーザーの方であればAll Google Material Icons Sketch Resourceが便利です。 合わせて、こちらの記事もご覧ください。 --- - Published: 2019-10-22 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/webdesign/material-design2/ - カテゴリー: Webデザイン - タグ: Web業界の動向, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回「これまでのデザインとマテリアルデザイン」をご紹介しましたが、今回は、実践編です。 マテリアルデザインで最初にするカラーの選び方について解説します。 １ 使用するカラーを決める 最初にサイトで使用するカラーを選んでおきましょう。 ・プライマリーカラー（メイン） Webサイトで一番使うベースになる色。 ・プライマリーバリアント（サブ） 補助的に使う色です。メインカラーと同じ色合いで薄い色と濃い色を選んでおきましょう。 ・セカンダリーカラー（アクセント） 目立たせたい時に使うカラーです。重要なボタンなどに使います。多用しないように気をつけましょう。 注意：プライマリーカラーが、赤っぽい場合は、エラーカラーと被らないように気をつけましょう。（エラーカラー：＃B00020） 2 便利なカラーパレットで色を決める 公式ページ（Tools for picking colors）にカラーパレットが用意されています。 カラーの選び方 プライマリーカラー（メイン） 「500番」の色を使うことが推奨されています。この500という数字は「色の明るさ」を表すものです。100だと明るい色、900だと暗い色となります。 プライマリーバリアント（サブ） メインの補助的なカラーです。メインカラーと同じ色合いで薄いカラーと濃いカラーを選んでおきます。 セカンダリーカラー アクセントなので目立たせたいカラーを選びましょう。プライマリーカラーとは異なるカラー相性の良さそうなカラーを選びます。５００番前後の鮮明なカラーがおすすめです。 ３ マテリアルパレットジェネレーターで配色を確認してみる こちらも公式ページ（COLOR TOOL）にあります。選んだカラーでサンプル画面が見れるのでとても便利です。 無彩色とエラーで使うカラー プライマリー、セカンダリーカラー以外に、「白」「黒」「グレイ」が使用できます。エラーカラーも注意して見ましょう。ここで、プライマリーカラーが赤っぽいなど、エラーと近しいカラーの場合は調整が必要です。 5 アプリバーの配色とアイコン アプリバーはヘッダー部分を差します。多くのサイトでは、プライマリーカラーにしていますが、黒や透明でも問題ありません。アイコンは全て同じカラーを使用してください。 4 背景に乗せる文字のカラー 薄いカラーには「黒文字」、濃いカラーには「白文字」と大体の感覚で決めていると思いますが、カラーパレットでしっかり確認しましょう。カラーによって何番まで白文字または黒文字が利用できるか分かります。 https://fastcoding. jp/blog/wp-content/uploads/2019/10/10. mp4 テキストの重要度により不透明度を変える 薄い背景に黒文字を乗せる場合は、背景色に馴染みやすいように真っ黒ではなく少し薄めの黒（不透明度87%）にすることが推奨されています。ちょっと覚えにくい％ですね。。 まとめ 今回の実践編で、カラーについて解説しましたが、個人的な意見を足すと、カラーパレットのカラーだけでは限界がありますし、コーポレートカラーやテーマに合わせて好きなカラーを利用しても良いと思います。 --- - Published: 2019-10-21 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/material-design1/ - カテゴリー: Webデザイン, Web業界の動向・情報 - タグ: デザイン, ユーザビリティ, 初心者 こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザインをする上で基本的な考え方のベースになる「マテリアルデザイン」 マテリアルデザインを知らない人でも、AndroidやYouTube、GoogleMapなど身近なサービスに適用されているため、日頃目にしているデザイン手法です。今回は、これまでのデザインとマテリアルデザインの違いと基本原則をご紹介します。 Index 1 マテリアルデザインとは？ 2 これまでのデザインとマテリアルデザイン （１）初代リッチデザイン（スキューモーフィズム） （２）２代目フラットデザインへの移行 （３）３代目マテリアルデザインへ 3 マテリアルデザインの基本原則 4 マテリアルデザインのメリットとデメリット マテリアルデザインとは？ マテリアルデザインは、2014年Googleより発表された新しいデザインのガイドラインです。 ユーザーの操作性を重視して、直感的に操作を理解できることを目的としています。 マテリアルデザインには厳密なルールが定められており、公式サイトでガイドラインが公開されています。 （マテリアルデザイン https://material. io/design/ ） これまでのデザインとマテリアルデザイン ここでは独自の見解で大きく３つの流れで説明します。 初代リッチデザイン（スキューモーフィズム） 現在と比べて通信回線の速度が大変遅かったインタネットの黎明期は、データの軽さが重視され、デザインもシンプルでした。やがて高速通信の普及に伴い「リッチデザイン」が流行していきます。 リッチデザインとは、影・光沢・立体感など細部のディティールを作り込んだデザインです。 本物に似せた質感（スキューモーフィズム）のアイコンは、スマートフォンが誕生し、スマホに慣れない初心者でも一目で機能や操作が分かる優れたデザインとして、数年間スマートフォンの定番UIとして親しまれてきました。 ２代目フラットデザインへの移行 2012年、ミニマリズムの流れやWindows8やiOS7のフルリニューアルに伴いフラットデザインが世界中で主流となりました。 背景には、多様化してきたデバイスにこれまでのリッチデザインでは対応しきれない問題が発生した事が挙げれらます。 リッチデザインは、Photoshopやillustratorで作りだした画像データを使用しますが、これではデバイス事に画像データを作り直す必要があり、多くの時間とコストがかかってしまいます。そこで、コーディングだけで再現できるシンプルなフラットデザインが普及しました。 フラットデザインは、グラデーションやテクスチャを用いず単色の塗りにし、ドロップシャドウなどの立体感のある表現は使わない無駄な装飾を無くした平面的なデザインです。 ３代目マテリアルデザインへ デバイス問題の対応に成功したフラットデザインですが、リッチデザインと比べて「どこがボタンなのか分からない」「要素の区別がつかない」などの批判が上がりました。そこで、どのデバイスでもわかりやすい操作性を実現するにはどうしたらいいかを突き詰めた結果、マテリアルデザインが誕生しました。 フラットデザインの装飾を極力排除したシンプルで平面的なデザインを継承しながら、ユーザーの操作性にも配慮した概念が「マテリアルデザイン」です。 現実世界にある物の動きや影、奥行といった視覚的な工夫を取り入れることで、ユーザーが「どのように操作すれば良いのか」が直感的に理解できるよう細部に至るまで厳密なルールが定められています。共通のルールを設けることで、誰もが操作しやすいデザインを実現できるようになりました。 マテリアルデザインの基本原則 マテリアルデザインにはルールが定められていますが、ここでは大きく３つの基本原則を紹介します。 「紙」のルール カラム（枠）を「紙」のように考えると自然と使う人が理解しやすくなります。紙を重ねる時に浮かした状態になると影ができます。影があると高さがあると認識できます。紙の厚みは1dpi、形状は四角形あるいは円形（多角形は不可）で、大きさは自由に変えることができます。 「インク」のルール 紙の上に存在するのがインク要素です（色・写真・文字・動画など）。インクは紙の範囲内で動かすことができ、厚みの概念はありません。 操作に応じた「モーション（動き）」のルール マテリアルデザインでは、ユーザーの操作に応じたモーション（動き）を多用します。モーションにはそれぞれ意味があり、装飾ではありません。 例えば、 ● アクションが成功したかどうか判断できる ● どの項目を選択状態にあるか示す ● コンテンツが読み込み状態であることを表現する ● ユーザーに操作のヒントを与える マテリアルデザインのメリットとデメリット マテリアルデザインは、ルールに従って作成するので完成度の高いインターフェイスをつくることができます。Googleの公式サイトにはデザインルールに則ったボタンやアイコンが用意されているので、短時間でデザインする事ができます。 一方で、ルールに縛られ、デザインの没個性につながり、サイトの差別化が難しくなる側面も持っています。 まとめ 私の勝手な解釈ですが、マテリアルデザインのルールを全て守らず、イラストや配置、カラーなどオリジナルのいい塩梅でデザインをしても良いかなーと思っています。次回は、実際にデザインする際に、取り入れるマテリアルデザインをまとめようと思います。 --- - Published: 2019-06-19 - Modified: 2020-03-02 - URL: https://fastcoding.jp/blog/all/webdesign/2019sketch-2/ - カテゴリー: Webデザイン - タグ: Sketch, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回は、Web制作のUIデザインツールとして有名な「Sketch」について、 【1】WEBデザイナーがSketchを使う理由 を紹介しました。今回は、実際にSketchのインストールから基本操作を紹介します。 目次 1 Sketch（スケッチ）注意事項とライセンス料金について 2 Sketchのインストールと起動 3 ワークスペースと操作メニュー （１）アートボードを配置する （２）図形ツールと変形 （３）テキストを装飾する （４）写真を装飾する （５）ファイルを書き出す（便利な２種類） 4 関連リンク 5 まとめ Sketch（スケッチ）注意事項とライセンス料金について ・「Sketch」はMac専用 （現在、Windows版はありません。） ・「Sketch」はUIが英語 （英語の苦手な筆者でも、感覚的に操作できるので、特に不自由はありませんでした。） ・ 30日間無料トライアル （まずはお試しができる） ・ ライセンス料金 30日のトライアルが終了すると使用を継続する場合は、1年間９９ドルのライセンス料金がかかります。ライセンス購入後、1年間アップデートを受けられますが、1年経つと「It’s almost time to renew your Sketch license」という通知がメールに届きます。つまりライセンスは失効し、引き続きアップデートを受けるには再度59ドル〜99ドル（プランあり）を支払う必要があります。ライセンスを購入しなかった場合は、アップデートを受けられなくなる代わりに直前のバージョンのまま使い続けることができますが、「Sketch Cloud」 も利用できません。 ＊「Sketch Cloud」とは、クラウド上でデザインを共有しコメントをつけたりファイルをダウンロードできる便利な機能です。 Sketchのインストールと起動 Sketchの公式サイト（※英語）から 「Try for free」 をクリックします。自動的にダウンロードが開始されます。 Sketch - The digital design toolkit 圧縮ファイルがダウンロードされるので、ダブルクリックして解凍します。 「Sketch. app」が展開されるので、アプリケーションフォルダに移動させておきましょう。 これでSketchのインストールは完了です。 Sketchを起動する 「“Sketch. app”はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか? 」というメッセージが表示されるので、「開く」をクリックしてください。 それでは、「New Document」をクリックして基本の操作を試してみましょう。 ワークスペースと操作メニュー 中央の真っ白なキャンバスがワークスペースです。 ・ 上部 基本メニュー。アイコン表示なのでパッと見で使用できます。 ・ 左サイド ページ・アートボード別に配置したオブジェクトが階層になって表示されます。 ・ 右サイド 文字や図形、写真などのスタイルを詳細に設定できます。 アートボードを配置する 画面左上「Insert」＞「Artboard」を選択します。 ワークスペース上で、マウスで好きなサイズのアードボードを設置します。 または、右のメニューから各種デバイスを選択して配置することができます。 図形ツールと変形 「Insert」＞「Shape」→様々な形の図形があるので、選択してアートボードに描きます。 右のスタイルの詳細設定で「Fills（塗りつぶし）」「border（線）」「opacity（不透明度）」 などを設定できます。 ＊ 塗りつぶしには、グラデーションやパターン（写真）などを選ぶこともできます。 画面上部にある、ベクターツールの「Edit」で、アンカーポイントを追加したり変形できます。 テキストを装飾する 「Insert」＞「Text」を選択します。アートボード上でテキストを入力します。 右のスタイル詳細設定で「Typeface（フォント）」「Shadows（シャドウ）」などを設定できます。 写真を装飾する 「Insert」＞「image」を選択し、任意の写真を配置します。 右のスタイル詳細設定で、スタイルを設定します。 写真の上に「Fills（塗りつぶし）で黒」でさらに「opacity（不透明度）」を調整すると 下記のようなデザインをすることもできます。 ファイルを書き出す（便利な２種類） 作ったデザインファイルを、パーツ事に切り出してみましょう。 スライスツールを使う場合 通常のスライスで、重なる背景も含めてスライスされます。アートボードに設定しているカラーについては、書き出しに含めるか含めないか選べます。 「Insert」＞「Slice」を選択し、任意のパーツをスライスします。 切り出すサイズは複数設定でき、サイズ違いを一気に書き出すことができます。 「Make Exportable」を使って透過PNGで書き出す 「Make Exportable」で書き出すときにPNGを選択すると背景や重なるオブジェクトを気にせず透過で書き出すことができます。（これすごく便利なんです！！） オブジェクトを選択して、メニューバーの「Layer」＞「Make Exportable」から行うか、 画面右下の「Make Exportableの+」をクリックして行います。 通常のスライスと同様、切り出すサイズは複数設定でき、 サイズ違いを一気に書き出すことができます。 関連リンク まとめ 今回は、「Sketch」のインストールから基本の操作をご紹介しました。 FASTCODINGでも、Sketchでのデザイン入稿が増えています。 Photoshop、Illustrator、Sketchまで、様々なデザインツールに対応しています。 お困りの場合はFASTCODINGまでご相談ください。 --- - Published: 2019-06-12 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/webdesign/2019sketch-1/ - カテゴリー: Webデザイン - タグ: Sketch, デザイン こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Web制作のUIデザインツールとして有名な「Sketch」の便利な機能を紹介します。 目次 1） Sketch（スケッチ）とは？ 2） Sketchと他のツールを比較してみる 3） Sketchの便利な機能 － １サイトを１ファイルで作れる軽さ － ワークスペースをページで分けてスッキリ － ちょこっとしたデザインが全てに反映されるシンボル機能 － ボタンや見出しの装飾にはスタイルで共通化 － デザインの共有もクラウドで楽々 4） まとめ Sketch（スケッチ）とは？ Sketchは、Bohemian Codingというオランダの会社によって開発されたベクターグラフィックソフトです。ベクターソフトでありながらピクセル基準で作成することが前提のつくりになっており、WEB制作やUIデザインに特化しています。 さまざまな機能が詰まったAdobe PhotoshopやIllustratorと比較すると、UIデザインに特化している分、無駄な機能が削ぎ落とされているため学習コストが低いです。また、効率的にUIデザインができるだけでなく、プロトタイプ検証、プロジェクトメンバーやクライアントへの共有といった、デザイン制作前後のフェーズでも活用できる機能を兼ね揃えています。 ＊Sketchは現在はMac版しか出ていません。 Sketchと他のツールを比較してみる みなさん、WEBデザインの制作する際、どのツールを使っていますか？ 少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。最近では、AdobeXDやSketchが支流となっています。確かに、WEBデザインやUIデザインにおいてはSketchが便利ですが、Illustrator、Photoshopにしかできない作業もあります。そこで、それぞれのツール特徴を筆者独自目線でまとめてみました。 Photoshop 写真加工やリッチなグラフィックデザインに最適（ビットマップデータ） Illustrator 印刷物デザイン、イラスト・ロゴ制作に最適（ベクターデータ） AdobeXD WEBサイト、モバイルアプリのデザイン（プロトタイプ制作、関係者との共有に最適） Sketch WEBサイト、モバイルアプリのデザイン（大規模案件・デザイン効率化） 筆者の場合は、写真加工はPhotoshop、文字デザイン・アイコンデザインはIllustratorを利用し、それらの素材を利用してWEBデザインをSketchで行なっています。 このように、目的や状況において、それぞれのツール特徴を生かしてデザインしていくことで、作業効率を上げ時間短縮に繋がるだけでなく、エンジニアや関係者とのコミュニケーションを円滑にすることもできます。 Sketchの便利な機能 Sketchを使っている方にとっては当たり前かも知れませんが、筆者が実際に利用して「ヌォォォォオ」と唸った便利な機能を紹介します。 １サイトを１ファイルで作れる軽さ これまで、IllustratorでWEBデザインをしてきた筆者は、２０ページに及ぶデザインをPC1,PC2,Tablet2などファイル分けしていました。それは、ただただ重たいからです。 ところが、Sketchはとにかく軽い！！２０ページを１つのファイルで軽々制作できるんです。 ワークスペースをページで分けてスッキリ Sketchは１つのワークスペースに複数アートボードが作れ、デバイス別にデザインができます。そして、ワークスペースをページで切り分けることができます。 例えば、「TOP」「WORKS」「COMPANY」などページ毎に一つのワークスペースで作業ができます。 ちょこっとしたデザインが全てに反映されるシンボル機能 Sketchにはシンボルという機能があります。 ヘッダーやフッターなど、各ページで共通するパーツをシンボルとして登録しておけば、ちょこっとデザインを変更しても全てのページに反映されるという機能です。 ボタンや見出しの装飾にはスタイルで共通化 シンボルと似た機能ですが、こちらはボタンや見出しなど共通のスタイルを適応する場合に便利です。例えば、ボタン事にテキストが違うといった場合です。 デザインの共有もクラウドで楽々 スケッチは、デザインをクラウド上で共有でき、コメントを残すこともできます。クライアントへのデザイン確認やエンジニアとの共有も簡単です。また、クラウドからデザインファイルをダウンロードすることもできます。 まとめ 長年WEBデザインに携わっている方は、PhotoshopやIllustratorを使用されてきたと思います。 操作が慣れていることから、新しソフトを使い始めるのに抵抗があるかも知れません。ですが、Sketch一度使い始めると、その便利さに必ず唸るはずです。 なぜなら、筆者もその一人だからです。 --- - Published: 2019-03-01 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/google-for-jobs/ - カテゴリー: Web業界の動向・情報, SEO - タグ: Web業界の動向 こんにちは。FASTCODINGです。 2019年1月23日、ついに日本でもGoogle for Jobs（日本での名称は「Googleしごと検索」） がリリースされました！ じつは私、Google for Jobsの日本対応をワクワクして待っていました。 だって、もしかしたら今後の求人市場が大きく変わるかもしれない出来事！ Google for Jobsは、人材採用に悩む企業の新たなツールになるかもしれません。 ということで今回は、Google for Jobsに対応するメリット・デメリットや 導入方法、構造化データの作成方法をご紹介いたします。 もくじ 1. Google for jobsとは何か 2. Google for jobs対応を行うメリット 3. Google for jobs対応を行うデメリット 4. Google for jobsに掲載するには 5. 自社サイトでGoogle for jobs対応を行う方法 6. まとめ 1. Google for jobsとは何か Google for Jobsとは、グーグルの検索結果上に 求人情報を表示するしくみのこと。 2017年6月にアメリカでスタートし、 現在では北米・南米の全域を含む、世界の多くの地域で公開されています。 みなさんは、PCやスマホの検索画面でこのような画面を見たことはないでしょうか。 --- - Published: 2018-07-05 - Modified: 2024-08-07 - URL: https://fastcoding.jp/blog/all/jquery/google-maps-no-longer-free/ - カテゴリー: Web業界の動向・情報, jQuery こんにちは。FASTCODINGです。 Googleマップといえば、目的地までの道のりを調べたり ストリートビューで回りの様子を見てみたりと、近頃私たちにとってとても身近なサービス。 そんなGoogleマップの中でも、企業サイトやイベントサイトなどのウェブページへのマップ埋め込みに 多く利用されているGoogle MAP APIのサービスが2018年7月16日から大きく変わり、Google Maps Platformに移行します。 期限まで残すところあとわずか。 突然、管理サイトに埋め込んであるGoogleマップが 見えなくなってしまわないよう、きっちり確認しておきましょう。 今回の仕様変更で変わること Googleマップを埋め込む際、APIキー完全必須に APIキー必須のアナウンスは、2016年6月には行われていましたが 古いサイトではまだAPIキー無しでも表示が可能でした。 ですが、7/16からは完全必須となるためAPIキー無しで埋め込みを行っている場合は 低解像度のマップが表示されたり、エラーが表示されるようになります。 ひと月あたりの無料利用の基準変更 現行のスタンダードプラン（一定アクセスまでは無料となるプラン）と プレミアムプラン（従量制プラン）が統合し、すべて従量制のプランになります。 ただし、完全に有料化するのではなく毎月200ドルまでの無料利用分が設定されており グーグルによるとほとんどのサイトはこの無料分を超えることはないそうです。 また、使用量が予想外に増えないように、 1日あたりの予算の割り当てや上限、利用制限を設定することもできます。 Google Maps Platformの詳しい料金表 お支払い情報の設定も必須に 使用料金が従量制になったことで、お支払い情報の設定も必須となったようです。 が、グーグルのQ&Aを見ると 請求先アカウントを追加しない場合、1 か月の使用量が 200 ドル超えたとき、Maps API が正常に機能しなくなったり、他の API リクエストでエラーが返されたりする可能性があります。 と記載されていることから、請求先アカウントを設定していない場合でも、 ただちにGoogleマップが表示されなくなるということではなさそうです。 有料？無料？移行作業早見表 ここまで読むと、 『移行作業はすべてのマップで必須なの？』 『7/16以降は、WEBサイトにGoogleマップを埋め込むと全部有料になっちゃうの？』 とうんざりしてしまいそうですが、実はそうでもありません。 調べてみると、なかなかややこしい感じになってしまったので 料金と作業の有無がひとめでわかるよう、Yes/Noチャートにしてみました！ iframeを使って地図から直接埋め込み iframeが となっている場合は引き続き無料で利用可能です。 今回、サービス移行をする必要もありません。 APIを利用してiframeで地図を埋め込み iframeが となっている場合、{地図の種類}の部分の違いによって有料になるものがあります。 【無料になる場合】 地図の種類 説明 place 指定した箇所にマーカーをつけた地図を表示 view マーカーや経路のないシンプルな地図。 【有料の場合】 地図の種類 説明 search 指定した条件の検索結果を表示。 directions 指定した区間の距離や移動時間を地図に表示 streetview ストリートビューで表示 APIキーを使用していて、現在スタンダードプラン 従量制のプランになるため、基本的に料金が発生します。 （ただし月額200ドルの無料利用分あり） 移行ツールから変更点を確認し、最適化しましょう。 おそらく請求先情報を求められると思いいます。 ※移行ツールの提供は終了しています。（2024年7月19日更新） APIキーを使用していて、現在プレミアムプラン プレミアムプランの場合は何も変更しなくても大丈夫です。 7/16になれば自動的に新システムへと移行します。 APIキーを使っていない 7/16を過ぎるとAPIキーなしで表示しているGoogleマップが表示されなくなります。 のようにAPIキーを記載しない形でAPIを読み込んでいる場合は Google maps platformからAPIキーを取得しましょう またその際に請求先情報なども必要に応じて設定しましょう。 まとめ ご自身の運営サイトについて、対応方法がわかりましたでしょうか。 じつは、先日FASTCODINGのメールアドレスに、Googleから 下記のようなアナウンスが届きました。 おそらく、同じようにGoogle Map APIを使用する際に使っている Googleアカウントには既にメールが届いているはずです。 英語なので読み飛ばしている可能性もありますが、 こちらを受け取っている場合は必ず目を通したほうがいいですよ。 7/16まで残りわずかですが、トラブルにならないよう 事前にしっかり対策していきましょう。 --- - Published: 2018-06-25 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/jquery/howtoaddgooglemap/ - カテゴリー: jQuery こんにちは。ベトナムオフィスのThanh（タン）です。 今回はGoogleMapの使い方について、弊社でよく行うパターンをご紹介いたします。 企業様のWEBサイトに、ほぼ必ず存在するのが所在地の地図。 ひと昔前は、いちいち地図画像を作成することもありましたが 最近はGoogleマップを埋め込むのが主流ですよね。 を使って埋め込むこともできますが、 カスタマイズした地図を表示したいならGoogleマップAPIの利用をオススメします。 ということで、このチュートリアルでは、Googleマップの作成方法と Googleマップマーカーのアイコンの変更方法について説明します。 目次 事前準備 ステップ1 － HTMLの記述 ステップ2 － CSSの記述 ステップ3 － Javascriptの記述 Googleマップを表示する基本のコード Googleマップのマーカーを変更する Googleマップのナビゲーションコントロールの設定を変更する Googleマップから緯度経度を取得する方法 まとめ チュートリアルの前に、まずは完成品を確認するためにデモページをご覧ください。 Googleマップを表示するDEMO まず、API（Application Programming Interface）キーをダウンロードしておきます。 リンク：https://console. developers. google. com（無料） 取得方法については、わかりやすく説明されているサイト様がありましたので こちらを参考にしてみてくださいね。 Google Maps Platform APIキーの取得・発行について ステップ1 － HTMLの記述 ①Google APIの読み込み 上記のsrcにある{APIキー}は、事前準備で取得した自分のAPIキーに置き換えてください。 また、myMapは、地図の詳細を設定するために呼び出すjavascriptの関数名。 こちらについてはステップ3で詳しく説明します。 ②地図を埋め込む場所を指定 Googleマップを読み込みたい領域にidを指定することで、好きな場所に地図を配置することができます。今回は、google-mapというidが指定されたdiv内に地図を読み込みたいので、htmlの記述はこのようになります。 ステップ2 － CSSの記述 Googleマップのサイズが固定の場合： Google マップを固定サイズで表示するには下記のようなCSSを記述します。 幅と高さを設定していないと、地図がうまく読み込めないので 必ず設定しましょう。 Googleマップのサイズがレスポンシブの場合： Googleマップはレスポンシブ対応も可能です。 その場合は、widthをパーセンテージで指定しましょう。 ステップ3 － Javascriptの記述 Googleマップを表示する基本のコード 【解説】 google. maps. LatLng(緯度,経度)で、表示したい場所の座標をセットします。 座標の確認方法はGoogleマップから緯度経度を取得する方法で確認してください。 ステップ1 － HTMLの記述で作成したGoogleマップの設置場所を指定します。 Googleマップの初期設定を指定しています。 Optionで設定できる項目はたくさんありますが、今回はGoogleマップの座標セットと ズームレベルの指定を行いました。 そのほかのオプションは以下に一覧があるので参考にしてくださいませ。 インスタンスを作成します。 ここでようやくGoogleマップがWEBページ内に表示されるようになります。 引数は、google. maps. Map(div要素, マップオプション：任意) マーカー（ピン状の画像）を、地図の指定した場所にセットします。 今回はmyCenterを設定したので、地図の中心として指定した座標と同じ場所にマーカーが表示されます。 Googleマップのマーカーを変更する 基本のコード表記では、Googleマップのピンアイコンが表示されますが、 代わりに自分で用意した画像をを利用することもできます。 【変更前コード】 【変更後コード】 マーカーのアイコンプロパティにイメージのパスを設定します。 ※アイコンのサイズは自動的に変更されます。 Googleマップのナビゲーションコントロールの設定を変更する ナビゲーションコントロールとは、下の画像にある赤く囲った部分にある ズームやフルスクリーン表示をするための機能のこと。 基本のコードにあるmapOptionsのオブジェクトプロパティに追記することで コントロールの制御をすることができます。 使用可能なオプション Option Description zoomControl ズームコントロールを有効/無効にします。デフォルトでは、このコントロールは右下に表示されます。 値：true/false mapTypeControl 地図/航空写真といった地図の種類を変更できるマップタイプコントローラの表示を有効/無効にします。デフォルトでは、このコントロールは左上に表示されます。 値：true/false streetViewControl ストリートビューを表示するためのペグマン人形の表示・非表示をコントロールします。デフォルトでは、このコントロールは右下に表示されます。 値：true/false rotateControl 航空写真の場合、地図を45°ずつ回転させるためのコントロールボタンの表示・非表示を行います。対応していない地域では表示されません。 値：true/false scaleControl Googleマップ内にスケールバー（メモリの表示）の表示・非表示を行います。デフォルトでは、表示されません。 表示すると、地図の右下に表示されます。 値：true/false fullscreenControl フルスクリーンを有効/無効にします。デフォルトでは、このコントロールは携帯デバイスのみで表示されます。有効にすると、地図の右上に表示されます。 値：true/false Googleマップから緯度経度を取得する方法 Googleマップから緯度と経度座標を取得する方法は、下記の手順を参考にしてください。 1. 緯度・経度を調べたい場所を検索 Googleマップを開いて ( https://www. google. com/maps/ ) 見つけたい住所や場所を検索します。 2. ピンを右クリックし、『この場所について』をクリック サンプル画像は英語版のため"What's here? "と表示されていますが、 以下の画像にある赤く囲った場所に『この場所について』とあるのでこちらをクリックしてください。 3. 緯度・経度を確認する 座標は、画面の下部にある長方形のボックスに表示されます。 myMap機能を閉じる前に次の行を追加します。 - のdivに（myCenter）の地図を作成します。 まとめ いかがでしたでしょうか。 このブログの通りに記述すると、ひとまず基本的なマップの表示はできるようになるかと思います。 また、オプションを駆使すると、より埋め込みたいサイトに合ったマップにすることができるので 是非いろいろ試してみてくださいね。 今回のチュートリアルのコードはCodepenからも見ることができるのでこちらもご確認くださいませ。 --- - Published: 2018-06-14 - Modified: 2024-10-31 - URL: https://fastcoding.jp/blog/all/info/gdpr/ - カテゴリー: Web業界の動向・情報, WordPress Go back Your message has been sent Name(required) Warning Email(required) Warning Website Warning Message Warning Warning. Submit こんにちは。 FASTCODINGです。 突然ですが、5/25よりEU域内において適用が開始された 個人情報に関する法律『GDPR』をご存知ですか？ なんとなく聞いたことあるけどEUの法律だから日本は関係ないんでしょ？ いえいえ、とんでもないっ！ 日本で運営しているサイトでもしっかり対応しておかないと 最悪とんでもない罰則をうけることになりかねません。 今回は記事ではGDPRについて、 Wordpressの設定に絞ってご説明しようと思います。 目次 1. まずはGDPRについて調べる GDPRとは何か？ GDPRの適用対象 個人データの範囲 GDPR違反に対する罰則 具体的になにをすればいいの 2. wordpressをGDPRに対応させるには ①GDPRに対応したWordPress 4. 9. 6にバージョンアップ ②プライバシーポリシーを設置 ④個人データのエクスポートツール＆個人データの削除ツール ④Cookie使用の同意を求めるプラグインの導入 ⑤使用しているプラグインの確認 まとめ 1まずはGDPRについて調べる GDPRとはなにか？ GDPRとは GDPRは「General Data Protection Regulation」の略で、「一般データ保護規則」とも呼ばれる個人情報保護の法律だ。その内容は、端的に言えば「個人データ」の「処理」と「移転」に関する法律ということになる。 ZDNet Japan：https://japan. zdnet. com/article/35110326/ 今までもデータ保護指令というルールはありましたが、同じEU内でも国によって 規制内容が異なっていたことから、ルールを統一する目的でGDPRが制定されました。 日本で2017年に施行開始された、改正個人情報保護法のEU域版といった感じですが GDPRのほうが厳格で罰則も厳しいと言われています。 そして最大のポイントが、日本の企業・サイトも例外ではないということ。 域内（EU加盟国 28カ国とアイスランドとリヒテンシュタイン、ノルウェー）で取得した「個人データ」を域外に「移転」することは原則禁止されており、日本のような域外へ移転させるには、 『移転先の国、地域が十分に個人データ保護されている』か、『個々のサイトや企業が適切な保護措置を行っている』ことが条件になってきます。 日本は現在のところ残念ながら「十分なレベル」とは認められていないため、個々の企業・サイトが対応を行わなければならないのです。 GDPRの適用対象 個人データの対象 GDPRの保護対象となる「個人データ」には、域内に居る個人のデータ （国籍やどこに住んでいるかを問わない）はもちろん、 地域に短期出張や旅行、出向している個人のデータも含みます。 さらには、日本などの第三国から域内に送付された個人データも対象になるため注意が必要です。 GDPRの適用範囲 GDPRは、域内に設立された企業やサイト、団体はもちろんのこと域外であっても、 個人データの対象に対して商品またはサービスを提供する場合 個人データの対象の行動を監視する場合 のような場合、適用範囲に含みます。 つまり、WEBサイトの場合は域内からのアクセスを遮断しない限り GDPRの適用範囲になる可能性が十分にありえます。 個人データの範囲 一口に個人データと言っても、内容はさまざま。 現時点でJETROサイトに上がっている GDPRで保護の対象となる個人データの例はのこのようになっています。 氏名 識別番号 所在地データ メールアドレス オンライン識別子(IPアドレス、クッキー識別子) 身体的、生理学的、遺伝子的、精神的、経済的、文化的、社会的固有性に関する要因 IPアドレスやクッキーについても個人情報とされているため アクセス解析やWEB広告を導入している場合も注意が必要ですね。 GDPR違反に対する罰則 GDPRに違反した場合、制裁内容によって下記の2パターンの上限金額に基づいた 制裁金を請求される可能性があります。 1,000万ユーロ（約13億円）、または、企業の場合には前会計年度の全世界年間売上高の 2％のいずれか高い方 2,000万ユーロ（約26億円）、または、企業の場合には前会計年度の全世界年間売上高の 4％のいずれか高い方 とはいえ、いきなり制裁金を科せられるわけではなく、 制裁金を請求されるまでに、警告や保護監査などの段階を踏むみたいなので少し安心ですね。 具体的に何をすればいいの？ データの収集および利用目的について利用者に明示的に同意してもらう必要があります。 また、日本においてはまだ十分に個人データ保護されている国と認められていないため 標準契約条項(Standard Contractual Clauses：SCC)」の締結、または「拘束的企業準則(Binding Corporate Rules: BCR)」を承認してもらわないといけないそうです。 ... と、めちゃくちゃ固い言葉が並びますが、正直法律関係は複雑。。。 詳しくはEUの法律に詳しい弁護士さんに相談してください。 2wordpressをGDPRに対応させるには 具体的に何をすればいいの？で記載した「利用者にデータの利用目的を明示する」に関して、 Wordpressでできる対策を5つご紹介します。 ①GDPRに対応したWordPress 4. 9. 6にバージョンアップ 念のため、バージョンアップ前には必ずバックアップはとっておきましょう。 また、サイトの構成方法によってはWordpressのバージョンアップを行うことで レイアウト崩れが起きたり、最悪の場合閲覧できなくなってしまうことがあります。 不安な場合は、弊社Fastcodingなどのシステム会社に依頼することを オススメいたします。 ②プライバシーポリシーを設置 WordPress 4. 9. 6では、DGPRに対応するため プライバシーポリシーを設定する機能が追加されました。 1プライバシーポリシーを作成する WordPressをバージョンアップすると、設定に『プライバシー』という項目が 追加されます。 『プライバシー』をクリックすると、このように表示されます。 プライバシーページを新たに作成する場合は『新規ページを作成』をクリック。 すると、Wordpressがあらかじめ用意したプライバシーページの雛型が入った 固定ページの作成画面が出てきます。 ここから、サイトの目的にあったプライバシーページを作成しましょう。 Wordpressがプライバシーポリシーの雛型を用意してくれてはいますが、 サイトの提供するサービス内容によって記載すべき項目は 異なるため、文章は別で用意することをオススメします。 すでにプライバシーポリシーを設置済みで内容に問題がない場合はなにもせずに3へ 2プライバシーポリシーをWordpressのわかりやすい場所に配置 １で作成したページが誰からも探しやすいよう、 Wordpress内の見やすい場所に設置しましょう。 3プライバシーポリシーをWordpressに連携させる 既にプライバシーポリシーのページを持っている場合は指定しておきましょう。 ③個人データのエクスポートツール＆個人データの削除ツール こちらも今回のWordpressのアップデートで追加された機能。 それぞれ ツール > 個人データのエクスポート ツール > 個人データの消去 から操作が可能です。 個人からの個人データ削除やデータ提供のリクエストがあった場合に利用しましょう。 ④Cookie使用の同意を求めるプラグインの導入 Google AnalyticsやAdwordsを導入している場合や、 ECサイトでは、Cookieを利用しているはず。 このCookieに関しても、事前に同意をとっておきましょう。 例として、最近海外のサイトを中心によく見るようになった Cookieの利用に関する同意を求める通知バーの導入方法を紹介されている サイトをご紹介いたします。 【GDPR】WordPressでCookie使用の同意を得る簡単な方法 ⑤使用しているプラグインの確認 サイトを運営する上では、さまざまなプラグインを導入していると思います。 このプラグインひとつひとつに関しても、きちんとGDPR対応されているかを確認しましょう。 もし、長い期間バージョンアップされていないプラグインで個人データを扱っているものがあれば、 他のGDPR対応されているプラグインに乗り換えたほうがいいかもしれません。 また、プラグインがGDPR対応されたなどのアナウンスがあれば都度バージョンアップしましょう。 まとめ いかがでしたでしょうか。 GDPR対策については、システムの変更や修正だけでなく 社内での個人情報の取り扱いについても改めて見直す機会になるかと思います。 規則だからと受け身にとらえるのではなく、 これを機に、ユーザにとって一層安心できるサイト作りを心掛けたいですね。 最後に、今回GDPR対策について参考にさせていただいたサイトも合わせてご覧くださいませ。 --- - Published: 2018-06-01 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/jquery/jquery-form-validation/ - カテゴリー: システム開発, jQuery ※こちらのプラグインはかなり古くなってしまいましたので提供を終了しております。ご了承ください。 こんにちは！ファストコーディングの働くおかんこと、石井です。 急に暑くなったと思ったら肌寒かったり、夏が近いなぁと思っていたら今度は梅雨、、 季節の変わり目って大変ですよね。 特に梅雨の時期はジメッとしていて、湿度は高いし、髪はうねるし、洗濯物は乾かないし、 早く過ぎてほしいと祈るばかりです。 でも、道端のアジサイには毎日癒されています。 私にとっては、この時期一番の楽しみです。 さて、今回はフォームの自動検証についてお話します。 皆さまは、お問い合わせフォームなどのフォームのについて、何か対策をされていますか？ 「せっかくフォームまで来たのに、エラーが何度も出て、入力が面倒になって途中でやめてしまう・・・」 「フォームからお問い合わせしてもらったのに、入力の仕方が間違っていて返答ができない・・・」 「自動検証機能付けたいけど、設定が面倒・・・」 こんなご経験はありませんか？ そんなお悩みを持っている方に、今回は、「jQuery form optimizer」をご紹介します。 フォームを自動検証し、入力ミスをなくすのはもちろん、設定も簡単です。 まずは、こちらのリンクから「jQuery form optimizer」をダウンロードしましょう。 https://github. com/fastcoding-jp/form-optimizer 次に、 jquery. form. optimizer. js jquery. form-optimizer. css ja_JP. json （日本語の場合） を、フォームを設置するプロジェクトにコピーしてください。 それでは実際にフォームを設置していきましょう。 Step 1. CSSファイルとJSファイルの読み込み 以下のコードをhtml内に埋め込み、コピーしたCSSファイルとJSファイルが読み込まれるように設定します。 ※ディレクトリは、ファイルをコピーした場所を指定してください。 Step 2: フォームの作成 html上でフォームを作成します。 入力項目については、必ずクラス名に fo-item を付けてください。 また、入力必須項目については、下記のようにクラス名に fo-required を付けてください。 下記のように、"fo-item" 以下にラベルを追加すると、アラート検証のためにこのラベルが取得されます。 ラベルの次に、inputタグを設置します。 入力ミスがあった場合に表示させたいメッセージがある場合は、"fo-errors"というクラス名を付けたdivタグを追加してください。 上記をまとめると以下のようなコードになります。 その他の項目については、以下の表を参考にしてください。 入力項目 HTMLコード カタカナ入力 選択項目 日付入力 時間入力 数字入力 アドレス入力 URL入力 電話番号入力 郵便番号入力 都道府県入力 選択項目*複数選択可 送信ボタン Step 3: jQueryについて コードが読み込まれた後に、「jQuery form optimizer」プラグインを作成するために上記で作成したセレクタフォームを呼び出します。言語ファイル名を入力し、language_path（言語ファイルを置くパスフォルダ）を入力します。 もし日本語以外の言語を使用したい場合は、言語ファイルを開いて直接翻訳してください。 いかがだったでしょうか。 何かご質問がありましたら、お問い合わせフォームよりご連絡ください。 皆さんもどんどん使ってみてくださいね。 --- - Published: 2018-05-25 - Modified: 2025-07-15 - URL: https://fastcoding.jp/blog/all/frontend/htaccessredirect/ - カテゴリー: React, Vue.js, システム開発, SEO WEBサイトの引越しの際、忘れてはいけないのが 旧サイトから新サイトへのリダイレクト設定。 旧サイトへアクセスしたら、自動的に新サイトに飛ばしてくれるアレですね。 今回は、リダイレクト設定を行うメリットや実際に使える htaccessの書き方についてご紹介いたします。 目次 1. WEBサイトの引越しでリダイレクトをする理由 2. 301リダイレクト設定はhtaccessで 3. よく使う301リダイレクト書き方5選 4. 参考URL WEBサイトの引越しでリダイレクトをする理由 通常WEBサイトを引越しした場合には、旧サイト側に301リダイレクトと呼ばれる 恒久的な転送を意味するリダイレクトの設定を行います。 ですが、何故301リダイレクトの設定する必要があるのでしょうか 理由は大きく分けて２つ。 1. 訪問ユーザ対策 WEBサイトを引越ししてすぐの期間は、検索エンジンを利用すると 旧サイトが検索結果に表示されます。 その旧サイトに、転送設定がされていなければ当然 新サイトに辿りつけないですよね。 また、検索エンジンを利用しない場合もお気に入りブックマークから旧サイトに訪問しようとしても 新サイトにはたどりつけませんから、常連ユーザにとっても、 不便を強いれることになります。 301リダイレクト設定を行っていると、 このようなユーザに対する不便を解消することが可能となります。 2. 検索エンジン対策 新サイトを公開したとしても、 検索エンジンはすぐにインデックスを開始してくれるわけではありません。 また、旧サイトで獲得していた検索エンジンからの評価（被リンクやPageRankなど）も 新サイトには引き継がれていないため、旧サイトは上位表示されていた検索ワードでも、新サイトではなかなか上位表示できない可能性があります。 この場合においても、301リダイレクト設定を行うことで 検索エンジンが、旧サイトの評価を新サイトに引き継ぐことが可能となり 検索からのユーザ流入の減少を抑えることができるのです。 ということで、301リダイレクトをきちんと設定していないと、 ユーザにとってはとんでもなく不便な上に、SEO的にも大問題！ さくっと設定してしまいましょう！ 301リダイレクト設定はhtaccessで 301リダイレクトを設定するには、. htaccessというファイルに 内容を記述する必要があります。 . htaccessとは . htaccessとは､ Webサーバーをディレクトリ単位で制御するためのファイルで､ リダイレクトやBASIC認証､404エラーページの作成を行えます｡ https://www. seohacks. net/basic/terms/htaccess/ ※こちらのWebサイトはすでに閉鎖されているようです。ご注意ください。（2025年7月現在） ほかにも、IPアドレス単位でアクセスを遮断することができたり デバイスによって表示させるページを振り分けることも可能。 本当に便利なので、こちらについてもまた別の機会に記事にできればいいなと思っています。 ということで、よく使う. htaccessの書き方をご紹介。 よく使う301リダイレクト書き方5選 1. 全て新サイトのTOPへリダイレクト（非推奨） これはちょっと乱暴な方法。 サイトを見に来たユーザは、どの旧ページにアクセスしても 全て新サイトのトップに飛ばされてしまいますね。 実際、最近国税庁のサイトリニューアルがあった際 リンクしていたページを見ようとしたらすべてTOPページに 飛ばされる問題が発生して阿鼻驚嘆の嵐でした。 国税庁Webサイトに関するニュース記事 この設定をした場合、旧サイトの該当ページに対する検索エンジンからの評価を 新サイトの同じページに渡すことができませんので、SEO的にもあまり意味がありません。 どうしても設定したい場合は構いませんが、FASTCODINGではオススメしません。 SEO対策をしっかり行いたい皆さまは 以降の方法を参考にしてみてください。 2. 新サイトと旧サイトのディレクトリ構成がまったく同じ場合 旧サイトと新サイトの違いはドメインだけ。 そのほか構成などはすべて同じの場合はこの設定で十分。 ですが、大抵サイトを引越しする場合はディレクトリ構成や 使用するパラメータなど微妙に変わってくる場合は多いはず。 その場合は以降の設定が参考になると思います。 3. 旧サイトの特定のページを新サイトの特定のページへ 例） 旧サイト：https://old. com/old. html 新サイト：https://new. com/dir/new. html 新旧サイトのディレクトリ構成に規則性がない場合や イレギュラーなページの場合は、このように1ページ毎にのリダイレクト設定を 記述していきます。 4. 正規表現を使ってディレクトリ構成の変更 例） 旧サイト：https://old. com/dir/180520/test. html 新サイト：https://new. com/dir/18/0520/test. html この例では、新サイトのディレクトリを日付でさらに細かく分けていきます。 このように、ある程度の規則性があるディレクトリの再構成には正規表現で対応することができます。 5. クエリパラメータの値をディレクトリ構成に変更 例） 旧サイト：https://old. com/dir/search. php? date=xxxx 新サイト：https://new. com/dir/xxxx/ パラメータを利用してリダイレクトを行う場合は 4の例のようにRewriteRule上に正規表現を記述しても動いてくれません。 この場合はRewriteCondでパラメータ用に正規表現を書くことで対応します。 参考URL いかがでしたでしょうか。 今回は5つの書き方をご紹介しましたが、これ以外にも301リダイレクトの際には 様々な書き方をすることができます。 該当サイトの構成に合わせた設定を心がけてくださいね。 最後に. htaccessのリダイレクト設定について参考になるサイトをご紹介いたしますので お役立てくださいませ。 --- - Published: 2018-05-23 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/jquery/jquerybeginner/ - カテゴリー: システム開発, jQuery ホームページを、より魅力的に見せたりユーザーの操作性向上のために 欠かせないのがJavascriptを使った動きの実装。 さまざまなJavascriptのライブラリが開発されていますが、 中でも、jQueryは最初の公開から10年以上が経過しているにもかかわらず まだまだ多くのWEBサイトで採用されています。 今回は、『jQueryことはじめ』と題して jQueryを触ったことがない方に向けて プログラムを使うための準備や、簡単な記述方法をご紹介いたします。 目次 1. まずはjQueryを読み込もう 2. jQueryの動作確認 3. ところでどのバージョンにしたらいいの？ まずはjQueryを読み込もう！ jQueryについてあれこれ説明するより、まずは体感してみるのが一番！ ということで、まずはjQueryを動作できるように jQueryのライブラリをHTMLファイルに読み込んでみましょう。 読み込み方法は大きく分けて２つ。 jQueryのサイトからダウンロードしたライブラリを読み込む jQueryの公式サイト内のダウンロードページから、 必要なバージョンのjQueryのライブラリをダウンロードして jQueryを稼働させるHTMLページ内に読み込みます。 http://jquery. com/download/ ※このページからは最新バージョンの3. x系のみダウンロード可能なようです。 ①ダウンロードページを開いて、下記のどちらかのファイルをダウンロード。 え？『どちらか』ってどっち？？ ・・・そうなりますよね。 ●Download the compressed, production jQuery 3. 2. 1 jQueryライブラリを圧縮（ファイルサイズを小さく）したもの。 ファイルが軽いので読み込みも軽い ファイル名にはjquery-x. x. x. min. jsとminがついています。 ●Download the uncompressed, development jQuery 3. 2. 1 compressedと違って圧縮されていないのでソースコードが読みやすい。 jQueryライブラリを改造したい場合なんかに。・・・普通はあまり改造しないですけど。 ファイル名はjquery-x. x. x. js そんなわけで 正直、どちらのライブラリでも動きますが、特別な事情がない限り 圧縮されているjquery-x. x. x. min. jsのほうをダウンロードしましょう。 ②ダウンロードしたライブラリを、制作している作業環境内のディレクトリに格納する。 ③保存したライブラリをHTMLファイルから読み込む。 読み込む際のコードはこんな感じです。 この方法だと、jQueryのライブラリは必ず自身が管理するサーバ上にあるので 読み込めなくなるなどのトラブルを回避することができます。 CDNを利用して外部サイトのjQueryを読み込む CDNって何？ CDNはContent Delivery Network（コンテンツ配信ネットワーク）の略。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを、オリジナルのWebサーバーに代わって配信する仕組みを意味する。 https://www. otsuka-shokai. co. jp/words/cdn-service. html いろいろ難しいことを書きましたが、ざっくり言うとCDNのjQueryを利用すると、 ウェブサイトを高速表示することが期待できますよー、ということです。 ただし、メリットばかりではなく、CDNが何らかのトラブルで利用できなくなる可能性や、インターネットにつながっていない環境ではjQueryを動作させることができないというデメリットもあるので覚えておきましょう。 今回は、Googleが提供しているCDNを使って読み込みを行ってみます。 ①Google CDNを開く https://developers. google. com/speed/libraries/#jquery Google CDNのサイトを開くと下記のように表示されます。 ②利用したいjQUeryのバージョンにあったコードをコピーしてHTMLに貼り付け あれ？コード3種類あるけど？？ そうなんです。jQueryは大きく分けて3系統存在しています。 違いについては、後述するので、今回はひとまずv3. X系統の最新版を利用してみましょう。 jQueryのサイトからライブラリをダウンロードする場合と同じように 稼働させるHTMLページ内にGoogle CDNに記載されていた下記のコードをコピペします。 jQueryの動作確認 さて、jQueryを読み込めたかどうかを確認しましょう。 まずは何も考えずにHTMLファイルに下記のように記述しましょう。 ブラウザで確認したときに下図のように表示されましたか？ きちんと動作できていれば、H1タグ内に記述したテキストが アラートとして表示されるようになっています。 この時のポイントは２つ。 ①javascriptの記述はbodyタグ終了直前に。 HTMLファイルは記述されたコードを上から順に読み込んでいきます。 そのため、jQueryで操作したいタグ（今回の場合はh1タグ）より前に jQueryを読み込むと正常に動作することができません。 ②jQueryを利用したスクリプトはライブラリより後ろに記述 ライブラリを読み込む前にjQueryを利用したスクリプトを記述しても、 上手く動作することができませんので要注意です。 ところでどのバージョンにしたらいいの？ まずはjQueryを読み込もう！ の項目で、jQueryには大きく分けて３系統あると説明しましたが、 実際、どのバージョンを使ったいいのでしょう？ jQueryには、大きく分けてVer1. X系とVer2. X系そしてVer3. X系の3系統存在します。 それぞれの違いは以下の通り ●Ver1. X系 Internet Explorer 6-8, Opera 12. 1x or Safari 5. 1といった古いブラウザにも対応 ●Ver2. X系 サポートしているブラウザは、Ver1. X系よりも少なく、Internet Explorer 9以降、Chrome, Edge, Firefox, Safariの最新版とその一つ前、Operaの最新版。IEの古いバージョンを切り捨てることで、軽量化されています。 ●Ver3. X系 サポートしているブラウザは2. Xと同様ですが、Ver2. X系で非推奨となっていたAPIが廃止になったり、今のブラウザ環境に合わせて設計の変更があります。 古いサイトで使用していたコードを使いまわそうとしている場合やプラグインを利用する場合は、 jQueryのバージョンが違うと動かなくなる場合もあるので、使用するバージョンには注意しましょう。 ちなみに、jQueryの古いバージョンをダウンロードして使いたい場合は こちらのページから利用できますよ。 というわけで、本日はココまで。 --- - Published: 2018-05-16 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/direction/cmsshare/ - カテゴリー: ディレクション, WordPress, 便利サービス こんにちは。ファストコーディングです。 このブログをご覧いただいているあなたの会社の WEBサイトは、どのように更新・運用していますか？ 新着情報の更新がある度に、社内のWEB担当者に修正してもらっている？ 社内にWEB担当者が居ないから、些細な更新の度に外部に依頼している？ 最近は、スマートフォンの普及などの影響で 自分の知りたい情報を、その場で検索するユーザーが増えてきました。 リアルタイムに検索されるということは、情報を提供する側の企業も 即座にWEBサイトを更新し、ユーザーに応える必要があります。 しかし前述のように、WEBサイト更新に時間が掛かっていると、 お客様を逃してしまうかもしれません。 今回は、WEBサイト更新の効率が格段にアップし、 現在多くの企業から注目されているCMSのシェア率や特徴について調査しました。 もくじ 1. CMS（Contents Management System）とは 2. CMSの世界シェアを調査してみました 3. 圧倒的シェアのWordPressってどんなCMS？ 4. 人気のCMS～ファストコーディング調べ～ CMS（Contents Management System）とは CMSとは、HTMLやCSSのようなWebサイトの制作に必要な専門知識を必要とせず、テキストや画像などの情報を入力するだけで、サイト構築を自動的に行うことが出来るシステムのことです。 CMSとは 専門知識の必要がないということは、ニュースページの更新といった些細な作業であれば WEB担当者に依頼する必要なく、誰でもリアルタイムにWEBサイトをアップデートすることが可能ということ。 これはぜひとも導入したいシステムですよね。 けれど、CMSとひとくくりに言っても、その特徴は千差万別。 世間では、一体どんなCMSが使用されているのでしょうか。 CMSの世界シェアを調査してみました さまざまなWeb技術の調査を行っているW3Techsというサイトによると、 世界のCMSシェアはこのとおり。 https://w3techs. com/technologies/history_overview/content_management/all 2018年5月現在、Wordpressを使っているサイトは30. 7%。 他のCMSのシェアが軒並み5%未満であることを考えるとWordpressの一人勝ちとも言えそうです。 圧倒的シェアのWordPressってどんなCMS？ WordpressはオープンソースのCMS。基本的なシステムは無料で使用することが可能で、 簡単なブログサイトから、企業サイトやECサイトまで バラエティに富んだサイトを作成することができます。 Wordpressのメリット・デメリットはざっとこんな感じ。 メリット 記事の作成が簡単！HTMLの知識がなくても、ワープロソフト感覚で更新できる シェアが高い分、少し検索すればHOWTOを紹介したサイトがたくさん見つかり、分からないことがあってもたいてい解決できる。 プラグインと呼ばれる拡張機能を使って、様々な機能を組み込むことができる。 テーマと呼ばれるテンプレートもたくさん提供されているので、サイトの目的に合ったデザインのサイトが比較的簡単に構築できる。もちろんカスタマイズすることも可能です。 デメリット Wordpressでは、WEBサイトはにデータベースに保存された情報を、都度取り出し・組み合わせて表示するため、1ページずつHTMLページを制作しているページと比べると表示が若干遅くなってしまう。 シェアが高い分、ほかのCMSと比べるとハッカーに狙われる可能性が高く、改竄やハッキングに十分注意する必要がある ⇒これに関しては、プラグイン（拡張機能）を使ってセキュリティを高めたり、Wordpressは頻繁にアップデートされているので常に最新のバージョンに保つことで防ぐことができます。 人気のCMS～ファストコーディング調べ～ 実際、ファストコーディングで過去に請け負った案件においても WordPressでの構築が圧倒的に多いですが、下記のCMSについても根強い人気を誇っていますのでご紹介いたします。 MovableType MovableTypeのメリットは、WEBページを静的ページ（毎回データベースへアクセスしない）で作成できること。そのため、ページ数が数百ページに及ぶ大規模サイトでも 高速に表示できます。 MovableTypeについての参考サイト様はこちら↓ PowerCMS,RCMSなどの商用CMS こちらもCMSについても、ページ数が数百ページに及ぶ大規模サイトに対応。 承認フローが必要な場合や、保守サポートが必要な場合に適しています。 いかがでしたでしょうか。 今回ご紹介したWordPressやMovableTypeなどのCMS以外にも 構築したいWEBサイトの条件によっては、ほかの最適なCMSがあります。 CMSでのWEBサイト構築についてお悩みの場合は、 FASTCODINGにてご相談もお受けいたしておりますので お気軽にお問合せくださいませ。 --- - Published: 2018-05-07 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/webdesign/designswidth-2018/ - カテゴリー: Webデザイン こんにちは、FASTCODINGです。 突然ですが弊社ブログの中で最も人気のある記事をご存知ですか？ 答えはこちら↓ Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版 人気なのはとても嬉しいことなのですが、WEBを閲覧するデバイスの進化は日進月歩。 去年の常識が今年の常識であるとは限りません！ ということで2018年4月現在、パソコン用のWEBサイトは何pxで作るの？スマートフォン用は何pxがいいの？ 最新のウェブデザイン横幅事情を改めてまとめてました。 Webサイトを制作するとき、デザインの横幅に迷ったらご一読くださいませ！ もくじ 1. 2018年版「Webサイトデザインの横幅サイズ」の結論！！ 2. まず、モニター解像度のシェアを調べる ～PC編～ 3. Web・IT大手企業やイケてる企業のWebサイトを参考にする ～PC編～ 4. スマートフォンのWebサイトの横幅は何pxで作ればいいの？ 2018年版「Webサイトデザインの横幅サイズ」の結論！！ 手っ取り早く結論だけ知りたい方はここだけでOK PCは去年に引き続きでOK！ (960px,980px,1000px,1024px,1040pxあたりからお好みで) スマートフォンはでWebサイトをつくる (iPhoneのRetina2における横幅最大機種iPhone8に合わせる) 現段階ではRetina3対応は必須ではない※理由は後述します つまり、前回と同じ！ 何故このサイズの横幅をオススメするのかを知りたい方は続きをどうぞ！ 2. まず、モニター解像度のシェアを調べる ～PC編～ まずは前回と同じく「Stat Counter」でパソコンのモニター解像度のシェア率を調べます。 さて、1年ちょっとで世間のみなさんのパソコン画面サイズに変化はあったのでしょうか。 Stat Counter(スタットカウンター)とは パソコン・タブレット・携帯などの端末や国、期間別に、世界各国で使用されているモニターの解像度や検索エンジンのシェア率をグラフ化してくれるという、Web上の様々なシェア分析に特化したサービスです。 こちらが日本における2018年3月の月間のモニター解像度のシェア率。 2017年版での結果と比べてみるとやや「2560px×1440px」が伸びてきていますが まだまだ「1920px×1080px」と「1366px×768px」が大多数を占めていますね。 どちらにしても大多数のみなさんはワイド型のディスプレイを使用しているんですねー。 そういえば最近真四角のディスプレイ見かけないかも。 3. Web・IT大手企業やイケてる企業のWebサイトを参考にする ～PC編～ 前回掲載した、2017年現在の個人イケてるサイトの横幅調査が 1年経って変化があったのかどうか再調査して一覧を作ってみました。 「Web・IT大手企業やイケてる企業」だけを厳選したWebサイトの横幅一覧 —————————— ① 固定幅 —————————— 900px ： 人間 940px ： NTT docomo / キノトロープ 950px ： Yahoo! JAPAN / SoftBank 960px ： ネットイヤーグループ / beBit 980px ： 電通 / au 富士通 992px ： サイバーエージェント 1260px ： LIG ———————— ② リキッドレイアウト ———————— 980px ： Apple 1176px ： チームラボ 画面幅いっぱい ： 博報堂 / IMJ 結果、リキッドレイアウトのサイトでは横幅を目いっぱい使用するサイズが増えてきましたが、固定幅レイアウトの場合は、前回の結果とほぼ同様になりました。 Webサイト横幅比較のまとめ この結果から、自分が作りたいWebサイトが「①固定幅」である場合は 前回の調査記事同様 ブラウザでWEBサイトを見ながら、横のスペースでほかの作業することを考慮して、 引き続き1000px前後のデザインをオススメします。 ②のリキッドレイアウトの場合は、1000px以上で問題ありません！ 4. スマートフォンのWebサイトの横幅は何pxで作ればいいの？ 続いてスマートフォンのデザインをするときの横幅についてみてみましょう。 スマートフォンについてはiPhoneの現時点での最大横幅かつ、 最高画質の3倍Retinaである、iPhone8Plusを基準に考えてみようと思います。 Qiitaさんの「iPhone/iPad解像度(画面サイズ)早見表」（1年前の情報からアップデートされてる！素敵！！）を参考にiPhoneX8Plus見てみるとディスプレイの大きさは「414x736」ですね。 そして前回と同じく注意しないといけないのが「Retina対応」！ れてぃーなって何？ 簡単に言うと、より鮮明できめ細かく表示できるディスプレイのことです。 こちらの記事により詳しい説明を載せていますので是非ご覧ください！ Retina対応のWebデザインをするときの注意点 去年の同じ記事を書いたころの最新機種iPhone6では解像度が2倍だったのでディスプレイサイズ×2でOKでしたが、iPhone6Plus以降のRetina解像度はなんと3倍！ ということは、 414px(iPhone8Plusのディスプレイの横幅の大きさ・インチ数) × 3倍(Retinaディスプレイ対応比/デバイスピクセル比) ＝ 1242px(iPhone8Plusでブラウザに表示される大きさ) なんと！PCサイトのサイズよりも大きい! ! 今後はこの横幅サイズでスマホWEBサイトをデザインすればいいのね！ その判断、ちょっと待った 気をつけよう！デバイスピクセル比3倍対応の落とし穴 じつはこの記事、当初は前述のスマホ横幅サイズ＝1242pxで公開しようと思っていたのですが FASTCODING社内コーディングチームから待ったがかかりました。 まずは、この例を御覧ください↓ 3倍Retina用に切り出した画像が、3で割り切れないサイズだった場合、 3倍Retina対応機種で閲覧すると、割り切れない数値が丸められ、 画像がうっすらぼやけたりレイアウト崩れを起こす可能性があります。 20px×20pxの例では、 20÷3=6. 666... . となるため、縦幅が6pxで横幅が7pxと 正方形ではなくなってしまっていますね。 もちろんデザイン段階でしっかり考慮したり、画像切り出し時に各倍率ごとの画像を作成して srcsetを活用したコーディングをしたり等、回避することは可能です。 ただこれらは必須のものではなく、「表現したいデザインに合わせて考える」という範囲の対応で問題ないんじゃないかと思います。 対応することによるコーディングやデザイン段階での負担との天秤だと思います。 結論。スマホサイトの横幅は750pxで問題なし！ そんなわけで、FASTCODING的結論。 375px(iPhone7のディスプレイの横幅の大きさ・インチ数) × 2倍(Retinaディスプレイ対応比/デバイスピクセル比) ＝ 750px(iPhone7でブラウザに表示される大きさ) スマホサイトの横幅は750pxでもOK！ つまり、去年と同じ。 今の所、750pxでのデザインがベターですが、 今後スマホディスプレイのサイズ拡張（・・・は片手で持ちにくくなるから可能性少ないかな？） や画質向上があるたびに都度見直しが必要ですね。 今回はRetina 3倍の罠にまんまとはめられるところでしたが、 いかがでしたでしょうか。 今回の結果が少しでもお役に立てばうれしいです。 --- - Published: 2017-12-14 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e5%be%8c%e7%b7%a8/ - カテゴリー: Web業界の動向・情報 - タグ: Web業界の動向, セキュリティ, 初心者, 参考 こんにちは、ファストコーディングです。 ここ数年、WEBサイトの新規立ちあげ時やリニューアルの際の 検討必須事項といえば常時SSL化（HTTPS） 全3回でお送りしているこのシリーズも今回がラスト。 最終回は、常時SSL化の導入方法についてお伝えします！ ところで常時SSLって？ ここまでSSLについて説明してきましたが、昨今話題になっているのは『常時』SSL。 『常時SSL』とは、サイト内のすべてのページをSSL化することを指します。 国内主要企業サイトの常時SSL化（https完全対応）は2017年8月時点で約10％。 アメリカや、ドイツ、オランダといった欧米諸国が50%を上回っていることを考えると 日本では、まだまだ対応が追いついていないのが現状です。 海外に競合企業がある場合は、競合企業に負けないためにも 早めに常時SSL化しておいたほうがよさそうですね。 常時SSLの導入方法 導入するSSLの種類も決まって、あとは移行作業を実行するのみ！ ですが、移行作業もサイトの構成によってはなかなか大変！ 以下に、常時SSL化を行う際の主な作業を上げますね。 SSLサーバ証明書の申し込み まずは、これがないと話が進みませんよね。 証明書の認証レベルによっては、書類の提出をするなど 手間も時間もかかってきます。 ウェブサイトのソースコード最適化 SSLサーバ証明書を発行して、URLにhttpsが利用できるようになっても ウェブサイトのソースコードで画像やcssなどをhttp://～ではじまる絶対パスで呼び出していた場合や、 内部リンクをhttp://～で始まる書き方にしていた場合は修正が必要です。 このパスの修正作業、WordperssなどのCMSを使っている場合はプラグインを使って ある程度作業することができるので比較的ラクなのですが、 CMSを使わずに作っているサイトだと本当に大変！ 1ページずつ地道にソースコードを確認しながら修正していってください。 sitemap. xmlの記述変更 あたりまえですが、すべてのページがSSL化するので sitemap. xmlに書かれたページのURLもすべてhttpsに変更しましょう！ canonicalタグの修正or追加記述 運営しているサイトにcannonicalタグ、入れてますか？ canonicalタグは、URLの正規化するためのhtmlタグ。 内容は同じだけど異なるURLのページが複数存在するとき、 『このページが正しいから、こっちをインデックスしてね！』 と検索エンジンにお知らせするものです。 SSL化していなくても記述しておいたほうがSEO的にも良いタグなので もし、まだ記述していない場合は、この際きちんとこのタグを記述しておきましょう。 . htaccessで301リダイレクト設定 SSLに対応したページでも、移行直後には検索エンジン経由ではhttpのサイトが検索上位に出てきたり リンクを張ってくれている他サイトからの流入がhttpのサイトになってしまっている場合もあります。 そのため、自動でページがSSLに変更されるように. htaccessで301リダイレクトの設定をしましょう。 . htaccessでHSTS設定 301リダイレクトの設定だけでは、 http⇒httpsにリダイレクトされる途中で攻撃を受ける可能性も！ この問題は、HSTS（HTTP Strict Transport Security）の設定を . htaccessに記述することで解決できます。 初回のアクセスがhttpでも2回目以降は 強制的にhttpsでのアクセスに切り替わる優れものです。 プリロードHSTSの設定 前述の. httaccessでHSTSの設定をしていても、まだセキュリティ的には万全じゃありません。 だって、2回目以降のアクセスはhttpsになっても、 初回のアクセスはhttpですからね＾＾； で、これを解消するのがプリロードHSTSです。 SSL化した自分のサイトのドメインをフォームから登録しておくことで、 ChromeとFirefox、Safariの３つのブラウザからのHTTPアクセスは、初めての場合でも HTTPSで接続できるようになります。 HSTSとプリロードHSTSについてはこちらのサイトで詳しく書かれています Search Console（ウェブマスターツール）の設定 http⇒httpsにしてしまうと別のサイト扱いになってしまうようです。 Search Consoleを開いて、新しい設定を追加しましょう。 Google Adwordsなどの広告設定 Google AdwordsやYahooリスティングに広告を出稿している場合、 広告のリンク先や表示URLを修正する必要があります。 さぁ、ここまででSSL化の設定はだいたい完了。 （個別に導入しているサービスは、別途設定変更とかしなきゃいけませんよ！） ここで、常時SSL化の注意点がひとつ。 SSL化したURLは、すぐに検索エンジンに反映されるわけではありません。 インデックスされるのに時間もかかるし、検索順位が一時的に下がることも！ 一時的に落ちたとしても、徐々に元に戻っていくはずなので焦らず待ちましょう。 参考URL 最後に SSLについていろいろ書いてきましたが、説明するだけでも結構なボリューム！ もちろん、実際に作業を行うと、相当の手間がかかってしまいます。 常時SSL化をしたいけれど、手に負えない・難しすぎる・面倒だ！ そういう場合はプロに任せるのが一番。 WEB業界の最新動向や、SSLについて詳しいWEBディレクターが在籍する FASTCODINGまでお気軽にご相談ください。 --- - Published: 2017-12-14 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e4%b8%ad%e7%b7%a8/ - カテゴリー: Web業界の動向・情報 - タグ: Web業界の動向, セキュリティ, 初心者 こんにちは、ファストコーディングです。 ここ数年、WEBサイトの新規立ちあげ時やリニューアルの際の 検討必須事項といえば常時SSL化（HTTPS） 全3回でお送りしているこのシリーズ。 ≪前編≫では、SSLの説明とSSL化するメリットを書きましたが、 2回目となる今回は、SSLの種類や選び方についてお伝えします！ SSL導入で迷っているWEB担当者はぜひご一読ください。 目次 ●SSLにも種類があります 独自SSLと共有SSL サーバー証明書の認証レベルによる違い 認証局（ブランド）による違い シマンテック証明書を導入していたら要確認！ SSLにも種類があります いざ、運営サイトにSSLを導入しようと思った時必要になってくるのが SSLサーバー証明書の購入になってきます。・・・っが、ここで躓く方も多いはず。 SSLって1種類じゃないの？？？ 何がどう違うのよっ。 SSLを導入する際、大きく分けて３つの切り口で違いを説明することができます。 というわけでSSLの種類とその違いをまとめてみました。 独自SSLと共有SSL 共有SSL 「共有SSL」は、サーバー会社やプロバイダーが取得・所有しているSSLサーバー証明書を、 複数ユーザーで共有して利用するので、SSLサーバ証明書を自身で購入する必要がありません。 また、運営サイト内のすべてのページではなく、SSL化が必要なページにだけ適用させます。 無料or安価で簡単に利用できる一方、共有SSLを利用するページには 独自ドメイン（運営サイトのURL）ではなく、各サーバ会社の用意している別のドメインに なってしまいます。 ということで共有SSLはサイト全体をSSL化する常時SSL（WEBサイト内すべてのページをSSL化） にはあまり向いていませんね。 独自SSL 「独自SSL」は、独自ドメイン（自分のサイトのURL）に対して SSLサーバー証明書を発行します。 こちらについても無料～有料（ものによっては高額！）まで様々あります。 独自SSLにすることによって、SSL化していないページからフォームに移動しても ドメインが変わることはありませんし、すべてのページをSSL化することができるので 常時SSLに最適です。 昔は需要があったかもしれない共有SSLではありますが 共有SSL・独自SSLのどちらについても、無料から利用することができることや、 常時SSLが必須となってきたことも考えると、 わざわざ共有SSLを利用する必要はないんじゃないでしょうか。 サーバー証明書の認証レベルによる違い SSLサーバー証明書には、大きく別けて3つの種類が存在します。 ３つの中で一番安価かつスピーディに発行できるのがこれ。 ドメインの持ち主であるかどうかを認証してくれますが、 ほかの認証型のような厳密な認証はしてくれません。 個人や企業など誰でも取得することが可能なのですが 情報の信頼度は一番低いです。 お問い合わせや、アンケートフォームくらいの 比較的個人情報のやりとりが少ないページに向いています。 このタイプの証明書を導入しているサイトはアドレスバーに 下記のような表示がさせれています。（Chromeの場合） ドメインに加えWebサイトを運営する企業や団体の実在性を証明してくれます。 この証明書は個人でとることができず、また企業の登記証明書など 企業が存在することを証明しなければならず、若干発行までに時間がかかります。 ネットショップなどの、個人情報や決済に関する情報を取得するサイトに向いています。 このタイプの証明書を導入しているサイトはアドレスバーに 下記のような表示がさせれています。（Chromeの場合） あれ？ドメイン認証型と変わらないですよね？？ そうなんです。 ドメイン認証型と企業認証型は一見すると同じように見えちゃうんです。 WEBサイトが、ドメイン認証型と企業認証型のどちらなのか 見分け方は下記のサイトが説明してくれています。 ※リンクが切れておりましたので、リンク先を更新しております（2024年7月24日 更新） ３つの中で最も厳格な認証レベルで、企業認証型（OV）をさらに厳格にしたものと言えます。 料金も一番高額です。一番の特徴は、通常のSSLであれば鍵マークがつくアドレスバーの部分に 『企業名＋国のイニシャル』が表示されることです。 サイト訪問ユーザにとっても、安全なサイトであることが一目瞭然となります。 より高度なセキュリティ対策を求められる、金融機関などに利用されています。 それぞれの認証レベルを理解し、サイトの目的に応じた使い分けを行いましょう。 認証局（ブランド）による違い SSLサーバ証明書には、シマンテックや多くのグローバルサイン、セコムなど様々な 認証局（ブランド）があり、価格帯も安いものから高いものまでいろいろ。 けどこの価格の差って何なのでしょうか。 なんとなく価格の高い認証局のほうが、より強い暗号化をしてくれて 安全だと思いませんか？ けど、そうではないんです。 暗号の強度については、価格による差は無く、どれもほぼ同じなのだそう。 認証局による価格の差は、認証局の安全性やブランド価値、 サポート体制など付加機能によるものも大きいです。 サイトの目的や、予算にあわせて最適な認証局を選びたいですね。 シマンテック証明書を導入していたら要確認！ 『SSL化なんてとっくの昔に完了してるし』って担当者様も ご注意いただきたい情報があります。 Googleが2017年9月のブログで、シマンテック（と傘下のジオ・トラストやRapid SSL）のSSL証明書を Google Chromeで段階的に「信頼しない」ようにすると発表してるのです！ 2018年の3月と9月のGoogle Chromeのバージョンアップで 該当の認証局を利用しているWEBサイトは、Chromeから見れなくなってしまいます... 詳しくは、各レンタルサーバ会社が別途アナウンスを出しているかと思うので シマンテック系のSSL認証局を利用している場合は要確認ですよ！ --- - Published: 2017-12-11 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/info/%e5%b8%b8%e6%99%82ssl%e5%8c%96%e3%82%92%e6%80%a5%e3%81%8c%e3%81%ad%e3%81%b0%e3%81%aa%e3%82%89%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1_%e5%89%8d%e7%b7%a8/ - カテゴリー: Web業界の動向・情報 - タグ: Web業界の動向, セキュリティ, 初心者 こんにちは、ファストコーディングです。 ここ数年、WEBサイトの新規立ちあげ時やリニューアルの際の 検討必須事項といえば常時SSL化（HTTPS） だけど、そもそもなんでSSL化しなきゃいけないの？ SSL化するメリットってなんなの？ SSLの選び方って？ 今のサイトをSSL化するにはどうしたらいいの？ などなど、対応必須とは言え何がなんだかわからないWEB担当者の皆さまに向けて SSLについて全3回にまとめてみました。 まず1回目の今回は、SSLについての基本をお伝えします！ そもそもSSLってなに？ SSL（Secure Sockets Layer）とは、安全に通信をするためのセキュリティプロトコルです。 プロトコル＝データを通信するための決まり事のことですね。 ご存知の方も多いと思いますが、 SSL対応されているウェブサイトのURLが『http://～』ではなく『https://』となっていますよね？ SSLを導入すると、パソコンとサーバ間の通信データを暗号化して やりとりをすることができるため、 データの改竄や第三者に盗み見られる危険性を防ぐことができるのです。 インターネットが生まれた当初は、大学や研究機関など、 限られた人たちしか利用することができなかったので セキュリティに配慮する必要がありませんでした。 ですが、世界中の不特定多数の人々が買い物や生活にインターネットを利用する今、 セキュリティ対策は最優先事項！SSL対応は必要不可欠となってきています。 ちなみに、よくSSLの説明には『SSL/TLS』と書かれていますが、TLSって何なのでしょうか？ TLS（Transport Layer Security）はSSLの次世代規格。 SSLが改良されてできたもので、一般に言われているSSLとはこのTLSを指していることが多いです。 SSLの名称が既に一般に定着していたため、 実際にはTLSを指していても『SSL』や『SSL/TLS』といった表記をしているんです。 SSL対応を急いでほしい４つの理由 そもそもSSLってなに？で書いたセキュリティ対策はもちろんのこと 今、SSL対応をしてほしい理由は他にもあります。 SSL対応がGoogle SEO対策に有利に 2014年8月、グーグルが公式のブログで、 HTTPS（SSLが有効）をランキングシグナル（検索順位の判断基準）にすると公表しました。 GoogleといえばYahooの検索エンジンの中身も実はGoogle。 そして日本での検索エンジンシェア率2トップはGoogleとYahoo！ ということは、検索大手2社両方の検索順位に影響してくるんです。 検索順位に対する影響範囲はグローバルでクエリの 1% 未満（2014年8月時点） とありますが、これから強化していくとも書かれてあるので、 対応していたほうが間違いありませんね。 アクセス解析の精度UP 実は、私もここ数年SSL未対応のサイトで頭を悩ませていた問題でもあります... Google Analyticsなどの解析ツールで、WEBサイトを分析する際 『どこのWEBサイトから自分のサイトへやってきたか』を意味する 参照元（リファラー）情報をよく確認するかと思います。 ですが、このリファラー情報は下図のように 参照元と自サイトそれぞれがSSL化（https）しているかどうかによって 取得できない場合が出てくるんです。 せっかく分析しようと思ってGoogle Analyticsを見ても、 データが取得できなかったら意味がないですよね。 ということで、自分のサイトはしっかりとSSL化しておきたいですね。 WEBサイトの表示を高速化 一昔前のSSLは常時SSL（WEBサイト内のすべてのページをSSL化すること。）ではなく 一部SSLが主流でした。 なんでわざわざ一部だけにしか対応してなかったの？ じつはちょっと前まではHTTPSで閲覧すると暗号化の処理で負荷が かかり表示速度が遅くなると言われていたからなんです。 ですがそれも今は昔。 インターネット環境をとりまくあらゆる機器が性能UPしていることはもちろん、 SSL対応することで次世代の通信プロトコルHTTP/2を利用することができます。 このプロトコルを使うとSSL対応されたデータであれば通信高速化され さくさくネットで情報をやりとりすることができちゃうんです。 ちなみに、 『サイト表示が2秒遅いだけで直帰率は50％増加！』 というデータもあるので、SSL化するだけでユーザビリティの向上も図れて一石二鳥ですね。 HTTPサイトがブラウザから見れなくなる！？ 世界のブラウザシェアダントツNo. 1（2017年11月現在）はグーグル社製のChrome。 http://gs. statcounter. com/browser-market-share#monthly-201711-201711-bar そのChromeが2017年1月に公開したアップデートにおいて SSL化されていないホームページ上にパスワード入力フォームやクレジット カード入力フォーム がある場合、アドレスバーに「保護されていません」と警告を表示するようになりました。 さらに、2017年10月のChrome62からは HTTPページ（非SSL）内のフォームにデータを入力した場合や、 HTTPページにシークレット モードでアクセスした場合にも警告が表示されるように... 世界シェア4位であるFirefoxにおいても HTTPページ（非SSL）でユーザー名やパスワードを入力しようとすると、 警告のポップアップが表示されるようになっています。 今後は、入力フォームの有無にかかわらず HTTPページ（非SSL）の場合にセキュリティの警告を出すようになる可能性もあり、 SSL化できていないと自分のサイトへ訪問してくれるユーザが激減する可能性も！ ユーザが安心して訪問してくれるよう、早めの対策が必要ですね。 --- - Published: 2017-08-16 - Modified: 2025-03-31 - URL: https://fastcoding.jp/blog/all/frontend/wordpress%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%9f%e6%96%b9%e3%81%8c%e8%89%af%e3%81%84%e7%90%86%e7%94%b1/ - カテゴリー: React, Vue.js, システム開発, WordPress こんにちは！ディレクターの楠本と申します(^*-)- 最近のＷＥＢサイトでお馴染みとなっているCMSツール・・ WordPress、Movable Type、MODxなどなど様々な種類のCMSがありますが その中でも特に利用されているのがWordPressですね。 WEBサイトの1/3がWordPressだといわれているほど多くのサイトに取り入れらており大変人気のツールです。 しかーし人気である一方で「導入するメリットは何？」「どんなサイトに使えばいいの？」 などなど、よくわからない方もいるかと思います。 ということで今日はWordPressについて書いてみようと思います！！ そもそもWordPressってなに？ 「ワードプレスとは一体なんぞや・・・何ができるの？」と私も思っていたことがありました。 そんな時に「ワードプレスで簡単にサイトを作ろうぜ！」みたいな本を読んでみたのです。 （実際のタイトルは全く違いますが雰囲気こんなかんじでした） で、読んだ結果・・余計に混乱したのを覚えています(笑) 初心者にはIT用語でごにょごにょ説明されてもさっぱりわからないからですね。。 WordPressはコンテンツマネジメントシステム（CMS）のひとつで とてもザックリ言いますと「WEBの知識がなくても簡単にサイトを更新、管理できる仕組み」です。 WordPressを導入するメリット では何故、このツールがよく使われているのか・・・ですが まずWordPressはユーザビリティをすごく意識して作られているようですね。 そのため使いやすさは抜群です。 それにオープンソースなのでライセンス費用もかかりません(^*-)- 他にも色々メリットをまとめてみます。 WEBサイト内にニュースや新着情報など更新するコンテンツがある場合簡単に投稿できちゃう！ 先述したようにHTMLの知識が全くない方でもタイトルや本文を入力するだけで更新ができます。 頻繁に更新するコンテンツがある場合は特に楽です。 しかも！テキストだけではなく画像の設定、リンクの設定などもあらかじめワードプレスをカスタムしておくことで、あら簡単！となります。 カスタムが必要な場合は制作者に「ここには画像、ここには動画、ここにはリンクを投稿できるようにしたいんです！」と細かく伝えてみましょう！ もちろん投稿だけでなく、削除やページの編集も非常に簡単です。 HTMLファイルをいじる必要がないため、「タグを消してしまった|дﾟ)」とかのミスを防げる。 やはりHTMLが全く何もわからない方が、ファイル内を触ってしまった場合、必要なタグを誤って消してしまうということがあります・・・その結果→レイアウトが崩れる→でも何をどう直せばいいのかわからない→ぎゃー！となりますよね。 以前友人とこんな会話をしました。 -------------------------------------------------------------------------------------------- 友人「みんなWEBがわからないから今更新できる人が1人だけなの・・・みんなそれぞれが必要な情報を更新、追加できたらいいんだけど」 楠本「あ～でもHTMLのここ（ニュースの部分を指さして）コピペしてテキスト書き換えたらいいだけだよ(^^」 友人「いや、それもわかるんだけどタグとか色々書いてるファイルを触るのがもう怖い！！」 （そこに上司がフラットきて） 上司「確かに・・お前なら全部消してしまいそうなくらいのミスをしそう・・・」 楠本「・・・( ;∀;)」 -------------------------------------------------------------------------------------------- はい。何もわからない方はできる、できないだけでなく壊してしまわないか不安だから触れないんですね。 WordPressであれば万が一何かやらかしてしまった場合も 「リビジョン」により編集前の状態に戻すことができますので安心です。 タグを消してしまうといった心配もありません。 SEOにも強い 他のCMSに比べてもSEOに強いといわれているのがWordPressです。 記事の一つ一つにメタ設定ができるようにすることなども可能です。 プラグインがたくさんある 無料のプラグインがたくさんあり機能の追加もプラグインでどうにかなることが多いです。 All In One SEOやContact Form7は中でもよく使われているプラグインですね。 他にもたくさん便利なプラグインがあるようなので今度書いてみますね。 このようにWordPressを導入することで様々な手間をなくすことができ WEB未経験の担当者であっても更新したい内容をすぐに反映させることができるのです！ ということでWordPressについてでした。 --- - Published: 2017-08-02 - Modified: 2024-09-16 - URL: https://fastcoding.jp/blog/all/frontend/googleanalytics-trackingcode/ - カテゴリー: React, Vue.js, SEO どうもディレクター楠本です。 前回のブログでは書いていませんでしたが、私は実は・・ITなんて無縁！絶対無理！そもそもPCも使いこなせてないし('ω')ノ (ヾﾉ･∀･`)ﾑﾘﾑﾘ・・・・というところから、今こうしてファストコーディングでディレクターをしておりまして。 今回のテーマは「Googleアナリティクス」についてですが、もちろんこれも「？？？」だった時がそう遠くない過去のことなわけなのです。 ITと関係のないところにいる人は知ることがないんですよね。なので新人ディレクターさん、またはWEBがよくわからない担当者さん、 今日はこのアナリティクスについて勉強しましょう！ Googleアナリティクス基礎 Googleアナリティクスとは・・・ こちらはGoogleさんが提供しているアクセス解析ツールでございます。 自分のブログやホームページにどのくらい訪問があったのか、どこから来たのか、検索キーワードは何か、などなど解析してくれる便利ツールです。 これによりサイトの改善をしていくことができるわけですね。 ちなみに有料版のGoogleアナリティクスPremiumというものもありますが、初めてこのツールを使う方はとりあえず無料版で十分でしょう。アクセス数が非常に多いサイト（月間1000PV以上くらい）になっているサイトの場合は有料版を検討してみてください。 どんなことができるのか、詳しく調べてみよう！ 検索ワードやら訪問数だけでなく他にも様々なことが解析できるようです。 全体の訪問数 ページビュー数 滞在時間 訪問者がサイトに来る前に見ていたページ（流入元） 訪問者が最初に開いたページはどこか 検索キーワード 訪問者が利用しているブラウザや回線 訪問者がアクセスしている国や地域（当たり前ですが個人情報はわかりません！！） Googleアナリティクスを導入してみよう 難しいことはできない・・・と不安になりますが Googleアナリティクスの導入方法は案外簡単ですので、安心してください。では、登録してみましょう。 まずはGoogleのアカウントが必要になります。もしもGoogleアカウントをお持ちでない場合は登録しましょう。https://accounts. google. com/signup? hl=ja アカウントができましたら次はアナリティクスの登録をしていきます。以下をクリックしてログインしましょう。https://www. google. com/intl/ja_ALL/analytics/「お申し込み」ボタンをクリックしてください。 上から項目を埋めていきましょう。最後にデータ共有設定の部分も確認してください。特に問題がない場合はデフォルトのままでOKです！ 「トラッキングIDを取得」をクリック 利用規約が表示されますので、住まいの国を「日本」にして「同意する」をクリックしてください。これでIDが取得できました！ それではGoogleアナリティクスを導入していきましょう！先ほど登録したURLのトラッキングコードが発行されていますので確認してください。「ウェブサイトのトラッキングコード」を全てコピーし、トラッキングしたい全てのページに貼り付けます。（タグの直前に貼りましょう） 内にコードを貼り付け、ファイルをアップしたらGoogleアナリティクスの導入は完了となります。 「トラッキングコード」とは・・・ トラッキングコードとは自分たちのサイトに訪れたユーザー（訪問者）の様々な情報を得るためにWEBページに埋め込んでおくコードのことを言います( ;∀;)アクセス解析のためのデータを得るためにはこ、のトラッキングコードを正しく実装する必要があります。 トラッキングコード埋め込みがうまくいっているかの確認する ステータスのところを確認しましょう！ 「データを受信しています。」となっていればOKです。時差が生じる場合もあるので埋め込んですぐは「トラッキングコードがインストールされていません」と出ている方もいるかもしれませんが、コードを正しく埋め込んでいればステータスもしばらくすると変わりますので大丈夫です。 サマリーを確認しアクセス解析をしよう！ レポート→リアルタイムから「概要」を確認してみましょう。ここでは現在サイトを見ているユーザー数、ページビュー数、どこからユーザーが流入してきたのか、検索ワードなどが確認できます。 例えばメルマガを送った後やSNSへの投稿後など、何かアクションを起こした後にサマリーを見るとユーザーの動きがよく確認できるかと思います。 現在のサイト訪問数とは、今何人のユーザーがあなたのサイトに来ているのかが確認できます。 上位の参照元では、あなたのサイトに訪問する前にユーザーがどこのサイト、ページにいたのか流入元が確認できます。 上位のソーシャル関連のトラフィックでは、どのSNSから流入したのか確認できます。 上位のキーワードでは、検索キーワードを確認できます。 ページビュー数では分単位、秒単位のPV数推移を確認することができます。PV数の変化をグラフで確認できますのでこちらも参考にしていくとよいでしょう。 上位のアクティブページでは、現在アクセスしているユーザーが見ている上位のページ（10ページ）が表示されます。 上位の所在地では、ユーザーがアクセスしている地域が表示されます。アクセスが多い地域には円が大きく表示されるのでわかりやすいです。 アクセス解析を元にサイトの改善をしていき、より良いWEBページを作っていってください(^^ 以上Googleアナリティクスについての記事でした --- - Published: 2017-06-20 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/frontend/form-select/ - カテゴリー: React, Vue.js - タグ: HTML, コーディング, フロントエンド, ユーザビリティ こんにちは、ディレクターのせりなです。 HTMLで問い合わせフォームなんかを作るとき用に セレクトメニューの中身をサクッとコピペできる、とーーーっても便利な一覧を作りました！ 私は平和主義なので、ひとり占めしないでみなさんにも共有します。 よくある生年月日や都道府県、困りがちな業種選択まで 10種類ほど揃えてみたのでどうぞご活用ください。 目次 1. 西暦 (1900-2030年) 2. 月 (1-12月) 3. 日 (1-31日) 日付選択・カレンダー 4. 年齢 5. 数字 (1-99) 6. 都道府県 7. 職業 8. 業種 (簡易版) 9. 業種 (詳細版) 10. 担当業務 関連リンク ※ 各コードは、余白部分でダブルクリックすると全選択できます！ 1. 西暦 (1900-2030年) - 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 年 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 2. 月 (1-12月) - 1 2 3 4 5 6 7 8 9 10 11 12 月 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 3. 日 (1-31日) - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 日 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 日付選択・カレンダー selectじゃないですが、こんな便利な機能もあるよー！というご紹介。 使っているブラウザにもよりますが、カレンダーのUIで日付選択ができるものもあります。 ブラウザによってはカレンダーのUIが対応していないものもあるので注意してください Chrome (カレンダー)、Opera (カレンダー)、Microsoft Edge (ドラムロール) Safari、IE、FireFox 例えばChromeの場合、inputボックスをマウスオーバーして右側の下向き矢印を押すと カレンダーから日付を選択できるようになります。もちろんキーボード入力もできます。 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 4. 年齢 選択してください 20歳未満 20-29歳 30-39歳 40-49歳 50-59歳 60-69歳 70-79歳 80歳以上 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 5. 数字 (1-99) 年齢、商品の個数など・・・きっと何かに使えることでしょう！ - 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 歳 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 6. 都道府県 任意のにをつけることで初期値の設定もできます。 今回はを初期値にしてみました。必要なければ外してください。 選択してください 北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県 新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 7. 職業 よくアンケートにある職業選択です。自由業ってなんだろう(笑) 選択してください 公務員 経営者・役員 会社員 自営業 自由業 専業主婦 パート・アルバイト 学生 その他 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 8. 業種 (簡易版) 選択してください 製造業 建築業 設備業 運輸業 流通業 農林水産業 印刷・出版業 金融業・保険業 不動産業 IT・情報通信業 サービス業 教育・研究機関 病院・医療機関 官公庁・自治体 法人団体 その他の業種 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 9. 業種 (詳細版) 業種によって大きくカテゴリ分けしてあるので、上の簡易版よりもより詳細な項目の選択が可能です。 必要に応じてアレンジを加えてみてください。 選択してください 電機・電子・機械 建築・設備・工事業 化学・製薬 繊維・素材 建印刷・出版業 農林水産業 食品 その他の製造業 IT・情報通信業 水道業 運輸･物流 卸売・小売 その他の物流・通信業 銀行・信託・金融業 投資業 証券・商品取引 不動産取引業 不動産賃貸業 その他の金融・保険・不動産業 ホテル・旅館 飲食 娯楽 美容・理容業 病院・医療・ヘルスケア 教育・研究・学会 その他のサービス業 官公庁･政府機関･公益法人 法人団体 自治体 その他の団体 その他の業種 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 10. 担当業務 あまり使う機会はないかもしれませんが、会社でのポジション的なやつです。 選択してください 経営 財務・会計・経理 人事・総務・庶務 資材・購買・調達 営業・販売 マーケティング・調査 広報・宣伝 物流・生産管理 コンサルタント 情報システム 研究・企画・開発 編集・設計・デザイン 教員・インストラクタ その他 ※ 余白部分でダブルクリックすると、ソースを全選択できます！ 関連リンク さいごに いかがでしょうか？ フォームをつくる度に同じようなコードを毎回書くのが面倒なので 備忘録的な感じでよく使うフォーム用コピペ一覧を作ってみました。 デフォルトのselectボックスはあんまり可愛くないので、 関連リンク集からお気に入りのカスタマイズも一緒に探してみてください。 ではではまた次の記事でー！ --- - Published: 2017-06-13 - Modified: 2024-07-21 - URL: https://fastcoding.jp/blog/all/webdesign/retina-weddesign/ - カテゴリー: Webデザイン - タグ: デザイン, 初心者 こんにちは、ディレクターのせりなです。 このページにたどり着いたあなたはきっと クライアントにRetinaディスプレイに対応したWebサイトを作ってって言われたけど 「すみません、"れてぃーな"って何ですか？」 「あー、あの綺麗に見える画面のことね！・・・TVの話？」 「Retina対応って言うけど、何をどうすれば対応できるの？」 って思っているWebデザイナーさんではないでしょうか？ 世の中では一般的になりすぎて、今更ひとに聞けないRetinaディスプレイと そのWebデザインを作るうえで注意すべき点をまとめたのでご覧ください。 目次 1. Retinaディスプレイとは 2. Retinaディスプレイでデザインするときの設定方法 1. Retinaディスプレイとは 最近よく耳にするRetinaと言う言葉。そもそも何なのこれ？ Retina Display(レティーナ ディスプレイ) 「Retina」とは「網膜」という意味です。 画素が細かく、人間の目で識別できる限界を超えるほど細かいことから Retinaディスプレイと名づけられました。従来の倍の解像度(高画素密度)のディスプレイのこと。 私たちが普段見ているパソコンやスマートフォンのディスプレイは 小さな点(ドット)の集まりでできています。 この点の密度のことを解像度(かいぞうど)と言い、 点の密度が高い(=高解像度)ほど、より鮮明な画像の描写が可能です。 そして、Retinaディスプレイとはこの点の密度が今までの倍以上あります。 簡単に言うと「すごく鮮明で綺麗な画像」が見られる画面のことです。 表現力でいうとこんな感じです。 2. Retinaディスプレイでデザインするときの設定方法 じゃあ、Retinaディスプレイは何に注意してデザインすればいいの？ってところですよね。 今回はデザインソフトのPhotoshopやIllustratorでの設定方法をご紹介します。 (1) アートボードのを設定する： ※都度計算が必要 (2) を設定する： 72 pixel/inch (3) を設定する： ピクセル (4) を設定する： RGB (1) アートボードのを設定する： ※都度計算が必要 まず、現在最新版であるiPhone7を基準に考えていきます。 a. 従来のディスプレイの場合 iPhone7の物理的なディスプレイの大きさである 375px(ディスプレイの大きさと等倍)でアートボードを作成すればOKでした。 b. Retina対応ディスプレイの場合 iPhone7の物理的なディスプレイサイズとは別にを確認します。 通常のディスプレイの何倍の解像度になっているかというのを調べる必要があります。 デバイスピクセル比はJavaScriptの"window. devicePixelRatio"で取得できるのですが 「端末名 デバイスピクセル比」で検索してみるのが1番早いと思います。 今回はQiitaさんの「iPhone/iPad解像度(画面サイズ)早見表」を参考にさせていただきました。 表でいう「Retina」の項目がデバイスピクセル比です。 Rerinaディスプレイ：デザインの横幅計算式 375px(iPhone7の物理的な横幅) × 2倍(デバイスピクセル比) ＝ 750px(iPhone7のブラウザで実際に表示される大きさ) 上記の計算式に沿って導き出された大きさでアートボードを作成すると Retina対応用のデザインが作成できます！iPhone7の場合は横幅750pxですね。 今はデバイスピクセル比が3や4の端末も出てきています。 Retina対応=ディスプレイの2倍でデザインを作ればいい訳ではないので この計算の仕方をしっかりと覚えておいてください！ (2) を設定する： 72 pixel/inch 4つの設定項目の中で、DTP(印刷物)出身のデザイナーさんが 1番困ると思われるのがこの解像度の設定だと思います。 紙のデザインは主に300 pixel/inch(ppi/ピクセルパーインチ)で解像度を設定していますが、 Webデザインでは基本的に72ppiに設定します。 パソコンモニタが72～96dpiだったので、Webデザインは72ppiが基準になりました。 ※解像度だけは、後々数値を変更することができないので注意してください。 (3) を設定する： ピクセル DTP(印刷物)だと「mm」を使うと思いますが、 Webでは「px(ピクセル)」を使用してください。 (4) を設定する： RGB DTP(印刷物)だと「CMYK」を使うと思いますが、 Webでは「RGB」を使用してください。 Rは赤(Red)、Gは緑(Green)、Bは青(Blue)のことです。 パソコンのモニタはこの光の三原色を1つ1つの点に持っていて その濃度を調整することで色を表現しています。 さいごに Web業界はどんどん新しい概念が出てきて情報を追うのが大変ですが もしわからない場合はプロに任せてしまうのが1番安心です。 FASTCODINGでは、Web業界の最新情報やHTMLコーディングに詳しい Webディレクターおりますので困ったことがあれば気軽に相談してください。 --- - Published: 2017-05-23 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/direction/director-words/ - カテゴリー: ディレクション - タグ: ディレクション, 初心者 こんにちは、ディレクターのせりなです。 Webディレクターになったはいいけど、知らない英単語とか略称が日々社内で飛び交ってて 先輩が何言ってるのかさっぱりわからない・・・ そんな新人Webディレクターの為に、私が社内外でよく耳にする Webディレクターの為のWeb業界用語をまとめてみました！！ 上司との日常会話から、お客様先とのスケジュール調整まで 新人ディレクターには覚えなきゃいけない用語が沢山あります。 早く日常に慣れるためにも、予備知識として覚えておきましょう！ 目次 0. Webディレクターとは 1. 日常会話編 ( ASAP / FYI / レギュレーション / アジェンダ / レジュメ / 五月雨式 ) 2. マーケティング編 ( ユーザビリティ / UI / UX / KPI / CV / CVR ) 3. スケジュール編 ( 工数 / 人日・人月 / リソース / オンスケ / リスケ / あいみつ / コンペ ) 4. プロジェクト進行編 ( フェーズ / ペンディング / ローンチ ) 5. Webサイト編 ( PC / SP / LP / ECサイト ) 6. Webデザイン編 ( フォトショ / イラレ / ワイヤーフレーム / デザインカンプ・デザインラフ ) 7. システム編 ( DB / CMS / SSL ) 8. 関連リンク 0. Webディレクターとは ディレクションとは「管理」や「指揮」という意味です。 Webサイト制作に関わるデザイナーやエンジニアのスケジュールを管理し プロジェクトを滞りなく進行させ、クライアントに成果物を納品するのが主な仕事です。 WebディレクターにはWeb制作だけでなく、Web業界の最新動向や インターネット全般、SEOなどのマーケティング系の知識も求められます。 会社によって担当する業務の内容はかなり異なる職種です。 関連項目ごとにWeb業界用語も分けてみましたのでご活用ください。 1. 日常会話編 ASAP(アサップ) As Soon As Possibleの略。「なる早で！」って意味です。 例：「この資料、時間がないのでASAPで確認しておいてください」 FYI(エフワイアイ) For Your Infomation、「参考までに」という意味です。 社内向けにメールやショートメッセージなどで使うフランクな感じです。 「FYI」と書いたあとに相手にとって有益な情報や参考URLなどを書いて送ります。 レギュレーション 「規約・規則」、「ルール」みたいな感じです。 例えばデザインレギュレーションには、1つのWebサイトを作るときの決まり事が書いてあります。 複数人で1つのWebサイロをデザインするとき、統一感をもたせるために ここの色は赤で、フォント(字体)の大きさは20pxで・・・みたいな認識合わせをする資料です。 アジェンダ 「課題・議題」のこと。会議のゴールを明確化するための議題一覧を指します。 例：「今日の会議のアジェンダです。事前に目を通しておいてください」 レジュメ 「概要」という意味ですが、主に「概要を印刷した書類」を指します。 会議・講演会などで一方的に配られる書類のことです。 例：「これ今日の会議で使うレジュメなので、30部コピーしておいてください」 五月雨式(さみだれしき) 梅雨の雨みたいにだらだらと物事が続く様を言います。 一括でドカン！じゃなくてちょこちょこくること。ネガティブな感じです。 例：「このプロジェクト、デザイン入稿が五月雨式になります。」 2. マーケティング編 ユーザビリティ 利用者にとっての「使いやすさ」「使い勝手」「効率の良さ」のこと。 "ユーザビリティが高い"=直観的で使いやすいという意味です。 よくWebサイトの右下にある"ページトップに戻るボタン"なんかも ユーザビリティを考慮された作りのためのシステムですね。 UI(ユーアイ) User Interface(ユーザインターフェイス)の略で、インターフェースとは「境界」「接触面」のこと。 サービスにおいてユーザが操作する画面表示形式、またその操作感を指します。 デザイン的な側面が大きいので、デザイナーの腕の見せ所です。 UX(ユーエックス) User Experience(ユーザエクスペリエンス)、「ユーザ体験」のことです。 ユーザがある製品やサービスを利用したときの体験や感想だけでなく その後に得られる満足感などの"ユーザ体験全体"を指します。 単なる性能や機能だけでなく、実現したいことを楽しく 心地よく実現できるかという体験に価値を求める考え方です。 KPI(ケーピーアイ) Key Performance Indicayorの略で、日本語だと「重要業績評価指標」と訳されます。 一定の期間を決めて、定めた目標の達成度を計測します。 例えば、サイトへのアクセス数の目標を決めて、達成が見込めない場合は対策を講じたりします。 CV(コンバージョン) Conversion(コンバージョン)の略。 Webサイトの最終成果のことで、何を成果とするかは人それぞれです。 問い合わせ、資料請求、商品の購入など目的によって異なります。 CVR(コンバージョン率) Conversion Rate(コンバージョンレート)の略。 Webサイトの全体のアクセス・訪問者数のうち、 CV(問い合わせ、会員登録など)に至ったユーザがどのくらいの割合のこと。 インターネット広告やECサイトなどでの運営改善の指標になります。 3. スケジュール編 工数(こうすう) 仕事量を時間換算したときの単位で、作業を終わらせるまでに必要な時間を意味します。 例：「1ページコーディングするのに、工数どのくらいかかりますか？」 人日(にんにち)・人月(にんげつ) 1人が1日(8時間)でできる仕事量のことを「1人日」というように数えます。 半日でできる仕事量なら「0. 5人日」と言います。 2人がかりで3か月かかるなら、のように計算します。 例：「このシステムなら3人日あればできますよ。」 リソース 元々は「資源」という意味ですが、 Web業界だと主にエンジニアやデザイナー個人のスケジュール(人的資源)のことを指します。 例：「B社のプロジェクトのデザインリソース確保しておいてください」 オンスケ オンスケジュールの略。よく使われます。 「スケジュール通りに進行しています、遅れはないです」って意味です。 例：「A社のプロジェクトってオンスケですか？」 リスケ リ・スケジュールの略。再度スケジュールを汲みなおすということです。 例：「すみません、B社の訪問リスケになりました。」 あいみつ 「相見積もり」のこと。案件の相談段階で複数社に見積もりを依頼し 条件が良かったところと契約するという行動を指します。 例：「C社の案件、他社とあいみつとっているみたいです。」 コンペ コンペティションの略で、「競争」「競技会」の意味。 複数の人・会社にデザイン案や設計書をつくってもらい その中から最も優れた人を選んで依頼する形式のこと。 4. プロジェクト進行編 フェーズ 大きなプロジェクトになると、段階的に区切って進めることがあります。 その各段階・各工程の1つ1つをフェーズと呼びます。 例：「A社の案件、いま第2フェーズまで終わってます。」 ペンディング 「保留」という意味。延期につぐ延期で先延ばしになることも・・・ 例：「B社の案件ですが、先方の回答待ちでペンディングになってます。」 ローンチ 「公開」「立ち上げ」など、サービスを開始するという意味です。 Web業界だと、Webサイトを新規公開する場合に使われることが多いです。 例：「C社の案件は今月末にローンチです。」 5. Webサイト編 PC(ピーシー) Personal Computer、パソコンの略です。 SP(エスピー) Smart Phone、スマートフォンの略です。 一般的には他業界だと「セールス・プロモーション」の意味で使うことが多いので クライアントには「スマートフォン」、「スマホ」と伝えたほうが親切ですね。 LP(エルピー) ランディングページの略。1番最初にユーザが訪問するWebページを指します。 主に1商品の宣伝だったり、短期イベント用の概要ページなど 縦に長い1ページのWebサイトを指すことが多いです。 ECサイト(イーシーサイト) 簡単に言うとネットショップを指します。 商品やサービスをインターネット上で販売する電子商取引のこと。 ECはElectronic Commerce(エレクトロニック・コマース）の略で、Eコマースと呼ばれることもあります。 6. Webデザイン編 フォトショ Adobe Photoshop(アドビ・フォトショップ)のこと。 グラフィックに強く、元々は写真加工をする為のソフトウェアでしたが 現在はWebデザイナーさんがデザイン作成に使用している最もメジャーなソフトです。 イラレ Adobe Illustrator(アドビ・イラストレーター)の略。 ベクター形式という点と線の集まりで図形を作成するドローソフト。 Photoshopと異なるのは、拡大・縮小してもオブジェクトが粗くならないということ。 ワイヤーフレーム 「ワイヤー」は線、「フレーム」は骨組みのこと。単にワイヤーとも呼ばれます。 Webサイトのデザインを作る前の大枠のレイアウト・設計図を指します。 細かい色や装飾をする前の、コンテンツの配置を大まかに決めた図です。 デザインカンプ・デザインラフ デザインカンプはDesign Comprehensive Layoutの略で、 実制作前にクライアントに提出する「デザイン案・デザイン見本」のこと。 ワイヤーフレームに肉付けをして、完成図のイメージを共有する目的で作成されます。 Webサイトの色や雰囲気の齟齬をなくしてスムーズな制作を促します。 7. システム編 DB(ディービー) Data Base(データベース)のこと。使いやすいように格納・管理されたデータの集まりのことです。 身近な例だと、タウンワークなどの住所録もデータベースと呼べますが Web業界ではデータベース管理システムで管理されている情報を指します。 CMS(シーエムエス) Content Management System(コンテンツマネジメントシステム)の略。 Webサイトの管理システム(簡単に言うと管理画面)のことです。 WordPress、MovableType、Joomla! 、Concrete5、CS-Cart、EC-cubeなどがあります。 SSL(エスエスエル) Webサイトの情報を暗号化して送受信する通信手順の一種。 問い合わせフォームや会員制サイトなど 個人情報を入力・表示する必要があるWebサイトに実装されていることが多いです。 8. 関連リンク 知っているWeb業界用語はいくつありましたか？ Webディレクターは全ての面において深く専門知識が必要というよりは 浅く広く、様々な分野に精通する必要がある職種かもしれません。 クライアント、社内の人、デザイナー、エンジニアと 色々な方と関わるので、それぞれ覚えないといけないことは沢山あります。 この記事が少しでも知識面のサポートになれたら嬉しいです。 もっともっと知りたいという方は関連リンクへも行ってみてください。 --- - Published: 2017-05-10 - Modified: 2024-08-19 - URL: https://fastcoding.jp/blog/all/webdesign/google-webfonts-recommended/ - カテゴリー: React, Vue.js, Webデザイン, SEO - タグ: CSS, HTML, SEO, デザイン, フロントエンド, 初心者 こんにちは、ディレクターのせりなです。 どのパソコン、どのスマートフォンで見ても同じフォント(書体)で表示してくれて 種類も豊富、使い方も簡単といいところばかりのGoogle webフォント。 そのGoogle webフォントから、独断と偏見でおすすめり30選をまとめてみたので 暇つぶし程度に見て行ってくださいなー！！！ 目次 1. 無機質で今っぽい細めゴシック 2. ひょろっとした脱力系フォント 3. スタイリッシュな王道Webフォント 4. 意識高い系女子のための、意識高い系Webフォント 5. お菓子の包装紙にありそうなsweets系Webフォント 6. 古書に出てきそうなアンティーク書体 7. スケッチみたいな温もりのあるWebフォント 8. 手書きのサインみたいなゆるゆる系のWebフォント 9. 今にも物語がはじまりそうなWebフォント 10. 遊び心いっぱいの個性派Webフォント Google webフォントの使い方はこちら 1. 無機質で今っぽい細めゴシック 個人的にはこの辺りのcafe系の無機質なフォントが好きです。 線が細くて目立ちにくいので大きいサイズで使うのがポイント。フラットデザインと相性抜群。 If you can dream it, you can do it. Open Sans Condensed If you can dream it, you can do it. Julius Sans One If you can dream it, you can do it. Comfortaa 2. ひょろっとした脱力系フォント "スラっと"よりも、"ひょろっと"が似合う。痩せ型のメガネ男子みたいなWebフォント。 でもこういう気の抜けた感じ、嫌いじゃないよ。 If you can dream it, you can do it. Pompiere If you can dream it, you can do it. Flamenco If you can dream it, you can do it. Port Lligat Sans 3. スタイリッシュな王道Webフォント ブランド系やアクセサリーなどのファッション系サイトによく似合う THE 王道！みたいなフォントも勿論そろっています。 If you can dream it, you can do it. Meie Script If you can dream it, you can do it. Oranienbaum If you can dream it, you can do it. Alice 4. 意識高い系女子のための、意識高い系Webフォント 可愛いけど甘すぎない、大人女子向けのブリリアントなWebフォント。 よく見ると、隅々までこだわってるお洒落なフォントたちなんです。 If you can dream it, you can do it. Tangerine If you can dream it, you can do it. Medula One If you can dream it, you can do it. Elsie Swash Caps 5. お菓子の包装紙にありそうなsweets系Webフォント まるっこくてキャンディーカラーが似合いそうな、とってもsweeetなWebフォント。 文字に存在感があるので、他サイトとのデザインの差別化にもってこい！ If you can dream it, you can do it. Galada If you can dream it, you can do it. Righteous If you can dream it, you can do it. Chango 6. 古書に出てきそうなアンティーク書体 埃をかぶった洋書に載っていそうな、なんとも言えないいい味を出しているWebフォント。 よくよく見ると線が少しかすれていて、スタンプや印刷風にできています。 If you can dream it, you can do it. Alegreya If you can dream it, you can do it. IM Fell English If you can dream it, you can do it. Special Elite 7. スケッチみたいな温もりのあるWebフォント 手書き風で尚且つ飾りっ気のあるフォントたち。 KIDS向けのサイトとか、芸術系のサイトに似合いそう。 If you can dream it, you can do it. Fredericka the Great If you can dream it, you can do it. Cabin Sketch If you can dream it, you can do it. Londrina Shadow 8. 手書きのサインみたいなゆるゆる系のWebフォント ゆるさを出したいなら手書き風の文字がピッタリ。 文字の上に顔写真を配置すればあら不思議！何だかサインみたいな雰囲気が出ちゃう。 If you can dream it, you can do it. Sacramento If you can dream it, you can do it. Amatica SC If you can dream it, you can do it. Patrick Hand 9. 今にも物語がはじまりそうなWebフォント ファンタジー系の映画や小説に使われていそうなWebフォント。 真ん中の文字なんて、Tim Burton監督リスペクトな人が作ったとしか思えない！ If you can dream it, you can do it. Bigelow Rules If you can dream it, you can do it. Griffy If you can dream it, you can do it. Metamorphous 10. 遊び心いっぱいの個性派Webフォント ファミコン時代のドット文字風や、ひと味違ったおしゃれ文字まで。 これが普通に文字として検索できるんだからすごい世の中よ。 If you can dream it, you can do it. VT323 If you can dream it, you can do it. Creepster If you can dream it, you can do it. Bungee Inline さいごに お気に入りは見つかりましたか？ には800種類以上もWebフォントがあるので ぜひお気に入りのひとつを見つけてみてください！ FASTCODINGでは、Webフォントを使ったサイト制作も可能ですので HTMLコーディングでお困りの際はお気軽にご連絡ください。 --- - Published: 2017-04-27 - Modified: 2024-07-21 - URL: https://fastcoding.jp/blog/all/webdesign/web-fonts/ - カテゴリー: React, Vue.js, Webデザイン, SEO - タグ: CSS, HTML, SEO, デザイン, フロントエンド, ユーザビリティ, 初心者 こんにちは、ディレクターのせりなです。 Webフォントって聞いたことありますか？ 最近はそれなりに普及してきたんじゃないかなと思うのですが まだまだ知らない人の為に、今日はとっても簡単で便利なWebフォントの 使い方とメリット・デメリットをご紹介します。 目次 1. Webフォントとは 2. Webフォントのメリット・デメリット 3. Webフォントの設置方法は2パターン 4. Google web fontsを使ってみよう！ 5. 関連サイト 6. さいごに 1. Webフォントとは みなさんが普段見ているWebページに使われている"文字" この文字の種類について考えたことはありますか？ 実は、使っているパソコンのOSやスマートフォンの端末によって 見えている文字の書体(フォント)って違うんです。 Webサイトを構築するときに特に何も設定していないと、 パソコンはそれぞれ自分が最初から持っているフォントで文字を表示します。 でも、各端末に最初からインストールされているフォントだと デザイナーさんの思い通りのサイトができないこともあります。 ひと昔前までは、特殊なフォントを使った文字は"画像"にしてしまうのが普通でした。 文字部分を"画像"で表現したときのデメリット ・文章検索ができない = SEOに弱い ・更新するのが面倒 ・輪郭がギザギザして見えて美しくない ・マルチデバイス向け(パソコンとかスマホとか)に沢山画像を作らないといけない そこで登場した新技術が"Webフォント"なのです！ 2. Webフォントのメリット・デメリット Webフォントのメリット 1. SEOに強い(文字検索ができる) 2. 更新・運用のときの文字修正が簡単 3. どの端末で見ても文字の輪郭が綺麗 4. どの端末で見ても同じデザインで表示できる 5. 文字デザインの差別化ができる 6. PC用、スマートフォン用に文字画像を作り分けしなくて良い 最大のメリットは、見出しやタイトルの画像を 各デバイス向けにひとつひとつ作らなくていいことだと思います！ Webフォントのデメリット(主に日本語のフォント) 1. 日本語のWebフォントがは種類が少ない 2. 日本語のWebフォントは文字数が多いので、表示に時間がかかる 3. フォントによっては著作権(ライセンス)の問題で使えない アルファベットに比べて日本語は、平仮名・カタカナ・漢字と 普段使う文字数が圧倒的に多いので、Webフォント上での制限が大きいのが難点です。 3. Webフォントの設置方法は2パターン では、早速Webフォントを実装してみましょう。 Webフォントの使い方には大きく2種類あります。 1. 難易度 好きなフォントファイルをダウンロードして、WebサーバにUP→設定する方法 2. 難易度 HTMLとCSSにちょこっと追記してすぐに使う方法 今回は2番のサクッと簡単な方法をご紹介します！ 1番の方法も知りたい方は下記のサイトさんを見て見てください。 4. Google web fontsを使ってみよう！ Goolge社のサービスを使うと、簡単に好きなWebフォントを使うことができます。 Google web fontsがおススメな理由 ・コーディング初心者でも簡単にWebフォントを使える！ ・無料 & 商用利用可能！！ ・800種類以上の豊富なフォントが使える！(2017年4月現在) それでは、早速Google web fontsの実装方法を見ていきましょう。 の使い方は簡単3ステップ (1) 使いたいWebフォントを選ぶ (2) HTMLで指定のコードを追記する (3) CSSでfont-familyを設定する このたった3ステップで下のようにかわいいフォントが使い放題！ Google Web Fonts is not applied Google Web Fonts is applied (1) 使いたいWebフォントを選ぶ まずはのサイトから、使いたいフォントを選びます。 使いたいフォントが見つかったら、右上のボタンを押してお気に入りリストに追加します。 右側サイドバーから、フィルターを掛けて好みの文字を選ぶこともできます。 Categories(カテゴリ)の説明 ・Serif： 明朝体(線の端に飾りがついているフォント) ・Sans Serif： ゴシック体(線の端に飾りがついていないフォント) ・Display： 装飾があるフォント ・Handwriting： 手書きのようなフォント ・Monospace： 等倍フォント(全ての文字幅が一緒) その他の項目 ・Sorting： 並べ替え(流行順、人気順、登録日、名前順) ・Languages： 言語(残念ながら日本語はありませんでした・・・) ・Number of styles： スタイルの数(線の太さ、斜体など) ・Thickness： 文字の線の太さ ・Slant： 斜体の数 ・Width： 1文字の幅の太さ 人為的にカテゴリ分けしてくれているというサイトもあります。 "cute"、"game"、"funky"など、直観的でわかりやすいタグ付けがされているので使って見てください。 (2) HTMLで指定のコードを追記する お気に入りリストに出てきたコードをコピーして、まずはHTML側にペーストします。 内にコピペする 内に記述する class名は自分が使いやすいものに変更してください。 (3) CSSでfont-familyを設定する 次に、お気に入りリストに出てきたCSS側のコードを元に HTMLで反映させたいところにfont-familyを指定します。 これで完成です！こんな感じになっていますか？ Google Web Fonts is not applied Google Web Fonts is applied 上手くいかない方は、CSSの書き方が間違っていないか、class名が間違っていないか ブラウザのキャッシュは残っていないかなど、注意して見てみてくださいね。 5. 関連サイト 6. さいごに Webフォントは 以外にも 様々なところで提供していますのでぜひ使ってみてください！ また、HTMLコーディング代行サービスを提供している私たちFASTCODINGは Webフォントを使用してのコーディングができますので、お気軽にお声かけください。 --- - Published: 2017-04-25 - Modified: 2024-07-11 - URL: https://fastcoding.jp/blog/all/direction/wp_howtouse/ - カテゴリー: ディレクション, WordPress - タグ: WordPress, ディレクション, 初心者 こんにちは、ディレクターのせりなです。 WordPressサイトを制作会社に依頼して作ってもらったけど 初めて使うし、何に気を付ければいいのかわからない・・・ 変なところ触っちゃって、システムが壊れちゃったらどうしよう・・・ なんてこと、ありますよね？ そんなビギナーさんの為によくある質問から、こんなときどうしたらいいの？まで、 WordPressの使い方・注意点マニュアルを作ってみましたのでご覧ください！ 目次 WordPress(ワードプレス)とは 1. WordPressのバージョンアップについて 2. 固定ページを編集するときの注意点 3. WordPressのログインパスワードを変更したい 4. 問い合わせフォームの送信完了メールのアドレスを変更したい WordPress管理画面の編集権限を使い分ける WordPress(ワードプレス)とは WordPressはブログやWebサイトの管理・更新ができる無料のソフトウェアです。 専門的な知識・スキルがなくても簡単にWebサイトの更新ができます。 世の中にあるWebサイトの約3割がWordPressでできているという統計もあるくらい、 圧倒的なシェア率を誇る人気なソフトウェアなのです。 また、技術的なことがわからない方でも SEO対策をしやすいのもWordPressの魅力のひとつです。 WordPressで構築されたWebサイトなら、Googleなどの検索エンジンで検索したときに 上位に来やすい仕組み作りを誰でも簡単に行うことができます。 1. WordPressのバージョンアップについて WordPressのホーム画面や、その他いろいろなところで見かけるこんな表示たち ・WordPress 4. 7. 3 が利用可能です! 今すぐ更新してください。 ・バージョン 4. 7. 3 を入手する 新しいバージョンがあるの！？すぐバージョンアップしなきゃ！ 更新を放っておくと危ないって聞いたんだけど・・・ っていきなりこのリンクをクリックするのは絶対にNGです！！ 大切なことなのでもう一度、 専門的な知識がない初心者さんは、WordPressのバージョンアップをしてはいけません！ バージョンアップにはそれなりの手順が必要なのと 専門的な知識がないと、いきなりWebサイトが真っ白に・・・なんてことも日常茶飯事。 携帯のOSアップデート違ってWordPressはとってもデリケートです。 分らない方は果敢にチャレンジしないで、専門家に任せてくださいね！ 2. 固定ページを編集するときの注意点 固定ページとは おしらせ・ブログなどの投稿機能がない、通常のページのことです。 WordPressでは管理画面から固定ページの編集をすることができます。 (開発する人にもよりますが、更新頻度が高くないページであることが多いです) 固定ページは、管理画面の左にあるサイドバーから編集画面に行くことができます。 まず、 > の手順で編集画面を開きます。 ※編集したいページのタイトル名をマウスオーバーすると編集ボタンが出てきます！ 固定ページを編集するときは、必ずで編集をしてください。 だと実際のWebページに近い状態で編集することが可能ですが 更新後に、高い確率でWebページのレイアウトが崩れます。 ※これはWordPressの仕様で、意図しないHTMLタグが自動で消されてしまったりするためです。 また、間違えてHTMLタグを消してしまった場合もページが崩れてしまうことがあるので 更新が終わったら実際のWebページを開いて目視確認するのを忘れないでください。 固定ページを編集前の状態に戻したい！ 万が一、編集後にページのレイアウトが崩れてしまって 自分じゃ元に戻せない！！どうしよう！！！ってなってしまったら！？ 慌てないで大丈夫！WordPressにはとっても便利な機能が備わっています。 といって、更新履歴を元に前の状態のページを復元することができるのです。 固定ページの編集画面の右側にあるリビジョンのから操作ができます。 画面の左右に編集前後の状態が表示されるのでページ上部にあるバーで戻したい状態まで遡り、 画面の右上にあるボタンで復元します。 初心者さんには嬉しいサポート機能ですね！ 3. WordPressのログインパスワードを変更したい WordPressのログインパスワードを変更したい場合は、管理画面から編集することが可能です。 管理画面の左側サイドバーより、 > ボタンを押します。 次に、 > > ボタンを押します。 自動で強固なパスワードが生成されますが、任意のパスワードに書き換えてください。 どうしても脆弱(簡単)なパスワードを使いたい場合は自己責任で！ パスワードを入力するとなどと段階ごとに評価をしてくれます。 脆弱なパスワードの使用はお勧めできませんが、どうじても使いたい場合は 入力覧の下に出るにチェックを入ると使用することができます。 また、パスワードを変更した後は 画面左下にあるボタンを押すと、パスワードが更新されます。 WordPressのログインパスワードを忘れてしまった WordPressのログインパスワードを忘れてしまった場合は、 ログイン画面からパスワードの再発行をすることが可能です。 まず、ログイン画面の下方にあるをクリックます。 次の画面でユーザ名もしくはメールアドレスを入力して送信すると 登録してあるメールアドレスにパスワード再発行用のURLが届きますので 指示に従ってパスワードを変更してください。 4. 問い合わせフォームの送信完了メールのアドレスを変更したい 今回は、1番人気なプラグインを使って 問い合わせフォームが構築されている場合の編集方法についてまとめました。 WordPressの管理画面から下記の項目を編集することができます。 ・送信完了メール(サンクスメール)の受信アドレス ・送信完了メール(サンクスメール)に記載されるメールの本文 まず、管理画面の左側サイドバーの > を押します。 タブをクリックすると、送信完了メールに関する各項目を編集することができます。 任意の項目を編集した後は、ページの左下にあるボタンを押すことで内容が更新されます。 WordPress管理画面の編集権限を使い分ける WordPressの管理画面は色々な設定ができて便利な反面、項目が沢山あって どれを触っていいのかどれを触っちゃいけないのか、初心者さんにはわかりにくいですよね？ そんなときに便利なのが管理画面の権限分けです！！ 権限を分けるとWordPressの管理画面の見え方がこんな感じに変わります。 例えば、美容院で運営しているのブログを、スタッフさんに更新してもらおうと思った場合 スタッフ全員に権限のアカウントを作成する必要はありません。 もし、ブログの投稿だけなら権限があれば十分なのです！ それでは、アカウントの作り方を見ていきましょう！。 まずは、管理画面の左側サイドバーの > を押します。 ユーザー名やメールアドレスなど、必要な項目を入力してをに設定します。 画面左下にあるボタンを押したら完成です！！！ もちろん、既存のユーザーの権限も変更するができますので、 その場合はと同じ画面で権限を変更してください。 いかがでしたか？ WordPressの構築用の初心者マニュアルは色々な方が説明してくれていますが は検索しても見当たらなかったので、まとめてみることにしました。 もしWordPressを導入しているサイトでお困りの場合は 専任の技術者がいるFASTPRESS(ファストプレス)までご相談ください。 --- - Published: 2017-04-18 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/frontend/responsive_img/ - カテゴリー: React, Vue.js - タグ: CSS, HTML, コーディング, 初心者 こんにちは！ディレクターのせりなです。 レスポンシブサイトを制作するうえで、 パソコンにはパソコン用に、スマートフォンにはスマートフォン用に 違うデザインの画像を使いたいことってありますよね？ いっぱいCSSを書いたり、不慣れなJavaScriptを使ったり 世の中には難しい方法が沢山ありますが・・・ なんかどれもよくわかんない。もーヤダ！っていうあなたに朗報！ 私が知っているなかで1番シンプルかつ使いやすい方法をご紹介します！ 今日からはもうレスポンシブ対応で悩まなくて大丈夫です！ レスポンシブサイトの画像切り替えのデモ レスポンシブ用の画像切り替えデモは下の画像をご覧ください。 DEMO パソコンだと水色の画像が見えていて、 スマートフォンだとピンクの画像が見えていますか？ パソコンから見ている方は、ブラウザのサイズを小さくしたり 大きくしたりすると、途中で画像が切り替わるかと思います。 実はこれ、難しいJavaScriptの知識や、複雑なCSSコードは一切不要なんです！ コピー＆ペーストで超簡単に実装できるので読み進めてみてください。 レスポンシブサイトの画像切り替えの原理 HTML側でやっていること HTML側には下記の2種類の画像のソースを記述します。 1. で見たときに表示される画像のソース 2. で見たときに表示される画像のソース CSS側でやっていること 見ている画面の大きさを判断して、パソコン用とスマートフォン用に 2種類の画像を表示・非表示に切り替えます。 では実際にどのような記述をするのか見てみましょう！ HTML側の記述 HTML側はたったこれだけ！とっても簡単です。 imgタグにはそれぞれの画像のソースを書いて パソコン用には、スマートフォン用にはを追加しておきます。 ※の部分はサンプルなので、正しいディレクトリで画像のソースを書いてくださいね！ CSS側の記述 CSSの記述もこれで終わり！ mediaクエリ(スマホ用のコード)は、ご自分が作っているWebサイトのサイズに合わせて (iPhone7に合わせてあります)の部分をお好きな値に変更してくださいね！ ONE POINT ADVICE ! ! スマートフォン用の画像が、画面から飛び出てしまって上手く調節できない・・・ そんなときは、下記のコードをベースのcssに追加してみてください。 これでどんなに大きい画像でも、画面の枠からは飛び出ないようになります！ スマートフォン対応できていますか？ 2015年4月にGoogle社からスマートフォン対応可否が、検索順位に影響することが発表されました。 まだスマートフォン対応できていないWebサイトで運用している方は 早急にスマートフォン用のページを作成するべきです！！！ SEOに強いレスポンシブサイト構築なら、FASTCODINGにご相談ください。 --- - Published: 2017-04-07 - Modified: 2024-10-30 - URL: https://fastcoding.jp/blog/all/html5toseo/ - カテゴリー: すべて, React, Vue.js, SEO - タグ: HTML, SEO, フロントエンド FASTCODINGの波乗りディレクター尾島です。 「HTML5. 1」について 2016年11月1日にW3CはHTML5. 1を勧告しました。 これはHTML5をバージョンアップするものとなります。 HTML5. 1は、 「さらなる標準化と、HTML5で定義しきれなかった部分の仕様変更」 が行われたものと考えて良いです。 ・ HTML 5. 1における変更点 ・ 各ブラウザでの実装状況 HTML5. 1は、より手軽に機能を実装できるような改良が施されていて、 今までCSSやJavaScriptで実装していた動作などがHTMLのみでの実装が一部可能になりました。 HTML5を使用したSEO対策の3つのポイント このHTML5を使用して、SEO対策として押さえておきたい 大事な3つのポイントを紹介していきます。 検索エンジンの検索結果上位に表示されるために重要なことは コンピューターにとって読みやすい文章構造としてマークアップされているかどうかです。 質の高いコンテンツを用意してもマークアップが論理的に間違っていると、 検索結果に表示されず、誰の目にも触れることがなくなってしまいます。 1. title, descriptionの設定 titleタグは、SEO対策の中で最も重要視されています。 ここで設定された文字は、検索結果のタイトルとして青字で表示されます。 キーワードと一致している部分は太字で表示されます。 titleはクリック率に直結しているとも言えるので、 意図したタイトルで検索エンジンに表示されるよう設定します。 検索結果に表示されるタイトルには、文字数制限があるので長いタイトルではなく 多くても30文字程度を目安にキーワードを織り交ぜつつ作成します。 description(サイトの説明文)の設定も、検索結果に表示されるため重要な要素の１つです。 (検索順位には影響しません) 文章の文字数目安はおおむね120文字程度を基準として作成します。 タイトル同様、ページ毎に文章を変え概要が伝わるようにしましょう。 2. 見出しタグを適切に使用する 見出し(h)タグには、ランクが存在しています。 h1タグが最上位となり、次にh2タグ、h3タグ、h4タグとなっています。 これは、文章の階層構造を説明することにもなるので hタグの順序がバラバラになっていると検索エンジンに正しく解釈してもらえなくなります。 悪い例 良い例 このように、hタグの番号を昇順に正しく並べていきましょう。 3. HTML5タグの正しいセクショニングを設定する セクショニングとは、文書構造を定義することです。 文章構造を検索エンジンに正しく伝えるために、もっとも重要なものとなります。 主なセクショニングコンテンツとして、 header, footer, main, nav, section, article, aside などが挙げられます。 この３つのポイントは最も基本的かつ重要な項目となりますが、 他にもさらに高度な対策があります。 もっと詳しく知りたい方は、 Googleの「検索エンジン最適化（SEO）スターター ガイド」を参照してみてください。 ファストコーディングでは、これら基本的な対策はもちろん、 高度なSEO対策も施されたHTMLデータにて制作しております。 SEOに強いコーディングならファストコーディングにお任せください！ --- - Published: 2017-03-09 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/jquery/html-css-javascript/ - カテゴリー: React, Vue.js, jQuery - タグ: CSS, HTML, JavaScript, コーディング, フロントエンド, 初心者 こんにちは、ディレクターのせりなです。 これからプログラミングを勉強してみようかな！っていうエンジニア志望の人や 自分はWebサイトを作らないけど、エンジニアが何やってるのか知りたい！ っていう営業さんやデザイナーさん向けに 『HTML、CSS、JavaScriptの違いと役割について』ご紹介します。 Webサイトをつくりたいけど、HTMLって何なの？ Web業界の営業をやり始めたけど、 Webサイトって実際どうやって作ってるの？ などなど。 『コーディング？何それ初めて聞いた！』くらいの 超初心者さんにもわかりやすい記事になっているので読んでみてください。 HTML、CSS、JavaScriptの役割は人間の顔に例えると簡単に覚えられる！ さっそくですが、Webサイトを構成している主な要素についてご紹介していきます。 まず、Webサイトを作ろうとおもったら 以下の3種類の要素を順番に覚えていく必要があります。 逆にこの3つが揃うとある程度のことはできてしまいます！ 今回はわかりやすいように人間の顔に例えてみます！ 1. HTML(エイチ ティー エム エル)は"顔のパーツ" 2. CSS(シー エス エス)は"お化粧" 3. JavaScriptは(ジャバ スクリプト)"動き" 最初は「なんだそれ？」って感じですが、1つ1つご説明していきますね！ 1. HTMLは"顔のパーツ" HTMLは人間に例えるなら"顔のパーツ"です。 人間の顔に必要なパーツね、とりあえず 目が2つあって、鼻が1つあって、口が1つあって・・・ でも、コンピュータにはどれが目の機能をもっていて どれが鼻の機能をもっているのかわかりません。みんな一緒に見えてしまうのです。 そこで、それぞれの顔のパーツの役割を教えてあげるのがWeb業界でいうとHTMLなのです。 HTML(エイチ ティー エム エル)とは Hyper Text Markup Language(ハイパーテキスト マークアップ ランゲージ) 日本語にすると"超高度な役割指定言語"ってところです。 私たちが普段Webブラウザで見ているページは デザイナーさんがわかりやすくパーツを配置してくれているので 視覚的にここがタイトルだなーとか、これはメニューだなーっていうのがわかりやすいのですよね でも、コンピュータからしたら、全部一緒に見えてしまって どれが何に使うパーツなのかさっぱりわからないのです。 そこで登場するのがHTML。人間界とコンピュータ界の翻訳者です。 これは画像だよー、これはロゴだよーと、それぞれの機能を教えてあげる役割をもっています。 全部英語だから最初は拒否反応を起こしちゃう人もいるかもしれませんが よくよく見るとメニューのところは赤字で「nav = navigation)(ナビゲーション)」みたいに それぞれのパーツがもつ役割を指定していっているだけなのです。 2. CSSは"お化粧" 次は"お化粧"の役割をもつCSSです。 目、鼻、口の数はみんな一緒でも それぞれ違う人間だと私たちが判断できるのは、人によってアイデンティティがあるからです。 目はみんなより大きくぱっちりめ、そして少し離れ目かな？ 口は人より小さめ、リップを塗って女の子らしく！ こんな感じで顔のパーツ(HTML)の位置を調整したり、"お化粧"して装飾を加えるのがCSSです。 CSS(シー エス エス)とは Cascading Style Sheets(カスケーディング スタイル シート) 目の色は茶色、サイズは大きく、位置は少し離して・・・みたいに 上から下(Cascading：階段状)にスタイルを指定していくのがCSSの役割です。 CSSを体験してみよう！ 例えば、パソコンで普段使っているメモ帳に 下のようなHTMLとCSSを書いてファイル形式を「. html」にして保存し Webブラウザにファイルをドラッグして開いてみると・・・ こんな風に、CSSでの"お化粧"がどう設定されているかを簡単に体験できます。 HTMLで書いた「このテキストは仮の文章です。」という文字に CSSでスタイルを指定してあげると、文字の大きさや色を変更することができます。 3. JavaScriptは"動き" さて、次は"表情"の役割を持つJavaScriptについて。 女は愛嬌！にっこり笑顔が大事よね！でも時には怒ったり泣いたり・・・ と、そんな感じでJavaScriptを使うと、"パーツ(HTML)"に"動き"をつけることができます。 JavaScript(ジャバ スクリプト)とは HTMLとCSSだけでつくったお顔は真顔だからちょっと味気ないですよね。 ここにJavaScriptを追加すると顔に"動き(表情)"が出せます。 JavaScriptでは具体的に何ができるのかっていうと・・・ 実際の動きが見たい人は画像をクリックしてデモの動作を見てみてください 私たちが普段何気なく見ている画像のスライドショーや いつもページの右下にあって、押すとページの上まで戻ってくれる あの超便利なスムーススクロールボタンも、全部JavaScriptなのです。 JavaScriptを体験してみよう！ それでは、JavaScriptも簡単に体験してみましょう。 まずはパソコンで普段使っているメモ帳に 下のようなJavaScriptの記述をしてファイル形式を「. html」にして保存し Webブラウザにファイルをドラッグして開きます。 Webブラウザに、ポップアップで「Hello world」ってでてきましたか？ この"動き"を追加してくれているのがJavaScriptの役割です。 本当はもっと下準備しないといけないのですが、 HTML、CSS、JavaScriptの違いを体験するならこれで充分！ 因みに、Web業界初心者さんがよく間違える "Java"と"JavaScript"の違いについては下記のページを読んでみてください。 HTML、CSS、JavaScriptの違いと役割についてのまとめ さて3種類の違いと、HTML、CSS、JavaScriptが それぞれ何をしているのか、なんとな～くわかりましたか？ ・HTMLは"顔のパーツ" ・CSSは"お化粧" ・JavaScriptは"動き" HTMLコーディングはよくわからないけど、とにかくWebサイトが作りたい！って方はこちら！ --- - Published: 2017-03-07 - Modified: 2024-11-01 - URL: https://fastcoding.jp/blog/all/system/wordpress-random/ - カテゴリー: システム開発, WordPress - タグ: php, WordPress FASTCODING-Vietnamのバックエンドエンジニア、ジアンです。 Webサイトを見ていて「ランダムに記事を読み込む」ページを見たことはありますか？ 具体的にはWebサイトを表示すると 最初はりんごに関する記事が1番上に表示されていたのに 同じページを更新してみたら、次はみかんに関する記事が1番上に来ている このようにページを再読み込みしたら、毎回違う記事が表示されるというものです。 この機能は投稿数が多いブログなどに適しています。 ページを更新すると毎回ランダムに違う記事が表示されるので 記事に対しての読みムラが少なくなり、 まんべんなく色々な記事をユーザに読んでもらうことができます。 今回はWordPressでこの機能を実装してみたいと思います。 WordPressで記事をランダムに表示させる方法 まずカスタムページテンプレートを作ります。 下記の2パターン作成したので、お好きなほうを使用してください。 #1 : WordPressテーマ内に直接記述する場合 #2 : ショートコードとして使う場合 #1 : WordPressテーマ内に直接記述する場合 記事を表示させたいphpファイル : 「'orderby' => 'rand'」で記事のランダム表示を設定し、 「'showposts' => 5」で記事の表示件数を制御しています。 #2 : ショートコードとして使う場合 WordPressの記事のランダム表示は簡単なWP_Queryのループです。 ショートコードのlimitのパラメータに「5」を設定していますが、 これはランダム記事を5つだけを表示するという意味です。 このパラメータを変更することで記事の表示件数を変更できます。 固定ページ内で使用するショートコード : functions. php : 「繰り返し表示させる部分」の中にはタイトルと本文だけ入れてありますが HTMLを編集すれば、任意のコンテンツを繰り返し表示させることができます。 いかがでしたか？ WordPress構築案件でお困りでしたらFASTPRESSまでお気軽にご相談ください。 --- - Published: 2017-03-02 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/schema-org/ - カテゴリー: React, Vue.js, Web業界の動向・情報 - タグ: Web業界の動向, フロントエンド, 初心者 FASTCODINGの波乗りディレクター尾島です。 schema. org(スキーマ)とは？ 初めて聞いた、という方もいるのではないかと思います。 schema. org(スキーマ)とは 「検索エンジンに正確な情報を伝え、最適な検索結果を表示させる」 というひとつの仕様になります。 schema. orgの仕様通りにHTMLをマークアップしていく事で、 クローラーがページの内容を解析しやすくなり、 その結果として検索結果にリッチスニペットを表示する事ができます。 この、リッチスニペットとは検索結果に表示される評価や画像のことを言います。 赤枠部分が表示されるようになります この様な形式で評価などが表示されるので、クリック率の向上などが期待できます。 その他、画像を表示させるといったことも可能です。 schema. org(スキーマ)にはSEOの効果もある？ 構造化マークアップを行うので、SEOにも効果がある！？ と期待される方がいるかもしれませんが、答えはNOです。 現在の検索エンジンはそういったアルゴリズム・ランキングシグナルになっていないようです。 しかし、Googleの中の人が 「構造化データのマークアップをランキングアルゴリズムに組み込むかもしれない」 と言っている様なので、将来的にSEO的にも効果のある仕様になるかもしれません。 schema. org対策は、やっておいて損はないかも！？ schema. orgのマークアップ方法 schema. orgではmicrodataという方式でマークアップしていきます。 そうすることで検索エンジンに情報が送られます。 とても細かく設定されているので、一例のみ取り上げていきます。 ・itemscope ： microdataを宣言する。 ・itemtype ： microdataの種類をURLで指定する。 ・itemprop ： 情報の各項目を指定する。 ・itemref ： 他の場所の情報とリンクする。 データタイプ（itemtype）ごとに必須項目が異なってきます。 必須項目は必ず設定し、それ以外の項目についてもマークアップ可能なものは設定しましょう。 その他詳細については下記リファレンスに記載されています。 schema. org公式リファレンス schema. org(スキーマ)は簡単に対応できるの？ schema. orgを利用し、リッチスニペットを表示することはとても魅力的です。 ですが、慣れない人や理解が浅い場合には記述が難しい内容となっています。 構造化マークアップは慣れてしまえば便利ですが、schema. orgを理解し、 リファレンスを確認しながら、HTMLの入れ子構造に沿って記述する必要があるので、 学習コスト・対応コストが必要になるため、導入の為のハードルが高くなりやすくなっています。 schema. orgに対応することで得られる恩恵は、そのコストに対してまだまだ多くはないと思います。 しかし、これからさらに多くの情報やSEO面がサポートされるようになることは想像できます。 FASTCODINGでは、このschema. orgに対応した形での制作も可能となっております。 まずはパンくずリストから対応させてみたい！など schema. orgの事でお困りでしたら、ぜひ一度ご相談ください。 --- - Published: 2017-02-24 - Modified: 2024-07-11 - URL: https://fastcoding.jp/blog/all/jquery/java-javascript/ - カテゴリー: ディレクション, jQuery - タグ: JavaScript, ディレクション, 初心者 どうも、ディレクターのせりなです。 IT・Web業界の新人さんがよく間違うあるあるに Java(ジャバ)とJavaScript(ジャバスクリプト)問題があります。 え？"Java"と"JavaScript"って違うものなの？ "JavaScript"を業界の人風にかっこよく言うと"Java"じゃないの？ そんな初心者さんや営業担当さんでも違いがわかるように "Java"と"JavaScript"がどんなものなのか簡単にまとめてみました！！ Java(ジャバ)とJavaScript(ジャバスクリプト)って違うものなの？ 答えはYES！全くの別ものです。 ITやWeb業界の初心者さんがよく間違えるのがこの2つ。 どれぐらい違うかって言うと メロンとメロンパンくらい違う ウインナーとウインナーコーヒーくらい違う 中国と中国地方くらい違う とか言われます。 マクドナルドを"マック"とか"マクド"って略すのと一緒かと思いきや そうじゃないんですね・・・全く紛らわしい！！ JavaできるならJavaScriptもできるでしょ？ っていうのはエンジニアからすると あなた日本語は話せるわよね？ 同じ人間なら当然、英語も話せるでしょ？ って無茶ぶりされているのと一緒です(笑) いや、だってさ、使う文字とか文法とか全然違うじゃん・・・？みたいな。 JavaとJavaScriptでできること さて、実際にJavaとJavaScriptそれぞれ できることの違いについて簡単に考えてみましょう。 Javaくんは、基本的に裏方で作業をする縁の下の力持ち JavaScriptちゃんは、とにかく目立ちたい花形スター 縁の下の力持ち：Javaくんが活躍するところ Javaくんは私たちがよくわからないところで幅広く働いてくれています(笑) なんだか持ち場が多すぎて掴めないけど、その包容力が彼の魅力！ プログラミング言語のなかでは1番メジャーでとっても人気者です。 Androidアプリ TwitterやEvernoteなどのWebサービス 銀行などの社内業務システム 花形スター：JavaScriptちゃんが活躍するところ JavaScriptちゃんは主にWebサイト上で活躍しているのでよく目にしていると思います。 存在感のアピールが激しめなおてんば娘です。 "js(ジェーエス)"なんてあだなをつけられて、みんなから親しまれています。 画像がスライドショーになっていたり ボタンを押したらポップアップが出てきたり メニューの下からサブメニューが現れたり JavaとJavaScriptはなんで名前が似てるの？ 違う違うって言うけど、名前からして関係がありそうじゃん？ どっちもJavaってつくし・・・って思いますよね。 まぁ、確かに関係ないわけじゃないいんだけど・・・ちょっと訳ありなのです。 真実を知るには、遡ること20年。兄妹の過去について話さなければなりませんね。 Javaくんは1991年生まれ。JavaScriptちゃんより少しお兄さんです。 ダディは、Sun Microsystems社さん(現Oracle社) JavaScriptちゃんは、幼名をLiveScript(ライブスクリプト)と言います。 ママンは、ネットスケープ・コミュニケーションズ社さん ふたりはもともとは兄妹でもなんでもありません。 両親どうしが仲良しで、1995年にダディとママンが再婚したのです。 そして、兄妹の証としてLiveScriptちゃんはJavaScriptに名前を変えました。 人気者だった兄のJavaくんにあやかりたかったみたいです。大人の事情ってやつですね。 そんなこんなで2人はとってもややこしいお名前になりました。 JavaとJavaScriptは中身も似てるの？ 答えはNO！全くの別ものです。 Javaくんの祖先は、気難しくて厳格なC言語一族 JavaScriptちゃんの祖先は、イケイケなハッカーが好んで使うLISP(リスプ)という言語 全然違う血(言語)が流れているのに 名前が似ているのは両親の再婚(協業関係)のせいなんですね。 これがJava・JavaScript問題の悲劇のはじまりと言われています。 JavaとJavaScriptの違いのまとめ まず、JavaとJavaScriptは全くの別ものです！！！ Javaはとにかく色々なところで使われいます。 守備範囲が広すぎてわかりにくいですが、Web業界の新人さんはいまは覚えなくて大丈夫です。 JavaScriptはWebサイトに動きをプラスして、ユーザーが使いやすいようにしてくれていてます。 Webサイト上で何か動いていたらJavaScriptが活躍していることが多いです。 JavaScriptってどんなことができるのかもっと知りたい！ って人はJavaScript制作に特化したFASTSCRIPTのページも見てみてください！ JavaScriptのことをもっとよく知りたいあなたへ！ --- - Published: 2017-02-22 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/frontend/amporpwa/ - カテゴリー: React, Vue.js - タグ: Web業界の動向, フロントエンド FASTCODINGの波乗りディレクター尾島です。 AMPとは、Accelerated Mobile Pagesの略で モバイル端末でホームページを高速表示するHTMLフレームワークであることは 前回の記事にてご紹介しましたが、今回は静的なHTMLページへの対応にフォーカスしてみます。 AMP対応のメリット・デメリット、導入する？ AMP対応のためのHTML記述方法 まず、AMPの仕様にあわせてHTMLを記述していきます。 普段HTMLを見慣れている方であれば、お気づきだと思いますが、 AMPフレームワークの独自タグを設定していく形となります。 主な記述ルールとして、 と宣言する。 とする。（絵文字でも可） rel="canonical"を入れ、元のページとAMPページの繋がりを明記する。 （AMPページのみの場合は、そのページを指定する） headの下にを記述する。 （文字コードとビューポートの指定は必須） → → → などが挙げられます。そのた必須の記述ルールに関してはGitHub-AMP HTMLから確認できます。 あとは、各種ツールなどでAMP対応の確認を行いエラーが出ていなければ対応完了です。 【Google AMPテストツール】 爆速！AMPトップニュース枠に表示される世界へようこそ！！ と、 ここまでAMP推しで来ていて何ですが、 個人的にはPWA（Progressive Web Apps）に注目していきたい所です。 AMPでは高速化の事だけが考えられている為、機能が制限されすぎており すべてのサイトに向いた技術ではないと個人的には考えています。 その一方で、PWAは機能を削ることなく存分に利用できるというメリットがあります。 ただし、小規模サイトにはあまりオススメできないというデメリットもあります。 （前回の記事の通り、静的な記事コンテンツが中心であればAMPはオススメです） 国内では、朝日新聞や毎日新聞、マイナビニュース、exciteニュースといったサイトがAMPを採用しています。 え？ AMPかPWAのどちらかしか選択できないの？ と思われた方、ごめんなさい。 決してそんなことはありません。 PWAとAMPを組み合わせる、PWAMPという試みも行われています。 その形式は何通りかありますが、詳細は次回の記事にて触れようと思います。 AMP対応でお困りの方は、是非FASTCODINGにご相談ください！ --- - Published: 2017-02-16 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/info/amp/ - カテゴリー: React, Vue.js, Web業界の動向・情報 - タグ: Web業界の動向, フロントエンド FASTCODINGの波乗りディレクター尾島です。AMPについて、最近導入を検討される方からのご相談を多く受ける様になってまいりました。おそらく、2016/10/21より日本のGoogleの検索結果にAMPが対応されることが要因のひとつと考えられます。そもそもAMPとは、Accelerated(加速する) Mobile Pages の略で、GoogleやTwitterほか複数のプラットフォームが共同で参加しているプロジェクトが構築した規格のことです。AMPってどんな仕組み？・静的なコンテンツのみを対象・JSは原則禁止・画像や広告の表示サイズは固定・GoogleやTwitter側にキャッシュとして保存される・AMPフレームワークを利用詳細は、Google公式ブログを参照してみてください。Google公式ブログAMPの構成は？AMPを構成する要素として、・AMP HTML・AMP JS・Google AMP Cache（AMPページをキャッシュする役割）が挙げられます。AMPを利用するメリット・モバイルページの表示速度が上がる。・トップニュースのカルーセルに掲載される。AMPを利用するデメリット・仕様に完全に合わせる必要がある。・デザインや機能を再現しにくい。・CSSが50KBを超えるとエラーになる。・タグに制限がある。・PC,SP用ページとの多重管理が必要になる。・AMPはこの先生きのこるのか。AMPの導入方法では、AMPの恩恵を受けるためには、どの様に導入すればよいのでしょうか。今回は、Wordpressを利用している場合の導入方法についてご案内します。Wordpressへの導入は、多くの方はプラグインを導入して対応しているようです。おもに、下記の様な手順で導入していきます。AMP化の方法1. AMPプラグインをインストール・有効化する。2. Yoast SEOプラグインをインストール・有効化する。3. Glue for Yoast SEO & AMPプラグインをインストール・有効化する。プラグインで対応できる範囲のコンテンツは簡単に完了させる事ができます。(プラグインでのAMP対応は投稿ページのみ)WordPressだけど、プラグインなしで対応させたい！という猛者にはこちらが参考になると思います。プラグイン無しでAMP対応さて、ここまでAMPの説明をしてきましたが、総合的に判断して、導入のメリットはどれくらいあるのでしょうか。AMPが検索アルゴリズムのランキング（SEO）に反映される事はないことから、すべてのサイトで導入した方が良いとは言えませんが、ニュースサイトやブログサイトを運営、新規で作成を検討されている方は、AMPの導入を考えても良いかもしれませんね。AMPに対応するタイミングをうかがっている方、AMP化の対応・導入を検討されている方は、ぜひFASTCODINGへご相談ください！ --- - Published: 2017-02-08 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/wordpress/updating-of-wordpress/ - カテゴリー: WordPress - タグ: WordPress こんにちは、ディレクターのせりなです。 2017年2月1日(水)にWordPressのバージョン4. 7. 2が公開されましたね。 「WordPress 4. 7. 0～4. 7. 1で、REST APIの処理による脆弱性が存在している」との発表がありました。 この脆弱性が悪用されると、遠隔操作によってWordPressの投稿内容を改ざんされる可能性があるとのこと。 「すぐにWordPressを更新してください」と様々なところで言われますが ちょっと待ってください！！！ WordPressのバージョンアップによってWordPressに不具合が起きる可能性があることをご存知ですか？ 携帯のOSアップデートと一緒で、更新には何かとリスクが伴います。 脆弱性・情報改ざんと聞いて動揺してしまう気持ちはわかりますが、5分だけ私に時間をください！！！ まずは、次の2項目だけ読んでみてください。 ・WordPressのバージョンアップに関するリスク ・WordPressのバージョンアップ、すぐに更新していいの？ そのあとに、リスクを回避してきちんとバージョンアップする方法をまとめたので、正しい知識を身に付けてからアップデートしましょう。 ※問題にあがっているWordPress 4. 7. 0～4. 7. 1のバージョンを使用している方は、 脆弱性対策のバージョンアップなので、すぐにアップデートが必要です！！！！！ すぐに更新したいけどわからない！という方は まで！ WordPressのバージョンアップに関するリスク WordPressのバージョンアップには今回のようなセキュリティ対策が含まれているので、常に最新であることが好ましいのですが、いきなり古いバージョンからメジャーアップデート(*)などをしてしまうと、様々な不具合が起こります。 例えば・・・ ・Webサイトや管理画面が真っ白になってしまう ・WordPress管理画面にログインできなくなる ・Webサイトの表示が大きく崩れる ・wordpress4. 3にバージョンアップしたら真っ白になった！ ・WordPress 4. 7へのアップデートで管理画面が500エラーに。復旧手順からアップデート成功まで。 いきなり画面が真っ白になってしまったらとっても怖いですよね。 突然WordPressをバージョンアップして困らないための予備知識と更新手順を、順番にご説明していこうと思います。 * WordPressのバージョンについて ・メジャーアップデート： 3. 2 → 4. 0など、仕様を大きく変更すること ・マイナーアップデート： 4. 6 → 4. 7など、新機能の追加や仕様の更新など ・ビルドアップデート： 4. 7. 1 → 4. 7. 2など、細かい不具合修正のこと WordPressのバージョンアップ、すぐに更新していいの？ WordPressのバージョンアップを自分のWebサイトに適用するのは、アップデートが公開されてから2週間～1か月後がいいと思います。 なぜなら、WordPressは世界各国にユーザがいますので、先にバージョンアップをしてくれたみなさまがを丁寧にまとめて記事にしてくれている可能性が高いためです。 もし自分がWordPressをアップデートしたときにバグが起こっても、対処法を紹介してくれている方がいたら解決しやすいですよね。 また、機能面でのバグ・不具合があまりにも多い場合は今回のアップデートを見送るという選択もできます。(脆弱性対策でのアップデートがあった場合はすぐにアップデートしたほうがいいです！） ※問題にあがっているWordPress 4. 7. 0～4. 7. 1のバージョンを使用している方は、 脆弱性対策のバージョンアップなので、すぐにアップデートが必要です！！！！！ すぐに更新したいけどわからない！という方は まで！ また、今回なら以下のような検索ワードで調べてみるといいでしょう。 「WordPress 4. 7. 2 アップデート 不具合」 「WordPress 4. 7. 2 バージョンアップ バグ」 公式サイトにも掲示板式のQ&Aがありますので、ご参考ください。 WordPress. org 公式サポート情報 今のWordPressのバージョンを調べる方法 更新のタイミングがわかったところで、今のWordPressのバージョンを調べてみましょう。 WordPress管理画面にログインして、を開いてください。 概要のところにあるこの3つの数字が現在のWordPressのバージョンです。 ※バージョンが3. 2以前の場合はこの方法で表示されないようです。 他の確認方法については下記のサイトさんをご参考ください。 今使っているWordPressのバージョンを調べる方法 バージョンアップ前に確認しておきたい2つのこと 1. サーバーが対応しているか確認する 最新バージョンのWordPressを利用できるサーバーかどうかを調べておいてください。 WordPressのバージョンが上がると、PHP(開発言語)とMySQL(DB:データベース)の古いバージョンが使用できなくなることがあります。 ※サーバーが対応していない場合はWordPressのアップデートができません。 WordPress 4. 7系の推奨環境 ・PHP ： 7. 1以上 ・MySQL ： 5. 6以上 (または MariaDB 10. 0以上) 最新の情報はWordPress公式サイト("インストール"の項目)で確認しましょう。 2. プラグインが対応しているか確認する WordPressの最新バージョンが公開された直後は、使用しているプラグインやアドオンが対応していないことがあります。 WordPressはオープンソース(無償提供)のCMSなので、プラグインの開発者も時間のあるときにメンテナンスしているためです。 万が一、WordPressのバージョンアップにプラグインが対応していない場合、プラグインが上手く機能しなかったり、ぺージが真っ白になってしまうなどのエラーが発生するため、プラグインの対応バージョンを確認しておきましょう。 WordPressのバージョンアップ手順 5ステップ それでは、予備知識の確認と事前準備が終わったところで、実際の更新手順をご紹介します。 WordPressのバージョンアップ手順は以下の5つです。 1. ファイルとDB(データベース)のバックアップをする 2. 全てのプラグインの使用をする 3. WordPressをバージョンアップする 4. 必要なプラグインを有効化する 5. Webサイト、管理画面に不具合がないか確認する 1. ファイルとDB(データベース)のバックアップをする まず、WordPresのバージョンアップで失敗したときに備えて、バックアップをとっておきます。 手動でもいいですが、プラグインを導入してバックアップをとることもできますので、下記のサイトさんなどを参考にしてください。 ・図解でわかるWordPressの全自動バックアップ方法 ... 日本語画面での解説があります。 ・BackWPUpで確実にWordPressのバックアップを取る方法 ... 英語の画面ですが、こちらのページのほうが詳しいです。 2. 全てのプラグインの使用をする WordPressをバージョンアップする前に、すべての使用中のプラグインをしてください。管理画面から一括で操作できます。 3. WordPressをバージョンアップする さて、ここまで準備できたら早速アップデートなのですが、もし不具合が起きたときが恐いので、更新する時間帯も考えましょう。可能なら、みんなが寝ている深夜の2～5時くらいがBESTです。 「Wordpressは正常にアップデートされました」と表示されたら完了です！ 4. 必要なプラグインを有効化する 無事にWordPressのバージョンアップが完了したら、管理画面にログインして、プラグインをしてください。 使用しているプラグインによっては、一括でを行うと不具合が起きることがあるので、そんなときは手動でひとつずつしてみてください。 特にキャッシュ系のプラグインは1番最後に有効化することをお勧めします。 (WP Super Cache、WP Fastest Cache、W3 Total Cache など) 5. Webサイト、管理画面に不具合がないか確認する もし、この時点で画面が真っ白になってうなどの不具合があった場合は、原因をつきとめる必要がありますので、下記のサイトさんなどを参考にしてください。 ・wordpressのアップデートに失敗して真っ白にならない方法 ※こちらの記事はアクセスできなくなっておりましたので、リンクを削除しました（2024年8月26日 更新） ・WordPress で画面が真っ白になってしまった場合の３つの対処法 ・WordPressの「インポート/エクスポート」を使ってサイトをバックアップし復元する WordPressには自動更新機能がついている！ 日本語版のWordPressは3. 8から自動更新機能(自動バックグラウンド更新)が追加されています。 手動で管理したい方もいると思いますが、この自動更新機能はビルドアップデート(細かい不具合修正)が対象なので、WordPressさんにお任せしてしまうのもアリです。 ・WordPressで全ての自動更新を有効にする方法 ※こちらの記事はアクセスできなくなっておりましたので、リンクを削除しました（2024年8月26日 更新） ・自動更新機能を停止する方法 ※こちらの記事はアクセスできなくなっておりましたので、リンクを削除しました（2024年8月26日 更新） まとめ 「初心者はWordPressのバージョンアップをしないほうがいい」なんてことをよく耳にしますが、1回1回のバージョンアップは小さな変更でも、ちりも積もれば、です。 数年間放置しておいて一気にバージョンアップをするリスクの怖さと言ったら・・・小刻みに更新したほうがバグも小さくて済みます。 でも、そんなこと言ってもバグが起きたら原因わからないし恐いしで放置しているサイトさんも多いのが現状。 今回のようなセキュリティ面のバージョンアップも、みんなが脆弱性を突かれて攻撃される訳ではありませんが、もしものことがあったらと思うと不安ですよね。 また、WordPress側で何か大きな不具合が見つかったときは、何もしていなくてもバグが起きてしまうこともあるのです。 何もして無いのにWordPress2. 8のブログにログイン出来なくなる危険性 知識がなくて自分では更新できない、自分で更新したら画面真っ白になっちゃって困った！なんてときはプロにお任せするのが1番です。 FASTCODINGではWordPress専門のバックエンドエンジニアがおりますので、もし困ったら相談してみてください。 --- - Published: 2017-02-06 - Modified: 2025-03-13 - URL: https://fastcoding.jp/blog/all/seo/google-pagespeed/ - カテゴリー: SEO - タグ: SEO, フロントエンド, ユーザビリティ, 初心者 ※2019年6月25日追記 Google PageSpeed Insightsの問題点をレポートする、無料診断サービスを始めました 高得点が取れていないサイトをお持ちの方、是非お問い合わせください！ PageSpeed Insights対策 無料診断はこちらをクリック こんにちは、ディレクターのせりなです。 Googleが検索順位を決めるアルゴリズムの1つとして、ページの表示速度があります。 米Googleは2010年にページの表示速度も検索順位に影響することを発表し、2012年には日本でも検索順位を判断する要因の1つになっていることが明らかになっています。 ページの表示速度は日本でもランキング要因になっていた Google社員に尋ねた11個の質問 2012 Webページの表示速度が遅いと悪いことだらけ 果たしてページの表示速度の改善は、SEO対策のためだけなのでしょうか？ 答えは否、私はページの表示速度はのためにあると思っています。 ”Amazonの調査では、ページの表示速度が0. 1秒遅くなると、売り上げが1%低下することが明らかになった。 Googleからは、ページの反応が0. 5秒遅くなるとアクセス数が20％低下すると発表されている。 さらに米Aberdeen Groupの2008年の調査では、スピードが1秒遅くなるとページビューが11％、コンバージョンが7%、顧客満足度が16%低下することが報告されている。” 引用：Webサイトのレスポンス速度から見るインターネットユーザーの閲覧行動と企業の課題 ページの表示速度が遅くてイライラしてしまうサイト、ありますよね？ 私も気長なほうではないので、読み込みが遅いページはすぐに閉じてしまいます。(=離脱率が高くなる) 表示速度が遅いWebページのデメリット ・アクセス数(トラフィック)が下がる ・検索順位が下がる ・CS(顧客満足度)が下がる ・CV(コンバージョン/問い合わせや会員登録などの行動)が下がる ・売上が下がる 自分のWebサイトの表示スピードを知る方法 表示速度を計測してくれるサービスはいくつかありますが、Googleが無料で提供してくれている『 Google PageSpeed Insights 』が1番有名です。 使い方は、ページの表示速度を計測したいWebサイトのURLを入力して、ボタンを押すだけ。 PCとスマートフォン両方のスピードを100点満点で測定してくれます。 そこそこ評価で70点、高評価がほしいなら85点以上目指しましょう。 ※ちなみに、WordPressサイトの場合は必須プラグインの影響で、Googleアナリティクス、Googleアドセンスに登録していると読み込みファイルが多くなる影響で表示速度が遅くなるため、100点満点になることはありません。Googleのサービスを利用しているのに皮肉なものです。 他にもあるあるページ速度の計測サービス ・GTmetrix ： GoogleとYahooの速度計測を元に評価してくれます。使い方はこちら ・Pingdom ： 各ファイルの表示速度も計測してくれます。 表示速度がわかったら次は改善方法ですね！ Webサイトの表示速度を早くするための3つの方法 ここからは難易度順に5段階で改善方法をご紹介していきます。 時間がない人、初心者だけど表示速度を高速化したい人はが低めのものから挑戦してみてください。 低 ～ 高 1. 画像を最適化する 2. CSS・JavaScriptを最適化する 3. ブラウザのキャッシュを活用する ※作業を開始する前に、Webサイトのバックアップをしっかりととっておいてくださいね。 1. 画像を最適化する (1) 画像の使用枚数を減らす ・文字は画像でなくデバイステキスト(OS標準フォント)にする ・Webフォントやアイコンフォントを活用する (2) デバイスによって適切なサイズ(大きさ)の画像を使用する ・実際の表示サイズより大きな画像を使用しない ・PC用とスマートフォン用で使う画像を分ける(適切なサイズを使用する) (3) 画像を圧縮して軽量化(サイズダウン)する 画像圧縮のオンラインサービス ・Tiny PNG(タイニーピング) ： 20枚まで同時に軽量化できるお利口パンダさん ・JPEG mini (ジェイペグ ミニ) ： ファイル容量を8割ほどDOWNできます 画像圧縮・軽量化サイト3選！見た目そのままでファイルサイズ大幅ダウン！ 画像圧縮サービスの使い方やメリット・デメリットはこちらで確認してみてください。 2. CSS・JavaScriptを最適化する (1) CSS・JavaScriptファイルを圧縮(ミニファイ化)する ミニファイ(minify)とは 簡単に言うとコードの圧縮化のことです。縮小化・軽量化とも言われます。 具体的には余分なスペース・改行・インデントなどの不要な部分を取り除き、軽いファイルに変換します。可読性が悪いため編集することを目的とせず、ライブラリとして使用するために圧縮されることが多いです。 CSS・JavaScriptのミニファイ化 ・Online JavaScript/CSS Compressor ： 有名なツールです。 ・CSS Minify ： ボタン1つで簡単に圧縮できます！使い方はこちら ・Grunt(グラント) ： ばりばりのエンジニアさんは、Gruntを導入して自動コンパイル(変換)！ でページの表示速度を計測すると、親切にGoogleがミニファイ化されたファイルを生成してくれます。 こちらをダウンロードしてWebサイトに反映させてもOKですし、自分でミニファイ化したファイルを作成してもOKです。 ※ミニファイ化したファイルはWebサイトに読み込む用、元々のオリジナルファイルは今後の編集用として別々に残しておきましょう。(ミニファイ化したものをstyle. min. css、オリジナルをstyle. cssなど) (2) 余計なCSS・JavaScriptファイルの読み込みを減らす ・その機能が本当に必要なページでのみ、必要なファイルを読み込む (レスポンシブ化による分岐や、機能ごとの分岐など様々) 3. ブラウザのキャッシュを活用する ブラウザキャッシュとは Webブラウザが表示したWebサイトのデータを一時的にパソコンに保存しておく機能です。 次に同じWebサイトを表示したときに、サーバーにアクセスして情報を取得してくる手間を省き、パソコンに保存されたデータを表示するため、初回よりも速くページを表示することができます。 ブラウザのキャッシュを活用することで、Webサイトの表示を高速化しましょう。ここでいう「活用する」というのは、Webサイトごとにキャッシュの保存期間を指定しておくことです。 (1) ブラウザキャッシュに有効期限を設定する サーバ上にある「. htaccess」ファイルに下記の記述を追加します。 書いてある内容は、画像やJavaScriptファイルの情報を〇週間、パソコン上に保存しておきます。という設定です。 キャッシュの有効期限を1週間以上にすれば、Google先生からのご指摘はなくなります。 記述を追加するだけなので一見簡単そうに見えますが、Web系の知識がない方にとってはひと仕事ですね。「. htaccess」ってなに？という方はこちらのサイトさんを見てみてください。 . htaccessとは？. htaccessで、できる事と設定手順についてまとめてみた 以上、お疲れ様でした！！！ ここまできたらもう一度『 Google PageSpeed Insights 』でページの表示速度を確認してみてください。 すぐにはGoogleさんの評価が反映されないので、最後の更新から3日後くらいに調べてみるのがいいと思います。 これだけでかなり改善されているはずです。 今回は初心者さん向けにページの表示スピードの改善方法について書きましたが、上級者向けの改善方法やWordPressのプラグインを使用した方法もあるので、興味のある方は調べてみてください。 また、FASTCODINGではGoogle PageSpeed Insightsに沿った方法で、Webサイトの表示速度を高速化するための知見もありますので、気になるかたはお気軽にご相談ください。 参考サイト＆情報 「コンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」の対策をしました JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法 ブログをダイエット！簡単15分でWordPressを高速化する為の5つの「減らす」設定 Googleが提示しているWebサイトの表示速度のルールには、下記の15個の項目があります。 ①速度に関するルール ・リンク先ページでリダイレクトを使用しない ・圧縮を有効にする ・サーバーの応答時間を改善する ・ブラウザのキャッシュを活用する ・リソースを圧縮する ・画像を最適化する ・CSS の配信を最適化する ・見える範囲のコンテンツを優先する ・レンダリングを妨げる JavaScript を削除する ・非同期スクリプトを使用する ②操作性に関するルール ・プラグインを使用しない ・ビューポートを設定する ・コンテンツのサイズをビューポートに合わせる ・タップターゲットのサイズを適切に調整する ・読みやすいフォントサイズを使用する 詳しく知りたい方はこちらのキーワードを元に検索などしてみてください。 それではまた次回～！ --- - Published: 2017-01-31 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/system/moving-wordpress/ - カテゴリー: システム開発, WordPress - タグ: WordPress, 初心者 はじめに ファストコーディングのシステムディレクター、Mr. Kです。 今回はWordPressサイトを別サーバーに設置する手順、及び設置先サーバーの確認事項について説明したいと思います。基本的にサーバーの知識、バックエンドの知識について明るくない初心者の方でも作業できるような説明となります。 WordPressの引っ越し前に確認しておくこと 動作環境について まずは設置先サーバーについて、WordPressが動作する環境かどうかを確認しましょう。 サーバーによって確認方法は異なります。 一般的なレンタルサーバーには、Webブラウザ上でサーバーの設定を行うサーバー管理ページなるものがあるはずです。そこにログインした上で確認してください。 推奨動作環境 推奨動作環境はWordPress公式で推奨される環境です。 ・PHP バージョン 7 以上 ・MySQL バージョン 5. 6 以上 または MariaDB バージョン 10. 0 以上 必須動作環境 最低でも必要な環境です。この環境でも動作しますが、セキュリティ面で問題が発生する可能性があります。 ・PHP バージョン 5. 2. 4 以上 ・MySQL バージョン 5 以上 データベースについて WordPressは実行ファイルとデータベースにより動作します。 データベースへアクセスするための情報を調べておきましょう。これは一般的にサーバー管理画面で確認することができます。 後述で説明しますが、このデータベースを操作するためのツールが必要です。一般的なレンタルサーバーではphpmyadminというツールが最も多く使われています。 このツールにアクセスする方法を調べておきましょう。 作業手順 1. WordPressの実行ファイルとデータベースダンプを取得する 以降元のサーバーからWordPressの実行ファイルを、FTPクライアントを用いてダウンロードしてください。wp-config. php、wp-adminディレクトリなどのファイル群です。 その後、サーバーの管理ツールからデータベースダンプを取得してください。データベースダンプとはデータベースのデータをエクスポートしたファイルをさします。 移行しようとするWordPressが使用しているデータベースの、すべてのテーブルをエクスポートしましょう。 phpMyAdminを使ってMySQLのデータをバックアップ・復元する方法 2. WordPressの設定ファイル(wp-config. php)を書き換える wp-config. phpは設定ファイルです。これにデータベースへの接続情報を書き込みましょう。テキストエディタでこれを開き、下記コードの箇所に適切に情報を入力してください。 3. WordPressの実行ファイルを新しいサーバーに設置する 取得したWordPressの実行ファイルをFTPクライアントを用いてアップロードしましょう。今回の場合、アップロードする先はWordPressが稼働予定のルートディレクトリです。 4. データベースダンプをインポートする phpmyadminなどのデータベース管理ツールで、取得したデータベースダンプをインポートしましょう。 もしデータベースが作成されていなければ作成し、そのデータベースにインポートしてください。データベースの作成はphpmyadminではできない場合がありますので、その際はサーバー管理ページから追加できる場合があるので、方法を確認してください。 WordPress用のデータベース作成方法 5. データベースの中身を新しいサイトURLに置換する データベースのデータにはWordPressが稼働するURLの情報が含まれています。データベースダンプのインポート直後はこのURLが移行前のものになっていますので、これを新しいURLに一括置換しましょう。 今回は一括置換作業を簡単に行えるツールを使用します。以下のサイトからsearchreplacedb2というツールをダウンロードし、wp-config. phpを設置しているディレクトリにアップロードしてください。 のダウンロードはこちらから 以降は実際の画面を見ながら説明します。 最初の画面では特に何も変更せず、submitを押してください。 次の画面ではデータベースへ接続するための情報を入力します。 しかしwp-config. phpを自動的に読み込んでくれるため、何も入力せず次の画面に進みましょう。 この画面では置換を行うテーブルを選択します。 基本的にはここも全てのテーブルを対象に置換すれば良いので、そのまま次の画面へ行きましょう。 この画面では実際に置換するURLの情報を入力します。 Search for の入力には置換対象のURLを、Replace with の入力には置換後のURLを入力してください。 なお、URLの最後には『 / 』がつかないようにしましょう。 確認した後、Submitボタンを押すことで置換が完了します。 ※データベースの置換が終わったら、必ずこのsearchreplacedb2は削除しましょう。 これはアクセスするだけでデータベースを操作できてしまうので、セキュリティホールになります。 6. WordPress管理画面での作業 データベースの置換作業を行なった後は、WordPress管理画面にログインします。 管理画面メニューのを開いてください。 そこで何も入力をしないまま、パーマリンクを更新ボタンを押してください。これにより. htaccessファイルが更新され、WordPressの移行作業が完了となります。 サイトURLとホームURLを分ける場合 WordPressのインストールディレクトリと、トップページのURLを分けたい場合があります。例えば次のようなケースです。 wp-config. phpなどの実行ファイルを設置したいところ http://example. jp/wp/ トップページにしたいところ http://example. jp/ この場合は先ほど説明した工程とは別に変更を加える必要があります。 まずは上述の手順を使って、wpディレクトリにWordPressを設置しておいてください。 index. phpを書き換える 今回のケースではルートディレクトリにindex. phpを設置します。 このindex. phpには少し変更を加える必要があります。 次の記述を後述ように置き換えてください。 ↓ ホームURLを書き換える WordPressの管理画面にログインし、設定画面を開きます。 以下の画像にある入力欄があるので見てください。 設置直後は二つの入力欄がWordPressアドレスのものと同じになっているはずです。 これをサイトアドレスの部分だけを、トップページのURLに書き換えてください。 パーマリンクを更新する . htaccessファイルをindex. phpと同じディレクトリにコピーしてください。 その後、設置手順のとおりにパーマリンクを更新しましょう。 これでディレクトリが別れた形でWordPressが動くようになります。 最後に WordPress移行作業の解説は以上となります。 サーバーの設定によっては上記のやり方でもうまくいかない場合があります。その場合は状況を把握し、問題点を検索するなどして探し出していくしかありません。 このWordPress移行作業を代行することもできますので、万が一の際は弊社でも対応ができます。是非ご相談ください。 --- - Published: 2017-01-27 - Modified: 2024-08-07 - URL: https://fastcoding.jp/blog/all/webdesign/designswidth/ - カテゴリー: Webデザイン - タグ: デザイン, 初心者 2021年、最新のWebデザインの横幅サイズはこちらの記事をご覧下さい。 どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないための考え方をまとめてみました。 基本的な考え方さえ抑えておけば、これから先いろいろな情報が出てきてもばっちりです！ もくじ 1. 「Webサイトデザインの横幅サイズ」の結論！！ 2. まず、モニター解像度のシェアを調べる ～PC編～ 3. Web・IT大手企業やイケてる企業のWebサイトを参考にする ～PC編～ 4. スマートフォンのWebサイトの横幅は何pxで作ればいいの？ 5. 参考サイト 1. 「Webサイトデザインの横幅サイズ」の結論！！ 長くなるので結論から先に書いておきます！ PCはでWebサイトをつくる (960px,980px,1000px,1024px,1040pxあたりからお好みで) スマートフォンはでWebサイトをつくる (iPhone最新機種 2017年1月現在ではiPhone7に合わせる) 時代が変わっても自分で考えられるようになりたい方はこのまま読み進めてください。 2. まず、モニター解像度のシェアを調べる ～PC編～ まずは「Stat Counter」でパソコンのモニター解像度の現在のシェア率を調べます。 簡単に言うと、世間のみなさんがどんな大きさのパソコン画面でWebサイトを見ているのかな～という市場調査です。 Stat Counter(スタットカウンター)とは パソコン・タブレット・携帯などの端末や国、期間別に、世界各国で使用されているモニターの解像度や検索エンジンのシェア率をグラフ化してくれるという、Web上の様々なシェア分析に特化したサービスです。 こちらが2017年1月の月間のモニター解像度のシェア率です。 2017年1月で日本に絞って見てみると「1920px×1080px」と「1366px×768px」がダントツでシェアが多いですが、あとはまちまちですね。 シェア率はわかった！で、モニターの解像度だけを参考にすればいいの？ ・・・と思いきや答えはです。 モニター解像度のシェア率を見ると「1920px×1080px」が一番多いですが、でも横幅2,000pxくらいでWebサイトをつくる人はいませんよね。 もしシェア率に合わせて横幅1920pxでWebサイトを作ってしまったらこんな感じになってしまいます・・・ それでは、実際にWebサイトを見るときのことを考えてみましょう。 1000px前後でWebサイトを作る理由を考える 例えば、自分が「1920px×1080px」のモニターを使用していることを考えてみてください。 あなたは画面いっぱいにWebブラウザを広げてサイトを見ますか？ 多分、大体の人はWebブラウザサイズを適当な大きさに縮めて、空いたスペースに他のウィンドウを並べて作業していると思います。 きっとこんな感じ。 ブラウザサイズが大きくなったからと言って、Webサイトを画面いっぱいに広げて見るかというと、そういう訳ではないのです。 なので、 どんなモニターでも問題なく見られるサイズが「1000px前後」なのです。 1000px前後でWebサイトを作成した場合、どのモニターで見ても見やすいサイズ感になる。 もっとも良く使われるディスプレイ解像度が1024×768から1366×768にアップ〔日本では1366×768〕 2012年の記事なので5年前になりますが、それまでの主流なモニターサイズは「1024px×768px」でした。 日本は少数派に優しい国なのでまだまだこの層を切り捨てません。 「1000px前後」だけど実際細かくいうと何pxがいいの？ PCはでWebサイトをつくる (960px,980px,1000px,1024px,1040pxあたりからお好みで) と冒頭のところで書きましたが、実際何pxでWebサイトを作ればいいのか細かい数字の部分、気になりますよね 簡単に言うと「好みです」としか言いようがないのですが、ここは他のみんながどうしているのかを参考にしてみましょう。 3. Web・IT大手企業やイケてる企業のWebサイトを参考にする ～PC編～ 今回は「Webサイトの横幅まとめ(2015年07月)」のページを参考にさせていただきました。 700px代から1600pxまで実に幅広いですね。 でも、よくよく見てみるとあたりに集中しているようです。 Webサイトのつくりは大きく2種類に分かれる 「Web・IT大手企業やイケてる企業」だけを厳選したWebサイトの横幅一覧 ------------------------------ ① 固定幅 ------------------------------ 900px ： 人間 940px ： NTT docomo / キノトロープ 950px ： Yahoo! JAPAN 960px ： 東芝 / ネットイヤーグループ / beBit 980px ： サイバーエージェント / 電通 / au 富士通 990px ： SoftBank 1000px ： DeNA 1240px ： LIG ------------------------ ② リキッドレイアウト ------------------------ 980px ： Apple 1000px ： IMJ 1200px ： チームラボ 1300px ： 博報堂 「Webサイトの横幅まとめ」を真似て、個人的に「Web・IT大手企業やイケてる企業」だけを厳選して一覧を作ってみました。 そうするとだいたいのWebサイトは、大きく2種類に分かれることがわかりました。 ①900px～1000pxの「固定幅」デザイン ②1000px以上の「リキッドレイアウト・可変レイアウト」デザイン リキッド・レイアウト(Liquid Layout)とは まず、リキッドとは状態変化のなかの「固体」「気体」に対し、「液体」の状態を指します。 Webサイトにおけるリキッド・レイアウトとは、ユーザーのWebブラウザサイズによって、横幅が100％もしくは可変的にグリッドなどが調整されてコンテンツが表示されます。 ちなみに、PC・タブレット・スマートフォンのどのデバイスで見ても崩れることなく表示されるデザインを「フルサイズ・リキッドデザイン」と呼んだりします。 Apple、IMJ、チームラボ、博報堂さんのWebサイトがフルサイズ・リキッドデザインになっていますね。 2015年のWEBサイトはフルサイズリキッドデザインで行こう。 Webサイト横幅比較のまとめ この結果からわかることは、自分が作りたいWebサイトは「①固定幅」なのか「②リキッドレイアウト・可変レイアウト」なのかで横幅の選択肢がぐっと狭まるということです。 ①の固定幅でWebサイトをつくるなら1000px前後(960px,980px,1000px,1024px,1040pxあたり) ②のリキッドレイアウトにするなら1000px以上でも構わない 1000px以下でリキッドデザインでももちろん構いませんが、1000px以上で固定幅だと、小さいモニターを使っているユーザーさんにとってちょっと使いづらいサイトになってしまいますね。 4. スマートフォンのWebサイトの横幅は何pxで作ればいいの？ スマートフォンのWebデザインの横幅、何pxで作っていますか？ 横幅320px？640px？なんて話をよく聞きますが、今現在でいうとどちらもNGです。 考え方のポイントは「iPhoneの最新機種に合わせる」です。 Qiitaさんの「iPhone/iPad解像度(画面サイズ)早見表」を参考にさせていただきました。 2017年1月現在、Apple社製スマートフォンの最新機種はiPhone7です。 ディスプレイの大きさは「375px×667px」ですね。じゃあ375pxの横幅でWebサイトを作ればいいのかな？ ・・・と思ったそこのあなた！ちょっと待った！！ 横幅375pxでWebサイトを作成してはいけません！！！ 注意すべきは「Retina対応」です。 Retinaディスプレイとは Retina Display(レティーナ ディスプレイ) 「Retina」とは英語で「網膜」のこと。人間の目で識別できる限界を超えるほど細かい画素であることからRetinaディスプレイと名づけられました。従来の倍の解像度(高画素密度)のディスプレイのこと。 簡単に言うと「画像の輪郭をより鮮明に描写することができるようになった」ということです。ディスプレイのレベルアップですね。 Retinaディスプレイで見た場合、 ディスプレイのの大きさでWebサイトをつくると上の写真のように荒くなります。 ディスプレイのの大きさでWebサイトをつくると、下の写真のようにより鮮明に見えます。 「えーと、画像は全部2倍で作ればOKなんだよね？」を卒業しよう iPhone7のWebサイトの横幅は750pxでつくろう！ Retinaディスプレイ対応されているiPhone7は、ディスプレイの大きさの2倍であるでWebサイトを作成します。 375px(iPhone7のディスプレイの横幅の大きさ・インチ数) × 2倍(Retinaディスプレイ対応比/デバイスピクセル比) ＝ 750px(iPhone7でブラウザに表示される大きさ) 今後新しい機種が発売されても、この考え方がわかっていればもう、迷うことはありませんね！ 5. 参考サイト 今回ご紹介したWebサイト以外にも、Webデザインを考えるうえでとっても参考になるページを見つけたので、お時間があれば見てみてください。 デザインは8の倍数でできている 論理的にWebデザインを考えるお時間です。Webデザインはアートではありません。ロジックです。 Webサイトの空白やコンテンツサイズを全て8の倍数で設計したら美しいのではないかということについて検証しているページで、とても参考になりました。ルールの統一化をして設計していくのは大切な思考です。 960グリッドシステム Webサイトは960pxを基準にすると制作しやすいとの考えから、IllustratorやPhotoshop、HTMLファイルなどの各種テンプレートを配布しています。 「Big ol' DOWNLOAD button」から各種テンプレートをダウンロードできます。 ・パソコンの主流モニターは少なくとも1024px×768pxなので、960pxを表示するには十分である。 ・960という数字は割り切りやすいので柔軟な対応に向いており、グリッドレイアウトに適している。 ・・・という考え方を元に960px神様説を導き出したそうです！ いかがでしたか？ 長くなりましたが、少しでもこのむずむずした悩みが解決された人が増えると嬉しいです。 --- - Published: 2017-01-25 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/frontend/whyjs/ - カテゴリー: React, Vue.js - タグ: JavaScript, フロントエンド, 初心者 FASTCODINGの波乗りディレクター尾島です。ホームページを制作する上で、近年では欠かすことが出来なくなってきているのが JavaScriptの存在です。JavaScriptとはJavaScriptとは、数多あるプログラミング言語のひとつで、上手に利用する事でさまざまな機能やアニメーションなどを実装することができます。JavaScriptはコードなどがとてもシンプルで、基礎的な部分は他のプログラミング言語と同じところも多い為、入門しやすい言語ともいえます。他の言語と異なる点といえば、プログラムを動かすのがサーバー経由ではなくクライアントサイド（ブラウザだけ）で実行することが可能な点となります。JavaScriptで出来ること実際のユースケースとしては、 フォームのメールアドレスが正しい形式で入力されているかチェックしたり、ローディングのアニメーションを表示、スライダー表示など多岐に渡ります。こういったことは、他の言語でも実装は可能なのですが、なぜJavaScriptが 採用されるのでしょうか。 少し以前までは、脆弱性などが問われ採用されることはあまりありませんでした。JavaScriptの強みとは・・・？ではなぜ、今JavaScriptが使われるのでしょうか。 それは、「即時性」にあると思います。他の言語では、サーバーとのやりとりが発生する為データの受け取りや判別などに 時間を必要としタイムラグが発生します。 ですが、JavaScriptの場合はサーバーを介さずクライアントサイドで処理を行う為上記のようなタイムラグが発生せずシームレスに処理を行うことができます。この、JavaScriptのおかげでWEBサイトは従来の静的なページから動的な、ダイナミックな動きを取り入れたものが増えてきました。動的なサイトを制作しようとすると、やはりそれなりにコストや工数が必要となってきます。近年では、jQueryのほかNode. jsやVue. jsなど様々なテクノロジーが たくさん出現してきていますが、 ファストコーディングではセキュリティ面もしっかりと考えた上で、高速かつ堅牢なコードにて各種JavaScriptの機能を実装しております。 --- - Published: 2017-01-12 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/direction/codingspec/ - カテゴリー: ディレクション - タグ: コーディング, ディレクション, 制作準備, 指示書 おはようございます！ FASTCODINGディレクターのせりなです。 さあ！Webサイトを作ろう！！デザインはデザイナーさんに頼んだし、 コーディングはコーディング代行会社に依頼しようかな～ なんてとき、 コーディングのことがよくわからないディレクターやデザイナーのあなたは悩むはず 自分が作りたいサイトのこと、やりたいこと、 どうやってエンジニアに伝えればいいんだろう・・・ そんなときにエンジニアとディレクター・デザイナーさんの溝を埋めるのが「コーディング指示書(仕様書)」と呼ばれるものです。 初めてだし指示書の書き方なんてよくわからないよ、という方のために今回は一般的なコーディング指示書の書き方についてまとめてみました！ HTMLコーディングに必要なものを用意する まず、Web制作会社やコーディング代行会社にコーディングを依頼するとき、最低限必要なものはこの3点かなと思います。 1. コーディング指示書、仕様書、設計書 コーディングするにあたって「やりたいこと」を全部ここに書きます。 このボタン押したらこのページを表示してほしい、とか。 2. ディレクトリマップ、サイトマップ Webサイトのファイル構造を示した地図です。 簡単に言うと、このお家にはAちゃんが住んでて、このマンションにはBくんとCくんが住んでる、とみんなの居場所を整理して伝えてあげる住民マップのようなもの。 3. デザインデータ 一般的にはAdobe PhotoshopやAdobe Illustratorで制作されることが多いです。 デザインはデザイナーさんに作ってもらいましょう。 例えば「コーディング指示書」「コーディング仕様書」などは呼び方は様々ですが、同じものを指している場合があります。 会社によって名称が違うものって覚えるの大変ですよね。この辺は会話の中で感覚を身につけていくしかないです。 今回は1番の「コーディング指示書」の書き方についてご紹介していきます！！ なぜコーディング指示書を書く必要があるの？ 指示書つくるなんて面倒くさいなぁ・・・ って思ったこと、正直ありますよね？ 色々書くこと多いし、何ページも書くの大変だし・・・ では、なんでコーディング指示書が必要なのか考えたことありますか？ いい機会なのでまずはここから一緒に考えてみましょう！ もしコーディング指示書がなかったら もし指示書がなくて 「エンジニアさんにお任せで～」 ってあなたが言ったとします。 すると、エンジニアも人間なので、デザイナーさんが作ったデザインの100%を理解することはできません。 ここはただの画像なのかな？ それともどこかにリンクするボタンなのかな？ とか スライドショーは右から左に流れる動きがいいかな？ ふわっと次の画像が現れる動きがいいのかな？ なんて 1つ1つの部品を作っていくと、小さなところでよくよく躓きます。 結局そんなこんなで出来上がってきたWebサイトは、あなたが100%満足のいくものに仕上がる訳がないのです。 修正につぐ修正、そのツケを払うのは？ 思った通りに仕上がらなかったWebサイト。 「ここはこうして！こっちはこうじゃなくてこうなんだけど・・・」なんて修正をどんどんすることになりそうです・・・ はっきり言うと、Webサイト制作にかかるお金のほとんどは、ディレクター、デザイナー、エンジニアの人件費。 修正がどんどん追加されるということは、制作する人たちの人件費もどんどん追加されるということ。 きっとあなたのお財布にも負担がかかってしまいますね。 時間的コストも金銭的コストも余計にかかってしまって、あれ？なんか思ってたのと違うな・・・なんてことに。 仕様が決まっていないと無駄が多くなる コーディング指示書は「キャッチボールを最小限にする」ためのツールです。 指示書を最初に作っていたらなかったはずの「無駄なメール」「無駄な電話のやりとり」「追加の制作費用」 そして、指摘を沢山するということは相手との「関係性も悪化」していくことが多いですよね。 目先の利益だけでなく、先々を見越した立ち回りができるのが一人前のビジネスマンです！！ 無駄を省いてクライアントと良好な関係を築くためにも、コーディング指示書は必要なのですね。 コーディング指示書はあなたを守ってくれる！？ もし、最初にきちんとコーディング指示書を作っていて、それなのにあなたの「やりたいこと」がWebサイトに反映されてなかったら あなたは制作会社に「コーディング指示書に書いてあるよ」って伝えて、やり直しをしてもらうことができます。 もちろん、この場合は追加で費用が発生することはありませんね。 エビデンス(証拠)を残しておくことで、言った言わないとかどっちに責任があるかという無駄なやりとりを回避することができます。 時にコーディング指示書はあなたを守ってくれるのです！！ コーディング指示書とは では、コーディング指示書の重要性がわかってきたところで改めまして。 コーディング指示書とはなんぞや、何が必要でどう作ったらいいのか、というところですね。 まず、 コーディング指示書とは 簡単に言うと「やりたいこと」をまとめたものです ディレクターやデザイナーが、エンジニアに対してWebサイトをどう作りたいかを書いていきます。 どんなフォーマット形式でつくればいいの？ Web制作会社・コーディング代行会社によって様々ですが、私がよく見かけるのは・・・ Microsoft Office EXCEL Microsoft Office PowerPoint Adobe Photoshop (デザインとは別レイヤー内に記述) Adobe Illustrator (デザインとは別レイヤー内に記述) PDF( 個人的にはNG。理由は後述します) ディレクターさんだとデザインソフトを上手く使いこなせない方もいるので、一般的なオフィスソフトで作成されることのほうが多いです。 デザイナーさんなら、Adobe PhotoshopやIllustrator内にレイヤー分けしてそのまま書き込んでしまうほうが楽だと思います。 私はこの方法が1番好きです。一元管理できるので、コーディングの時に参照するファイル数も少なくなります！ PDFはNGな理由 コーディングするときに意外と面倒なのが、文字をコピーできないとき。 リンク先のアドレスなどをコピーできるように 「編集可能・コピー可能なデータ」で作ってあげることがエンジニアにとっての優しさかなと思います。 これが、私が上で「PDFはNG」って書いた理由です。Adobe AcrobatやIllustratorで無理やり開けば編集もできるのですが、スムーズじゃないですね。 最近は、コーディング指示書用のWebツールなんかも出てきているので、また別の機会にご紹介しますね！ コーディング指示書に必要な5つのこと 最低限、これだけ書いてあればOK！という項目をまとめました。 画像の左下にあるように「赤はリンク」「緑はjQuery」など、書く項目ごとに色分けしてあると、感覚的に情報がとらえやすくていいですね！ 1. リンク先の指定 ナビゲーションやページ内にあるボタンなど 2. デバイステキスト(プレーンテキスト)と画像の区別 文字じゃなくて、画像としてコーディングしてほしいところと 文字(デバイステキスト)としてコーディングしてほしいところを分けます。 デバイステキストにするかどうかの判断は、簡単に言うと「デザインで使用しているフォント(書体)がパソコンの中に最初から入っているかどうか」です。 最初から入っている書体なら文字としてコーディングしてOK。 特殊な書体を使ってデザインしている場合はデザインを崩さないために画像としてコーディングします。 MacユーザかWindowsユーザかによってもデフォルトで入っている書体が違うので、詳しく知りたい方は調べてみてください。 3. JavaScript・jQueryの指定 簡単に言うと「動き」がつくところの指定です。 例えば、ページトップへ戻る(スムーススクロール)ボタンや スマートフォン用のハンバーガーメニュー(アコーディオンメニュー)など 4. CMSなどの外部ツールを使うときの情報 問い合わせフォーム機能を追加してくださいとか ブログ機能を追加したときに、ここの記事は人気順で表示とか CMS(Content Management System)とは Webサイトの管理システムのことです。 WordPress、MovableType、Joomla! 、Concrete5、CS-Cart、EC-cubeなど どれがいいか悩んでしまうくらい色々な種類があります！ 5. 埋め込みファイル系の指定 ・Facebook、Twitter、InstagramなどのSNS ・Youtube、vimeoなどの動画 ・Google mapも埋め込む場合は住所か地図のURLを！ ビギナーさんはとりあえずここまで書ければOK！ よくよくかみ砕いてみるとそんなに難しいことはなさそうですね！ コーディング指示書に必要なこと ～上級者編～ 段々Webサイトの何たるかがわかってきたり、クライアントから要望があったらこんな項目を指定することもあるかもしれません。 画像の保存形式(アイコンはpng、写真はjpgで～など) 画像やファイルの命名ルール パスの指定方法(絶対パス、相対パス、ルートパスなど) metaタグやhタグの指定(SEO対策として、検索エンジン向けに書くもの) Googleアナリティクスのトラッキングコード 今は「ふ～ん、そんなものも指定できるんだ」くらいに思っておいてください。 コーディング指示書を書くときのコツ さて、コーディング指示書に必要なものがわかってきたところで1つ。 このサイトのこの動きいいな～、こんなアニメーションつけたいな～ でも、なんていう名前かわからないや・・・ って困ったことありませんか？私はよくあります(笑) そんなときの強い味方は「参考URL」です！！！ 「このサイトのこの部分と同じ動きにしてください」 こう書いておくだけであら不思議、思った通りにエンジニアさんが作ってくれます。 エンジニアさんも魔法使いではないので、特定の条件でないと上手く実装できなかったり、近い動きはできるけど完璧にピッタリ、とまではいかない場合もあります。 それでもわからないことを言葉で一生懸命伝えるよりは、参考のサイトがあったほうが両者にとって一目瞭然なのです。 FASTCODINGでは、コーディング指示書にご記入いただいた内容を1つ1つディレクターが丁寧に確認してからエンジニアに渡します。 書かれていない内容についても、必要だと思ったらこちらから提案・ヒアリングしてからコーディングしています。 コーディングもできるディレクターだからこそできる「指示書のチェック・提案力」 コーディング代行会社をお探しでしたらぜひお問い合わせください！！ --- - Published: 2017-01-06 - Modified: 2020-07-31 - URL: https://fastcoding.jp/blog/all/frontend/path/ - カテゴリー: React, Vue.js - タグ: コーディング, フロントエンド, 初心者 FASTCODINGディレクターのせりなです。 今回はプログラミングを始めるとき、HTMLコーディング初心者が必ず引っかかる「絶対パス」「相対パス」「ルートパス」について勉強しましょう！ パスとは まず、「パス(path)」とは「道」のことです。 HTMLコーディングでは、ページをリンクさせたいときや、画像を表示したいときに使うので、「表示したい画像がどこにあるのか」の道順を書くのがパスの役割です 例えば、Webサイトのリンクを指定するとき、こんな書き方をしますよね。 この場合で言うと、「https://fastcoding. jp/」の部分がパスです。 簡単にいうとURLの書き方のことを「絶対パス」とか「相対パス」って呼ぶんだなって考えておいてください。 「絶対パス」と「相対パス」の違い 今回はマンションに例えて見ていきましょう！ 最近3匹のこぶた、ブー・フー・ウーが新しいマンションに住み始めたんですって！ 早速、長男のブーに次男のフーの住所を聞いてみましょう。 さて、こんなとき2種類の言い方があると思います。 1： フーの住所全部を伝える フーの住所は「おとぎの国/こぶたの町/レンガの家/2階/フー」だよ 2： ブーが住んでる場所から見た、フーの住所 フーは「同じ建物の2階に住んでるよ」 1番の全部住所を伝えるほうは言うならば「絶対住所」 2番の自分から見た住所は「相対住所」という感じです。(そんな言い方ほんとはないです！) 1. 絶対パスは「誰から見ても変らない住所」 絶対パスは、例えるなら「誰から見ても変らない住所」です。 東京都台東区上野... のように、北海道にいる人が聞いても、沖縄にいる人が聞いてもわかる書き方。 フーの住所 ： おとぎの国/こぶたの町/レンガの家/2階/フー http://otogi. jp/kobuta/renga/2f/foo ウーの住所 ： おとぎの国/こぶたの町/レンガの家/1階/ウー http://otogi. jp/kobuta/renga/1f/woo 2. 相対パスは「自分から見た相手の住所」 相対パスは「自分から見た相手の住所」です。 長男のブーから見ると、次男坊フーと末っ子ウーのお家は... フーの住所 ： 同じ建物の2階に住んでるよ . . /. . /2f/foo ウーの住所 ： 同じ建物の1階に住んでるよ . . /. . /1f/woo ※「. . /」は今いるところから1つ上に移動しますという意味です。 「絶対パス」「相対パス」「ルートパス」の用途とメリット・デメリット なんとなく「絶対パス」と「相対パス」が何なのかわかってきたところで、次にそれぞれの基本用途とメリット・デメリットを見ていきましょう。 こぶた君たちのお家の住所で考えると「絶対パスのほうがわかりやすいじゃん！」って思ってしまうのですが、実際に開発となると相対パスを使うことのほうが圧倒的に多いです。 基本的に絶対パスをベースにしてWebサイトを開発することはないと思います。 1. 絶対パスの用途とメリット・デメリット 絶対パス(absolute path)： URLでページを指定して、最上位階層から目的がどこにあるかを示す方法 絶対パスの書き方はこんな感じです。 もう「http://」で始まっていたら絶対パスだと思ってOKです！ 絶対パスの基本的な用途 ・外部サイトへのリンクを自分のサイトに記載したい場合 絶対パスのメリット ・誰が見ても、どこに何があるのかわかりやすい (絶対パスで開発をするメリット... ないかもしれない) 絶対パスのデメリット ・ローカル環境(サーバにUPしないで自分のPC内での作業)で制作ができない ・書く文字数が相対パスよりも圧倒的に長くなるので時間的コストがかかる ・文字数が多くなるので、ソースコードがわかりにくく・見づらくなる ・ドメインを変更(サイトのお引越し)をしたら、リンクもすべて修正しなくてはならない 2. 相対パスの用途とメリット・デメリット 相対パス(relative path)： 今いる場所(階層、ディレクトリ)を基準として、目的のディレクトリまでの道順を表す方法 相対パスの書き方はこんな感じです。 相対パスの基本的な用途 ・一般的なWebサイト開発(きっと1番メジャーです！) 相対パスのメリット ・ローカル環境でも制作ができる(ブラウザで見た目の確認ができる) ・ルートパスに比べて書く手間が省けるので、作業効率UPに繋がる ・ドメインを変更(サイトのお引越し)をしても、リンクを修正しなくて良い 相対パスのデメリット ・行きたいフォルダになかなか辿りつけない(初心者あるある) ・大型案件の開発をするときに、どこになにがあるのか一発でわかりにくい 3. ルートパスの用途とメリット・デメリット いきなり出てきましたが、考え方は絶対パスに似ているので、最初から読んできた人はすんなりわかるはず！ ルートパス、ルート相対パス(root relative path)： 最上位階層から目的がどこにあるかを示す方法 「ルート」というのは1番上のディレクトリ(フォルダ)のことです。 「/」から始まっていたらルートパスですね！ ルートパスの基本的な用途 ・大規模案件(複数名で開発・ファイル構造が深い)の開発 ルートパスのメリット ・誰が見ても、どこに何があるのかわかりやすい(=大規模案件向け) ・ドメインを変更(サイトのお引越し)をしても、リンクを修正しなくて良い ルートパスのデメリット ・ローカル環境での制作しづらい(MAMPやXAMPPをインストールして開発環境を整えないといけない) ・書く文字数が相対パスよりも圧倒的に長くなるので時間的コストがかかる ・文字数が多くなるので、ソースコードがわかりにくく・見づらくなる 「絶対パス」「相対パス」「ルートパス」についてのまとめ 「絶対パス」「相対パス」「ルートパス」と3種類もありますが、それぞれの用途についてわかりましたか？ クライアントや案件の規模にもよりますが、基本的には相対パスで開発をすることが多いと思います。 制作を始める前に、クライアントにパスの書き方の指定があるか確認しておいたほうがスムーズかもしれませんね。 --- - Published: 2016-12-27 - Modified: 2024-08-26 - URL: https://fastcoding.jp/blog/all/webdesign/mainvisual/ - カテゴリー: Webデザイン - タグ: デザイン, メインビジュアル, 参考 はじめまして。 ディレクター(兼デザイナー)のせりなです。 この度、FASTCODINGは技術ブログを書き始めることにしました！ FASTのスタッフは本当に個性派揃いで、興味のある分野も前職もバラバラ。そんなみんながそれぞれ記事を書いたら・・・面白そうじゃない？ってことに。 例えば ・心は日本人、体はフランス人のjsエンジニア ・平日はプロジェクトの波にもまれ、休日は海で波にもまれてるサーファー ・女優 兼 Webディレクターという、異色の兼業をこなすFASTのスーパールーキー こんな感じで、人種も職種も趣味も様々です。 2015年に創業して1年半が過ぎ、2017年は新しいことにチャレンジするいい機会。そして、私たちが書く記事がWeb業界で一緒に働いている仲間のためになることを願って・・・！ Webデザイナー必見！メインビジュアルのデザイン参考サイト！ Webサイトを制作しているとやっぱりよく目につくのはメインビジュアル。 まだまだWebデザイン初心者の私は、デザインするときに参考になる画像を集めて、 基本的にいいとこどりをして作品を仕上げていきます。 なので、今回は私がいつもお世話になっている『メインビジュアルまとめ』サイトをご紹介いたします！ そもそも「メインビジュアル」「キービジュアル」って何？ Webサイトのファーストビュー(1番最初にサイトを訪れたとき)で、ユーザーが最初に見る要素のこと。 FASTのサイトだとトップページの1番上のスライドショーになっている画像のことですね。 最近のWeb業界の傾向として、このメインビジュアルエリアを画面いっぱいに大きくしてインパクトを出したり、 私たちのWebサイトのようにスライドショーにして複数の画像を表示するパターンが多いです。 サイトの個性やメッセージ性が伝えられる重要な部分であり、自由なエリアが広いだけにデザインに困る部分でもありますよね・・・ そんな「メインビジュアル」の参考サイトをご紹介 WEBデザインのメインビジュアルまとめ 〇〇業界向け、というカテゴリがあるので、作りたい雰囲気に合わせて検索ができます。 ※こちらの記事はアクセスできなくなっておりましたので、リンクを削除しました（2024年8月26日 更新） ブブンデザインアーカイブ メインビジュアルだけでなく、見出しやグローバルナビゲーションのデザインもあるサイトです。 MAIN VISUAL collection 色ごと、イメージごとや表示ランキングなどがあって使い勝手がいいです！ ※こちらの記事はアクセスできなくなっておりましたので、リンクを削除しました（2024年8月26日 更新） デザインにはロジックが大事！一緒に見たい関連記事 Webデザイナーが知っておきたい直帰率の低いメインビジュアルの作り方 こんなサイトにはどんなレイアウトパターンがいいの？文字と画像の配置は？勉強になります。 ※こちらの記事はアクセスできなくなっておりましたので、リンクを削除しました（2024年8月26日 更新） 良いレスポンシブデザインはメインヴィジュアルで決まる。参考にしたいテクニックまとめ。 メインビジュアルのレスポンシブ化に特化して、PC・スマートフォン版の配置や情報量を比較したページです。なるほど！ ※こちらの記事はアクセスできなくなっておりましたので、リンクを削除しました（2024年8月26日 更新） いかがでしたか？ 色んな方のアイディアを見ると、 創作意欲がどんどん湧いてきますね！ デザインに困ったらぜひぜひご参考ください。 --- - Published: 2015-03-12 - Modified: 2024-07-24 - URL: https://fastcoding.jp/blog/all/jquery/html5move/ - カテゴリー: jQuery 自分が知らなかったものをメモとして残します。 H2MD. jsは、パソコン・スマホのブラウザで再生できるソフトウェアムービーコーデックととのこと。 jpegやpngファイルを利用してCanvasへ合成して動画を再生します。 jpegの連番ファイルであるMotionjpegに比べ、ファイルサイズの大幅な削減を実現しました。 また、重ね合わせの動画再生や、透過レイヤであるアルファチャンネルも利用可能です。 有償のライセンスなので費用がかかるみたいですね！ ブラウザも最新のみ！ html5でもアプリやゲームができるので、独自でスキルアップのため学習しようかと思うが、少し抵抗がありますね。 私自身クリエイティブ力に欠如していて、ないもの・ストーリーを作るということにハードルを高く持ってしまっています。 ただ、コーディング等のスキルアップを考えると今からこういうものを触る機会を設け知見を広げようと思います。 FASTCODINGとしては、対応は難しいですけどね・・・ --- - Published: 2015-03-04 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/0421spsite/ - カテゴリー: React, Vue.js, Web業界の動向・情報, SEO - タグ: HTML, SEO, Web業界の動向 皆様このニュースはご存知の方が多いかと思います！ 4月21日までにスマホ対応しないとGoogleアルゴリズム変更で順位が落ちるということをGoogleが発表いたしましたね！ 下記がgoogleより出ている参照サイトです。 http://googlewebmastercentral-ja. blogspot. jp/2015/02/finding-more-mobile-friendly-search. html 結論的にはスマホサイトを用意した方がいい！？と私は解釈しております。 皆様のサイトにもWebマスターツール上に警告が届いているかもしれません！？ 改めてチェックしてみましょう。 スマホに適切か今すぐに調べるにはGoogleDeveropersからモバイルフレンドリーテストのチェックをして見てください。 https://www. google. com/webmasters/tools/mobile-friendly/? hl=ja こちらで現在のサイトがしっかりとスマホサイトに適切かチェックができます。 ちなみにFASTCODINGはブログはレスポンシブ対応しているのでクリアしていますが、 サービスサイトはPCサイトしかないため、これから作成しようかと考えています。。。 実際にスマホサイトがない！？という場合には２つの見解かと思います。 １つ目は、とりあえず今のまま待機をしておこう。 サービスによってはパソコンからの流入しかなかったり、スマホサイト用意してもなということがあるかと思います。 だったらとりあえず様子見るというのも１つの手段としてはありかなと思います。 ２つ目は、早速スマホサイトを作ろう！！ FASTCODINGの宣伝です！ スマホサイトのコーディングならFASTOCODINGと言っても過言ではございません！ 何故なら３月は繁忙期ということもありますが、案件がレスポンシブ、スマホサイト制作のどちらかのご依頼が多く入っております。 このニュースが出てからはますます、スマホサイトのコーディングご依頼をいただいております。 ４月２１日までに間に合わせる為に、今からデザインを行って、スマホサイトのコーディングをFASTCODINGにご依頼いただくのいかがでしょうか？ ご依頼お待ちしております。 --- - Published: 2015-03-02 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/other/%e3%83%99%e3%83%88%e3%83%8a%e3%83%a0%e3%82%aa%e3%83%95%e3%82%a3%e3%82%b9%e7%a7%bb%e8%bb%a2%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/ - カテゴリー: その他 ３月１日よりベトナムオフィスを下記の場所へ移転いたしました。 56 Van Coi Street, Ward 7, Tan Binh District, Ho Chi Minh City, Vietnam これも皆様にFASTCODINGをご利用いただいたおかげございます。 ありがとうございます！ 以前よりオフィスが広くなり、また新築ビルのため、彼らはとても喜んでいます！ 私は以前より空港から近いため私はとても行きやすくなりました！ 今後もFASTCODINGをよろしくお願い致します！ --- - Published: 2015-02-09 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/direction/coding_point/ - カテゴリー: ディレクション - タグ: HTML, ディレクション, 制作準備 こんにちは！ 最近はクライアント様のところへの訪問、新規のお客様との商談と大変嬉しいことにお客様の顔を見れる機会を多くいただいております！ そんな中、よくご質問でいただくのは 【コーディング外注の仕方について教えてください！？】 とお話をいただきます！ 弊社は隠すことは何もないので、何でも伝えてしまっています。。笑 ご覧頂いた方にとって参考になればと思います。 コーディングを外注する際のポイントは５点です！ 1. テキスト ーテキストで書いてある文字について２つ目の画像の指示と被りますが、font-familyの指定によって、ここは画像なの？テキストなの？と分からない時がございます。 メイリオやヒラギノで行っている際はテキストと認知をしますが、場合によっては全てのテキストがメイリオやヒラギノでなっていることも時折見受けられます。 よって、テキストのfont-familyはメイリオですなど伝えて頂いた方が作業がしやすく、また指示を頂くことでスムーズに作業へ取りかかれます。 2. 画像 ー１番のテキストと関わりますが、テキストのものを画像にするか否かの判断をしたいために指示を頂いております。 写真については誰がどうみても画像と認知ができますので、問題はございません。 ただし、画像の切り抜き（スライス）方に要望がある場合は指示をいただきたいです。 3. リンク ーリンクについては概ねクライアント様との認識にずれはないと思っておりますが、まれにここはリンクを貼らないでといったこともございますので、 指示を頂くようにしております。 4. jQuery ースライドショーやスムーススクロールなどお客様によって動きが異なりますので、指示をいただきます。 任意で行ってしまうと実装時に思っていたとの異なるというクレームの原因になってしまいます。 指示の仕方としては、ライブラリーや他の参考サイトを掲示し、ここの動きはこれです！とお伝え頂いたら作業がスムーズにいきます。 ものによっては、大変工数がかかるもの難しいものもありますので、しっかりと両者間での確認が必要であり、大事な部分となります。 5. 注意点 ー特にない場合は問題がございません。 作業にあたる上での注意点がある場合は必ずデザインデータと一緒に送付をします。 ディレクトリ構成やjQueryの動きの補足、marginやpadding等は5px単位、font-familyの指定やcssのフレームワークの指示 など注意点がある場合は必ず行いましょう。 FASTCODINGの場合は日本人ではなく、ベトナム人に作業をしております。 日本ではなく海外で行っているためオフショアについても疑問をいただくことが多いです。 この５つのポイントをしっかりとクライアント様と確認の上で作業が入れれば問題なく納品が出来ます！ もちろん品質についても問題がないと私は自負しております。 指示・チェック・修正は私が行っております！ コーディング外注がしたいが不安だと思っている方などいらっしゃれば 相談からでも結構ですのでお気軽にお申し付けください！ --- - Published: 2015-01-19 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/rss-get/ - カテゴリー: React, Vue.js 先日ページ内にgoogleのapiを使ってtopページのニュース情報やブログ情報をRSS取得について行いました。 作業としてしていないと忘れてしまうので自分のメモとして残します。 下記のスクリプト入れます。 google. load("feeds", "1"); //APIを読み込みます function initialize{ var feed = new google. feeds. Feed("該当のblogURLを入れます"); //読み込むフィードを設定します var noPhoto = (""); //画像がなかった場合に表示する画像を指定します feed. setNumEntries(5); //記事を読み込む件数を設定します feed. load(dispfeed); function dispfeed(result){ if(! result. error){ var container = document. getElementById("feed"); //HTMLに書き出す対象のIDを指定します for (var i = 0; i < result. feed. entries. length; i++) { var entry = result. feed. entries; var entryDate = new Date(entry. publishedDate); //日付取得 以下二桁処理をします var entryYear = entryDate. getYear; if (entryYear < 2000){ entryYear += 1900; } var entryMonth = entryDate. getMonth + 1; if (entryMonth < 10) { entryMonth = "0" + entryMonth; } var entryDay = entryDate. getDate; if (entryDay < 10) { entryDay = "0" + entryDay; } var date = entryYear + "/" + entryMonth + "/" + entryDay ; var entryImg = ""; var imgCheck = entry. content. match(/(src="http:)+((. jpg)|(. JPG)|(. jpeg)|(. JPEG)|(. gif)|(. GIF)|(. png)|(. PNG))/); //画像のチェックをします if(imgCheck){ entryImg += ' --- - Published: 2015-01-16 - Modified: 2025-03-31 - URL: https://fastcoding.jp/blog/all/info/autocoding%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%b9/ - カテゴリー: Web業界の動向・情報 FASTCODINGではないのですが、 表題の通り、AUTOCODINGをリリースいたしました！ URL: http://autocoding. jp/ AUTOCODINGは、コンピュータがWebデザインデータを解析し、HTMLコーディングを自動生成するASPサービスです。 今まではフロントエンジニアやマークアップエンジニアと言われるコーダーが手作業で行っていた作業の４つの工程を「HTML構造設計」「画像スライス」「HTML、CSSのコーディング」「品質チェック」を、コンピュータが自動で処理する。 手作業で行っていた工程を自動化することにより制作作業の効率化によるコスト削減を可能とします。 生成されるHTMLコーディングは、HTML5、CSS3に対応しており、W3C標準に準拠されています。 多くのお客様よりお問い合わせを頂いており、きになる AUTOCODINGについて気になった方は是非お問い合わせくださいませ。 もちろん私が担当しております、FASTCODINGもよろしくお願いいたします。 --- - Published: 2014-09-02 - Modified: 2024-10-29 - URL: https://fastcoding.jp/blog/all/frontend/reduction/ - カテゴリー: React, Vue.js, 便利サービス - タグ: フロントエンド 週に１回は更新をしようと思っていたのですが、１ヶ月の期間が空いてしまいました。。。 気持ちを改めて週１回の更新はしようと考えています！ この１ヶ月は様々なクライアント様からご利用を頂き、多忙な日々を過ごしておりました。 いくつかのクライアント様には納期が合わずお断りをしたりしてしまい、大変申し訳なかったなと思っております。 受け入れ態勢を少しづつ増やしていき、クライアント様に喜ばれるよう頑張っていきます。 さて、久しぶりのブログの本題に入りたいと思います。 seoを考えた上では、表示スピードを改善するのは必須ですよね？ 画像の画質は下げたくないけど容量は軽減したいと思うことがあります。 私がよく使っている画像容量軽減ツール２つの紹介をいたします。 1. pngファイルの軽減ツール TinyPNG – Compress PNG images while preserving transparency 2. jpgファイルの軽減ツール Compressor. io - optimize and compress your images and photos この２つはツールはファイルをアップロードすれば自動的に圧縮してくれるツールです。 元ファイルから何％軽減されたのかが一目瞭然です。 サイトページ数が多いときには１０MBほど軽減することができたりと非常にありがたいツールですね。 他にも使っているツールはありますが、今回はこの２つの紹介で終わりと致します。 --- - Published: 2014-07-07 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/codeprep/ - カテゴリー: React, Vue.js - タグ: CSS, HTML, JavaScript, フロントエンド, 初心者 現在はweb上で勉強ができるという良い時代になってきましたね。 情報が多すぎて何から手を付けていいやらと困ってしまうこともあるかと思います。 そこで本日はwebで勉強できるツール１つご紹介いたします。 cordprep(コードプレップ)です。 http://codeprep. jp/ こちらは会員登録すれば無料で言語を学ぶことができます。 はじめてのシリーズとして html,css,javascript,ruby,phpなどがあります。 基礎のベースを学ぶには良いのではないかと思います。 こちらのツールで私個人が良いと思った点。 ・RPGのように問題をクリアし自分のレベルを上げるようになっている点。 →ゲーム感覚の要素があるのは、自分が成長しているように感じるので作業をしていて楽しかったですね。 最近のアプリもそういう要素があって手放せない感覚になるのかなと思います。 ・何を行うか指示をしている点 →自分自身が何の作業をすれば良いのか明記されている点はわかりやすいですね。 何もかもわからない状態ですと作業が嫌になってすぐにやめたくなるが、 作業内容が乗っているのでわかりやすいですね。 こんなところ改善されたらなと思った点。 ・もし回答がわからなかった際には、webで調べる必要がある。 →ポイントに回答が乗っているので調べることはあまりないような気もするが。。。 ・回答を行う場所が問題で指示されている為、htmlをかけるようになるかといったら そうではないかなと感じましたね。 例）margin: 10px; border: 1px solid #C00; などなど。 ただ初歩的なところを作業を学ぶという点では良いツールかなと感じました。 他にも学ぶツールはあるのでご紹介をしていきますね。 --- - Published: 2014-06-30 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/htmltag/ - カテゴリー: React, Vue.js - タグ: HTML, SEO, 初心者 今回はSEOに強いタグの設定、第3段の紹介です。 前回の記事では「Titleタグ・metaタグの設定のポイントは11点」 前々回の記事では「altタグの設定のポイントは3点」 についてBlogを更新いたしました。 今回はhtmlタグでよく使う構造についてご紹介をいたします。 ご存知の内容の方も多くいると思いますが、 私が資料を作成する上で整理する為にブログにも記述しようと思い 本編では書かせて頂きます。 以前のマークアップする際はタグを使ってそれぞれのブロック（箱）を作成し、 わかりやすいように記述をしていたと思います。 html5ではタグで囲むだけでなく、下記のタグを使って構造化することがオススメと 私は考えています。 なぜなら、本来htmlタグにはそれぞれ意味を持っているからです。 意味を持ったタグをマークアップする際に記述するとhtmlを認識する際にわかりやすいと評価がされます。 評価をされるとSEOの順位にも影響が出る為、良いとされております。 サイトを構築する際に最低限下記のタグを使うことをお勧めいたします。。 ・・・ヘッダー情報を囲んで使用する。 ・・・フッター情報を囲んで使用する。 ・・・ページの情報と関係をしているが、直接的に関係していない情報を囲んで使用する。（補足情報の意味合いが強いです。） ・・・リンク情報をまとめて使用する。 ・・・記事（ページの趣旨）を囲んで使用する。 ・・・見出しや内容を囲んで使用する。 ～・・・見出しタグに使用する。（h1>h2>h3の順番に強い意味をもつ） マークアップする際の構成の一例 ・・・head部分割愛・・・ idやclassについては省略をしております。 マークアップする際の注意点４点 1. ヘッダー、フッター部分はサイトを構成する上である要素の為、タグを使ってまとめてあげると良いです。 2. タグを使った際にはタグをセットで使ってあげる。 ※使わないとw3cでタグを使いなさいとエラーが表示される。 3. はページに関連する場合に使用するが、使う際は少し難しい場合があります。 無難に行なう場合はタグで囲んであげると良いと思います。 4. h1タグはページに1つしか使わないようにすると良いと思います。 マークアップする際に改めて上記を参考にして頂ければ幸いです。 私は、少し頭が整理ができました。 ノウハウをまたご紹介いたしますので、お楽しみにして下さい。 --- - Published: 2014-06-26 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/tagpoint/ - カテゴリー: React, Vue.js, SEO - タグ: HTML, SEO, フロントエンド, 初心者 FASTCODINGのBLOGをご覧頂きありがとうございます。 日本がワールドカップで予選敗退という結果に終わり昨日はブルーな気持ちで仕事をしてしまいました。 個人的には奇跡を信じて応援をしていた分反動がでかかったです。 日本代表も次のワールドカップへ向け気持ちを新たに頑張って頂きたいです！ さて冒頭ではちまちまとワールドカップの鬱憤を書いてしまいましたが、 今回は前回に続いてSEOに関する記述をしっかりと行なえば、順位が上がることについてご紹介をいたします。 今回も3点の記述方法をご紹介を致します。 3点の設定を行なう前に前回の記事で紹介をしたポイントの1番を本ブログでも確認をしてから記述を行ないます。 >1. 対象ページは何であるか考えます。 対象ページの内容がわからないと下記の3点について考えることができません。 Titleタグの設定 meta descriptionタグの設定 meta keywordsタグの設定 1. Titleタグの設定 Taitlタグの意味としては検索エンジンから検索したユーザに対して私のサイトはこういうサイトだよって伝えるいみをもっています。 検索エンジンとユーザに対して興味を持ってもらうタグを設定する必要があります。 正しいタグを設定しないと上位表示を得られなかったり、得られたとしてもユーザが訪れない可能性があります。 Titleタグの設定方法 ４つのポイント サイト名または会社名を記述する。 ページ内の重要要素を記述する。 ユーザに対して興味を引く内容を記述する。 文字数は28字以内にする ただし、短すぎたり長すぎる場合は良くないと判断されます。 例としてFASTCODINGの場合は HTMLコーディング代行・外注は早くて安いファストコーディング です。 以前までは、 HTMLコーディング代行・外注依頼はファストコーディング どちらの方がユーザやが興味を持ちますでしょうか？ 私は上記の HTMLコーディング代行・外注は早くて安いファストコーディング でした。 なので、こちらに変更をしたんですけどね。（笑） 4つのポイントを意識してタイトルタグをつけましょう！！ 2. meta description こちの設定はユーザに対してというよりは検索エンジンに対してページ内容及び「meta keywords」タグで設定した内容について説明をいたします。 検索エンジンがこのサイトのページはこういう内容なんだなと認識をさせるための行為となります。 meta descriptionタグの設定方法 ４つのポイント ページ全体の説明を記述する 検索エンジンに対して理解しやすいよう記述する。 「meta keywords」タグで設定した文言を踏まえ記述する。 文字数は110文字以内にする。 例としてFASTCODINGの場合は、 HTMLコーディングの代行・外注は1ページ8,000円のファストコーディングへ！短納期・低価格で最新のセマンティックコーディングやjQuery実装とWordPressのテーマ化にオプション費用なし！ 以前までは、 HTMLコーディングの代行・外注依頼は1ページ8,000円のファストコーディングへ！最新のセマンティックコーディングやjQuery実装、WordPressのテーマ化をオプション費用なしで対応するコーディングサービスを提供します。 少しだけ文言を変更し、検索エンジンに対してわかりやすいように設定をしました。 meta descriptionタグ４つのポイントを意識して行ないましょう！ 3. meta keywords 検索エンジンとユーザに対して検索してきて欲しいキーワードを設定いたします。 meta keywordsタグの設定方法 ３つのポイント ページ全体の内容から検索エンジン、ユーザにきて欲しいキーワードを記述する キーワードは単語で記述する。 キーワードタグの設定は3個～5個程度がよいする。 キーワードタグを多く記述するとあまりよろしくないとされ、ペナルティー受ける恐れがあります。 例としてFASTCODINGの場合は、 コーディング代行,コーディング外注,ファストコーディング 以前までは、 コーディング代行,コーディング外注,HTML5コーディング,セマンティックコーディング,コーディングアウトソーシング,ファストコーディング 多くのキーワードを設定し、検索エンジン・ユーザに対して親切ではなかったなと思います。 適切なキーワードを設定し、すっきりしたなと思います。 meta keywordsタグは３つのポイントを意識して行ないましょう！ 今回のおさらいとして、下記のそれぞれのポイントを意識します！ 1. Titleタグの設定 サイト名または会社名を記述する。 ページ内の重要要素を記述する。 ユーザに対して興味を引く内容を記述する。 文字数は28字以内にする。 ※ただし、短すぎたり長すぎる場合は良くないと判断されます。 2. meta descriptionタグの設定 ページ全体の説明を記述する。 検索エンジンに対して理解しやすいよう記述する。 「meta keywords」タグで設定した文言を踏まえ記述する 文字数は128文字以内にする。 3. meta keywordsタグの設定 ページ全体の内容から検索エンジン、ユーザにきて欲しいキーワードを記述する。 キーワードは単語で記述する。 キーワードタグの設定は3個～5個程度がよいする。※キーワードタグを多く記述するとあまりよろしくないとされ、ペナルティー受ける恐れがあります。 これらを意識して行なうと検索順位でよい結果が得られる可能性がございます。 他にもノウハウはございますので、またお楽しみに下さい。 --- - Published: 2014-06-23 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/frontend/alttag/ - カテゴリー: React, Vue.js, SEO - タグ: HTML, SEO FASTCODINGブログをご覧頂き、ありがとうございます。 本日は表題通りaltタグの設定についてFASTCODINGでどのように設定しているか記述をいたします。 altタグについては基本設定をしなければならないと考えております。 前後の記述した文章及び全体のサイト構成から何を入れければならないのか？を考えて入力をいたします。 こちらの○○○に何を設定すべきかを少し考えて見ましょう。 弊社のお客様の声ページにある有限会社C&Sデザインの今井様のお客様について例として紹介をさせていただきます。 全体の構成と致しまして、お客様の声の内容となっているため、今回記述した内容としては、下記の通りとなります。 「C&Sデザイン今井様とのインタビュー対談」と設定をしております。 こちらでは、誰と何をしているのか？をしっかりと記述いたします。 例えば、今井様と河田の写真と設定すると何をしているのかがわかりませんよね？ しっかりと誰と何をしているのか？ 画像が無くても、その意味が通じるのかを分かりやすく設定する必要がございます。 写真を見ていると何をaltタグに設定をすれば良いのかわからなくなるときがございますが、その時は画像がなくても前後の文章と意味が通じるものを当てはめてあげるとわかりやすく設定ができます。 もちろん正解はないのですが、より正解に近い形としては意味のある文字を設定することが望ましいと言えます。 ポイントは3点です。 1. 対象ページは何のページであるか考えます。 2. 前後の文章はどのように記述しているか考えます。 3. 写真は何の意味を持っているのか考えます。 そうすれば、写真の意味が具体的に浮かんでくると思います。 私はそのように設定をしておりますので、参考に幸いです。 C&Sデザインの今井社長様とのインタビュー記事を本日掲載いたしましたので、是非ご覧ください。 今井社長様インビューページ ※ワールドカップで日本が決勝トーナメント進出を信じている河田でした！ --- - Published: 2014-06-09 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/bookmark/ - カテゴリー: Web業界の動向・情報 私がWebサイトやコーディングを参考にする際にBookmark登録していたまとめサイトの紹介をいたします。 サイトを検索するとまとめサイトがいくもあるため、用途によって使い分けが必要ですね。 FASTCODINGではコーディングをメインに行なっていますが、こちらの12サイトのまとめはワイヤーフレームやデザイン、コンセプトを作る際にも参考になります。 知らないサイトがある方は一度訪問してみて是非参考にしてください。 1. イケサイ http://www. ikesai. com/ Webサイトのカテゴリーとして、「企業・コーポレート」「ネット関連サービス」「ポータル・ブログ」等があります。 色/配色として、「青」「緑」「赤」等で分けて掲載をしてくれています。 直近よく依頼がある「レスポンシブデザイン」に関しても、カテゴリーとして分けてあるため、わかりやすいと思います。 初めてサイトまとめ集を訪れる方はこのサイトを訪問している傾向が高いです。 2. webデザインに優れたサイトのリンク集≪デザインリンクデータベース≫ http://www. designlinkdatabase. net/ WebデザインのテイストやHTML5やCSS3で作られたサイトのまとめがあります。 デザインもさながらHTML5やCSSで作られたサイトを一挙に見れるので、探す手間を省けます。 3. 【S5-Style】Webデザインのリンク集・ポータルサイト http://bm. s5-style. com/ デザインがかなり凝ったサイトが集まっている印象ですね。 その点1つずつのサイトがコーディングをする上で参考になります。 4. イケてるWebデザインリンク集 http://design-iketeru. azu-mi. com/ イケサイ同様にカテゴリーを分けてサイト構成をしているサイトです。 5. WEBデザインの見本帳 http://www. web-mihon. com/ このサイトを見ると何故か学校を思い出します。 Webデザインの見本帳の見本帳が「学習帳」と最初サイトを見た際に思ったからです。 カテゴリーが多く分けられているので、作りたいサイトの業種等で探したい際には参考になります。 6. スマートフォンサイト デザイン集 AGT smartphone design gallery http://agtsmartphonedesign. com/ スマホサイトが集まったサイトになります。 1件ずつ自分で探すのも大変ですが、一遍に見れるので大変ありがたいですね。 7. 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス http://design. web-hon. com/ スマホサイトを参考にする上で、何年何月何日に更新をしたのかがわかりカテゴリーについても詳細に記入があります。 スマホサイト制作を使う際のノウハウについても記載があるので参考になります。 8. I/O 3000 | Webデザインギャラリー http://io3000. com/ 海外サイトがよく掲載されているサイトです。 日本のサイトも参考にしますが、やはり海外サイトの方が先端をいっているので参考にできるものは取り入れていきましょう。 9. Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト http://responsive-jp. com/ 最近ではレスポンシブ案件が制作会社様は多いのではないでしょうか？ レスポンシブサイトを作る上で参考にどうぞ！ 10. 縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU. ORG http://muuuuu. org/ クオリティが高い縦に長いサイトを厳選して集めているサイトです。 縦長の為、プロモーションサイトを作る上で参考になります。 11. ランディングページ集めました。 http://lp-web. com/seosem/ タイトル名どおりランディングページを集めたサイトとなります。 ランディングページはコーディングより、構成・デザインの方が難しいですので、ランディングページの構成に困った際に参考になります。 12. straightline™ http://bm. straightline. jp/ ワイヤーフレームごとに参考サイトを見ることが出来ます。 ワイヤーフレームごとに見れるサイトはあまりなく、たくさんのサイトが掲載されているのでお勧めです。 今回はサイトデザイン集のまとめをお送りいたしました。 ワイヤーフレームやデザイン、コーディングをする上では参考になりますので、よろしければ是非参考に活用ください。 コーディングを行なっていくにも色々なWebサイトをみてどのようにコーディングをしているのか構造をチェックすると勉強になります。私もコーディングを始めて行なったときは色々なサイトを拝見しどうなっているのかチェックをしていました。 最近の流行の傾向などを追う上で今でも色々なサイトを拝見しています。 オススメのサイト集があれば是非教えてください。 FASTCODINGをよろしくお願い致します。 --- - Published: 2014-06-02 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/coding/ - カテゴリー: Web業界の動向・情報 HTMLコーディングについてWeb業界で働いている方であれば、概ねの人は分かると思いますが、生活していく上では中々馴染みのないものですね。 私は最初の頃全く意味が分からず目が点になっていました。 ソースコードを見てもよくわからないですからね。 HTMLコーディングはサイトを作る上で重要な要素です。 コーディングができれば、あーなっているのねってわかりますからね。 そうなる為にまず私が行なったことについて少しご紹介します。 １．タグの意味や使い方を理解する サイトを構成する上でタグがいくつもあります。 タグをしっかりと理解しなければ適切に組むことができません。 など、それぞれに対して使い方があります。 意味を理解し使うことができれば、表面側についてはしっかりコーディングができます。 CSSでよくつまづくことが多いですね。 サイトの構成を理解し、CSSタグの理解を行なうことができれば作れるんですが難しいですよね。 私もわかなくて色々模索しながらCSSの修正を行いサイト構築をしていました。 タグの意味や使い方はまた別の会で紹介をいたします。 ２．サイトの構造を理解する 私は主にブロック要素ごとに分けて考えております。 基本的なところでは、「ヘッダー」「メイン」「フッター」 「メイン」の中でいくつにわけるのか？ 後は「サイド」など、構成が分かれていきます。 全体の構成と1つずつの構成を考えて行うと大体のイメージがわかりますね。 ３．コメントアウトを利用する 最初はこのコメントアウトがダサいと思っていて全く使わずにコーディングをしていました。 自分自身がそのコーディングをしているときはじぶんがわかっているからいいが、違う人が実際にコーディングする際は大変だなと思いますね。 コメントアウトの大事さはすぐに痛感しましたが、しっかりとどのブロックなのかどのページで使うのか？明記することで後で発生する運用が非常にわかりやすいので是非使いましょう。 ４．ソースコードの書き方及びファイル保存名についてルールを設ける これも大事ですね。 適当にファイル保存名やid、classの書き方をしてしまうとコーディングにかける時間が1. 5倍くらい多く感じます。 後であのidなんだったけ？ってなりますからね。 ファイルの保存についても ・nav_link01 ・btn_icon01 など分かりやすい名前でつけるといいと思います。 しばらくは文章を書くことになれるため、詳細ではなく全体の概要みたいにふれることもあります。 詳細が聞きたい方はお問い合わせまたは詳細のBLOGを書くまでお待ちください。 FASTCODING（ファストコーディング）をよろしくお願いします。 --- - Published: 2014-05-29 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/project/ - カテゴリー: Web業界の動向・情報 FASTCODINGのコーディング請負体制についてご紹介いたします。 現在の請負の流れのフローといたしまして、下記の通りとなります。 1. クライアント様からデザインデータ、コーディング指示書の送付 2. クライアント様とデザインデータとコーディング指示書の確認 3. 問題がないようでしたら、発注書の送付 4. 発注書にご記入いただき返信 5. 発注書を確認後、コーディング作業開始 6. 頂いたデザインデータ、コーディング指示書を基に英語版コーディング指示書の作成 7. 英語版コーディング指示書を基にコーディング作業スタート 8. コーディング完了後、品質チェック 9. 品質チェック完了後、クライアント様にテストサイトURLのご連絡 10. 問題ないようでしたら、クライアント様にコーディングデータ送付 コーディングを外注する際に、コーディング指示書の作成が「めんどくさい」「わずわらしい」というお話をよく聞きます。 FASTCODINGでは必要最低限の情報をお教えいただき、わからない点は確認をさせていただくスタイルをとっております。 そうすることで、コーディングを外注するご担当者様にとって作業時間の削減に繋がります。 FASTCODINGのコーディングはベトナムで、現在3名体制で行なっております。 皆様のお蔭で、段々リソースが足りなくなって参りましたので（ありがとうございます！） 人員強化を行い、皆様のご期待に応えるべくサービスを強化してきます。 今後もクライアント様に「満足」をしていただくためにコーディング請負体制に関しても追求していきます。 --- - Published: 2014-05-27 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/offshore/ - カテゴリー: Web業界の動向・情報 FASTCODINGは、ベトナム人のコーダーを採用してオフショアでコーディングサービスを提供しております。 FASTCODINGサービスを展開する前に、運営元である株式会社プレートにてベトナム人のコーダーと接点があったため、 サービス展開を開始することを念頭に置き、接していきました。 ポイントしては2点あります。 1. コーディングの品質 日本ではなく海外でコーディングを行うことを考えると、「品質」の課題が良く出てくるキーワードです。 「品質」の壁をクリアすることができるならば、日本人じゃなく、ベトナム人やオーストラリア人が行っても変わらないという点を私達は考えました。 そこで私達はコーディングの品質基準マニュアルを作成し、コーディングの品質をチェックする体制を整えました。 間違いがあれば、すぐに適切なものになおせるよう、技術提供を行っています。 そうして高品質なコーディングを行えるコーダーとして、ベトナム人のコーダーはどんどん成長していってくれます！ コーディングの品質を上げることは、コーディングサービスを提供していく上で当たり前ですので、品質については追求をしていきます！ 2. コミュニケーション 外国人の方のほとんどが日本語が話せないので、英語でコミュニケーションが取っています。 コミュニケーションのポイントは3点 ・普段からリソース状況や稼働状況を確認。 ・指示書を英語で作成をしている為、その通りに作業が出来るかどうか。 ・チェックバックに対する英語の理解がしっかりと理解し作業が出来るか。 最低限この3つのコミュニケーションが取ることができるのであれば、 問題なく作業の進行は可能です。 ※因みに定期的にベトナムに行って、飲みにケーションもしています 笑 あっちのバーはおしゃれで安いところが多く、おすすめですよ！ コーディングの品質とコミュニケーションをポイントして置きましたが、 「約束を守る方」という点もオフショアで行うには必要です。 弊社のオフショアで行っているコーダー達は1年以上の付き合いがあるため、「指示者」と「技術者」の関係を超えた信頼関係を築いてきました。 そのため、お互い責任をもって仕事を行える環境です。 今回のポイントで上げた、 「コーディングの品質」「コミュニケーション」「約束を守る」に関しては 基準をクリアをしています！ 最終的なチェックは日本で実施するため、安心してコーディングサービスをご利用くださいませ！ --- - Published: 2014-05-20 - Modified: 2020-01-05 - URL: https://fastcoding.jp/blog/all/info/greeting/ - カテゴリー: Web業界の動向・情報 皆さんこんにちは！FASTCODINGのディレクターの河田です。 今回FASTCODINGでBLOGを始めましたので、まずはご挨拶をさせていただきます！ FASTCODINGは４月から始めましたコーディング専門サービスです。 このBLOGを読んで下さっている皆様も、おそらく一度はご経験があるかと思いますが、「せっかくたくさんの案件があるのにリソースが足りなくて納期に間に合いそうもない！ピンチ！」といった状況に最適なサービスとなっております。 FASTCODINGは皆様からデザインデータとコーディング指示書を頂ければ、コーディングを行い、ご希望の納品日までに皆様に納品させて頂くサービスです！ コーディング作業はオフショアのベトナムで行っておりますので、皆様から頂いたコーディング指示書の内容を、私河田が英語に翻訳し、現地のコーダー用の指示書を作成致します。 ベトナムのコーダーは河田翻訳版コーディング指示書を基にコーディングを実施し、コーディング完了後、日本へコーディングデータを送ってくれるといった流れです。 オフショアと言うと「品質は大丈夫なの？」というお声が聞こえてまいりますが、全く問題ありません！！！日本にて最終的にコーディングデータの確認、ブラウザチェックを行い、チェックを通ったものをクライアント様へご提供をさせていただきます。実際僕の小さいデスクの上にはチェック用のPCが４台も並んでいます！！！笑 というわけで、皆様へは自信を持ってコーディングデータをお渡しさせていただきますので、ご安心ください！ 因みに弊社のベトナムのコーダーは、1年前より仕事やコミュニケーションのやり取りを通して、本サービスを計画してきました。 ベトナムのコーダー（通所ター君と申します）も、日本基準の品質を保つ為に、私たちとコーディング業務マニュアル及びコーディング指示書作成を実施し正確にコーディングができるよう準備をし、コーディング作業に入っております。 クライアントの皆様がご安心してご依頼いただけるようコーディングサービスの「品質」については日々研究をし、ご安心いただけるよう行なってまいります！ さてさて、ご挨拶ということで今後のブログ掲載内容についてもご紹介いたします。 FASTCODINGはコーディング専門ということでコーディングに関わる内容・サービス・コーダー勉強記を記載いたします。 実際にコーダーが成長できるのか？という点も弊社サービスを躍進する為には必要なので記載をしていこうと思います！ コーダーになるためにはHTML・CSS・JavaScript・jQueryなどを理解し記述できるようにならければなりません。 全く知識のないコーダーがどのように成長をしていくのか？をBLOGを続けていく上でご紹介いたします。 また、次回をお楽しみに下さい！（週2回配信をしていく予定です。） 今後もFASTCODINGは当たり前のことをシンプルな価格でコーディングサービスを提供してまいりますので、どうぞよろしくお願い致します！ --- ---