本文までスキップする

お道具箱

ごあいさつ

はじめましての方も、こんにちはの方も、こんばんはの方も、どうもしょうみゆです。

お道具箱を使って頂きありがとうございます。

これは私がWebサイトのデザインをする時に、画像などの素材を集めたりカラーコードを調べるためにブックマークをあちこち探しに行くのがめんどくさいなぁとか、コーディングで前使ったCSSをテンプレート化したいなぁ、とか。

そんなことを考えていた時に、じゃあ効率化ツール作ればいいじゃん!っていう思いつきから出来ました。

丁度その時はPugだとか、FLOCSSによる設計とかモバイルファーストとか、アクセシビリティとかSEOとか、色々と学習していたタイミングでもあったので、その成果を見せようという意図もありました。

私が普段どんなコードを書いてるのか?どんなツールを使っているのか?これを作成するのと同時に、ポートフォリオに次ぐ実力の証明にもなるとも考えました。

結果的にちゃんとできたかといえば、きっとできる人から見たらまぁまぁのレベルなのかなと思うのですが、何事も初めてとはこんな感じだと思うので良しとさせてください!w

とくにFLOCSSでの設計なんかは、後々振り返るとひどいと思うかもしれませんが、そう思うときって成長している証なので、酷いコードだwと思えるときのために暖めておこうと思います。

このサイトの制作期間については後ほど触れますが、業務委託の仕事を4つくらい掛け持ちしながら制作したのでトータルで結構な時間がかかりました。

制作中にも新しい知識がどんどんインプットされていくので設計で不安定な部分もあるかもしれません。1ヶ月でできるものを3ヶ月でやったので期間が空いて思い出しながら作ったこともまた、、修正しなければならないコードがいくつかありますね(こんなCSSのルールもう使ってないわ!みたいな)

エンジニアとして自分が置かれている環境はとても良好で現在は実務でNuxt.jsをやっているので、このサイトもNuxtで作ればよかったなーとか思っているのですが、それはおいおい大型アップデートするか作りたいWEBアプリがあるのでそれで使用しようかなと思います!

お道具箱へのこだわり

ざっくりとこういうものを作りたいと考えていた時から、このサイトの名前は『お道具箱』にしようと決めていました。

みなさんはお道具箱と聞いたら小学生の頃を思い出しませんか?

三角定規やハサミやのりや、セロテープやホッチキス。何か作りたいとき、作業したい時に出てくるあのお道具箱。

このサイトはまさにそんな感覚でした。

親しみがあって、いつでも楽しく好きにデザインやコーディングがしたい。大人になっても子どもの頃の気持ちを忘れずに自由な発想で、何色にも偏らない。そんな遊び心あふれるサイトにしたいとずっと考えていました。

どうでしょうか?子供のころを思い出せましたか?

これは完全に私のための自己満足のサイトですが、誰かがこのサイトを使う時にも、同じような気持ちで使ってもらえたら嬉しいなぁと思います。

使用技術

このサイトでは下記の技術を使用して作成しています。
ブログなんかでちょいちょい発信していけたらと思います。

  • Pug
  • Sass
  • jQuery
  • FLOCSS

実装した機能

  • コピーボタンを押してクリップボードにコピー
  • ソースコード編集後のコピー
  • 非ページ遷移の子タブ
  • カードリストの高さ合わせ
  • スムーススクロール

実装予定、改善予定の機能

  • 非表示の子タブへのダイレクトリンク実装(サイトマップ)
  • 画像・アイコンページリンク先の商用利用可アイコン追加
  • サイト内検索

まだまだあるぅ〜〜

制作期間

仕事をしながら制作していたので着手からリリースまで3ヶ月くらいかかっているのですが、時間換算すれば1ヶ月くらいでしょうか。ざっくりとですが制作期間を時間で出してみました。

ちなみに、コーダー(エンジニア)歴でいうと1年くらいです。

情報設計

  • ペルソナ・コンセプト設計・制作目的の明確化:3時間

デザイン制作

  • ワイヤー制作(3種類):5時間
  • デザインカンプ(30P):56時間
  • サイトロゴ制作:3時間

追ってFigmaで公開します。

コンテンツ制作

  • 画像選定・テキストコンテンツ準備:8時間
  • ソースコード準備:4時間

コーディング

  • CSS設計:24時間
  • 共通パーツ(ヘッダー・ナビ・フッターサイトマップ)作成:20時間
  • コンポーネント(アイコン・カードリスト・タブ・子タブ・リンク・ボタン)作成:12時間
  • TOPページ作成:8時間
  • 子ページ作成(16P):16時間
  • 機能実装(『使用技術』参照):12時間

リリース

  • サーバ・ドメイン・SSL設定:1時間
  • テストアップ・検証:2時間
  • 画像圧縮・メタ情報・OGP設定・その他リリース準備:6時間

最後に

このサイトは私の持っているスキルが上がればどんどん更新されていく予定です。

みなさんにとっても、一緒に成長していけるツールとなりますように。

 しょうみゆ。