About

長く運用できるWebサイト

Web制作を中心に、コーディング・WordPress構築にも対応いたします。
保守性の高い設計と丁寧なコーディングを心がけ、 長く運用できるWebサイト制作を大切にしています。

S-Frameで安定した設計を実現

プロジェクト開始時に毎回ゼロから設計を考える必要がないように、スターターフレーム(S-Frame)を開発しました。
これにより、安定して保守性の高いコードを実装できるようになり、開発効率も大幅に向上しています。

S-Frameの詳細はこちら

保守しやすいHTML/CSS/JavaScript設計

クラス名はBEM記法をベースに命名。後からコードを見ても構造が理解しやすく、修正・追加もスムーズに行えます。
CSSはSCSSで記述し、ファイル分割・変数・ミックスインを活用してコードの重複を削減しています。
JavaScriptも機能ごとにモジュール化し、保守しやすい構造を意識しています。

S-Frame

S-Frameとは？

Web制作の土台となるHTML / SCSS / JavaScriptの構造をあらかじめ設計した自作のスターターフレームです。
ポートフォリオ制作や実案件でそのまま使用でき、 保守性の高いコーディングを安定して実装できるよう設計しています。

開発の経緯

学習過程で課題ごとにHTML/CSS/JavaScriptの構造をゼロから設計していましたが、 制作のたびに設計が変わり、コード品質や保守性にばらつきが出ることに課題を感じました。
そこで、設計思想を整理し、 安定した構造で制作できるS-Frameを開発しました。

主な設計方針

  • BEMベースのHTMLクラス設計
  • SCSSのモジュール化（変数 / mixin / 分割管理）
  • 共通UIコンポーネント（button / card / modal）
  • JavaScriptの機能単位モジュール化
  • 背景・レイアウト・コンテンツの責務分離

S-Frameのファイル構成

予め用意した設計に沿って、案件ごとのスタイルを上書きしていけば迷いなく保守性の高いコーディングができるようにしました。
コードをコンポーネント単位に切り分けて管理することで、差し替え、上書きで簡便に対応できるようになっています。
例として、以下にSCSSのファイル構成を掲載します。 

                scss/
                ├─ foundation/
                │  ├─ _reset.scss
                │  ├─ _base.scss
                │  ├─ _variables.scss
                │  ├─ _mixin.scss
                │  └─ _breakpoints.scss
                │
                ├─ common/
                │  ├─ _header.scss
                │  ├─ _footer.scss
                │  ├─ _drawer.scss
                │  ├─ _sidebar.scss
                │  ├─ _parts.scss
                │  └─ _fv.scss
                │
                ├─ common.scss
                └─ page.scss
S-FrameのGitHubリポジトリを見る S-FrameのコードはGitHubに公開されています。よろしければぜひご覧ください。

Works

これまで制作したWebサイトです。
設計の統一によりコードの保守性を高め、 デザインの差し替えや機能追加を行いやすい構造にしています。

  • 模擬キャンペーンサイト

    尾道観光をテーマにしたキャンペーンサイトを模擬制作しました。 スマートフォン・タブレット・PCでレイアウトが崩れないよう レスポンシブ対応を行っています。

    担当 コーディング
    使用技術 HTML / CSS / JavaScript
    工夫した点 JavaScriptで自動再生・手動操作が可能なスライドショーを実装しました。 また、SP・タブレット・PCの各画面幅で自然なレイアウトになるよう レスポンシブ設計を行っています。
    サイトを見る GitHub

  • 模擬クリニックサイト

    WordPressを使用して、模擬のクリニックサイトを構築しました。 カスタム投稿タイプを活用して診療内容やお知らせを管理しやすく設計しています。 後からコンテンツを追加してもレイアウトが崩れないよう、レスポンシブ対応を行っています。

    担当 コーディング
    使用技術 HTML / CSS / JavaScript / WordPress
    工夫した点 WordPressの投稿ループ（The Loop）を利用し、記事を自動表示する仕組みを実装しました。また、管理画面から投稿するだけで該当箇所に自動表示されるため、クライアントがHTMLを触らずに更新できるように設計しています。
    サイトを見る GitHub

  • 運営中のサイトです

    趣味サイト紹介(韓ドラのソムリエ) 準備中

    趣味サイト「韓ドラのソムリエ」をWordPressで構築し、運営しています。
    韓国ドラマのレビューやおすすめ作品の紹介を行っています。
    検索機能を充実させ、ユーザーが作品を探しやすい工夫をしています。

    担当 デザイン / コーディング
    使用技術 HTML / CSS / JavaScript / WordPress
    工夫した点 設計からデザインまで一貫してプロデュースしました。韓ドラのブログ仲間が管理サイトから簡単に更新できるよう、WordPressのカスタム投稿タイプやACFを活用して管理画面をカスタマイズしています。
    サイトを見る