大阪府八尾市

ウェブ制作・ウェブ開発 フリーランス

WEBSON・そんほんす（孫弘樹）

そんほんすの似顔絵

コードを書くことが大好きです。

アバウト〜私について

12月9日

日直

そんほんす

どうしても、コードを書く仕事をしたくて、
２０２０年３月から本気出して勉強をはじめました。
先輩フリーランスや
所属コミュニティから案件をいただいて、
２件（２０２２年３月現在）
納品できたところです。
コーディング・プログラミングを中心に
さらに技術を磨いていきたいと考えています。

制作実績・これまでの活動

実績一覧へのリンク

実績一覧

勉強会

AstroとmicroCMSで作るシンプルコーポレートサイト

AstroとmicroCMSで作るシンプルコーポレートサイトの画像

AstroとmicroCMSを使って、シンプルなコーポレートサイトを作成する過程を報告。この構成でサイトを作成することで、ウェブサイト構築の効率化、品質のアップを期待できるのではないかという提案をしました。

ウェブ制作

みっちゃん弁当様　ウェブサイト

みっちゃん弁当様　ウェブサイトの画像

仕出し・お弁当製造業者、みっちゃん弁当様のウェブサイトを制作。ヒヤリング、デザイン、コーディングまでを担当担当しました。まずは、お店のことを紹介するサイトがほしいということで、最小限の構成で作成したい、おしゃれというより、地元で５０年愛されてきたので、アットホームな感じを出したいというご要望から、デザインをしました。

ウェブ制作

架空の英会話スクールサイト

架空の英会話スクールサイトの画像

Basic認証。ID : webson パスワード : webson-pass。 XDデザインよりコーディングを行っております。 クライアント様が更新できるようにトップページの事例、コース・料金ページの価格部分にカスタムフィールドを使用。 公式のテーマユニットテストデータを使用して、投稿のレイアウト崩れをチェック。 作業の過程において、テーマファイルのアップロードをGitHubActionsを利用して自動化。 push時に0.1.1などのようにタグを付けることで、アップロードされるように設定。

ウェブ制作

架空の建設会社ホームページ

架空の建設会社ホームページの画像

サイトにはBasic認証をかけています。ID: webson PASS: webson-pass 配布されていたコーディング教材をコーディングしました。Photoshopのデザインカンプ。Zeplinを中心にしながらコーディングを勧めました。わからないところのググりも含めて３５時間くらいかかりました。FLOCSSで丁寧なCSSをかけたと思います。

ウェブ制作

デモサイト〜ENGBODY

デモサイト〜ENGBODYの画像

Basic認証をかけています。ID:webson PASS:webson-pass。 練習用デザインカンプをコーディングしました。モバイルファースト。メインビジュアルのアニメーションはCSSで記述。 コンテンツが現れてくるアニメーションをAOSを利用しました。StudioブロックのスライドはSwiper.jsを使って実装しています。

ウェブ開発

Hydrogenで構築したECサンプル

Hydrogenで構築したECサンプルの画像

Over 40 Web Club主催、Shopifyの最新フレームワークHydrogenをキャッチアップする学習会に使用するためにつくったECサイトのサンプル。Reactでフロント、バックにShopify、環境はviteという最新のスペックのサイト。 実用に耐えうるほどのものはまだ構築できていないですが、この構築の過程で、Shopifyの基本的なところを学ぶこともできました。 CloudFlareのWorkersでデプロイしています。

ウェブ制作

ブルーリーフパートナーズ株式会社様ホームページ制作事業LP

ブルーリーフパートナーズ株式会社様ホームページ制作事業LPの画像

ブルーリーフパートナーズ様のウェブ制作事業のためのランディングページ。XDデザインカンプをコーディングしました。デザイナー、ディレクターとコミュニケーションをとりながら、コーディングしました。デザインで特に指定はなかったサービス部分のJavaScriptアニメーションについて、ユーザーの操作を想像しながら、画面をFixさせるなどの機能、背景クリックでもクローズするなどの機能を提案して採用していただきました。

ウェブ制作

HTML、CSSコーディング〜WordPress化案件（非公開）

HTML、CSSコーディング〜WordPress化案件（非公開）の画像

Basic認証　ID：webson パスワード：webson-pass　／　ログイン用ID：webson-guest ログイン用パスワード：webson-pass HTMLコーディングからWordPress化を担当しました。トップページ＋下層12ページ程度。 できるだけプラグインを使わないように、functions.phpで検索機能、パンくずリスト、カスタム投稿（タクソノミー含む）を実装しました。カスタムフィールドはプラグインSmartCustomFieldsを使用して実装しました。

