2019年5月17日・18日の二日間、今年も半年に一度の「a-blog cms Training Camp 2019 Spring」に参加してきました。

https://ablogcms.doorkeeper.jp/events/87478/

前回は東京での開催となりましたが、今年の春はいつもの国際センターとベースキャンプ名古屋が会場です。
参加するともらえる、公式Tシャツも新しくなったので早速二日目に着ました。

一週間遅れになりましたが、イベントの主な内容と、最近のa-blog cmsコミュニティの動向をレポートします。

a-blog cms awards 2019授賞式

今回のCampの最大の見どころは「a-blog cms awards 2019」の結果発表でした。
a-blog cmsの公開事例をレポートも含め募集する、という、これまでにない本格的な公募企画です。a-blog cmsに限らず、CMSの構築を仕事にしている方なら参考になる事例集サイトにもなりました。ぜひ、サイトを見てみてください。

https://www.a-blogcms.jp/awards/

受賞した4サイトの雑感としては以下です。

• ウェブマガジン運営のお手本・総合力のペコマガ
• 高度なデザインのCMS化・マーケティング連動の家計画
• テーマの効率化・更新担当者の快適さを追求したヤマハナ
• 位置情報・実験的な機能を積極採用した東大阪ガイド

影響？

この企画があった影響なのか、イベントの「ユーザー発表」の内容がいつもと大きく変わりました。
いつもは最新事例の紹介が中心ですが、新しい技術を試した実験的なレポートや、a-blog cmsを使い始めて三ヶ月の感想など、未来を見ている発表が多かったです。こんな事ができるのか…！という驚きも多く、活気があるCampになったと感じます。

リーグラフィさん

リーグラフィの水越さん

私は「いえズーム」で応募しましたが見事に落選しました。全力でレポートを書いただけに悔しくて商品のiPad Proを自腹で買ってしまったくらいです。

https://www.a-blogcms.jp/awards/case/iezoom.html

ですが、同じ札幌のリーグラフィさんがデザイン賞を受賞したのはとてもうれしいことでした。
リーグラフィの水越さんと平澤さんは、CSS Nite in Sapporoのサイトを共同運営していることもあり、だいぶ前からa-blog cmsの勉強会や協業を通して情報交換をしています。

今回、リーグラフィさんがawardsにたくさん素晴らしい事例を応募したので、いろいろな事情で勉強会の維持が難しい北海道のウェブ業界でも、検索などを通して注目してもらえるだろう、と願っています。

すずきカレーさん

ユーザビリティ賞を受賞した「リフォームのヤマハナ」を制作したのは愛知県の制作会社、ルーコの鈴木（すずきカレー）さんです。
汎用テーマを使用しているので一見オーソドックスですが、その裏側はCMS構築をしている人なら驚くような気配りにあふれています。「a-blog cmsは、PHPを書かずに高度な管理画面のカスタマイズが可能である」という事例でもあります。

鈴木さんは、かなりの古参ユーザーです。a-blog cmsに関する有用な記事を多数公開し、フォーラムでの投稿数もダントツで多いです。…が、非常に謙虚な人で、いつも申し訳なさそうにしていて、目立とうとしません。
先日、鈴木さんのインタビューが公開されましたが、やっぱり自分のことを「パワー控えめ」と言っています。awards受賞で、すずきカレーさんがもっと注目されればいいなあと思っています。

「 a-blog cms がクライアントの架け橋に。」”パワー控えめ”でも確かなスキルと信頼関係を築ける | ユーザーインタビュー

ユーザー発表の感想

非常に多くの発表があったので、一部の感想のみ書きます。すみません。

Ver.2.10について（アップルップル伊藤さん）

新しいメディア機能について
・画像・ファイルの一元管理
・画像編集機能
・SVG対応
・ファイルデータの公開ステータス
・Media_Bannerの追加 #acmscamp pic.twitter.com/mqDZzL9aYc

— 森田かすみ (@KasumiMorita) 2019年5月17日

a-blog cmsは、アップデートが活発なCMSです。伊藤さんによる最新バージョンの紹介を毎回楽しみにしています。   2.9系までは新機能の追加が多かったのですが、2.10は根幹に関わる既存機能の見直しが行われました。

• メディア機能の拡張
• 管理画面スタイルシートの改良
• サブカテゴリーの追加
• コンフィグセットの追加（コンフィグの使い回しが可能に）

私は既にいくつかのサイトを2.10にアップデートしていますが、これだけの変更をして、テーマへの影響が最小限だったのがすごいです。

メディア機能は、WordPressと遜色ない機能になりました。伊藤さんのスライドを抜粋すると以下のとおりです。

• 画像・ファイルの一元管理
• メディア機能画面で画像の編集が可能になった
• トリミングの際に被写体を指定できる
• SVGに対応
• ファイルに公開ステータスを追加
• メディアを使うMedia_Bannerモジュールの追加

ただし、既存の画像ユニットからメディアユニットへの移行は工数がかかるし、両方を混在させると混乱のもとになるので、必ずしも採用しなくても良い、新規案件ならアリかも、といった話をされていました。

