ID:82195さん

＃概要 ー 自社グループWeb全6サイト運用、及びWordPressのテーマ開発、GA4等によるサイト分析、印刷物・Web広告バナーの作成などをマルチに対応。 ＃担当 ー WEBディレクター／WEBエンジニアを兼務,予算管理,外注管理,進行管理,要件定義,デバッグ ＃ 使用技術 ー HTML5,CSS3,MySQL,php,JavaScript,Python,Laravel ＃ ツール ー Photoshop,Illustrator,After Effects,figuma,Google Analytics 4,Google Cloud,Backlog ＃ 課題 ー 住宅メーカーにとって、Webサイトからの問い合わせ(反響)は極めて大事です。しかしながら低迷していたため集客力を改善する必要があった。 ＃ 取り組み ー 初めに関連するWebサイト全体のUI/UXの見直しに着手。動線設計に多くの課題があったため抜本的に見直しを実施し、Wordpressの各種設定も抜本的に最適化を実施。どんな人が使用しても使い易い・運用が可能。という視点を持ち改修作業を実施。 ー phpで作られていた各種フォームのフロントエンド、バックエンド部分の抜本的な見直しを実施。 ー ホスティング関連の整理を実施。不要なサーバーを破棄、もしくはデータの移設作業を行い徹底的に無駄を省き効率化を実施。 ー これらの取り組みによって、ユーザー負担を極力減らし、使い易い・操作し易い・入力がし易いを徹底した結果、前年比211%UPを達成。 # 工夫した点 ー フォームの抜本的見直しを行う際に、入力項目数・スマートフォンで見た時にスクロール・MAツールへの自動連携率を心がけました。 「入力項目数・スクロール量」の最適化は何よりも入力を行うユーザーの心理的負担を軽減し離脱を防ぐ事ができます。 見直前の離脱率：98% → 見直後の離脱率：60台%に改善。 また、見直し後はMAツールへの連携率が100%となり問い合わせ管理において未入力が0件になりました.この事により対応を行う営業部の事前準備の生産性が向上した事により、お客様へのスムーズな対応を行える環境構築ができました。 ＃ その他・業務効率化等 ー 反響メールの自動集計ツールの開発 Pyrhon3を使用し、これまで手動で行っていた反響集計を自動化を実現。具体的にはoutlookメールに届く反響メール分の内容をpythonで読み取り、どの問い合わせフォームに反響があったのかを判別し、第三者の可読性を考慮した上でエクセルに自動的に転記していくようにしました。 また、ユーザーがどこから問い合わせフォームに到達しているのかを調べるためにも、【参照元／メディア】の情報もマーケティングの観点から重要なため、GA4のAPIを利用し問い合わせがあったユーザー個別に【参照元／メディア】の情報が取得できるようにカスタマイズを実施。 結果として集計に費やしていた全ての時間が時短に繋がり生産性が向上、マーケティングツールとしても活用ができる分析に有効なツールを作成する事ができた。 ー 食べログ等で見られる予約枠を可視化したイベント予約管理システムを、Laravelを用いて開発を進行中。 予約枠を可視化することは何よもユーザーにとって、予約状況が一目見て分かるので予約がし易いというメリットがあるのと同時に、実際に対応を行う現場（店舗）にもメリットがあります。 開催するイベントによって内容も異なれば、対応に割くことができるリソースも異なるため、予約枠を現場が自由に設定する事ができれば、効率的な集客が可能になるため。 ＃ 成果 ー これらの取り組みによって、ユーザー負担を極力減らし、使い易い・操作し易い・入力がし易いを徹底した結果、前年比211%UPを達成。 ー ホスティング関連を見直した事により、年間で計150万以上の経費削減を達成。

