今年の4月から勤務時間を減らしたい旨を会社に相談したら、すんなりOKがでて最近は週3日会社に通うようにしています。
週3の勤務は私にはすごく合っていて、副業解禁と言われ始めた社会的なタイミングも含めても良かったと思います。
まだ2ヶ月ちょっとですが、私が感じてる事と現状をご紹介します。
“会社員（正社員）だけど週3で働くようになってみて” の続きを読む
会社員（正社員）だけど週3で働くようになってみて
Vue.jsを入門レベルを学ぶためにやったこと
ここ3ヶ月くらい気になっていたVue.jsを使うようになりました。
私はJSがそれほど得意ではないのですが、Veu.jsは日本語の情報も多くて、調べると結構情報が出てきます。
とはいえ、初めて使うあるあるだと思うのですが、何から手を付けていいかわからない問題に出くわすと思います。
手探りですが、どうやって私がVue.jsを覚えたかをご紹介します。
やった事
顔合わせするレベルで身近にVue.jsを触ってる人がいなかったもので、人に聞くことは基本的にしていません。
ネットで調べたことばかりです。
学んだサイトは書籍やサイトは以下になります。
ドットインストール
一番最初にやったことはドットインストールです。
あるかなーと思って調べたらVue.jsがあったので、すぐさま受講しました。
安心のクオリティですので、Vue.jsの触りの部分はすぐに理解できました。
応用みたいなのはやっぱりやって覚えないとって感じです。
Vue.jsの講座は一部有料ですが、一ヶ月980円で学べるのでコスパは良いです。
講座自体は短いので半日くらいで終わらせれます。
速習Vue.js 速習シリーズ
Kindleですので、自分のペースで戻ったり飛ばしたりして気になるところを中心に学びました。
ドットインストールの講座に比べ、幅が広く解説してあります。
プログラミングの書き方というより、学び方や調べ方が書いてあってその当たりが非常に役立ちました。
Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク
Vue.jsといえばNuxtというくらいの評判を聞いてこっちにも手を広げました。
未だにNuxtがなんなのかよくわかっていないのですが、Vue.jsでSPAを作るためのフレームワーク群というイメージです。
触ってみるとVue.js以上にややこしくて、理解するのに時間はかかりましたがこの本とこれまで学んだことの質がちょうどマッチしていて、調べたり何度か繰り返すうちに分かるようにはなりました。
実際にネットに公開されてるHTMLテンプレートを自分だけで、nuxtに組み込んむくらいはできるようになりました。
評判の良い本
私はまだ全部は読み切っていないのですが、フロントエンジニア界隈の人がべた褒めしてる本がこちらです。（これのおかげでハンズオンがしやすくなったという評判です。）
公式サイトを見て、「なるほど、わからん」ってなる人はこれを読むと中身が入ってきやすいくらいのでレベル感で書かれています。
本自体がそれなりに分厚いので、プログラムが苦手な人はちょっと最初から読むと大変かもしれませんが、機能ごとに丁寧に解説されてる（図解入り）ので、何度も読める・調べれる本でした（流し読みはしました）
書籍専用のサポートページもあります。
WordPressのテーマ「Snow monkey」の子テーマを作った
私が最近メインで使っているWordPressのテーマのSnow Monkeyの子テーマを作りました。
githubに公開していますので、ご興味のある方はお使いください。
在宅で始められる！Webデザイナで活躍する副業の始め方
Webデザイナのいいところって在宅でできて、初期投資も少なく始められることです。
私の周りでも主婦や会社員の中で副業始めたいという声をよく聞きます。
いろんな方に同じようなアドバイスをし続けて来たので、記事にしました。
今読んでくれてるあなたの参考になれば嬉しいです。
ユーザーの思考を見落としたデザインから見えてきたもの
ふとECサイトを見ていたら、ユーザーを誤解させるページを見つけました。
悪意があったり、ダサいからダメという類のデザインではなく、初心者が陥りやすい例かなと思いました。
また、小馴れたデザイナでも陥りやすい失敗だと思い、少し自分の中で考察してみました。
現役Webデザイナがオススメする大阪で学べるWebデザイナのスクールの紹介
私が大阪に住んでるのもあって、その学校の在学生や卒業生の話を聞く機会も多く、またどうやってスクールを選んで良いのかわからないという相談を時々うけますので、大阪エリアにあるwebデザイナ系のスクールをご紹介します。
現役Webデザイナが教える転職で使えるポートフォリオの作り方
Webデザイナーで活動しているとポートフォリオを求められる機会は結構ありますよね。
転職やふとしたお仕事の依頼など様々です。
私がポートフォリオを作る時考えた事を紹介します。
採用目線から見る未経験の人が最短でWebデザイナーになる方法
Webデザイナになりたいけど相談に載ってほしいという方が増えてきたので、現役webデザイナーからみたとにかく早くWebデザイナーになる方法をご紹介します。
“採用目線から見る未経験の人が最短でWebデザイナーになる方法” の続きを読む
Sketchでワイヤー/デザインテンプレートを作る時に便利なUIキット
SketchはUIデザインのツールですが、ワイヤーやモックを作ときも便利です。
簡単すぎて打ち合わせの中で画面を作りながら話をすることもあります。
やはりクライアントさんと話を進めるときは対面しながら同じものを見てやれると話が進めやすいです。
本記事では、ワイヤーを作るときに私が使っているテンプレートを幾つか紹介します。
UI系の素材
Atomic Design Template Sketch Resource