ここぞというときに使えるCSVインポート（ヘルツ筒井さん）

筒井さんの発表は、a-blog cmsのCSVインポートの事例と、活用する利点についてでした。
a-blog cmsはCSVインポート機能を標準で搭載しています。もちろん、プラグインは不要です！カスタムフィールドはもちろん、テキストやマークダウンであれば、ユニットとして移行することもできます。

他のCMSで運用されていた、コンテンツが多いサイトの移行の際は、CSVインポートが活躍します。また、新規追加だけでなく更新も可能なので、カスタムフィールドをスプレッドシートで編集して一気に書き換えるということもできます。

カスタムフィールドのデータを表敬式でPDFに書き出す方法（SUZULABO太田さん）

まったく知らなかったのですが、テキスト形式でデータを送ると、クライアントサイドでPDFを生成するスクリプトがあるのだそうです。

クライアントサイドでPDFを生成できる「pdfmake」を使ってみる ｜ Tips Note by TAM

この「pdfmake」のデータをa-blog cmsのカスタムフィールドで生成して、表形式のPDFにして返すという事例の発表でした。
複雑な会員情報や食品のアレルギー情報の提供などをするコンテンツに大いに使えそうな技術で、久しぶりに何か理由をつけて実装してみたくなる発表でした。

a-blog cmsの初心者向けコンテンツを整備してる話（アップルップル井斉さん）

開発元の一番若い社員さんは、二年目の井斉さんと菅原さんです。今回は井斉さんの発表について書こうと思います。

井斉さんはこの一年間、a-blog cms関連の初心者が見るコンテンツの整備を進めていました。アップルップルに入社して、自分が学習をはじめたときに、チュートリアルのページ構成がわかりにくかったことがきっかけだったそうです。

• チュートリアルの作成
• blog2019テーマデザイン
• メールマガジンの作成
• 製品紹介動画の作成

プログラミング的思考に慣れていたり、他のCMSで豊富な構築経験があると、ちょっとくらい、文章の流れがずれていても理解できるようになります。また、書く側も反復学習とか文章の構造にに視点をおいて書くようになります。
ですが、そういう補完ができない初心者には、初心者向けの文書構造を考える必要があるのです。そういった、初心者の目線をまだ覚えている人にしかできない施策を説明されていました。

製品紹介動画は、すべてAdobe XDのアニメーションで作ったもので、ナレーションも井斉さん自身が声を当てている力作です。

もうひとりの菅原さんの発表も、すずきカレーさんの管理画面カスタマイズの基礎を解説した内容なので、a-blog cmsがこれからな人は見てほしいです。

私の1年間とa-blog cmsだからできる簡単UI対応 - Speaker Deck

グループワーク「a-blog cms川柳」

Campでは、毎回適当に班決めをして行う、グループワークがあります。昨年春はクイズ、昨年秋はかるた大会で、今年はどうなるのかと思ったら「川柳」でした。

限られた文字数で意味が通る文章にして、かつ、ウケを狙うというのはけっこう難しいです。私と、大阪のエバンジェリストの坂本さんがいる班ではこうなりました。３つのうち２つが内輪ネタです。

.@tamshow_ #ablogcms #acmscamp pic.twitter.com/HupuACpSbo

— うぇびんさん (@webbingstudio) 2019年5月17日

「田村しか 使っていない レイアウト」
だけだと、ワクグミの田村さんをdisっているようにしか見えませんが、レイアウト機能は新規作成の工数が高すぎて、頻繁に使用している田村さんしか有効活用できていないので、他のCMSのウィジェットのような、もっとシンプルな機能にしてほしいという要望が込められています。
私個人は、サイトの根幹に関わる設定が、エクスポートしにくいデータベース依存になってしまうという懸念もあります。

内輪ネタって、コミュニティの信頼関係を伝えるものでもありますが、躊躇います。初心者が多いWordPressコミュニティでは、よく「内輪ネタが多すぎてひく」という感想があって悩んだりしていると聞きます。私と坂本さんは、同じ班のはじめて参加した人たちに言葉の整理をしてもらったり、川柳に出てきた人のことを紹介したりしていました。

なお優勝は「その機能 有償ならば できますよ？」でした…
大規模案件あるあるですね…

私にとってのCamp

川邉さんの描く、謎のユルいイラストのファンです

今回は、関わっている人たちを軸にCampのレポートを書きました。ああまた長くなった。4時間もかかっています。

私が半年に一度、遠方から参加している理由は、もちろん最新情報を得るためでもありますが、私の精神的健康のためです。私が日々自宅から配信していることが、他のユーザーに届いていることを確認するのが目的になりつつあるのです。

金沢の15VISIONのデザイナー、川邉さんはウェブ制作だけでなく、商業漫画、イラスト、動画、最近はPythonにまで手を出しはじめている人です。
ですが、私について「うぇびんさんは、金沢でa-blog cmsの勉強会があることをTwitterで教えてくれて、それがきっかけでa-blog cmsに出会って、15VISIONに入った」と言います。川邉さんの最近のスキルを見るにつけ恐縮してしまいます。