＃概要 ー グループ会社全12サイトのフルリニューアルに伴いプロジェクトを進行。リニューアルの一番の目玉機能として、100％CMS管理にて実行が可能なグループ各店を検索するための「店舗検索機能」を実装しました。DB（データベース）とAPI機能を連携させ、グループ各サイト共通で検索ができるように開発。 ＃担当 ー WEBディレクター／WEBエンジニアを兼務,予算管理,クライアント折衝,進行管理,要件定義,CMS導入〜構築作業全般,DB設計,デバッグ ＃ 使用技術 ー HTML5,CSS3,php,JavaScript,CGI,Google Maps API ＃ ツール ー Photoshop,Illustrator,XD,Google Analytics 4,Google Cloud,Backlog ＃ 課題 ー 関連企業全てを含め、Webサイト全般がレスポンシブ化に非対応であり、管理・運用面においても既存システムでは不足があるためレスポンシブ化も含めて抜本的な解決が必要な状況でした。 ＃ 取り組み ー コミュニケーションを綿密に行い、手戻りが極力発生しないうに緻密な要件定義を策定。 ー 関連するWebサイト全体のUI/UXの見直しに着手。動線設計に多くの課題があったため抜本的に見直しに着手。どんな人が使用しても使い易い・運用が可能。という視点を持ち改修作業を実施。 ー 100％CMS管理にて実行が可能なグループ各店を検索するための「店舗検索機能」を実装しました。DB（データベース）とAPI機能を連携させ、グループ各サイト共通で検索ができるように開発。また、運用側は必要なDBのテーブルを編集するだけで店舗個別の情報編集が直感的に行えるようになったこと。 ー Cookieレスに対応するため、個人情報保護の観点からlocalStrageを用いたMy店舗登録機能の開発。 # 工夫した点 ー ユーザーの操作性・CMS管理の操作性の両側面から顧客要求を踏まえたUIUXを検討・設計（高齢者も含めたターゲットを対象に各12ブランドに紐づくのべ350店舗の各サービス経由等での様々な流入経路を想定し、最小のクリックで得たい情報に辿り着ける導線設計等） ＃ 得た経験 ー 導入していたCMS自体の機能に不備があり、APIを利用したDBの参照が正常に行えず、サイトに表示ができないトラブルがあり原因追求は非常に困難を極めましたが、結果として改善に至り無事に納品できたことは安堵しています。 この出来事により、提案するシステムのメリット・デメリットをより深く理解することの重要性を改めて再認識し得難い経験を得たと感じております。 ＃ 成果 ー これらの取り組みによって、運営側にとって最も課題であった店舗管理が簡単に運用ができるようになったこと、加えて、レスポンシブ化とデザインを刷新した事によりユーザビリティも向上した事によりPV数などの指標も200%以上大きく改善。

＃概要 ー 数千〜数万点に及ぶ電材部品を絞り込み機能によって、必要な製品を簡単に探せ問い合わせに繋げたい！というクライアントの要望により、予算・WBS管理／ディレクション／開発／実装／テストまでを一気通貫で担当しました。 ＃担当 ー WEBディレクター／WEBエンジニアを兼務,予算管理,クライアント折衝,進行管理,要件定義,CMS導入〜構築作業全般,DB設計,デバッグ ＃ 使用技術 ー HTML5,CSS3,php,JavaScript,CGI,API ＃ ツール ー Photoshop,Figuma,Google Analytics4,Backlog,MAツール,CMS ＃ 課題 ー 最大の難関は製品点数が多いため、DB（データベース）管理をどのような構造設計にするか？でした。 数が多いためにクライアント側の要望としては、製品情報の更新があった際にCSV等で一括編集を行うにしても必要な部分だけを効率的に管理を行いたいという意図があったためです。 ＃ 取り組み ー コミュニケーションを綿密に行い、手戻りが極力発生しないうに緻密な要件定義を策定。 ー 100％CMS管理が可能な設計であること、製品情報を管理するDB設計をリレーショナルDB構造にすることで、製品情報に部分的な更新があった場合に紐づくDBからCSVをダウンロードし一括更新を行うことで、効率的な管理が可能な仕様にしたこと。 ー MAツールと連動している問い合わせフォームに対して、どの製品ページから問い合わせがあったのかを把握するために、製品詳細ページ毎に個別の管理パラメータを発行し、ページ内の問い合わせボタンからクリックした時に、URLにパラメーターを付与してフォーム内の項目に連動するように開発。 # 工夫した点 ー 操作性・管理面の両方を実現させるためにDB設計に一番時間を費やしました。実際に運用を行うのは専門知識を持たないクライアントが運用するため、誰が見ても分かりやすい構造設計にし簡単に使えることを念頭に置いて設計を実施しました。 ＃ 得た経験 ー 導入していたCMS自体の機能に不備があり、APIを利用したDBの参照が正常に行えず、サイトに表示ができないトラブルがあり原因追求は非常に困難を極めましたが、結果として改善に至り無事に納品できたことは安堵しています。 この出来事により、提案するシステムのメリット・デメリットをより深く理解することの重要性を改めて再認識し得難い経験を得たと感じております。 ＃ 成果 ー クライアントからDB設計において高い評価をいただきました。このプロジェクト開発を担当した事により、DB設計のナレッジを更に高めることができました。 また、このプロジェクトにおいてはWebデザインも一部担当したため、製品検索を主目的とするWebアプリケーションのデザインナレッジも同時に向上しうる貴重な機会を頂戴したと思っております。