Atomic Designのワイヤーフレームテンプレートです。
Wireframe Kit for Atomic Design Sketch Resource

こちらもatomic designを意識したものですがUIパーツが豊富です。
こういうのを一つ持っておくと、便利です。
Mobile UI Wireframe Kit Sketch Resource

アプリなどで、画面のフローを考えるときに便利です。
最近プロトタイプも流行っているので、デザイナ/プログラマとのコミュニケーション、意識合せをするのによく使います。
有料で使いやすいもの
Sketchは色んな人がダウンロード出来るように無料でUIを公開しているのですが、有料のものもあります。
私も最初は無料のものばかり使っていたのですが、最近は有料のものを購入してそっちを使い続けてる事が多いです。
購入する場所
幾つかUIテンプレートを購入できるサイトはあるのですが、私はui8さんが気に入ってここで探して購入しています。
気に入ってる点は、価格が安い（5000円くらいで大体買える）ところと、人気のもの、新しいもの、セール中のものが簡単に探せるからです。
またカテゴリもUI Kitやワイヤーフレームなどに分けられていて必要なものが探しやすいからです。
singleton-2

LPなどに使えるテンプレートです。
ブログやEC系などジャンル別によく使うデザインが含まれているので、組み合わせでデザインに反映できます。
価格 $48
https://ui8.net/products/singleton-2
Frames Wireframe Kit

主にPC版になりますが、これ一つでクライアントとの打ち合わせがスムーズにいけます。
色んなレイアウトのデザインがあるのでこれに構成していくだけで、いい感じのページを作っていけます。
あと、有料の素材系の中ではめずらしく、$12と格安です。
価格:$12
https://ui8.net/products/frames-wireframe-kit
その他
Sketch Hunt Arrows and Lines Pack Sketch Resource

Phoenix Startup UI Kit Pro

