- TOP
- ブログ一覧
BLOGブラキオブログ
WEB制作Jamstackエンジニアリング【デザイナー必見】Jamstackで実現！デザインカンプを”そのまま”Webサイトにする高速開発術
Webデザイナーが、細部にまでこだわり抜いて作った「完璧なデザインカンプ」。ピクセル単位で調整されたレイアウト、美しいタイポグラフィ、繊細なアニメーション。しかし、そのカンプが実際のWebサイトになった時、「なぜかカンプと違う」「デザインの意図が伝わっていない」と感じた経験はありませんか？多くの場合、デザインと開発の間には深い「壁」が存在します。実装の制約、開発者の解釈の違い、あるいは従来の開発手法の限界により、デザイナーが意図した品質や体験がWebサイトに完全に反映されないことが少なくありません。結果として、デザイナーは妥協を強いられ、ユーザーも本来得られるはずの最高の体験から遠ざかってしまうことがあります。この長年の課題に対し、は新たな可能性をもたらします。Jamstackは、単なる技術的なメリットだけでなく、この「デザインカンプとWebサイトの間の壁」を壊し、デザイナーの意図を忠実に、かつ効率的にWebサイトに落とし込むための強力なアプローチを提供します。本記事では、デザインカンプの品質を損なうことなく、高品質かつ効率的にWebサイトに落とし込むための、Jamstackとモダン開発技術の連携術を解説します。Jamstackの特性そのものが、デザインの忠実な実装に大きく貢献します。デザインカンプをWebサイトに忠実に再現するためには、ツールとプロセスを通じたデザイナーと開発者の密な連携が鍵となります。デザイナーがWebサイト制作で直面しがちな具体的な課題に対し、Jamstackがどのように解決策を提供するのかを見ていきましょう。Jamstackは、単なる技術的なメリットを超え、デザイナーと開発者が真の意味で連携し、デザインカンプの意図を忠実に、そして効率的にWebサイトに落とし込むための強力なフレームワークです。デザインシステムの構築、コンポーネント指向開発、モダンなツール連携、そして高速なパフォーマンスが融合することで、デザイナーはデザインの可能性を最大限に引き出し、最終的にユーザーに最高の体験を提供することに繋がります。ブラキオでは、デザインカンプの段階からJamstackの特性を最大限に活かした設計を提案し、デザイナーの意図を尊重した高品質な実装を追求しています。デザインと開発の連携をスムーズにするためのコンポーネント設計やワークフローの構築支援を通じて、貴社のWebサイトの品質向上に貢献します。デザイン品質にこだわり、それをウェブサイトで完全に表現したいとお考えなら、ぜひ一度ブラキオにご相談ください。貴社の最高のデザインを、Webサイト上で最高の体験として実現するお手伝いをさせていただきます。
2025.11.03
JamstackmicroCMSTypeScriptmicroCMS活用術：コンテンツ運用を最適化するデータ設計（スキーマ設計）入門
ヘッドレスCMSは、その高い柔軟性とAPIによる自由なデータ利用で、現代のウェブサイト構築において欠かせないツールとなっています。しかし、「自由に使える」がゆえに、コンテンツの設計段階で「適当に作り始めてしまうと、後々大きな問題に発展する」という落とし穴が存在します。このような問題は、ヘッドレスCMS導入前の「」が不十分であるために起こりがちです。データ設計とは、Webサイトに存在するあらゆるコンテンツの「型」を決める作業であり、Webサイトの骨格となる極めて重要な工程です。microCMSでは、コンテンツの種類を「」、そのコンテンツが持つ項目を「」として定義します。この設計が適切に行われているかどうかで、コンテンツ運用効率、将来的な拡張性、そして開発効率が大きく左右されるのです。本記事では、microCMSを最大限に活用し、長期的なコンテンツ運用を効率化するためのデータ設計の基本と実践ノウハウを、ステップバイステップで解説します。microCMSの特性を理解し、長期運用に耐えうるデータ設計を行うための基本的な考え方を身につけましょう。それでは、microCMSの管理画面をイメージしながら、具体的な設計手順を見ていきましょう。スキーマ設計の際に陥りやすい失敗例と、その解決策を知っておくことで、効率的な設計に繋がります。microCMSを導入する際のデータ設計（スキーマ設計）は、まさに「未来のコンテンツ運用への投資」です。適切なスキーマ設計を行うことで、コンテンツの品質が向上し、日々の運用が効率化され、将来的な機能拡張にも柔軟に対応できる強固な基盤を築くことができます。これは、microCMSの機能を最大限に引き出すための鍵となります。ブラキオでは、microCMSの導入支援から、貴社のコンテンツ特性に合わせた最適なデータ設計、フロントエンドとの連携構築まで、トータルでサポートいたします。「コンテンツ運用で悩む前に、ブラキオにご相談ください。」microCMSを活用したサイト制作・リニューアルをご検討でしたら、ぜひ一度お問い合わせください。貴社のビジネス成長に貢献する最適なコンテンツ運用体制を共に作り上げましょう。
2025.10.27
JamstackWEB制作エンジニアリングコンテンツ運用を加速する！ヘッドレスCMSと開発フローの最強連携術
企業のWebサイトは、常に新鮮で質の高い情報を提供し続けることで、顧客とのエンゲージメントを高め、ビジネス成長を促す重要な役割を担っています。しかし、多くのWeb担当者様やマーケティングご担当者様は、以下のような悩みを抱えていませんか？従来のウェブサイト構築（特に動的CMS）では、コンテンツの更新・修正が技術的な知識を必要とすることが多く、結果としてに大きな課題が生じがちでした。この課題を根本から解決するのが、コンテンツ管理とウェブサイトの表示を完全に分離するです。しかし、ただヘッドレスCMSを導入するだけでは十分ではありません。その真価を発揮させるためには、**「開発フローとの効果的な連携」**が不可欠となります。本記事では、この連携を最適化し、コンテンツのスピードと品質を両立させるための具体的な方法論を解説します。ヘッドレスCMSの導入は、コンテンツ運用に以下のような変革をもたらします。コンテンツ運用と開発プロセスをスムーズに連携させるための実践的なアプローチは、以下の通りです。ブラキオでは、ITリテラシーに不安があるクライアント様でも、ヘッドレスCMS導入後も安心してコンテンツ運用ができるよう、手厚いサポートを提供しています。ヘッドレスCMSの導入は、コンテンツ運用における「自立と連携」を両立させ、Webサイトをビジネス成長の強力なツールに変革します。開発フローとの最適化された連携、そしてブラキオのような専門パートナーによる手厚いサポートがあれば、コンテンツの鮮度と品質を保ちながら、ビジネスの変化に迅速に対応できるサイト運営が可能です。ブラキオは、をはじめとするヘッドレスCMS選定から、効率的な開発フローの構築、そして運用開始後の手厚いサポートまで、トータルで貴社のコンテンツ運用を支援いたします。「現在のコンテンツ運用に課題を感じている」「もっと効率的にサイトを運営したいが、何から手をつけて良いか分からない」とお考えでしたら、ぜひ一度ブラキオにご相談ください。貴社のコンテンツ運用課題をヒアリングし、最適なソリューションをご提案させていただきます。
2025.10.20
エンジニアリングJamstackWEB制作【失敗しない】Jamstack開発会社の選び方：見るべきはスキルセットとビジネス理解度
企業のデジタル戦略において、Webサイトはますますその重要性を増しています。特に、近年注目を集めるは、その高速性、安全性、高いスケーラビリティから、次世代のWebサイト構築手法として多くの企業から関心を寄せられています。しかし、従来のWordPressなどのCMSとは一線を画すJamstackは、といった多岐にわたる技術要素の組み合わせで成り立っています。「どの会社に依頼すれば、自社のビジネスに最適なJamstackサイトを構築できるのだろうか？」「技術的な専門知識がなくても、良いパートナーを見極めるにはどうすればいい？」――多くのWeb担当者様や経営者様は、このような疑問をお持ちかもしれません。Jamstack開発プロジェクトの成功は、まさに適切なパートナー選びにかかっています。本記事では、Jamstack開発を検討する企業がに役立つ、具体的に「見るべきスキルセット」と「判断基準」を詳しく解説します。Jamstack開発には、特定の技術分野における深い知識と経験が不可欠です。優れた技術力を持つだけでは、プロジェクトは成功しません。貴社のビジネスを深く理解し、真のパートナーとして伴走できるかが重要です。上記の要素を踏まえ、実際に開発会社を選定する際に確認すべき具体的な項目をまとめました。Jamstackは、現代のビジネスに求められる高速性、安全性、そして拡張性を兼ね備えた強力なツールです。しかし、そのポテンシャルを最大限に引き出すためには、との両方を兼ね備えたとの協業が不可欠です。パートナー選びは、単なるWebサイト制作の依頼ではなく、貴社のデジタル戦略を加速させるための重要な投資です。上記のチェックポイントを参考に、ぜひ最適な開発パートナーを見つけてください。ブラキオでは、Next.jsを始めとするモダンなフレームワークの深い知識と、microCMSを用いた最適なデータ設計、そしてお客様のビジネスゴール達成を最優先に考えたJamstack開発を行っています。Jamstack開発パートナーをお探しなら、ぜひ一度ご相談ください。御社の課題をヒアリングし、最適なご提案をさせていただきます。
2025.10.16
JamstackWEB制作Jamstackが解決する企業のWebサイト課題トップ3：速い・安全・落ちないサイトでビジネスを加速させる
Webサイトは企業のであり、ビジネス成長のエンジンであるはずです。しかし、多くの企業のWeb担当者様は、次のような潜在的な悩みを抱えていませんか？これらの悩みは、従来のウェブサイト構築手法、特になどの動的CMSの構造的な限界に起因しています。データベースと常に接続し、アクセスごとにサーバー側でページを生成するその仕組みは、利便性をもたらした反面、とに大きな弱点を抱えることになりました。その課題を根本から解決するのが、新しいウェブ構築の考え方であるです。本記事では、このJamstackが、企業が抱える最も深刻なWebサイトの課題トップ3をいかに解決するかを解説します。サイトの表示速度は、もはや**SEOやユーザー体験（UX）**の問題だけではありません。に直結する深刻な課題です。Googleの調査によると、モバイルページの表示速度がすると、ユーザーのすると言われています。これは、せっかく広告費やコンテンツ制作費をかけて集客したユーザーを、システムの都合で逃がしているに等しい状態です。Jamstackは、ウェブサイトのHTMLファイルを、しておきます（静的サイト生成）。この静的なファイルを、世界中に分散配置された**CDN（コンテンツデリバリーネットワーク）**から直接配信するため、データベースへの問い合わせやサーバーでの複雑な処理が一切発生しません。これにより、お客様のサイトはを手に入れ、GoogleがSEOで重要視する（LCP：最大コンテンツの描画速度など）のスコアも自然と改善し、に貢献します。従来の動的CMSは、データベースとの通信や、機能拡張のためのに強く依存しています。この構造は、ハッカーにとって絶好の標的となり、やを経由した不正アクセスやサイト改ざんのリスクが常に伴います。もし、企業サイトが改ざんされたり、情報漏洩が発生したりすれば、その修復コストだけでなく、顧客からのという計り知れないブランドリスクを負うことになります。Jamstackアーキテクチャでは、公開されているウェブサイトの本体からします。テレビCMの放映後や、大規模なキャンペーンを実施した際、「サイトが重くなった」「アクセスできなくなった」という経験はありませんか？従来のサーバー構成では、突発的な大量アクセスに対応するためには、事前にを行う必要があり、コスト効率が非常に悪いものでした。サーバーダウンは、キャンペーンによることを意味します。Jamstackサイトは、CDN（コンテンツ配信ネットワーク）を通じて世界中のエッジサーバーから配信されます。CDNは元々、大量のコンテンツを高速かつ安定して配信するために設計されているため、し、ダウンしにくい構造を持っています。Jamstackは、Webサイトを「コストセンター」ではなく、**「ビジネスを加速させる資産」**に変えるための最適なアーキテクチャです。ブラキオは、フロントエンドエンジニアとしての豊富な経験を活かし、お客様のビジネス課題解決を重視したJamstack開発を提供しています。「御社のWebサイトは上記の課題を抱えていませんか？」ぜひ一度、をご利用ください。御社のWebサイトを、次世代のプラットフォームへと進化させます。
2025.10.10
JamstackWEB制作Next.jsmicroCMSの投稿からOGPを取得して画像とリンクカードを作る
Webサイトやブログ記事で外部サイトへのリンクを貼る際、単なるURLだけでは情報が伝わりにくく、ユーザーのクリックを促しにくいことがあります。そこで活用したいのが です。OGPは、Webページの内容をSNSなどで魅力的に表示させるためのメタデータで、これを利用することで、リンクをとして表示できるようになります。この記事では、OGPデータを取得して記事内のリンクを自動的にリッチなリンクカードに変換するJavaScriptコードとその仕組み、そしてその見た目を整えるCSSについて解説します。この記事ではNext.jsのApp routerを使って下記のようなリンクカードを作る方法をご紹介します！OGP（Open Graph Protocol）を使ってブログ記事のリンクをカード形式で表示することには、以下のような効能があります。リンクカードはタイトル・説明・画像がまとまって表示されるため、テキストリンクよりも目立ち、ユーザーの興味を引きやすくなります。画像や説明文があることで、リンク先の内容が直感的に伝わり、クリックされやすくなります。OGP情報が正しく設定されていれば、TwitterやFacebookなどSNSでシェアされた際にも美しいカード形式で表示され、拡散効果が高まります。リンクカードはデザイン的にも整って見えるため、サイト全体の信頼感やプロフェッショナル感がアップします。ブラキオではこのようにヘッドレスCMSから取得した記事をカスタマイズすることも可能今回ご紹介するリンクカードの自動生成は、主に以下の2つのJavaScriptコードと、その見た目を定義するCSSによって実現されます。まず、外部サイトのOGP情報を取得するための関数から見ていきましょう。この関数は、指定されたURLにアクセスし、そのページのHTMLからOGP関連のメタデータを抽出します。次に、実際の記事本文を解析し、OGPデータを利用してリンクカードを生成するReactフックを見ていきましょう。最後に、生成されたリンクカードを美しく表示するためのCSSを見ていきましょう。このCSSは、リンクカード全体のレイアウト、画像（サムネイル）、テキストの表示方法などを定義しています。この記事で紹介したと、そして関連するCSSを組み合わせることで、することができます。これにより、ブログ記事やWebサイトの視認性が向上し、ユーザーが外部サイトのコンテンツを理解しやすくなり、クリック率の向上にも繋がるでしょう。ご自身のサイトにこの機能を組み込んで、より魅力的なコンテンツ表示を実現してみてはいかがでしょうか。
2025.06.14
JamstackなぜJamstackはセキュアと言われるのか？WordPressとの比較と対策
近年注目を集めるウェブサイト構築アーキテクチャ「Jamstack」。その特徴の一つとして、高いセキュリティ性が挙げられます。本記事では、Jamstackがセキュリティに優れる理由を解説し、広く利用されているWordPressと比較しながら、具体的な対策についても掘り下げていきます。Jamstackが従来のアーキテクチャと比較してセキュリティが高いと言われる主な要因は、以下の点に集約されます。WordPressは非常に普及しているCMSであるため、常に攻撃者の標的となりやすい状況にあります。プラグインやテーマの脆弱性、本体のアップデート遅延、サーバー設定の不備などがセキュリティインシデントの原因となる可能性があります。SQLインジェクションやPHPの脆弱性を利用した攻撃も懸念されます。一方、Jamstackは静的ファイルが中心であるため、これらの攻撃経路は基本的に存在しません。動的な処理はAPIに依存しますが、適切に選定・管理されたAPIサービスを利用することで、ウェブサーバー自体の脆弱性リスクを低減できます。ただし、Jamstackも完全に安全ではありません。利用するAPIサービスのセキュリティ、フロントエンドのJavaScriptコードの脆弱性、ビルドプロセスのセキュリティなどが新たなリスクとなる可能性があります。重要なのは、それぞれのアーキテクチャの特性を理解し、適切なセキュリティ対策を講じることです。Jamstackアーキテクチャは、その特性から従来の動的なウェブサイトと比較してセキュリティが高いと考えられていますが、完全に改竄のリスクがないわけではありません。ここでは、Jamstackサイトが改竄される主な経路と、それに対する具体的な対策を掘り下げて解説します。Jamstackサイトでは、フォームの送信、認証、Eコマース機能、検索など、動的な処理を外部のAPIサービスに依存するケースが多くあります。これらのAPIサービスにセキュリティ上の脆弱性があった場合、そこを足がかりに不正アクセスが行われ、データが改竄されたり、悪意のあるコンテンツが挿入されたりする可能性があります。Jamstackサイトのインタラクティブな要素は、主にJavaScriptによって実現されます。もしJavaScriptコードにセキュリティ上の欠陥（脆弱性）があった場合、クロスサイトスクリプティング（XSS）などの攻撃を受ける可能性があります。XSS攻撃を受けると、悪意のあるスクリプトがユーザーのブラウザ上で実行され、Cookieやセッション情報が盗まれたり、サイトの表示が改竄されたりする可能性があります。Jamstackサイトは、通常、静的サイトジェネレーター（SSG）などを用いて、ソースコードから静的なファイルを生成するビルドプロセスを経ます。もしこのビルドプロセスが侵害された場合、生成された静的ファイルに悪意のあるコードが埋め込まれる可能性があります。Jamstackサイトの静的ファイルは、通常CDN（コンテンツ配信ネットワーク）を通じて配信されます。もしCDNのアカウントが不正にアクセスされた場合、配信されている静的ファイルが改竄され、サイトの見た目が変わったり、悪意のあるコンテンツが表示されたりする可能性があります。開発者のPCや開発環境がマルウェアに感染した場合、意図しないコードがリポジトリにコミットされ、それがデプロイされてしまう可能性があります。これらの対策を講じることで、Jamstackサイトのセキュリティレベルを大幅に向上させ、改竄のリスクを低減することができます。Jamstackの特性を理解した上で、多角的なセキュリティ対策を実践していくことが重要です。
2025.05.08
JamstackWEB制作エンジニアリングJamstack開発の下請けをお探しですか？ブラキオがあなたの強力なパートナーに
Web制作の世界は常に進化しており、新しい技術が次々と登場しています。その中でもJamstackは、より高速でセキュア、そしてスケーラブルなウェブサイトを実現するための革新的なアプローチとして注目を集めています。しかし、新技術の導入は不安や挑戦を伴うもの。そんな時、ブラキオがパートナーとして、皆さんのJamstackにおける挑戦を全力でサポートします。ブラキオは、フロントエンド開発における豊富な実績を持ち、Jamstack開発においても皆さんをテックリードとして支援できます。コーポレートサイトからwebサービスまで、あらゆるフロントエンド開発のお手伝いをします。また、コーディングだけのお仕事も大歓迎です。プロジェクトの成功は、良いコミュニケーションから始まります。ZoomでのオンラインMTGや、Slackなどのチャットツールを通じて、いつでも柔軟に対応させていただきます。まずはお問合せいただければ、お見積もりを含め、具体的なご提案をさせていただきます。Jamstackでのウェブサイト制作は、多くの可能性を秘めています。ブラキオと一緒に、新たな挑戦に踏み出しませんか？あなたのビジョンを現実のものとするために、全力でサポートさせていただきます。
2024.04.10
ReactNext.jsNext.jsにおけるページ内スクロールの実装ガイド
Next.jsを使用したウェブサイトで、ページ内スクロールを実現したいと思ったことはありませんか？例えば、ウェブサイトのナビゲーションバーに「SERVICE」や「ABOUT」のようなリンクがあり、ユーザーがそれらをクリックすると、ページ内の対応するセクションに自動的にスクロールするといった機能です。弊社の上部にあるメニューがこのページ内スクロールを実装しています。よろしければ試してみてくださいね。まずは、実際に試してみて、その振る舞いを体験してみましょう。このような機能を簡単に実装するためには、というライブラリを利用するのがおすすめです。まずは以下のコマンドでインストールしましょう。そして、以下のように呼び出して使用します。ここでのimport文では、という形でエイリアスを設定しています。これは、という名前がNext.jsの と名前が重複してしまい、混乱を避けるためです。そして、メニューリンクからスクロールさせたい要素への移動を設定するために、その要素にのようなIDを指定します。これにより、ページ内スクロールを簡単に実装することが可能となります。以上がNext.jsでのページ内スクロール実装の基本的な手順です。この方法を試して、ウェブサイトのナビゲーション体験をより良いものにしましょう。
2023.05.14
WEB制作JamstackなぜJamstackでWEB制作の仕事を受けようと思ったのか
私自身もともとWordPressでweb制作の仕事を受けていた。プラグイン依存、CSS設計問題、サーバー代などのコスト面 etc。賛否両論あると思うけど、個人的にはしんどかった。また、業務委託先でReactでサービス開発をずっとやっているのでJamstackでできたらと思っていた。なので、趣味でGatsbyやったりNetlifyCMSやったりして試していたりはしたが、趣味では良いけどクライアントに納品するものとしてと考えると難しいなという印象だった。特に基本が英語なので、どうしても敷居が高くなってしまう。あとはリテラシーが高くないと無理かなとも率直に思った感じ。Jamstackを実際の案件でやりたいけど二の足を踏んでいたという状態だった。そうこうしているうちにmicroCMSの存在を知って「あ、これなら案件でいける」と思い、実際の案件に投入することに決めた。なぜJamstackでWEB制作の仕事を受けようと思ったのかは「microCMS」が比重を多く占めるのだけれど、Jamstack案件をここ数ヶ月で立て続けに3サイト作ったので実際の業務でやったプラクティス的なことをまとめる。フロントエンドエンジニア御用達のprettier、eslint、TypeScriptが使えるの最高。ReactやVueでサービス開発をしたことある人なら問題なくJamstackいける。これはかなりの利点だと思っていて、ある程度フロントをかじった人ならweb制作で受注をして稼ぐことが容易になったと思う。firebase, Amplifyなどがあるけど迷うならNetlifyで良い。デプロイの設定が楽だし迷うこともない。また、お問合せが簡単に作れるのも魅力。ちなみに、firebaseでお問合せを作ろうと思うとCloud Functionsに書かなければいかず有料になってしまう。Amplifyもそんな感じかな？？やったことないからわからない。例えばDBに溜め込むとかしたいならfirebaseを選ぶけど、一般的な中小企業のコーポレートサイトならほぼほぼNetlifyで良い。またそういったコーポレートサイトであれば無料で済む。ただ、泣きどころはTokyoリージョンがNetlifyにないため若干遅い。これはゆくゆくは解決されるのではと思っているけど・・・。デプロイの可否をSlackに通知できたり、お問合せがあったらなど各種連携が取りやすいので運用フェーズに入った時に絶対に必要になるから必ず設定すべし2021/01/14 追記どうやら以前の価格改定により無料枠ではSlackやメールなどの通知ができなくなっている。ちなみに、無料枠である私のアカウントはできる。もしかしたら改訂前にアカウント持っていた場合は通知ができるのかもしれない。アカウント持っている方はホスティングしたサイトを選択 > Site settings > Build & Deploy > ページ下部のDeploy notifications > Add notification で確認した方が良い。notificationができるのであれば下記のように選べるようになっている。もし今後アカウントを取得してNetlifyで通知したい場合は「pro」にしなければならない。microCMSのまわし者みたいだけど、まじでmicroCMSが今のところ一番良い日本語だし、UIも日本人にわかりやすく受け入れられやすいどのクライアントにも言われたけど「記事作成したんだけどプレビューできないんですか？」そんなに難しいことをせずに実装できるので絶対に入れるべし`[https://your-service-name.netlify.app/draft/?id={CONTENT_ID}&draftKey={DRAFT_KEY}](https://your-service-name.netlify.app/draft/?id=%7BCONTENT_ID%7D&draftKey=%7BDRAFT_KEY%7D)` を叩くプレビュー用のページがあれば良いだけ。APIのエンドポイントごとの設定なので注意すべしこれやっておかないと「記事更新したのにサイトに反映されてないんですけど！」と連絡来てしまう。私はNextJSでしか開発をしていないが多少の知識があれば満点ないしかなりの高得点は簡単に出る基本的にはlighthouseで採点 > 注意されたとこを直すフローで良いが、service-workerに関してはプラグインを入れればすぐに解決できてオフラインでも閲覧できるようになる。あとは、やはり画像は重いことが多いので、画像サイズには注意する必要がある。画面いっぱいまで画像を広げたい時などは、簡単に済ますなら画質をある程度落としてしまうし、もしくはsrcset属性を使って最適化するように心がける。また、[TinyPNG](https://tinypng.com/)などを使って圧縮もするようにする。これはstg/prdで分けて開発をしにくい点にあると思う。プレビュー機能の実装である程度は補えるとしても、開発者としてはstgは欲しいなと思う。graphcmsではenvironment-endpointsとして `master` と `dev` でエンドポイントのだしわけが可能なよう。が、残念ながら思いっきり英語なので実務では難しい。(microCMSさんお願い！！！)## 個人的に今後やっていきたいこと今後は案件をもっと獲得できるようにするつもり。また、それに合わせて外注も増やさざるをえないかなと思っていて、外注しても一定の品質が保てるようにしたいので開発フローの整備等をしていきたい。
2023.04.20
WEB制作CSS【それでもCSSは破綻する】 CSSの設計手法と書き方を考える
それでもCSSは破綻する。書くこと自体はとても簡単なCSSですが、その一方で、CSSの設計が簡単に破綻してしまいます。破綻しないためにCSSの設計手法と書き方のノウハウをご紹介できればと思います。以前の記事とかぶるとこも結構あるのですが、全体的にまとまっているので特に初心者〜中級者の方に見てもらえたら嬉しいです。これは極端な言い方ですが、今まであったデザイナーでCSSできると言った人で本当にできる人あまりいないです。どちらかというとCSSは難しいと言った人の方ができる方が多いです。CSSが簡単だと思われてしまう要因の一つがCSSを書くこと自体は言語としてはかなり簡単な部類に入ります。このようなコードをツラツラ書いていけばHTMLに対してスタイルをつけられますよね。書き方としてはごくごくシンプルです。シンプルであるがゆえに管理するのが難しいのです。前置きはこれくらいにしてここから先はCSSがいかに難しいことについて触れていきたいと思います。何が難しいかと言うと一つだけです。そう「破綻」しやすいんです。では、「**CSSの破綻**」とはなんでしょう？例えば「新しくスタイルを書いたのに適用されない」とか「!importantが乱用されている」とかが挙げられます。破綻というとなかなか難しいですが、複数人で複数人で同じCSSファイルを編集していると起こりやすいです。具体的には・・・似たようなコードもしくは同じコードが重複してしまっている状態。セレクタ名が同じものが乱立している状態。上記を解消するために詳細度を深くしてなんとかスタイルを割り当てている状態だったり「!important」を乱用している状態。上記のようなことが起きているようなCSSのコードは完全に破綻しています。では**「破綻のしない」良いCSSのコード**ってどんなのなんでしょう。よく言われるのが・・・セレクタ名には.aとか.cなど自分だけがわかるものは基本NGです。あとは、クラスセレクタに日付が書いてあったり、「new」とか書いてあるのが見かけることがあります。もうこれは末期ですね。おそらく破綻してます。例えばタイトルならば.title、バナーを配置する場所なら.banner-areaなどクラス名を見ただけでなんとなくどんな使い方がされているかわかるものがいいです。サイト内のどこに配置しても大丈夫なように作られている方がいいでしょう詳細度と関連してくるのですが、詳細度を深くしすぎるとのちのちスタイルの上書きする際に困ります。例えばタイトルであれば、文字の大きさの違うパターンや色違いパターンなどが作りやすい方がいいです。ポイントは5つあります。一つずつご紹介します。まとめられるものがあるならばまとめた方がいいですね。ファイルサイズ節約にもなります。運用の時に付け足す時もそっとまとめてあげるといいですよね！！下記のコードは実際に僕が出くわしたコードです。見た時正直びっくりしました。以前担当していた方が書いたんでしょうけど、同じスタイルじゃん・・・。なんでこうなったかは理解に苦しむんですが、これもクラス一個で各ページ使い回せばいいだけですよね。idセレクタ、クラスセレクタ、タイプセレクタと異なるセレクタが混在していると、マークアップが変わった時に対応ができません。こちらはBEMという書き方をしていますが、後ほど詳しくご紹介します。下記の「Bad」のやり方はわかりやすいっちゃわかりやすいんですが、再利用性に欠けます。というのもh1にしか使えないので、たとえば、マークアップ的にh2の方が適切の場合はスタイルを適用できないですね。cssのテクニックとして「body」タグにクラスをつけてコンテンツのスタイルをページごとに変更したりします。でもこれって「body」タグにクラスに依存しすぎてしまっていて再利用しづらいし、拡張もしにくいですよね。たとえば、デフォルトのヘッダーとメニュー詳細ページでヘッダーのスタイルを変更したい場合、以下のような書き方をします。でもこれって、運用していくなかで新しくページを追加して（LPとかね）詳細ページと同じヘッダーでって場合どうしますか？パターンとしてはdetailと同じスタイルをLP用につくるか、LPのbodyにdetailを付与ですよね？後者の場合ってめちゃくちゃ気持ち悪いですよね。detailページでもないのにbodyにdetailって・・・このパターンでCSSを書くとページが増える度にセレクタを書き加えなければいけませんね。これをBEMでセレクタを書くとめっちゃわかりやすくなります！！ポイントはページ単位で切り分けないでプロパティごとに切り分けた方がいいかなと思います。これまでのことを気をつけても更新作業などをしていればほぼ100%破綻します次に紹介するのは**CSSの設計**です。自由に書けるCSSだからこそルールを設けてみんなで守りましょうというものです。実はCSS設計の手法ってたくさん存在しています。それぞれ特徴があったりしますが基本的な考え方としては**破綻のしにくいCSSのコード**を書きましょうというのは変わりません。自分のやりやすいものやそのWEBサイトにあったものを選ぶのがいいと思います。今回は「**FLOCSS**と**BEM**」をご紹介します。FLOCSSというのは、日本人が考えたCSSの設計手法です。実は、「」という本を書いた谷さんという方が考えたものです。BEMは、セレクタの書き方の考え方です。賛否両論ありますが、HTMLのタグを見ただけでどんなスタイルかわかりやすいというメリットがあります。デメリットとしてはセレクタが長くなりがちです。まずはFLOCSSの基本としてサイトのCSSディレクトリの中身を分けます。これで、どこにどんなスタイルを書くかわかりやすくなりますね。ちなみに、今回はSassを使っている想定にしています。これはなぜかと言うと`import`する際にCSSの場合と言うように書くのですが、このimport文だとサイトの読み込みに時間がかかってしまうんですね。そこでSassを使うと実際にページに読み込まれる時にはいimportし終わっていて一つにまとめられたCSSファイルが生成することができます。importの書き方はと言うようにできます。Sassを使う方がメリットもたくさんあるので興味のある方はぜひ使ってみてください。横道にずれてしまいましたが、ディレクトリの構成は以下のようになります。ここはbase.scssやreset.scssなどサイト全体の下地になる部分を書きます。ここはサイトの基本レイアウトを書く場所です。例えばheaderやfooterなどここではサイト全体で再利用性の高いスタイルを書きます。componentは再利用性の高いパーツを書く場所です。特徴としてはどんなサイトでも大概あるパーツを書くことが多いです。例えば、ボタンスタイル、タブスタイル、見出しスタイルなどprojectも再利用性の高いパーツを書く場所なんですが、componentととの違いは、このサイト特有のパーツの場合はここに書きます。例えば、グラフスタイル、ドロップゾーンなどここはいつでもどこでも使えるスタイルです。基本的には1セレクタに1プロパティになることが多いです。app.scss内に各ファイルをimportします。FLOCSSではなんの属性なのかHTMLのコードを見ただけですぐにわかるように接頭辞をつけることを義務付けしています。こちらはjQueryなどと併用する時によく使われます。例えばボタンを押すと出てくるUIなどは.is-showなどのクラスセレクタをつけたりします。.js-はjs(jQuery)と関わっているのか表す接頭辞です。これはJSで動くなど何かしら操作したときなどにセレクタで呼び出しますが、その際はスタイルで定義されたセレクタを使うのではなく必ず「.js-hoge」などで行うことを義務付けします。そうすることで文書構造、スタイル、スクリプトを完全に分離することができてHTMLを見るだけで何が行われているのか、残さなければいけないセレクタなのかわかりやすくなります。idセレクタとクラスセレクタが基本的にはよく使われるセレクタですが、idセレクタはあまり使わない方がいいです。実はidセレクタには問題点があります。というのも詳細度と関連してくるのですが、基本的にidセレクタは詳細度がかなり強いです。なので、スタイルを上書きしなければいけない場合にどうしてもそれ以上の詳細度にしなければいけません。さらに、1ページに一回しか使えないので、再利用性にかけます。先ほどのdrawerのコードであまり見かけないセレクタの書き方がありました。これが実はBEMの書き方です。そしてBEMのセレクタの書き方には3つの要素でできています。その頭文字をとってBEMと言います。これはdrawerなどのパーツなどの塊を表します。FLOCSSではこのBlockごとにCSSのファイルを書いていくのがいいでしょう。これはBlock内に存在する要素を表します。drawerで言えばボタンやコンテンツですね。これは状態を表します。例えば、背景の色が違うパターンなど注意！.is-や.js-とは使い方が違います。セレクタでBlockとElementのつなぐ方法はアンダースコアを二つつけます。Modifierの前にハイフンを二つつけます。先ほどもご紹介したようにBEMのデメリットはセレクタが長くなりすぎます。こういったケースが頻発するのでcomponentを小分けしていくといいです。そうすると小さい単位のcomponentごとに各componentを組み合わせて使いまわすことが可能になります。ここまでやっても**CSSは破綻**します。そうですねこれでも80%以上の確率で破綻します。複数人いる場合には特に！！そのサイトやサービスに置けるルールを記します。記載する内容は作る人や企業によってまちまちですが、基本的なものとしてはよく使われるcomponentに関してはコードをまとめておくといいです。下記のは僕が作ったフレームワークのものですが、なんとなくの雰囲気はつかめるかなと思います。[Document](http://takumi0901.github.io/flanky/)あくまで「しにくい」です。せっかく作ったガイドラインを無視したりする人がいれば「破綻」します。大体の企業では何かサービス作るにあたってあらかじめガイドラインが設けられていることが多いです。なので、そのサービスに途中から参加する場合などはガイドラインを読み込み、実際のCSSコードを追って理解を深めるのがいいと思います。
2023.04.19
JamstackWordPressWordPressとJamstackの違いについて
WordPressとJamstackは、ウェブサイトやウェブアプリケーションの構築に使用される異なる技術です。それぞれの主な違いは以下の通りです。それぞれの技術にはメリットとデメリットがあります。以下に、WordPressとJamstackの主なメリットとデメリットをまとめました。
2023.04.14
- TOP
- ブログ一覧