＃概要 ー 新法人設立に伴い「一般社団法人 次世代教育ネットワーキング機構」の法人Webサイトをvibit CMS cloud という製品で構築しました。 ページ設計からWebサイトの公開まで約2ヶ月という短期間でプロジェクトを完了させ公開。 本案件では、テクニカルディレクターとしアサインし、コーディング〜CMS設定・構築まで一貫して対応しました。 ＃担当 ー テクニカルディレクター,CMS導入〜基本構築,フロントエンド,バックエンド,フォーム開発,DNS切替,ホスティング選定 ＃ 使用技術 ー HTML5,CSS3,MySQL,php,JavaScript,CGI ＃ ツール ー Google Analytics4,Backlog ＃ 課題 ー 概要でも記載いたしました通り、約2ヶ月という短期間だったためにスケジュール調整が一番の課題でした。 ＃ 取り組み ー クライアントが素早く・簡単に直感的に運用ができることを念頭に置き開発しました。特にサイト構築に必要なコンポーネント開発に力を入れ、誰でもページ構築〜公開まで一貫して作業が行えるようにしております。 CMS特有の機能である「ブロックパーツ」と呼ばれる、多種多様なコンポーネントを作りCMSにWebページを作るのに必要なパーツとして登録・管理を行う事で、テンプレートのカスタマイズ等が発生しない限り、 エンジニアの力を必要とせず、100%完全にクライアント自身にての運用・管理を実現しています。 # 工夫した点 ー 最も重きを置いた事は公開日が決まっていたためにスケジュール調整することが非常に困難でした。 その為、通常のWeb開発とは異なる手順で進行しました。要件定義→UI設計まで確定した後に、デザイン工程をスキップしてダイレクトにコーディング工程に移行した事です。 限られた時間内で収めるために、開発と綿密なMTGを重ねデバッグと同時に各種修正＋更新を進行していきました。 ＃ 成果 ー 新法人設立の立ち上げということもあり、新年度には必ず必要なサイトのため、徹底したスケジュール管理を行い大きなトラブルもなく公開をすることができました。 クライアントにも多大なご協力とご負担をおかけいたしましたが、無事に収めることができ大変感謝のお言葉を頂戴しました。

＃概要 ー 会員企業に向けて情報通信関連の様々な取り組みを展開する某社団法人様。全国に拠点を持ち、その拠点や委員会ごとに活発に活動される中で、いつでもどこでもスマホからストレスなく閲覧できる新しいサイトデザインと、必要な情報に容易に辿りつけるユーザービリティが内外から求められるようになり、サイトリニューアルをご依頼いただきました。 ＃担当 ー WEBエンジニア,DB設計,各種テンプレート開発,フォーム開発,デバッグ ＃ 使用技術 ー HTML5,CSS3,php,JavaScript,CGI ＃ ツール ー Photoshop,xd,Google Analytics4,Backlog,CMS ＃ 課題 ー 通常サイト及び会員サイトの両方ともに、レスポンシブ未対応の状況でした。そのため。レスポンシブの対応が課題でした。 ー フォームのUI/UXに課題があり、反響獲得が難しい状況にありました。 ＃ 取り組み ー 自分の担当フェースにおいて、「EFO対策」を施したフォーム開発があり、レスポンシブ対応＋ユーザビリティに配慮したフォームを開発しました。 CSV出力機能付きという要件もあったため、セキュリティ上の観点からサーバー内のroot直下指定したディレクトリに出力を行うように設定を実施。 # 工夫した点 ー クライアント側が簡単にCSVをダウンロードできるようにするため簡易的な管理画面も制作し運用性を高めた事です。 一般ユーザーから見ればFTPでサーバーにアクセスし出力されるCSVをダウンロードすることは非常にハードルが高いものです。 そのため直感的に作業ができるようにダウンロード専用の管理画面を制作しました。 セキュリティ面についても配慮し、BASIC認証＋IP制限で指定したディレクトリにアクセスができる条件を絞っています。 ＃ 成果 ー レスポンシブに対応したWebサイトになった事になり、会員企業に向けて情報通信関連の様々な取り組みより効果的になり、会員数が増加したと伺っております。（※具体的な数値まで把握しておりません） ローンチ後、高評価をいただきました。

