担当工程：HTML/CSSコーディング・WordPress化
Basic認証ID:webson, PASS:webson-pass
英会話スクールの模擬サイト。XDデザインカンプからのコーディング、WordPress化。CSS設計はFLOCSS＋BEMを基本的な考え方として設計しています。
成功事例は随時得ることができるのものなので、お客様で更新できることが望ましいことが多いです。今回はWordPressでカスタム投稿タイプとカスタムフィールドを使用して実装しました。画像についても、変更可能としました。
JavaScriptで実装しました。QAいずれも、分量が多くなっても、レイアウトが崩れないことに注意してスタイルを整えました。
画像取得のロジックで、アイキャッチ画像が設定されていないときには、予め用意した画像をアイキャッチとして表示するようにしました。アイキャッチ画像はCanvaでサクッと作成しました。
最新記事から３件、関連記事３件、おすすめの記事など、よくあるサブループを使用しています。また、記事詳細画面ではサイドバーにカテゴリリストも表示するようにしています。
CTA部分はincludeできるように、コンポーネントに切り出しています。
担当工程：HTML/CSSコーディング
Basic認証ID:webson, PASS:webson-pass
XDデザインカンプからコーディングしました。アニメーションの部分でいろいろ学びが多かったです。かなり前に勉強したアニメーションをmixinにするという考え方も、これの実装している中で理解することができたのは大きな収穫。
スクロール連動アニメーションはAOSをCDNで使用しました。その他のアニメーションはCSS、keyframeで定義して使っています。
Swiper.jsを使用。矢印のデザインをカスタマイズしています。
Priceブロックのスマホ画面では横にスクロールできるようにしています。その際、スクロールができることがわかるように矢印を表示スクロールすると消える処理をJavaScriptで実装しています。
それまで、使ったことのなかったdetails-summaryタグを使用しています。Q,Aのマークを擬似要素にして、HTMLをスッキリかけるように意識しました。
担当工程：HTML/CSSコーディング
Basic認証ID:webson, PASS:webson-pass
PSデザインカンプからのコーディングにおいて、画像の一括書き出し、Zeplinで値の確認など、新しいスキルを身につけることができました。週１５時間稼働のイメージでなんとか２週間くらいで実装しました。調べながらの実装も多かったので、今後もっとスピードをあげていきたいところです。
Basic認証ID:webson, PASS:webson-pass
PSカンプをZeplinで読み込んで、それをメインにコーディングを進める。画像の書き出しについても、使用画像を一括で書き出すなど、効率化を意識して作業をすすめました。
・skewを使用。デザインの再現とレスポンシブのときの挙動に注意して実装しました。
swiper使用のスライドショーを実装。斜めにカットした画像が、徐々に拡大したあと画面切り替え。カンプで再現されている影の見落としが内容に気をつけて、デザインの再現するようにしました。
pictureタグを使用。PCとSPで使用する画像を切り替え。
担当工程：HTML/CSSコーディング
XDでのデザインカンプをいただいてコーディングしました。デザインを再現することは当然ですが、感じた違和感をできるだけ迅速にコミュニケーションをとって解決することを意識しました。コミュニケーションにはSlackを使用していて、デザイナーさんも素早く反応していただき、スムーズに進めることができました。
タイトルのCSSをコンポーネント化していたので、各セクションごとのpadding,marginの小さい差が気になりました。、デザイナーさんに相談をして揃えるように提案しました。
デザイナーさんからの指定は特にない中、以下の点を提案して実装。JavaScriptでカードのオープン・クローズを実装。オープンしたときに画面にオーバーレイ、フィックスして、スクロールロック。いくつも開いてしまう自体を防ぐようにしました。カードの閉じるボタンとオーバーレイ部分をクリックで閉じるようにしました。
小学校教員20年以上。48歳から本格的にプログラミング、WEB制作のことを勉強しはじめました。2021年8月1日ウェブ制作・開発フリーランスWEBSONを開業しました。
くわしいプロフィールをご覧いただきありがとうございます。これまでの経験も含めて、コーディングをしていきたいという思いを感じていただければ嬉しいです。
大学卒業後、在日外国人のアイデンティティ育成を目的にした子ども会でスタッフ
大阪府公立小学校で講師 → 本採用
各学年の担任を経験しつつ、授業研究や人権教育の主担として、チームのマネジメントを担う
日本語指導担当となり、海外から編入してきた子どもの日本語や教科の指導にあたる。
学校全体の生活指導担当として、学校全体のマネジメントに係る
再度日本語指導となり、いくつかの学校を巡回指導したり、市内担当者のネットワーク運営などにとりくむ。 ２０２３年３月 退職予定。
教職員組合に加入して、青年部長、執行委員、会計委員、書記次長、書記長、執行委員長の役を経験しています。
2013年から3年間、教員を休職して、組合業務に従事する専従となる。このときに、ホワイトボード・ミーティング®やシステム思考のセミナーに参加して、組織運営やものごとの見方について学びを深めました。
参考
ホワイトボード・ミーティング®（株式会社ひとまち）
システム思考（チェンジ・エージェント）
ホワイトボード・ミーティング®については、研修を積んで、認定講師の資格を取得。学校、労働組合などにむけてファシリテーションセミナー講師もしています。
組合の役員経験の中で、教育委員会との折衝、組合員さんからの相談対応など経験しました。相手のことを十分に受け止めて、互いの合意点を探ることなどについて、深く考えることになりました。
これまでの業務の中で、ICTを生かしてできることはないかという発想で実現できたことを紹介します。
いろいろな分類ごとに集計が必要だったテストの集計業務に大きく時間が投下されていたのを見て、自動化できるようにアクセスデータベースを使って集計ソフトを作成。
学期の終わりの学年会計処理で苦労をしている人が多いのを見て、イレギュラーな処理をわかりやすくしたエクセルシートを作成し、学校全体で使用するようにしました。
毎日の出欠の集計業務に苦労をしている養護教諭の相談を受けました。OfficeScriptを使って毎日の出欠集計自動化のツールを作成して、現在も稼働中。
子どもの学習用サイト作成
プログラミング、タイピング練習のサイトを集めたリンク集（Gatsbyjs＋Airtavle)
いろいろな国のあいさつを練習できるサイト（Gatsbyjs+microCMS)
学習を開始したころに、40歳以上の人のオンラインコミュニティ、Over 40 Web Clubに加入しました。
ここでは、主にJavaScriptを中心に学ぶことになりました。Reactの基礎、その後、ReactベースのGatsbyjsについて学びはじめました。
コミュニティ主催で勉強会を開催、そこで4回ほど登壇させていただきました。テーマは次の通りです。
【実演】今話題のGatsbyでポートフォリオサイトをサクッとデプロイ学校、教職員組合では、ICT、ウェブ周りの技術を駆使して、いろいろな課題の解決にあたってきました。 これからは、その専門性を更に磨いて、より広範囲なクライアント様の課題を解決していきたいと考えています。
コーディング実績の一部をご紹介します。 サイトリンク先には一部Basic認証をかけています。IDとパスワードは共通で、ID:webson, PASS:webson-pass です。
小学校教員20年以上。48歳から本格的にプログラミング、WEB制作のことを勉強しはじめました。2021年8月1日ウェブ制作・開発フリーランスWEBSONを開業しました。
| 2020年1月 | とぎれとぎれだったプログラミング学習に復帰。 |
| 2020年3月〜 | Progate web開発パス、Railsチュートリアル完走、Isara模写完成 |
| 2021年2月〜 | Over40WebClub主催勉強会登壇（初学者が登壇することで学習内容をアウトプットする趣旨） |
| 2021年2月〜 | 教材紹介サイト（13ページ）HTML/CSS〜WordPress化案件、ウェブ制作事業LPコーディング案件納品 |
