traveler20のWEBサイト。
Home Page: https://github.com/traveler20/traveler20/projects/1
Hi there. 👋
| key | value |
|---|---|
| name | traveler20 |
| job | WEB Designer. WEB Developer. |
| place | Tokyo |
| Web site | traveler20.site |
Next.jsの勉強がてら、HTMLのNext.js化工程を再度見直す。
実際に工程を洗い出して、将来的にHTMLのNext.js化についての記事や書籍などを出されればと考え中。
CMSのテストで制作したHTML/CSS/JavaScriptのサイトを一旦整理する。
基本CMSの契約を続けるつもりもないので一旦GitHubのリポジトリで保存。
ただ、つくったサイトはそこそこちゃんとつくったのでポートフォリオに反映するなり実績として記録するなりはしたい。
リポジトリのコードを整理する
リポジトリ内のREADME.md執筆
TRA
Cafe
自身のプロフィール、名刺代わりのページをコーディングする。
現状WantedlyやGitHubなど自分のことを紹介するページがやや分散気味。
リンクツリーほど簡素だと導線がばらつくし、ポートフォリオサイトほど情報が多いと気軽に紹介するのが難しい。
ので、このちょうどいい情報量で自己紹介できるサイトをつくりたい。
ドメインはtravler20.site/profileを予定。
HTML/CSS/JavaScriptでコーディングするか、WordPressの固定ページで制作するかは検討中。
タイムライン的な年表はほしいかも。
メディア運営のコンセプトや構成自体は決まったので、より具体的な記事の構成などを書いていく。
かなり具体的なサイトマップ的なイメージで考える。
宅食サービス超特化ブログについては保留。まずは自サイトで運用して検証してみる。
traveler20.siteの大幅リファクタリング。
HTMLをEJS化させてWordPress化に便利なようにしていきたい。
#4 WordPress構築基礎テンプレートを作成後にすすめる。
自分用兼仕事用に（プチ）デザインシステムを構築していきたい。
UXHubを用いて管理する
かつGitHub等を使って変数の管理もしていきたい
個人制作・実務経験両方ともポートフォリオが雑多になりつつある今日このごろ。
いずれにしても整理していく。
WordPressに導入するプラグインを検証する。
本当に必要なプラグインと、一旦導入してテーマ化したい機能のプラグイン等をこのissuesで整理することが主な目的。
Contact Form 7
EWWW Image Optimizer
SiteGuard WP Plugin
ConoHa WING コントロールパネルプラグイン
ConoHa WING 自動キャッシュクリア
Yoast SEO
WP Multibyte Patch（文字化け対策）
TypeSquare Webfonts for ConoHa（使うタイミングがない）
WordPress インポートツール
記事複製
採用サイトをコーディングしてみたい。
一旦ゼロベースで制作して、採用サイトの戦略設計とかを考えたコーディングの経験を個人で積む。
そしてあわよくば既存案件にもつなげていこうと考案中…。
GitHubの機能を用いて開発関連のタスクをこちらで管理する。
現在制作中のWEBサイトの細かな調整はGitHub。
ざっくりとしたタスクについてはGoogle カレンダーで管理するイメージ。
積読しているLP制作マニュアルやその他について学習する。
アウトプット方法については別途issueにて取り上げる。
ブログハブ的なサイトのスタイルを調整したい
自分のサイトらしさ？みたいなものが薄いのを解消する。
というか、テンプレートそのままのスタイリングなので、それをどうにかしたい。
CSSのプロパティが最近汚くなりがちなので、それを解決するべくCSSComb等の導入を検討している。
ポートフォリオサイトの大幅リファクタリング。
HTMLがあまりに長すぎるので、templateタグとJavaScriptでAPI風に値を管理できるようにする。
JavaScriptで基本的な情報を一括で管理できるような状態。
https://github.com/traveler20/portfolio
https://traveler20.site/portfolio/
自身のサイトデザインの量を増やす兼、コンテンツの拡充として、課題用のHTML/Figmaを作成する。
まずは1サイトつくってみて、今後追加していく方針とか方法とか考えていく予定。
確定申告をはじめてすることになったので、もろもろ手続きを調べる。そしてタスク出す。
以下随時メモする。
マイナンバーカード発行
Freeeの登録
その他会計ソフトの比較
職歴書をGitHubで管理する。
既にあるやつだが、traveler20siteのプロフィールとしても運用していきたいと考えているので、その連携とかを考えてみる。
https://github.com/traveler20/traveler20/blob/main/JobDescription.md
時期としては一旦1月31日を予定。（就業から3ヶ月経過の区切りとして。）
プラグインで導入するのが一番手っ取り早いかも。
できれば自作したいが…。
一旦保留。
既存のgulp-starterにejsを導入する。
HTML版と分けるかは検討中。
HTMLをテンプレート化させて運用・保守しやすくする。
現状 kokopp.traveler.site/wp/ という仮でWordPressを構築しているが、それを本サイトである traveler20.site へ移行する。
基礎的なWordPressテーマの作成が終えた段階で実施予定。
記事ページの更新・下書き保存・投稿すべて不具合が生じる…。
WordPressテーマとして最低限必要な機能を構築し、スクラッチ開発に対応できるようにする。
必要な機能を随時GitHubのタスク管理として更新する。
一旦タスク一覧をこのprojectに記載していくことがこのタスクのゴール…。
kokoppのサイトのラフを一旦コーディングしてみる。
WordPress化・Next.js化などは未定のため、一旦HTML/CSS/JavaScriptでフロントエンドのみでコーディングして技術選定等考える。
Twitter・ブログ名義でのポートフォリオサイトを構築し、WEBデザイン業務の集客につなげる。
ポートフォリオサイトとはいうものの、実際の工程を踏みつつその工程がクライアントにも問い合わせ前に提示できるよう設計。
ちょっとそのあたり細かいところ全部コミコミでポートフォリオの設計とデザインを進める。
GSAPを用いた横スクロール型のギャラリーサイトの基盤をコーディングする。
イメージとしては小洒落たポートフォリオサイト的な感じ。
スクロールに合わせたエフェクトとかも導入予定。
今後追加予定。
作品内容をWordPressに追加していく段階でタスクを切る。
WordPress サイトを移行した際にいろいろと不具合が起こる。
なんとかする。
gulpだといろいろと難儀することが多いかもなので、webpackでコーディングすることを検討する。
機能的には、現gulp-starterの機能に加えてCSSCombとかJS周りのいろいろとかを調整できればなと考えている。
link：https://github.com/traveler20/webpack-starter
軽くWEBサイトをコーディングするには難しすぎるかもしれない。
ので、フロントエンドの学習をある程度終えた段階で再度学習してみることを検討している…。
Next.jsの振り返り兼、ヘッドレスCMSの構築練習としてMicroCMSを構築してみる。
本業で学んだコンサル的視点やフレームワークを自分なりに落とし込みZennにまとめる。
デザイン工程の体系化
それによるWEBサイト構築・提案のスキル向上
Zennに投稿。以上。（クリック率とかは考えない）
�# 概要
Lib SassでコーディングしているページをDart Sass版にリファクタリングしたい。
Hotjarをtraveler20.siteで試しに運用してみる。
2022年の予定や取り組んでいきたい内容についてissuesとして分解。
タスクを整理しながら、2022年の目標や長期的な目標についても触れることを目的とする。
ここ数年の長期目標と2022年の中期目標を設定。
タスクを整理して、直近3ヶ月くらいの予定や取り組むことは確立させる。
既存サイトNext.jsブログサイトを自分用にリニューアルする。
ポートフォリオにするか、メディアサイトにするかは未定。
正直そこまで需要はない。
このタスクを切っている段階のモチベーションは完全に「勉強してみたい」という意欲のみ。
必要になればこのタスクの優先度は上がるので、その際は更新する。
工程としては以上。
テストや微妙に必要な工程があれば都度タスクを追加する。
今後必要に応じて追加予定。
Next.js化させるサイトのHTML/CSS/JavaScriptコーディング。
メディアサイト風に仕上げることを前提に進めるので、ある程度ページ数が必要かも。
書籍等でサイトリニューアル・改善関連のキャッチアップを行う。
まずは書籍の内容をざっとメモしてFigmaスライドなどでアウトプットまでを考え中。
（Figmaスライドについては別途issue立てるかも。）
LPのリニューアルや改修を行ったり、アクセス解析を行っているが、具体的にどこを見てどう改善につなげていくかが曖昧。
具体的にサイトを分析し改善する提案につなげる。
自分のサイトの売上が芳しくない。
改善するためにコンテンツを絞って特化しつつ、質の高いコンテンツを増やしていきたい。
具体的にどうリニューアルして改善するかの視点や施策を考えるネタとして。
サイトをリニューアルするうえの視点・行動をタスクとして持つ
自分のサイトのリニューアルを実施する。
https://github.com/traveler20/template
軽めのLPをコーディングして、そのLPを試しにNext.js化させてみる。
フロントエンド周りのキャッチアップ。
LPをつくるにしてもこのほうが管理しやすいのであれば今後の運用方法の1つとして検証してみようかなと。
https://github.com/traveler20/wp
WordPressをスクラッチで開発する際にスムーズに行えるようなテンプレートファイル。
必要最低限の情報？
traveler20siteがある程度落ち着いた段階でスタート。
traveler20siteの更新作業とともに平行する予定。
一旦WordPress制作を一通り終えてHTMLファイルのWordPress化の工程を再度見直す。
HTMLのWordPress化をスムーズに実装できるようにしたい。
無駄な工程がどこにあったか、どういう方法が最適かなどを中心に見直す。
HTMLのWordPress化で参考にしたリンクや自分のメモをコメント等で残していこう。
WordPress のテーマ作成の際に必要な機能が多く、なかなかテーマが完成しないので優秀なプラグインで一旦短縮化させようと検証したい。
あくまで一旦Yoast SEOでまかなうだけで、長期的には自分でテーマに搭載したいとは考えている…。
投稿ページ・固定ページの内容を改めて刷新する。
Companyページは保留…。
Profileページは別途デザインするので情報のみ。
WordPressの基本情報とかをまとめる。
ライセンスとかいろいろ。
ライセンスは保留？
functions.phpは一旦ざっとつくって次に行く。
投稿ページが更新しやすいようにリニューアルしつつ、デザインも少し改善する。
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