＃概要 ー コーポレートサイトのフルリニューアルに伴いプロジェクトを進行。サイトニューアル前がレスポンシブ未対応だったため、レスポンシブ化＋UI/UXの抜本的な改善を実施いたしました。 ＃担当 ー WEBディレクター／WEBエンジニアを兼務,予算管理,クライアント折衝,進行管理,要件定義,CMS導入〜構築作業全般,DB設計,デバッグ,CMS操作マニュアルの作成,サーバ移管 ＃ 使用技術 ー HTML5,CSS3,php,JavaScript,CGI ＃ ツール ー Photoshop,xd,Google Analytics4,Backlog,CMS ＃ 課題 ー リニューアル前は商品詳細ページのコンテンツ訴求力に課題がありました。具体的にはUI設計に大きく問題があり可読性、CVボタンの配置、ページ全体のクリエイティブ、SEO関連対策など最適化されておらず流入数が非常に少なく反響が獲得しにくい状況がありました。 ＃ 取り組み ー コミュニケーションを綿密に行い、手戻りが極力発生しないうに緻密な要件定義を策定。 ー Webサイト全体のUI/UXの抜本的な変更。特に商品ページの充実化と製品検索システムのレイアウト改修に重点を置きました。 ー その他、ドメインのDNS切り替え、サーバ移管も実施。 # 工夫した点 ー 製品詳細ページは専用のDBから情報を読み出し指定したテンプレートを用いて、個別ページを出力する仕様になっています。 ページ内に問い合わせボタンがあるのですが、指定したフォームURLに「製品コード」を変数に格納し末尾にパラメーターとして付与する事で、フォームに情報を送信するように設計・開発を実施。 クライアントからは当初の要件定義通りに実装がされたことにより、大変評価いただきました。 ＃ 得た経験 ー このプロジェクトではリニューアルしたローンチと同時に、新サーバーの移管＋ドメインのDNS切替作業もありました。 既存のサーバーの性能が古い上に料金も割高でしたので別サーバーの移転を提案。結果としてランニングコストも抑え、サーバーとドメインの紐づけ設定「Aレコード」の切替など、 Webサイト構築に必要なサーバーとドメインの関連性を深く学ぶ事ができました。 ＃ 成果 ー クライアントからサイトリニューアル後、コンバージョンが前年比200%UPに繋がった！とクライアント様よりお褒めの言葉を頂戴しております。

＃概要 ー 株式会社Phone Appli様のイベントページの一部リニューアルプロジェクトになります。 WEB知識が無い方でも直感的にページを作成することができ、簡単に更新作業ができるようにCMSのテンプレート開発を実施いたしました。 サイトに構築に仕様されていたCMSが「Movable Type」であり、当時、在籍していた組織において「Movable Type」に精通している者が自分しかいなかったため、プロジェクトにアサイン。 ＃担当 ー WEBエンジニア,イベントページテンプレート開発,CMSのカスタム投稿設定 ＃ 使用技術 ー HTML5,CSS3,php,JavaScript,Movable Type ＃ ツール ー Backlog ＃ 課題 ー ページリニューアル前はイベントページの作成が専門知識がないと作成ができない仕様との事であり、その為、管理＋運用面を考慮した抜本的なCMS開発が必要でした。 ＃ 取り組み ー イベントページ専用のテンプレート開発 # 工夫した点 ー Movable Typeの「コンテンツタイプ」を用いて、CMS開発＋イベントページのテンプレート開発を行いました。 大きな特徴は管理側で入力する情報を設定し、適切にコンテンツを管理・作成ができることです。カスタムフィールドを追加するよりも柔軟に情報を管理ができるため、クライアントの要望を満たす手段として最適と判断しました。 ＃ 成果 ー リニューアル後、管理＋運用面が大きく向上し外注費の削減などに繋げる事に成功したと伺っております。

