BLOG

「森林と人をつなぐ」高知県梼原町の林業会社のWebサイト

株式会社KiRecub(きりかぶ)は、高知県梼原町を拠点に、「森林と人をつなぐ」ことを使命として活動する林業の会社です。


担当業務

ディレクション全般(構成設計・進行管理・ワイヤーフレーム作成)

フロントエンドコーディング(HTML / SCSS / JavaScript / WordPress)

※デザインは社内の専属デザイナーが担当


https://kirecub.jp



🛠 担当領域:

デザイン(コンセプト設計〜UI設計まで一貫対応)

コーディング(HTML/CSS/JavaScript)

WordPressテーマ自作(フルスクラッチ)

レスポンシブ対応(PC/SP両対応)

アニメーション演出(AOS・Swiper.js活用)

SEO対策(All in One SEO導入・構造化データ記述)

💡 工夫した点:

**「挑戦が未来を変える」**という企業メッセージを軸に、動きと余白を活かしたエネルギッシュなデザインを設計

WordPressテーマを自作し、更新しやすく・運用しやすい構造を実現(メンバー紹介・募集要項などの投稿タイプを独自実装)

LINE Seed JPフォントやTypekit、FontAwesomeなどの外部リソースを適切に組み合わせ、視認性と印象の両立を意識

スマートフォン閲覧を意識したシンプルで直感的なナビゲーション設計

https://www.fudousan-tanporoan.co.jp/recruit/

HTML / CSS / JavaScript / デザイン整合性対応

社会福祉法人向けのポータルサイト「deck」の構築において、フロントエンド全体の設計・実装を担当。多言語対応フォントやレスポンシブ対応により、高い視認性とユーザビリティを実現。


【担当業務】

・サイト全体のHTML/CSS設計とマークアップ

・ハンバーガーメニュー・ナビゲーション制御のJavaScript実装

・会員登録ステップ・問い合わせフォームなどのUI/UX設計とコーディング

・OGP・Twitterカード対応によるSNS共有最適化

・画像最適化・ファイルキャッシュ管理・多書体対応(Adobe/Google Fonts)


【技術構成】

HTML5 / CSS / JavaScript / Font Awesome / Adobe Fonts / Google Fonts / OGP設定 / デバイス対応


【特徴】

・サービス内容やお知らせ、会員ログインなど情報整理されたトップ構成

・会員登録の流れを図解でステップ表示し、理解促進

・構造的に意味を持たせたセクション設計

・SEO・SNS共有対策を考慮したhead構成



Laravel × WordPress × フロントエンド開発

中古車販売事業者向けに、Laravelで車両管理・検索システムを構築。車種情報の登録・編集・絞り込み検索が可能なCMSと、WordPressと連携したフロントエンドを担当。

【担当業務】

・Laravelでの車両カタログ機能の設計・開発(検索/カテゴリ別表示/ブランド別フィルタ)

・WordPressを活用したニュース・お知らせ投稿機能の実装

・JavaScriptによる検索UI・カテゴリ連動制御

・スマートフォン・タブレット対応のレスポンシブコーディング

・CSS設計(共通UIコンポーネント/ブランド別テーマ)

【技術構成】

Laravel / PHP / WordPress / HTML / CSS / ACF / Swiper.js

【特徴】

・管理画面からカテゴリやブランドごとの商品を効率的に登録・出力

・検索バーでカテゴリ・ブランド・キーワードの複合検索に対応

・WordPressとの連携により、動的ページと静的情報の共存を実現