勉強会

サクッとECサイトを構築できるReactベースのHydrogen入門

サクッとECサイトを構築できるReactベースのHydrogen入門の画像

Shopifyが出したヘッドレスコマース用のフレームワークHydrogenのキャッチアップを報告しました。 さすがのフレームワークで、本当にサクッとヘッドレスCMSの形が出来上がりました。その後のカスタマイズはReactの知識＋Hydrogenのコンポーネントを勉強すれば色々できそうです。 このときは、Eコマース周りの学習をしたのですが、話したいことが多すぎて、時間配分に課題ありでした。

勉強会

ヘッドレスCMSで爆速ブログ構築

ヘッドレスCMSで爆速ブログ構築の画像

たにぐちまことさんのUdemy講座をしているときに、「同じことをGatsbyでやってみたい」とふと思い立ってやってみることにしました。startBootstrapサイトにあるHTMLテンプレートを使ってGtasbyブログのフロントを構築、ヘッドレスCMSとして、microCMSを使用したブログを作成。勉強会では、できたブログのGit Hubをスターターにしてブログを構築する様子を報告しました。最後は、パニックになってしまい「デプロイ」まで見てもらうことができなかったのは苦い思い出です。

勉強会

【超入門】Webサイトをデプロイしよう！

【超入門】Webサイトをデプロイしよう！の画像

Over 40 Web Club内で話題にのぼった、デプロイの方法やGitの使い方について、自分の持っている知識を整理して、アウトプットしました。レポートするたびに、周辺知識、特に言葉についての理解が深まっていきました。

勉強会

ヘッドレスWordPress入門

ヘッドレスWordPress入門の画像

２回めの勉強会。このときはGatsbyのWordPressスターターが出ていたので、それを紹介しました。 ほんの１０分〜１５分くらいで、自分のWordPressをヘッドレスCMSにして、フロントをGatsbyのサイトにできます。

勉強会

【実演】今話題のGatsbyでポートフォリオサイトをサクッとデプロイ

【実演】今話題のGatsbyでポートフォリオサイトをサクッとデプロイの画像

Over 40 Web Club 主催の勉強会。勉強会ドリブン勉強会という考え方のもとで開催。現在学習中のものを教えることでさらに定着をはかり、そして、聞く人も新しい学びになるという一石二鳥の勉強会です。 Over 40 Web Club 内でGatsbyについて教えてもらったことを、自分の中に落とし込んで、Gtasby周辺知識とその実演を行いました。コミュニティのみなさんに助けて頂いて、スターター＋少しカスタマイズまでできました。

ウェブ制作

techmeets

techmeetsの画像

無料で配布していただいていた画像のデザインをもとにコーディングしました。 はじめてレスポンシブまできちんと実装できたものです。

ウェブ開発

Gatsby-microCMSブログ

Gatsby-microCMSブログの画像

Over 40 Web Club 主催の勉強会ドリブン勉強会で報告するために作成したブログ。記事は何もアップしていません😅 たにぐちまことさんのUdemyWordPress開発講座でstartBootstrapのテンプレートをワードプレスにするというのを真似して、GtasbyとmicroCMSでやってみました。 ブログとして運用するのには少し機能がたりないのですが、この構築を通して、Gtasbyでオリジナルデザインでの構築ができるようになりました。

ウェブ開発

そんほんすポートフォリオ

そんほんすポートフォリオの画像

WordPressで構築するか、Gatsbyで構築するか迷ったのですが、最終的にGatsbyで構築しました。 スライダーの実装やwindowイベントのところでつまずきましたが、いろいろな人にも訪ねながらなんとか完成。 ポイントは、右下のお問い合わせボタンがフッターが見えたら消えるところと、スマホレイアウトをボトムメニューにしたところです。 アイコンもいくつかはイラストレーターで素材を参考に手作りしました。

ウェブ開発

パソコンの勉強のためのリンク集

パソコンの勉強のためのリンク集の画像

学校ではすべての先生がPC得意というわけではありません。苦手な方のクラスでも、できるだけかんたんにパソコンを使った学習に取り組めるように作成。 Gatsbyのスターター（Airtableと接続)を使用。１つ１つのカードをカスタマイズ。カードをクリック→モーダル→リンク先という流れを、カードのURLクリックしたときは、直接リンク先に飛べるようにしました。

ウェブ制作

八尾市教職員組合新規採用者向LP

八尾市教職員組合新規採用者向LPの画像