こちらも、組み合わせでサイトが作れちゃう系ですが、これの凄いところはこのデザインのHTML/CSS/JSのテンプレートが含まれているところです。
Sketchで確認をとれたらすぐにコーディングの方でその組み合わせを反映してすぐに公開まで辿りつけます。
価格:$88
https://ui8.net/products/phoenix-startup-ui-kit-pro
最後に
Sketchは軽くて、使いやすいので様々な場面で活躍します。
デザインのテンプレートも豊富にあるので、デザイナがいないときでも組み合わせで素敵なデザインが出来上がります。
短縮できた時間はコンテンツやマーケティングを考えるのに使えるとよいですね(ゝω・)
Webサイトの請求書を出すときに気をつけている事
私は副業でWebデザイナーの仕事を2014年くらいからしています。
初めは友人や知り合いから受けていたのですが、SNSやポートフォリオを通じて、面識の無い方からもご依頼をうけるようになりました。
そこで悩んだのが、請求方法や項目の付け方でした。
当時周りに副業でWebデザイナをしてる人がいなかったので相談もできませんでしたが、自分なりにやりやすいと思っている方法を紹介します。
請求書に必要な最低限の項目
副業でも仕事をしたら、サービスの代金について請求書を作成して送付してます。
請求書は法人なら7年、個人事業主なら5年間は保存義務がある証憑（しょうひょう）書類の一つ。
税務調査が入ったときの証拠書類にもなりますので、無くさないようにしてください。（後ほど紹介ますが、私はクラウドに保存しています）
請求書に決まった書式はありませんが、国税庁のウェブサイトに「請求書等の記載事項や発行のしかた」として、以下の5項目は記載するよう勧めています。
- 書類作成者の氏名又は名称
- 取引年月日
- 取引内容
- 取引金額（税込み）
- 書類の交付を受ける事業者の氏名又は名称
これらの項目が記載されていれば、フォーマットは気にする必要はありません。
見積もりを出してからのポイント
請求書を作る時にまず１番気をつけてる事は、当たり前の事ですが見積もり時から金額が変わっていないかです。
ざっくり見積もりをだして、その後に相手からの想定以上の指示が来た場合は金額が膨れ上がります。
この金額を相手に伝えずに、作業を進めて最後に変更した金額を伝えると大体怒られるか驚かれます。
ですので、見積もり書を随時アップデートして、先方に共有していくのが重要です。
ですので、見積もりは口頭ではなく、書面はテキストなど後で見返せるものを使ったほうが良いです。
私は見積もりはスプレッドシートかMisoca（みそか）
を使っています。
支払期日、支払期日
納品が終わったあたりで、「請求いつにしましょー」ってクライアントさんに確認しています。
「納品月末締め・翌月払い」が多いですが、「納品月締め・翌々月末払い」の場合もあったりと会社によって違うので、必ず確認しています。
もちろん、月末など関係なくすぐ払っていただける方もいらっしゃるのでそういったところは私は大好きです。（支払いをもらうまでがお仕事です）
また支払い期日も必ず記載しましょう。
たまに振込を忘れてるかたがいらっしゃるので、支払い期日を記載しているとクライアントさんに指摘がし易いです。
また自分でもあれ？振り込まれてない？なんて事があっても気が付きやすいです。
※misocaだと請求書送った/振込済みなどステータス管理出来るのでそうしています。
未だにお会いしたことはないのですが、「支払日が書いてないんだから、いつ払ってもいいでしょ」みたいな人がいるかもしれませんのでそういった人の対策にも繋がります。
作業項目を明確にする
見積もりのときの項目とかぶるのですが、作業項目をある程度明確にしてお送りしています。
「Webサイト制作一式」とかにしてしまうと、何にお金を払ったのかが見えにくくなってしまうからです。
かと言って細かく書きすぎると請求書が複数枚になってしまいかねないので、備考欄に最終の見積もり書の内容を確認できるリンクを記載しています。
振込の手数料
振込で揉めそうになるのが手数料です。
これは結構頻度が高いのですが、何も言わないと振込手数料を差し引いた金額で振り込まれたりします。
請求書の備考欄には必ず「恐れ入りますが振込手数料はご負担をお願いします」と記載しています。
misocaで管理すると楽だった
これらの事を楽に管理するのに落ち着いたのはMisoca（みそか）でした。
Misocaは無料でも使えます。請求書の発行枚数に制限がありますが、副業であればそんなに超えることはないと思いますし、それだけ数が多いなら時間短縮のために月額の支払いをする価値はあります。
misocaでは見積もり/請求書発行を管理しています。
請求書をPDFだけでなく、URLでも送れるのでチャットでも送りやすくて重宝しています。
他にも、請求書を紙で送ってほしいというところにも対応していています（1通160円です）。
紙で送るって実は凄く面倒（プリンタで印刷して、封筒と切手を準備して宛名を書いて、ポストに入れる）というのを考えると、お金を払って終わるならそうしたほうが楽です。
またクラウドで請求書を管理しておくと、確定申告のときに素早く手を付けられます。
私は確定申告については、私はMFクラウドを使っています。
最後に
請求書とかお金周りってそれだけで利益を生み出すものではないのですが、時間は一定数かかります。
慣れてくると減らせるのですが、それでも時間短縮したい部分だと思います。
見積書/請求書は一つのところにまとめて置かないと、後々管理が大変になってくるのであなたも自分のやりやすい方法を見つけてくださいね(ゝω・)