「こうち留学ポータルサイト」(https://kochi-ryugaku.kochinet.ed.jp/)は、高知県内の高校への進学や転入を希望する全国の中学生・高校生に向けた情報提供サイトです。地域ぐるみで生徒の成長を支える「こうち留学」の魅力を伝えるための公式ポータルとして構築されました。

本サイトでは、WordPressを用いたCMS開発を担当し、運用者側の情報発信がしやすい構成と、閲覧者がスムーズに目的の情報へたどり着ける導線設計を重視しました。

具体的には、各高校やサポート体制の情報を整理しやすいよう、カスタム投稿タイプとカスタムフィールドを活用。学校情報や支援制度、地域の特色などを動的に表示できるようにしています。

レスポンシブ対応はもちろん、自治体サイトとしての信頼性と読みやすさを保ちながら、親しみやすく柔らかな印象を与えるデザインの再現にも注力しました(※デザインは支給デザインをベースに実装)。

SEO対策やサイト速度改善にも配慮し、高知県の魅力と“第二の故郷”としての可能性をしっかり伝えられるサイトに仕上げています。


https://kochi-ryugaku.kochinet.ed.jp/


「よさこいファーム」公式サイト(https://yosakoi-farm.com/)は、高知県で生姜栽培を行う農業法人のブランドサイトです。地域の自然の魅力や、生姜づくりへのこだわりを伝えるための情報発信拠点として構築されました。

本サイトでは、WordPressを使用し、CMSとしての運用性を高めつつ、将来的な拡張やコンテンツ追加にも柔軟に対応できる構成を意識しました。

私はWordPressテーマのカスタマイズおよびコーディングを担当し、投稿ページ(お知らせ、資材使用状況、しょうが畑のほっとレター)ごとに適したテンプレートを設計することで、運用の効率化と視認性の向上を実現しました。

自然と調和するブランドイメージを損なわないよう、画像の最適化やフォント選定にも配慮しながら、モバイルユーザーにも快適な閲覧体験を提供しています。

デザインは社内のデザイナーが担当し、私は主にその再現と技術的実装を担当しました。


https://yosakoi-farm.com/



「一般社団法人文京区医師会」公式サイト(https://www.bunkyo-med.or.jp/)は、地域医療の連携と情報発信を目的とした医師会の公式ウェブサイトです。

本サイトはWordPressを用いて構築し、最新の医療情報や医師会の活動報告、イベント案内など多岐にわたるコンテンツを掲載しています。私は主にWordPressテーマのカスタマイズ、HTML/CSSコーディング、サイトのレスポンシブ対応を担当しました。

また、SEO対策の一環としてAll in One SEOプラグインを導入し、メタ情報の適切な設定やOGPタグの実装も行うことで、検索エンジンやSNSでの情報拡散を支援しています。

デザインは同社内のデザイナーが担当しており、私はそのデザインを忠実に再現しつつ、使いやすさとパフォーマンスを意識したコーディングに注力しました。

地域住民と医療従事者の架け橋となるサイトづくりを目指し、情報の整理・更新のしやすさにも配慮しています。


https://www.bunkyo-med.or.jp/


「高知県 CNポータル」(https://cn-portal.pref.kochi.lg.jp/)は、高知県の脱炭素に取り組む事業者・団体を紹介し、共に脱炭素社会の実現を目指すパートナーを募集するための情報発信サイトです。

本サイトはWordPressをベースに構築し、県内の脱炭素活動を広く周知するとともに、参加希望者が気軽に参画できる環境づくりをサポートしています。

私はWordPressのカスタマイズおよびコーディングを担当し、ユーザーが情報を見やすくアクセスしやすいレスポンシブデザインの実装や、CMSを活用した情報更新のしやすさの向上に注力しました。登録団体紹介のページ構造設計や、SEO対策も考慮しながら制作を進めました。

地域の環境課題に対して行政と市民、事業者を繋ぐ重要なプラットフォームとして機能するサイトづくりを目指しました。


https://cn-portal.pref.kochi.lg.jp/

「trim-hiroshima.com/matsukawa/」は、トリム広島の3号店「松川店」オープンに合わせて制作したランディングページ(LP)です。

地域密着型スポーツ施設として10周年を迎える節目のタイミングで、施設の理念やミッション、新店舗の魅力をわかりやすく伝えることを目的としています。

デザインは同じ会社のデザイナーが担当し、私はHTML・CSS・JavaScriptによるレスポンシブ対応のコーディングおよびサイト構築を担当しました。

静的ページでありながら、多様なデバイスで快適に閲覧できるようユーザビリティを重視し、SEO対策も施しています。

また、問い合わせフォームなど外部サービスとの連携部分の実装もサポートし、クライアントの運営を円滑にするための導線設計に注力しました。

チームでの連携を大切にし、地域の健康づくりに貢献する施設の想いを的確に反映したサイトを完成させました。


https://www.trim-hiroshima.com/matsukawa/


「jmfrri.gr.jp」は、WordPressをベースに構築した学術・研究機関向けのサイトです。

ユーザーが使いやすいインターフェースを実現するため、JavaScriptを活用した動的コンテンツやフォーム操作の最適化を担当しました。

具体的には、複数選択可能なフォームに対してユーザビリティを高めるカスタムUIを実装し、操作のしやすさを追求。

また、スムーズなページ遷移のためのプリフェッチ設定や、ビジュアルに訴えるスライダー機能をjQueryやSwiperで導入しました。

さらに、WordPressプラグイン「Ultimate Member」と連携し、会員管理画面の操作性向上にも取り組んでいます。

動的で使いやすいサイトづくりに貢献し、訪問者の満足度向上を目指した設計を行いました。


https://www.jmfrri.gr.jp/

「okariire.jp」は、西日本の各都府県ごとに異なる情報を動的に切り替える仕組みをWordPressで構築した不動産担保ローン紹介サイトです。

ヘッダーのイラストは外注し、私はデザイン設計からコーディングまで担当しました。

特に苦労したのは、地域ごとに異なる情報を正確に反映させるための仕組み作りです。カスタムフィールドや条件分岐を駆使し、効率的かつ保守性の高い設計を目指しました。

さらに、複数の県に対応しつつも表示速度やユーザビリティを損なわないよう、データ構造の最適化やキャッシュ活用にも注力しています。

SEO対策も施し、ユーザーに使いやすく検索にも強いサイトに仕上げました。


https://okariire.jp/aichi/