自分の所属する八尾市教職員組合で使用。新規採用者に伝えたい内容をまとめました。 団体のGoogleアカウントがあったので、コンタクトフォームはGoogleフォームを埋め込んで使用。 誘導のための動線は主にフライヤーに貼ったQRコードを想定しました。

スキル

  • HTML/CSS/JavaScript

    ウェブ周りの基本、HTML、CSS、JavaScriptは常にアップデートしてまいります。セマンティックなHTML、SEOを意識した構造、BEM,FLOCSS,PRECSSなどのCSS設計思想、JavaScript、JQueryも対応できます。

  • Wordpress

    WordPress既存テーマでのサイト構築。静的サイトのWordPress化も可能です。PHPのロジックを使ってできるだけ効率的にコードを書きます。

  • nodejsアイコン

    タスクランナー npm script

    タスクランナーにnpm Scriptを使っています。scssのコンパイル、prefixの付与など。静的サイトのコーディングをできるだけ効率化します。

  • Gatsby.js

    静的サイトジェネレータGatsbyのテーマを使って、サイトを構築できます。また、ブログのHTML，CSSデータをGtasbyで構築しました。

  • XD

    デザインは主にAdobeXDを使用しています。コンポーネント、レイヤーを意識して、見やすく、コーディングもしやすいデザインを作成します。

  • ホワイトボードミーティングのアイコン

    ホワイトボード・ミーティング®

    ホワイトボードミーティング®というファシリテーションスキルの認定講師資格を持っています。ヒヤリングや会議の運営で力を発揮します。

サービス

  • ウェブサイト制作・開発

    HTML/CSS構築、WordPress開発（オリジナルテーマ）、JAMstack開発など承ります。コーディング代行、軽微な修正、運用案件など、小さなお仕事も精一杯させていただきます。

  • その他もろもろ

    その他、ウェブ周りのこと対応いたします。お気軽にご相談ください。

経歴

私のこれまでの経歴です。 仕事のこととPCに関わることを中心に記載しています。

1972年7月18日

兵庫県川西市で生まれる。 まるまると太っていましたが、一度鼻血が止まらず、病院へ。とても華奢な子どもになる。

小学生〜中学生時代

大流行のファミコンを親にねだるも、「ゲームだけだからだめ。パソコンならOK」とMSXを買ってもらう。 MSXのゲームには飽きて、本を買ってきてはBasicの写経に勤しむ。

大学時代〜2000年

大阪の「トッカビ子ども会」でボランティア。卒業後、アルバイトスタッフになる。在日コリアンの子どもの放課後児童クラブのようなもの。
大阪府八尾市の小学校で常勤講師。学校での仕事に加え、コリアンのことを中心に文化の指導のためいくつかの学校に指導に出向くことも。

2001年〜2012年

大阪府教員採用テストに合格。公立小学校に赴任する。 2つの小学校を経験。 校内の分担では常に情報教育、情報機器の担当。人権教育主任、体育主任、研究主任などのマネジメント職も経験。 学校のホームページを作成、多くの人が更新しやすいように工夫して作成するも、市内のシステム入れ替えによって公開は数ヶ月で終わる。 並行して、教職員組合の役員も経験、会計、機関紙編集なども担当。

2013年〜2015年

教職員組合の書記長（事務局長）となり、専従職員として組合の業務にあたる。組合のマネジメントにおいて、チャットツール、クラウドを導入。ブログ・FBページなどを活用して情報発信。 このときに、ホワイトボード・ミーティング®の認定講師資格や衛生推進員資格を取得。

2016年〜2020年

教育現場に復帰。日本語指導担当になる。組合の書記長はそのまま継続。 コロナ禍の学校において、チャットツールを導入。名簿管理やテストの集計において、VBAを調べつつ活用。テスト集計の工数を大幅に減らし感謝される。生活指導担当も経験。 この頃に、プログラミング学習にとりくみはじめるも、一旦挫折。

2019年〜

コロナ禍の中、プログラミング学習再開。Progateウェブ開発パス（Rails）を完走。Railsチュートリアル完走。Isaraの模写中にOver 40 Web Clubに加入。学習が加速。 勉強会ドリブン勉強法を実践、connpassで4回の学習会の講師。

2021年〜

転勤して、新しい学校で日本語指導。 Over 40 Web Clubの先輩フリーランスからコーディング〜WordPress化案件をいただいて、納品。エクプラというコミュニティでウェブ制作会社のLPコーディング案件をいただいて納品。 現在は、自分が所属する団体のHP構築、SNS運用中。