制作事例
これまでに作成してきたサイトの情報をまとめています。
他にも既存サイトのページ追加や改修業務、WordPressの機能追加・エラー修正などの業務も経験していますが、サイト全体を単独でコーディングした事例のみに絞りました。
ポートフォリオサイト
使用技術
HTML/CSS(Sass(Scss)), JavaScript(Vue.js, Nuxt.js)
制作時期
2024年4月〜
サイト概要
自身のポートフォリオとして作成したサイトです。
勉強中で扱いにも慣れてきたVueを使用したいと思い、フレームワークとしてNuxt.jsを採用しました。
せいさくっと
担当箇所
フロントエンドコーディング, バックエンド開発
使用技術
HTML/CSS(Sass(Scss)), PHP(Laravel)
制作時期
2019年3月頃〜2022年10月頃
サイト概要
保育士をしている友人から「保育士向けの工作アイディア共有サイト」について相談され、当時勉強中だったPHPフレームワークのLaravelを使用して作成したものです。
デザインはその友人のイメージをワイヤーフレームのような形で作成してもらったものをベースにしています。
スマートフォンでの表示を優先して考えているため、PC向けの表示については改良の余地があります。
フロントエンドのコーディングは一部に画像スライダーやモーダルを使用している程度のシンプルなものです。
テンプレートエンジンとしてLaravelの標準だったBladeテンプレートを使用しています。
バックエンドについてはテーブルの設計や機能の実装を独学で試行錯誤しつつ全て自分で行いました。
PHPやLaravelに対してかなり理解が深まったと感じていますが、今振り返るともっと上手く作れた部分は多々あったとも感じています。
(なお、その友人がこのサイトの運営にあまり時間を割けなくなったとのことで、現在開発は凍結状態です。
機能概要
- ユーザー登録機能
- 登録方法
- ユーザー名・メールアドレス・パスワードで登録
- Googleアカウントを使用してログインすることも可能
- ユーザー登録が必要な機能を使用するページに遷移するとログイン画面が表示される
- 登録方法
- 作品投稿機能
- 投稿は登録ユーザーのみが可能
- 閲覧は登録の必要なし
- 画像・投稿タイトル・作品の説明に加え、検索用のタグを設定することが可能
- 投稿はフリーワードやタグで検索することが可能
- 新規タグの追加は管理者権限のあるユーザーのみが可能
- 検索ページのデザインの都合
- 投稿表示画面
- 上記の設定内容の表示に加え、投稿の閲覧数・クリップ数・いいね数を表示
- 投稿に対し、コメント・クリップ・いいねのアクションが可能
- 自分の投稿に上記のアクションが行われると、ユーザーのメールアドレス宛に通知が届く
- 投稿は登録ユーザーのみが可能
- ランキング機能
- いいねが多かった投稿はランキングページに表示される
- フォロー機能
- 特定のユーザーのフォローが可能
- マイページ
- ユーザー名・アイコン・自己紹介文の登録・編集機能
- 投稿・コメントの履歴表示機能
- 自分がフォローしているユーザーの表示機能
- 自分をフォローしているユーザーの表示機能
某地域型温泉施設サイト
担当箇所
フロントエンドコーディング, WordPress組み込み
使用技術
HTML/CSS(Sass(Scss)), JavaScript(jQuery), PHP(WordPress)
制作時期
2022年8月頃
サイト概要
複数の施設からなる地域型施設のサイトで、支給されたデザインデータのHTML化とWordPressの組み込みを対応しました。
各施設からのお知らせを個別に管理したいとのことだったので、WordPressではカスタム投稿タイプで管理画面を分けています。
また、WPプラグインで問い合わせフォームを設置しています。
某保育園公式サイト
担当箇所
フロントエンドコーディング, フォーム組み込み, WordPress組み込み
使用技術
HTML/CSS(Sass(Scss)), JavaScript(jQuery), PHP, WordPress
制作時期
2022年6月頃
サイト概要
支給されたデザインデータのHTML化と問い合わせフォームの設置、WordPressの組み込みを対応しました。
WordPressは新着情報の管理のみとし、問い合わせフォームはSmartyを使用した独自テンプレート(会社員時代の上司が作成したもの)を使用して設置しました。
また、各ページで更新が入る可能性があるコンテンツ(クラス毎の空き状況やFAQ等)は設定用のファイルを別で用意しています。
某複合商業施設内施設用LP
担当箇所
フロントエンドコーディング
使用技術
HTML/CSS(Sass(Scss)), JavaScript(jQuery)
制作時期
2021年9月頃
サイト概要
支給されたデザインデータのHTML化を対応しました。
LPということで、ドロワーメニューやスムーススクロール、アコーディオンなどはもちろん、スクロールした時の背景の固定やフロアマップにカーソルを合わせた時に該当箇所の解説文を表示する機能など、通常のwebサイトと比較して視覚的に目立つエフェクトが多かったように思います。
某建築系企業のコーポレートサイト
担当箇所
フロントエンドコーディング, フォーム組み込み, WordPress組み込み
使用技術
HTML/CSS(Sass(Scss)), JavaScript(jQuery), PHP, WordPress
制作時期
2021年4月頃
サイト概要
支給されたデザインデータのHTML化と問い合わせフォームの設置、WordPressの組み込みを対応しました。
問い合わせフォームと一部のページ以外はWordPressで管理しています。
パララックス処理やマウスストーカーなど、他ではあまり使用機会がなかった効果の実装も行いました。
某飲食店経営企業のコーポレートサイト
担当箇所
フロントエンドコーディング, WordPress組み込み
使用技術
HTML/CSS(Sass(Scss)), JavaScript(jQuery), PHP(WordPress)
制作時期
2019年6月頃
サイト概要
支給されたデザインデータのHTML化とWordPressの組み込みを対応しました。
各種お知らせは個別のカスタム投稿タイプとして分割し、頻繁に更新されないページはWordPressの管理外としています。
jQueryでパララックスやタブ切り替えなどを実装しています。
某クリニック公式サイト
担当箇所
フロントエンドコーディング
使用技術
HTML/CSS(Sass(Scss)), JavaScript(jQuery)
制作時期
2019年3月頃
サイト概要
支給されたデザインデータのHTML化を対応しました。
CMSは使用せず、何ヶ所かでスライダーを使用している程度のシンプルな作りのサイトでした。