それでも、こうして私が札幌でコツコツa-blog cmsの情報共有を続けていることが、日本の誰かに届いているというのはうれしくもありますし、今後も続けると思います。今回も「Twitterでa-blog cms関係のツイートを見ていたら悟空みたいにワクワクしてきた！」と言って参加された方がいました。

a-blog cmsはもうすぐ、リリース10年になります。既に国内のCMSでは屈指の機能とコミュニティを有している、安定したCMSになりました。
興味がありましたら次は8月くらいになりそうですが、札幌のCMS Mix「a-blog cmsの回」に来てください。
次回のa-blog cms Traning Campは11月ですよ！

年に二、三回、初学者向けのHTML・CSS講座の講師をしています。対象は社会人ですから、生徒のほとんどは新人研修の一環で派遣されてきたか、企業のウェブ担をすることになった人たちです。

短い日程では、最低限のウェブサイトを作成するところまでを教えるまでが精一杯ですから、2019年の時点で学んでほしいこと、知ってほしいことを資料にまとめて終了後に渡しました。
許可を頂いたので、その資料の内容を記事として公開します。

理解しやすい表現を優先しているので、もやもやを感じる方もいるかもしれません。その場合はぜひ、補足記事などを書いて教えてくださるとありがたいです。

わかりやすいCSS設計

divでモジュール化しよう

ウェブサイトはページ内で、ナビゲーション、リスト、記事、写真ギャラリーなどの、多くの部品に分かれています。

HTML・CSSコーディングでは、これらの部品を「モジュール」と定義して、部品ごとにdivで囲んでクラス名をつける手法が主流となっています。
この手法で制作すると、二回目以降のサイト制作で部品を切り離して使いまわしたり、修正や間違いがあったときに編集しやすくなります。

<div class="sample">
    <h2 class="sample-title">サンプルモジュールのタイトルです</h2>
    <div class="sample-contents">
        <p>サンプルモジュールの本文です</p>
        <p>サンプルモジュールの本文です</p>
    </div><!-- /.sample-contents -->
    <p class="sample-link"><a href="more.html">詳しくはこちら</a></p>
</div><!-- /.sample -->

classの付け方

このとき、ほぼすべてのモジュールは「id」ではなく「class」で管理するのが望ましいとされています。idで定義したCSSは優先度が高くなり、編集や上書きがしにくくなるためです。
また「モジュール名＋ハイフン＋パーツ名」と、ハイフンつなぎで記述するのが一般的です。

※大規模サイトでは、アンダーバーを含む高度な記述が採用されることもあります（BEMと呼ばれています）。

以下の例の通り、階層もできるだけ浅くして定義するのが、最近の主流となっています。

.sample {
  ...
}

.sample-title {
  ...
}

.sample-contents {
  ...
}

.sample-contents p {
  ...
}

.sample-link {
  ...
}

.sample-link a {
  ...
}

見出しは要素名で定義しない

「.sample-title」クラスに注目してください。「.sample h2」と書いてもよいはずですが、クラスを作成しています。
これはマークアップの都合や他のサイトへの使い回しで、見出しがh2要素ではなくなったときに、修正が発生しないようにしているのです。

見出しレベルはコンテンツによって変動するので、見出しは要素名で定義しない方が柔軟な設計ができます。

モバイル対応

なぜモバイルに対応する必要があるのか？

スマートフォンが登場した2008年以降、スマートフォンでウェブサイトへ訪問する割合は非常に高くなっています。
幅が狭いモバイル端末での読みやすさに配慮するのはもちろんのことですが、検索エンジン最大手のGoogleが、「モバイル端末に対応していないと判断したウェブサイトの検索結果での評価を下げる※」ことを公表しているため、2019年現在では、ほぼすべてのウェブサイトのモバイル対応が必須となっています。

※デスクトップ専用サイトとして判定するため、モバイル環境においての順位判定に影響する、という意味です。モバイル対応さえしていればコンテンツがめちゃくちゃでも良い、という意味ではありません。

モバイル対応ではないと判定される主な基準

• モバイル端末の画面幅でコンテンツが画面からはみ出す
• リンクボタンのクリックできる範囲が小さい
• リンクボタン同士が近すぎる
• 表示速度が遅い

最低限行いたいこと

「ウィンドウの幅を縮めたときに、下にスクロールバーが出ないよう制作する」のが最低限の対応となります。
以下の工夫で、コーディングの知識が浅くてもモバイル対応は可能です。

• widthではなく、max-widthで幅を指定する
• 画像に「max-width: 100%;」「height: auto;」を指定する（画面サイズに合わせて伸縮するようになります）
• table等の、幅の扱いが難しい要素の使用を避ける

レスポンシブウェブデザインとは

表示している端末に応じてレイアウトを変更させるウェブデザインの手法は、「レスポンシブウェブデザイン（RWD）」と呼ばれています。 画面サイズを条件として適用するCSSを変更する「メディアクエリ」という手法を活用します。

