pazfinder-blog

https://pazfinder.link/

担当

デザイン・コーディング

使用技術

• HTML
• CSS［SCSS（DartSass）］命名規則：FLOCSS
• JavaScript（脱jQuery）
• WordPress（オリジナルテーマ）
• webpack

使用プラグイン

• MicroModal.js
• progressbar.js
• Contact Form 7
• SEO SIMPLE PACK

実装機能

• ローディング画面
• メニューボタン（MicroModal・スマホ時のみ背景固定）
• 各CSSアニメーション
• JSのスクロールイベント卒業
• Weｂサイトをキーボードで閲覧可能

制作内容

オリジナルのブログサイトを制作しました。
極力プラグインには頼らず制作したため時間がかかりましたが、そのぶんWordPressへの理解に繋がり、実りのあるブログサイトが完成しました。

株式会社ヒトツナギ

https://pazfinder.link/product_hitotunagi/

担当

コーディング

使用技術

• HTML
• CSS［SCSS（DartSass）］命名規則：FLOCSS
• JavaScript（脱jQuery）
• webpack + EJS（HTMLをパーツ化）

使用プラグイン

• MicroModal.js
• splide.js
• progressbar.js

実装機能

• ローディング画面
• トップへ戻る・スムーススクロール
• メニューボタン（MicroModal・スマホ時のみ背景固定）
• 各CSSアニメーション
• JSのスクロールイベント卒業
• インスタグラムAPI
• メールフォーム（firststep様のをバリデーション強化しました）
• Weｂサイトをキーボードで閲覧可能

制作内容

とあるデザインを模写させていただき、コーディングしました。（画像は自分で用意）
静的サイトの共通項目（header・footer・パンくず・Gナビゲーション）をパーツ化したく、初めて webpack と EJS を使って制作しています。
gulp + EJS の情報はネットに多かったのですが、webpack + EJS の情報は少なく、効率よく制作できる形になるまで時間がかかりました。
そのほか、勉強としてスライドショーに splide.js を使ったり、インスタグラムAPI や、firststep様の無料メールフォームをカスタマイズしてみたりと、個人的に実りあるWebサイト制作でした。

WPテーマ化・PON DESIGN

https://pazfinder.link/pon-design_wp/

担当

コーディング

使用技術

• HTML
• CSS［SCSS（DartSass）］命名規則：FLOCSS
• JavaScript（脱jQuery）
• WordPress（ローカル環境はDocker）

使用プラグイン

• swiper
• MicroModal
• Contact Form 7
• SEO SIMPLE PACK

実装機能

• ローディング画面
• トップへ戻る・スムーススクロール
• メニューボタン（MicroModal・スマホ時のみ背景固定）
• 各CSSアニメーション

制作内容

過去に制作した ねこポンさんのコーディング練習教材 をWordPressでオリジナルテーマ化しました。
GoogleChromeの拡張機能「PerfectPixel」を使い、ピクセルパーフェクトで制作しています。
固定ページの内容はブロックエディターへ書き、ナビメニューやカスタム投稿タイプなどWordPressの機能を使い制作してあります。
極力プラグインは使わない方向で制作しました。

PON DESIGN

https://pazfinder.link/pon-design/

担当

コーディング

使用技術

• HTML
• CSS［SCSS（DartSass）]命名規則：FLOCSS
• JavaScript（脱jQuery）
• PHP（HTML共通部品化）

使用プラグイン

• swiper
• MicroModal

実装機能

• ローディング画面
• トップへ戻る・スムーススクロール
• メニューボタン（MicroModal・スマホ時のみ背景固定）
• PHPでお知らせ一覧（PHP工房）
• PHPでお問い合わせフォーム（PHP工房）
• 各CSSアニメーション

制作内容

ねこポンさんのコーディング練習教材 を制作させていただきました。
GoogleChromeの拡張機能「PerfectPixel」を使い、AdobeXDのデザインカンプから初めてピクセルパーフェクトで制作し、レスポンシブへ対応させました。
が、
デザインカンプとWeb制作に起こる微妙なズレに非常に苦戦しました（汗）
ねこポンさんのコーディングデータと、私のコーディングを比べて無駄を省くなど、学びの多いWeb制作となりました。
ねこポンさんありがとうございました。