＃概要 ー 某大手独立行政法人公式ウェブサイト運用・管理の運用・管理チームの責任者としてJAXA東京広報部に出向。CMSの運用・管理・機能開発〜UI/UX制作、動画作成、Webデザインまで幅広く対応しました。 ＃担当 ー WEBディレクター／WEBエンジニアを兼務,クライアント折衝,進行管理,要件定義,デバッグ,CMSテンプレート開発,分析提案 ＃ 使用技術 ー HTML5,CSS3,php,JavaScript,Vue.js,Movable Type ＃ ツール ー Photoshop,illusttator,XD,Google Analytics4,Backlog ＃ 課題 ー 「国」の関与が非常に強い研究・開発を行っている独立行政法人という「特殊」な条件があるため、通常の組織としての取り組みを広く国民にどのように分かりやすく訴求していくか？が課題でした。 ＃ 取り組み ー Webサイト全体のUI/UXの見直しに着手。可読性・ページのスクロール量など綿密に再構築を実施。 ー 運用面の向上を重視したCMSの基本設定及びテンプレートのカスタマイズ・調整。 ー GA4を用いた定期的なサイト分析と改善提案。 ー 各種SNS運用,youtube運用のマニュアル策定。 # 工夫した点 ー GA4を用いた定期的なサイト分析と改善提案を行う事で、問題があるページを常時改善し離脱率を極力下げる取り組みを実施。 今般のユーザは可読性・UIが最適化されていなければ高い離脱に繋がる事が統計学的にも証明されているため、ユーザビリティを最も重視したサイト開発に取り組みました。 また、SNSも積極的に活用すし、クリエイティブやテキストなどの校正にも力を入れていました。 ＃ 得た経験 ー 秘匿性が高い国関連の独立行政法人という難しい条件のプロジェクトのため、プロジェクトを進行する上で多くの関係者がいた為ににコンセンサス(合意)を得る事が非常に苦慮しましたが、この経験により「提案力・会話力」が非常に 向上するに至ったと考えております。 ＃ 成果 ー GA4を用いた分析データを元にUI/UXを改善しサイトの一部リニューアルを実施。コンテンツの拡充などを行った結果、サイト全体のPV数等が約130%UP。 また、SNSなどの効率的な運用によりPress(報道関連)からの問い合わせも向上し、「取り組みを広く国民に訴求する」という組織としての目標に対して一定程度貢献ができたかと考えております。

＃概要 ー 某大手独立行政法人 別部門があるつくば市に出向しウェブサイトの運用・更新業務を担当。 ＃担当 ー フロントエンド／バックエンドを兼務,デバッグ,CMSテンプレート開発,分析提案 ＃ 使用技術 ー HTML5,CSS3,php,JavaScript,Movable Type ＃ ツール ー Photoshop,illusttator,Google Analytics ＃ 課題 ー 某大手独立行政法人 別部門という事で公式サイト比較すると一般の認知度が高くないため、どのように認知度を高めるがが課題でした。 ＃ 取り組み ー Webサイト全体のUI/UXの見直しに着手。可読性・ページのスクロール量など綿密に再構築を実施。 ー 運用面の向上を重視したCMSの基本設定及びテンプレートのカスタマイズ・調整。 # 工夫した点 ー GA4を用いた定期的なサイト分析と改善提案を行う事で、問題があるページを常時改善し離脱率を極力下げる取り組みを実施。 今般のユーザは可読性・UIが最適化されていなければ高い離脱に繋がる事が統計学的にも証明されているため、ユーザビリティを最も重視したサイト開発に取り組みました。 ＃ 成果 ー CMSを最適化したことにより、コーディングスキルない方でもプレスリリースなど、記事ページが簡単に作れるようになった事。 また、最大の成果は「Movable Type」の使い方を300時間徹底した学習した事により、基本構築〜カスタマイズまで対応ができるようになり、クライアントに対して裏側の仕組みを理解した上で改善提案ができうようになりました。