メディアクエリの使い方

これは、画面サイズが768ピクセル（タブレット縦持ち）以上のときに、見出しのサイズを24ピクセル、かつ中央寄せにする例です。
スマートフォンでは基本値の18ピクセルとなります。

※一般にはfont-sizeの単位はem・remを使用することが多いですが、初学者には概念の理解が難しいので、サンプルはピクセルとしています

h2 {
  font-size: 18px;
}
        
@media (min-width: 768px) {
  h2 {
    font-size: 24px;
    text-align: center;
  }
}

モバイルファースト

上の例の通り、スマートフォンのCSSを定義してから、タブレットのとき、デスクトップのとき、と上書きしていく方が制作がしやすいです。また、シンプルな画面から作りはじめることで、無駄のない設計ができます。
この考え方は「モバイルファースト」と呼ばれています。

古いデザインのサイトが減っている理由

15年ほど前まで、ページ全体のレイアウトはtable要素（巨大な表）や、フレームセットと呼ばれる、画面を分割する技術で作られていました。古いブラウザがCSSを正しく解釈できなかったため、安定して表示できるこれらの技術は広く普及していました。

table要素で作ったサイトは幅が固定されているので、小さな画面で適切に表示できません。このためここ数年はリニューアルが盛んに行われ、それに伴って、古いデザインのサイトは消えつつあります。

俳優の阿部寛さんのウェブサイトは、当時の技術で作られたHTMLを現在も更新し続けており、「貴重な技術遺産」と呼ばれています。興味がある人はソースコードをのぞいてみてください。

http://abehiroshi.la.coocan.jp/

エディタ

Sublime Text公式サイト

ウェブ制作向けのエディタ

講座では、今後の講座との関係で「統合開発環境」と呼ばれるアプリケーションを使用することがあります。ですが、ウェブ制作のみを行っている技術者は、もっとシンプルな「テキストエディタ」と呼ばれるアプリケーションを使用しています。

テキストエディタと統合開発環境の違い

動作が軽い

機能が少ないため起動が早く、動作が軽いです。

コード編集を補助する機能

コードを早く編集することに特化したアプリケーションなので、同じ単語を選択して一度に編集したり、画面を文字単位ではなく長方形に選択したりできます。

テンプレート機能がない

どのプログラム言語のファイルを作成するのかを選ぶと、自動でひな形を作成する機能はありません。ある程度コーディングに慣れている必要があります。

内部サーバーを作る機能がない

プログラムをその場で実行するための、内部サーバーを立ち上げる機能がありません。

※拡張機能を追加するとできるようになるエディタもあります

代表的なエディタ

ウェブ制作者が使用している代表的なエディタです。初心者にとっては、各エディタの違いはあまりありません。どれも無償で提供されているので、好みで選んでください。

Sublime Text

https://www.sublimetext.com/

コーディング向けエディタの先駆けとなったアプリです。便利な機能を早い段階から備え、愛用者の間では「恋するエディタ」とまで呼ばれています。有志が作成した拡張機能も多いです。

Atom

https://atom.io/

コード共有サービス「GitHub」が提供するエディタです。「ハックできるエディタ」と呼ばれ、CSSやJavaScriptなどの、ウェブ制作者が知っている技術でカスタマイズできます。
外観を細かく変更でき、視覚、色覚に障害がある人にも向いています。

Brackets

http://brackets.io/

画像加工ソフト「PhotoShop」を販売しているAdobeが提供するエディタです。ファイルを更新するとChromeが自動的に更新されるライブプレビュー、カラーコードを書くとその場で色を確認できるなど、デザインを同時に扱う人に優しい機能があります。 日本語のガイドブックは札幌のエンジニアが書いています。Kindleで無料で読むことができます。

https://www.amazon.co.jp/dp/B019SPFHX2/ref=cm_sw_r_tw_dp_U_x_Aj1SCb3QGFG0M

ウェブフォント

Google Fonts公式サイト

CSSの「フォント」の授業で、font-familyで使用できるのは、OSに入っているフォントだけと説明しました。
ですが近年では、サーバー内に設置したフォントファイルを読み込んで利用できる「ウェブフォント」という技術が開発されています。
自分でフォントファイルをサーバーに設置する方法もありますが、ここでは簡単に利用できるフォントサービスを通した使い方を紹介します。

ウェブフォントの利点

• OSを問わず同じフォントを表示することができる
• 文章をコピーできる
• 画面を拡大してもぼやけない
• CSSで色や大きさを調整できる
• 簡単に修正できる（画像ロゴだとHTMLでは修正できません）

代表的なフォントサービス

Google Fonts

https://fonts.google.com/

やや表示が遅いですが、無料で使用できます。学習におすすめです。

FONTPLUS

https://webfont.fontplus.jp/

ソフトバンクが提供しています。多彩なフォント会社の文字を提供しており、ブラウザ上での試し書きもできます。

Adobe Fonts

https://fonts.adobe.com/?locale=ja-JP