制作期間

3週間

FlowerCafe

https://pazfinder.link/FlowerCafe/

担当

コーディング

使用技術

• HTML
• CSS［SCSS（DartSass）]
• JavaScript（脱jQuery）
• PHP（HTML共通部品化）

使用プラグイン

• SimpleParallax
• MicroModal

実装機能

• ローディング画面
• メニューボタン（MicroModal・スマホ時のみ背景固定）
• パララックス効果（SimpleParallax）
• PHPでお知らせ一覧（PHP工房）
• PHPでお問い合わせフォーム（PHP工房）
• 各CSSアニメーション

制作内容

ねこポンさんのコーディング練習教材 を制作させていただきました。
AdobeXDのデザインカンプからルックアンドフィールで制作しました。
過去に学んできた知識を活かし、順調に制作出来たと思います。 ねこポンさんありがとうございました。

制作期間

1週間

ポートフォリオサイト

https://pazfinder.link/pazfinder_portfolio_02/

担当

デザイン・コーディング

使用技術

• HTML
• CSS［SCSS（DartSass）]
• JavaScript（脱jQuery）
• PHP（HTML共通部品化）

使用プラグイン

• SimpleParallax
• MicroModal

実装機能

• ローディング画面
• ページ内リンク・スムーススクロール
• オリジナルメニューボタンUFO（MicroModal・スマホ時のみ背景固定）
• パララックス効果（SimpleParallax）
• モーダルウィンドウ（MicroModal・背景固定）
• PHPでお知らせ一覧（PHP工房）
• PHPでお問い合わせフォーム（PHP工房）
• 各CSSアニメーション

制作内容

勉強も兼ねてCSSの命名規則を「FLOCSS」にしCSSのパーツ化を意識、お知らせ一覧とお問い合わせフォームをPHPで実装、一部ブラウザへのキーボード操作の対応、脱jQuery、SCSS(DartSass)、PHPによるHTML部品共通化を行っています。

サイト名の由来

【 pazfinder 】というサイト名……一見すると「つづり間違えてますよ！」と突っ込みたくなってしまうのですが、これには２つの言葉を合わせています。
ひとつは【 pathfinder 】「開拓者」や「道を見つける人」
もうひとつは【 paz 】スペイン語で「平和」という意味があります。
私が制作したウェブサイトを通じ、お客様に安心や穏やかな日々の助けになれるよう、この名を考えました。

注意事項スクリーンショットでは、固定背景により一部画像が乱れています。ご了承ください。

架空のリサイクル企業ウェブサイト WPテーマ「Arkhe」使用 トップページのみ

https://pazfinder.link/wp_sample1/

担当

デザイン・コーディング

使用技術

• HTML
• CSS（SCSS）
• JavaScript（脱jQuery）
• PHP
• WordPress（ローカル環境構築にDocker使用）

使用プラグイン

• Arkhe Blocks（使用テーマプラグイン）
• Custom Post Type UI（カスタム投稿タイプ用）
• Flex Posts（カスタム投稿タイプ表示用）
• SEO SIMPLE PACK（SEO対策）
• Snow Monkey Forms（お問い合わせフォーム）
• Swiper（脱jQueryライブラリー）
• WebP Converter for Media（画像軽量化）

実装機能

• スライダー（Swiper）
• パララックス効果
• ローディング画面
• 各アニメーション効果

制作内容

WordPressの既存テーマ「Arkhe」を使い、架空リサイクル企業のWebサイトを制作しました。
ブロックエディターで大まかな枠を作り、装飾などは子テーマを使用し調整しています。
仮に親テーマ「Arkhe」に何か変更・アップデートがあっても、メンテナンスしやすい配慮をしています。

注意事項スクリーンショットでは、固定背景により一部画像が乱れています。ご了承ください。