Adobeが提供しています。PhotoShopなどの同社のパッケージを契約していると同時に使用できます。

TypeSquare

http://typesquare.com/special/

モリサワが提供しています。人気が高いモリサワのフォントをほぼ全て利用できます。

ウェブフォントの使い方

head要素にタグを貼り付ける

サービス側が提供しているコード（scriptタグ）を、head要素内に貼り付けます。全ページに貼り付けてください。
また、サービスに記載されている、使用することにしたフォントの正確な名前をコピーしておいてください。

CSSにフォント名を書く

フォント名を、font-familyプロパティでCSSに記述します。

以下の例では、h1要素とh2要素が「筑紫Aオールド明朝」になります。万一フォントが読み込めなかったときのために、OS用のフォントも記述しておきましょう。

h1, h2 {
  font-family: "FOT-筑紫Aオールド明朝 Pr6N B", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

学習のコツ

技術書選び

HTMLとCSSの技術書は、初学者のうちは一冊は読んでおくことをお勧めします。
Amazonで「HTML CSS」と検索したときに、三年以内に出版されて評価が高い本は、どれも間違いはありません。

※ウェブ制作者は嘘のレビューを書きません。正しい情報を提供することの大切さを仕事を通して知っているからです。

レビューには「まったくの初心者向け」か「ある程度HTMLとCSSが書ける人向け」かが書かれていますから、よく読んで自分に合いそうな本を選びましょう。

コピペと写経

まず、便利そうなHTMLやCSSのサンプルを見つけたら、どんどん自分のサイトにコピー・ペーストしましょう。効果や役割を理解できたら、属性値などを手で書き直してみてください。
正しいコードを書いていくうちに、早くて正しいコーディングが身についていきます。

また、よほど急ぐ仕事でない限りは、次に作るサイトに使い回すことを想定してコードを書きましょう。

SNSの活用

手軽な情報収集には、やはりTwitterがおすすめです。「ウェブデザイナー」「コーダー」「フロントエンドエンジニア」などをプロフィールに記載している、フォロワーが数百人以上の人たちをフォローしてみましょう。

皆さん普段は雑談が多いですが、たまに有名な技術者のブログ記事や、勉強会の様子をツイートすることがあります。それらをたどって、ブログの著者や、勉強会の主催者をフォローして、さらに正しい情報を集めていきましょう。

情報を得るだけではなく、自分自身も学習したこと、読んだ記事をメモ代わりにどんどんアウトプットしていくようにしましょう。

ウェブ系の勉強会へ行こう

「初心者向け」と書いてある勉強会や、講師がたくさん出演するセミナーイベントを見つけたら、参加してみましょう。

もしかすると内容が難しすぎるかもしれません。それでも、新しい目標を得たり、高い技術を持つ人との出会いにつながるかもしれません。

参加する際は、以下に注意しましょう。

メモを取る

紙でもノートパソコンでもいいので書き残しましょう。

Twitterのハッシュタグをチェックする

スマホがあれば。アカウントがなくても見られます。参加者や他の講師が「副音声」として、便利な補足情報や自分の仕事での使い方をツイートしていることがあります。

スーツではなく平服で参加する

スーツの人はちょっと話しかけづらいのです。懇親会のときも移動しづらいです。

名刺を持参する

どんな仕事をしているかの情報交換を忘れずに！

地方勉強会

東京から遠くても、活発な勉強会がある地域は多いです。地元の大きな都市で勉強会がないか調べてみてください。

札幌では「SaCSS（サックス）」というウェブ系の勉強会が、長年に渡って開催されています。先日、10周年を迎えました。
札幌で最前線で活躍するウェブ制作者に気軽に会うことができるので、北海道の方はウェブ制作に慣れてきたらぜひ参加してみてください。

https://sacss.net/

まとめ

資料の内容は以上です。

ウェブ制作では「キーワード」を知るだけで、その言葉で検索して解決できることは多いです。この資料で太字になっている箇所がそのキーワードです。検索するときは、必ず検索オプションで「一年以内」でも調べてください。新しい情報が出ている可能性もあります。

jQueryは！？と思った人が多いかもしれません。jQueryについては以下の理由で割愛しました。

• 会社勤務であれば、当面先輩が担当することになる
• JavaScriptのクエリセレクタとの境界が曖昧になってきている
• HTMLとCSSを学習すると自然にたどり着く

私が独学でウェブ制作を学習した2003年頃は、正しい技術書も少なく、SNSもブログも存在しておらず、ずいぶん苦労した記憶があります。 この記事が、なにから手を付けてよいかわからなくなった初学者の助けになれば幸いです。

電卓は使わないです

本年度分の確定申告も、今日、3月15日で締切となります。

開業してから11回、確定申告を経験してきました。経理の実務経験があるため、確定申告は毎年自分でやっています。
年によっては最終日の午後になったり、間に合わずに税理士さんに依頼したこともありますが、ここ数年は会計ソフトがとても使いやすくなっただけでなく「確定申告を楽にするためのコツ」のようなものを会得しており、あまり焦らなくなりました。

フリーランスになったばかりの人や、何年やっても苦痛だと思っている人のために、そのコツをご紹介します。
なお、あくまで個人事業主向けの知見です。法人には、かなり雑なものであることをお断りしておきます。

毎月経費を記帳しなくていい

世の中には、自己管理能力がひじょうに高い人たちがいます。そういう人たちは決まって「経費は毎月記帳している」「毎月やっておけばあとで慌てないですむのに」と言ってきます。
これは正論ですが間違いです。

順調に進むのは、自己管理能力がひじょうに高い人たちが、確実に記帳しているからです。むしろ、スキルが低い人が中途半端に帳簿をつけてしまうと、何ヶ月も経ってから金額のズレが出て、原因がどこかを探すのに手間取ってしまうことになります。
毎月お金の流れを確実に把握していないと震えるとかではないなら、年が明けてから一年分の取引を経費科目ごとに一気に入力してしまった方が早いですし、間違いを発見しやすいです。

同期・自動取り込みが使える銀行にする

私自身の経験では、やよいの青色申告オンラインが「スマート取引取込」に対応した二年前から、確定申告にかかる日数が大幅に減りました。freeeでは「同期」と呼ばれている機能です。

事業用の口座は当然持っていると思いますが、自動取り込みに対応している銀行に変更することを強くお勧めしたいです。そのくらい楽になります。手数料の関係で取引先に難色を示されるから…などの事情がある場合は、入金専用口座にして、細かい出金を別の銀行にする手もあります。

経費はスプレッドシートで作ってインポートする

freeeとやよいの青色申告オンラインは、弥生会計形式のCSVインポートに対応しています。それ以外のサービスは確認していません。すみません。

その他の会計ソフトから仕訳データを移行する（弥生会計形式を用いた方法） – freee ヘルプセンター

［弥生データのインポート］メニュー

消耗品費、水道光熱費、接待交際費などの現金の経費は件数が多く、会計ソフトに一件ずつ入力していくとかなりの手数がかかりますが、Excelなどのスプレッドシートで一気に金額と日付を打ち込んでいき、弥生会計形式に整えてインポートすると、大量の仕訳をスムーズに取り込むことができます。
片手入力ができる、消費税の計算に関数を使用できる、同じ金額の仕訳をコピーで増殖できるなど、スプレッドシートの機能を活かしたいところです。

私が実際に毎年使っているひな形を置いておきます。もちろんGoogleスプレッドシートも使用できますが、文字コードをShift_JISに変換してからインポートしてください。

やよいの青色申告オンライン対応CSVインポートひな形

レシートの写真を撮ると…

ここまで読むと気付くかと思いますが、freeeのアプリなどが搭載している「レシートの写真を撮ると仕訳が記録できる！」という機能は、年度末にまとめて仕訳するフローの場合は、全然便利にも早くもなりません。
あれは冒頭で触れた、まめに帳簿をつけられる「自己管理能力がひじょうに高い人たち」のためのものです。間違っても一般の人は手を出さないようにしましょう。

交通系ICカードは同じ金額をチャージする

フリーランスの経理取引で一番面倒なものが、旅費交通費です。ほとんどの人は、Suicaなどの交通系ICカードを持っていると思います。
これにチャージするときに、毎回同額でチャージするようにします。金額を揃えておくと仕訳が異常に楽になります。クレジットカードでの自動チャージにすることが考えられますが、クレジットカード払いは仕訳が複雑になったり、支払いが年またぎになったりするので、会計ソフトに自動で取り込めないカードの場合は現金で統一したほうが良いでしょう。

簡便法を活用する

先述のSuicaですが、チャージの際は一旦「貯蔵品」や「仮払金」として仕訳し、実際の交通費を都度「旅費交通費」として引いていくのが正しいと言われます。

ですが、一ヶ月分、一年分の交通費を残額から逆算してまとめて計上してしまう「簡便法」を使用することも認められています。

Suica,PASMO,ICOCAなど交通ICカードの仕訳・会計処理

↑↑一年分のチャージからICカード残額を引いた金額

この計算方法は、現金や普通預金の残額から12月31日付で年間の生活費にあてた分（事業主貸）を計上するのにも使えます。ひとつひとつ交通費を入力していくととんでもない手数がかかりますし、間違いが多くなります。簡便法が使えそうな仕訳は積極的に採用しましょう。

取引先ごとに補助科目を作る

交通費の次に面倒なのが、売掛金です。取引先によって源泉が含まれたり入金から手数料が引かれていたりするので、売掛が回収されているかの把握に手数がかかります（本当は引いてほしくないのですが、自社以外への振込に750円もぼったくる○洋銀行がうんこなので仕方ないですね）。

取引先ごとに補助科目を作るのが確実です。仕訳を取引先でソートすることで回収状況を確認できます。一度きりのお取引先はいちいち作っていられないので「その他」に入れます。
どうしても金額が合わない場合は、「売掛帳」を見るのも良いと思います。

売上を整理する

オンラインショップの売上や、ランサーズなどのクラウドワークによる少額収入が多いと、会計処理が複雑になりがちです。
オンラインショップの場合は商品の金額を揃えることである程度回避できますが、クラウドワークの場合はそうもいきません。

これは私の実際の経験からの話になりますが、少額かつ一度きりの取引が大量にある業態より、高額かつ安定した取引が定期的に望める業態に変えるよう努めた方が、経理的にも精神的にも良いです。
怪しい取引先が多いと、売掛金の回収不能＝貸し倒れのリスクが高まります。金銭的に損をするばかりか、「貸倒引当金」という経理の知識がない人には最難関の仕訳をすることになります。

まとめ

私が確定申告の負荷軽減のためにやっていることは、このようなところです。自動取り込みとCSVインポートは強くお勧めします。これらの機能のために毎年10,000円ちょっとの会費を払っていると言ってもいいくらいです。

freeeかやよいか、というのは完全に好みの問題です。ただ相性はあるようで、私はfreeeのUIは合いませんでした。なので両方試してみるのがいいだろうと思います。

来年からはe-Taxで申告すると所得の控除額が10万円増えます。そうなると導入したくもなりますがが、場合によってはせっかく楽になった分が無駄になりそうです…

e-Taxで確定申告するのに4日かかった件｜Takehito Tanabe｜note

私は元々、個人サイトを運営しているうちに、ウェブ制作自体が趣味になったことがきっかけで、この世界に入りました。
趣味が高じて、という流れです。
その頃は、このような悩みが出てくるとは思いませんでした。

仕事にあまり関係ない話ですし、つまりは「いいわけ」なのですが、フリーランサーが陥りがちな病なので、考えたことを書いておきます。

なんとなく楽しくない

当然のことですが、長年当たり前のように仕事をするうちに、ウェブ制作やCMSはあくまで仕事であり、昔のように「むちゃくちゃ楽しい」とは思えなくなりました。
それでも他の趣味、ゲームと編み物があったのですが、それらも楽しいと感じられなくなってしまいました。

ときどき、ハマってはいるのですが、どうも心の奥底に苦痛を感じているのです。
この「苦痛」がなにか原因があるのか、メンタルの不調にありがちな「感情の歪み」なのか、ずっと気になっています。

完成できない

編み物は長年の趣味です。二十代の頃は講師を目指していたのですが、自分には人に教えるメンタリティがない事に気づいたので、趣味としてやっています。

ところが、ここ数年は作品を完成できません。例えばセーターは後ろ身頃・前身頃・袖が必要ですが、前身頃の後半に来たところで、ぶっつりと楽しさがなくなって苦痛しか残らなくなるのです。そうなると日が空くし、編み図も忘れてしまうのでそのまま未完成になります。

もしかすると自分は、面倒くさくなっているのではなくて、「完成させたくない」のではないだろうか…とも考えてしまいます。完成することで終わってしまうのが嫌なのか、「作品」が「衣服」になってしまうのが嫌なのか、わかりません。

また、上の写真のもそうなのですが、難易度が高い模様をつい選んでしまいます。割り切って極太糸で無地やボーダーにすればいいのに。

納得がいかない

SNSでこの悩みをこぼしたところ、友人が言いました。

「ああ、そうか。うぇびんさんの趣味は、過程だけじゃなくて、ものを作って出来上がることを楽しむアウトプットの趣味なのですね。だから出来栄えとか成果物のレベルも趣味の喜びに大きく影響するのですね」

友人はインプットの趣味が多いといいます。読書やカフェ巡りのような、すでにあるコンテンツを体験するたぐいのものです。一方、私の趣味は「一定の成果が出ていること」が具現して、初めて楽しさを感じるのです。

ゲームが趣味と書きましたが、「サンドボックス」「コンストラクション」と呼ばれるジャンルがプレイの大半を占めます。何かを自由に作ることが大好きなのです。冒険前の準備の動線を意識しつつ、デザイン性が高い「自宅」を建築するときが一番わくわくします。

特に「Minecraft」は7年プレイしていましたが、一年ほど前に過去最高に気に入った拠点を作ってしまい、それ以降納得がいかなくてはやめる、ということを繰り返してしまっています。

先日、違う手芸をやってみようと樹脂粘土を買ったのですが、小さな作品を作っただけで「思ってたんと違う」と感じてしまいました。どうも理想が高すぎる悪い思考パターンに陥っている気がします。手を動かしているだけましですが。

登る前に頂上を見てしまう

ソーシャルメディアのおかげで、同じ趣味を持つ人の作品を楽しんだり、情報を交換したりできるようになりました。ですが、それと引き換えに「何もしていないうちに、極端にレベルが高い到達点を見てしまう」という問題も出てくるようになりました。

例えば登山で、富士山に登る前に「登る人視点の頂上到達動画」を見てしまったとします。登山の場合は「空気感」「疲れ」なども趣味の一部なので、それだけで登りたい気持ちはなくなりませんが、ゲームプレイ動画の場合は「超ボスを最強装備で秒殺！」とか「４年間かかって作り上げた私の街を見て！」などを観ると、「ああ、自分はここまでできないや」と考えてしまいます。

素直に自分ができる範囲のことを楽しめばいいのに、という正論が脳裏に浮かびます。

SNSの影響を受けやすい性格なのだから、体験型の趣味になんとかして切り替えたほうがいいのではないか、という気になってきました。しかし食べ歩きは太るし、ドライブくらいしか興味がありません…車は以前、軽い対人を起こしたときのトラウマが消えなくて乗れません…

ペットは趣味か

私は、うさぎの女の子を一匹飼っています。毎日ごはんと水をあげ、室温を調節し、話しかけ、なでてあげます。

ペットを飼うことは趣味に入るのでしょうか。ブリーダーになったり、毎日読者を意識したブログやSNSを書いていれば、趣味とも言えるかもしれませんが、私が彼女に感じている関係はルームシェアをしている友人や恋人に近いものです。それにうさぎの世話は面倒でも必ずやらなければならないので、やらなくてもいい「趣味」とは違う気がします。

そんなこんなで自分がもやもやと悩んでいることを書き出してみたのですが、やはり自分の思考パターンの問題な気がします。
楽しいことよりも、楽しくない理由を探しているというか。

こういうときは小さな成功体験を重ねるしかないことを、長年の経験から知っています。
ゲームの難易度を下げてみたり、数日でできるニット作品を作ってみたり、手芸のワークショップへ行くことを考えてみようかと思います。

趣味で心が安らがないと、趣味を楽しむための本業もちゃんとできなくなってしまいますから。

今日からウェビングスタジオの2019年の営業開始です。宜しくお願いいたします。

今年もいろいろとCMSで変わったことをするつもりですが、正月休みにさっそくやっていました。
簡単にクイズを作れるサービス「クイズメーカー」で、WordPressとMovable Typeとa-blog cmsの横断知識がないと満点を取れないというクイズを作って公開しています。

すべての知識がなくても、どれかが詳しければ6割は正解できるようにしています。興味がある方は挑戦してみてください。

https://quiz-maker.site/quiz/play/JtfVPB20190102113456

裏付けを取る

軽い気持ちで作り始めたものの、10問揃うのには丸二日かかりました。問題が正しいかの裏付けを取らなくてはならなかったからです。

例えば4問目の「以下のうち、初期状態でダッシュボードに『最近の投稿』が表示されているCMSはどれか。」はすべてのCMSの最新バージョンのダッシュボードをチェックしなくてはいけませんでした。自社開発のa-blog cmsは、しれっと機能が増えていたりするので…

それを逆利用したひっかけ問題もあります。

思ったより正解率が低い

横断知識が必要なものの、すべて選択方式にするなど、個人的には割と簡単にしたつもりでした…が、正解率は現時点で40%くらいです。ううむ、問題文が分かりづらかったのだろうか。正直すまんかった。

WordPressの基本用語を問う1問目の回答率が、これを書いている時点で33%でした。
私は勉強会で、初心者の人には用語は無理に覚えなくていいと話しています。しかし実務で頻繁に使うようになり、テクニカルディレクションをする場合は話は別です。基本用語の正確な使用は、資料作成の際に、読み手＝更新担当者の理解度に直結します。MTユーザーが多かったのかな？と思いつつも、この結果はちょっと残念です。

全く同じ機能は少ない

横断知識を問う問題を作りはじめた段階で、CMS間で機能の概要は同じでも、完全に同じとは限らないということに気付いてけっこう悩みました。

特にテンプレートタグは、細かいオプションが異なるとか、適用範囲が異なるとかの障害が多く、思ったより問題を作ることができませんでした。「これはどのCMSのタグ？」なんて簡単すぎますし…

10問目の問題文に「各CMSの記事中には、常に一点の画像もしくはアイキャッチが存在する前提とする。また、属性は無視する。」という冗長な前提が書いてあるのもそのためです。WordPressのthe_post_thumbnail関数は属性も出力するためです。
更に細かいことを言うと、10問目のMovable Typeは、このタグだけでは期待した動作にはなりません。前後を「記事中にアップロードされたアセットを呼び出す」ブロックタグで囲む必要があります。ここで間違えて「ファンクションタグ」と書こうとしてMovable Typeの公式ドキュメントを調べに行ったのは内緒です。

「クイズを作る」というブレインストーミング

このような高難度クイズになってしまいましたが、せっかくなのでもっとたくさんの人にやってみてほしいです。

クイズを作りながら「CMS間の横断知識を書いたサイト」を作るための構想を練っていました。これは数年前から考えていたことで、「○○をするには△△のCMSでどのようにすればよいか」というのをまとめたいのです。クイズのような軽いものは、ちょうどいいブレストになるなあと思いました。

何かをしたことをきっかけに、新しいアイディアが芋づる式に出てくるかもしれません。迷いも多いですが、私もいろいろ手を動かしてみようとおもいます。