Cntlog
投稿日:

Webデザイナーのスキルアップする上で気をつけていること

かれこれ、もう10年以上IT業界にいますが、日々使うスキルが変わってきて追うのが大変です。

それに加えて、Webデザイナに求められることもどんどん増えてきてるなと感じています。

デザイナーとしてのスキルチェンジの必要性を感じる

昔はWebデザイナーといえば、Webサイトのデザインをしているだけで良いみたいな雰囲気でしたが最近はCSSがかけて当たり前、JSも書けるし、WordPressも一人でテーマを作れるのが普通なんて言われる時代になっていました。

最近はそれに加えて、UIデザイン、UXデザイン、解析、マーケティング、SEO、ライティング、経営思考など結果に繋がるものを求められるようになっています。

正直全部をできる必要はないのですが、それぞれの専門職種が本来はあるのにそれをWebデザイナが求められるというのは変と思われるのかもしれませんが、個人的には他の専門職に「Webデザイナのスキル」が求められるというのが、納得しやすい感覚です。

デザイン以外の重要性が高まってきているので、デザイナーに求めれる役割がどんどん広がり、変化してきていると感じています。

今のままのスキルを伸ばすというより、デザイン以外の新しい専門性を身につけることでWebデザイナとして期待されるスキルに繋がるんじゃないかなと思っています。

Webデザイナーとして基礎力をつけるために

「近接（グループ化）」「整列」「反復」「コントラスト（強弱）」といった手法を使ったりして情報整理するのが美しく見やすいデザインになる基本です。

レイアウトにもWebのトレンドがあったりしますので、そのあたりは既存のWebサイトやギャラリーサイトを見て参考にするのが良いかと思います。

最近だとDailyUIなんてものが流行っていて、毎日自分で考えたUIを投稿する人がいます。

Twitterの投稿

こういった継続は本当に基礎力が付くので良いですね。

今の自分とこれからの自分に必要なスキルを考える

何かを学ぶということは、同時に何かを学ばないということでもあります。

なんでも学ぶには時間が足りませんので、ゴールや方向を決めると必要なスキルが見えてきます。

例えば、事業会社と制作会社どちらで働くかによっても、スキルアップ戦略は変わってきます。

両方で求められるスキルを同時に追求することは、人に認められる機会が均等ではなく、なかなか難しいです。

制作会社で必要なスキル

制作会社の場合、プロフェッショナルを求められる事が多いです。

デザイナで言えば、表現の幅が期待値として高めになります。

他の人が人にできない事をしたり、パートナーとしてクライアントさんと一緒に作っていくのでその業界での売り方などのノウハウなんかが求められます。

下記のスライドは制作会社でのスキルアップの事が書かれているので参考になります。

制作会社の視点で見る デザイナーのキャリアパスとスキル

事業会社で必要なスキル

事業会社の場合、表現力がどうといった話ではなく、ビジネス的なコミットを求められる事が多いです。

例えば、コンバージョンが低い原因を調査して改善りたり、直接ユーザーにヒアリングをして改善をしたり継続的な改善の力が求められます。

（あと意外に社内調整というか、人を説得する力が求められたりします。）

下記のスライドは事業会社での働き方が見えるので、必要なスキルが見えてくるかと思います。

インハウスデザイナーの領域 〜課題発見から解決まで〜

得意なスキルを決めて、割り振る

冒頭でも書きましたがデザイナーといっても、色々な種類があります。

ぱっと思いつくだけでも、

  • グラフィックデザイナー
  • Webデザイナー
  • UIデザイナー
  • UXデザイナー
  • モーションデザイナ

それぞれ必要なスキルに違いはありますが、根本にあるのは、「情報を人に伝える」ことです。

得意とするやり方が、異なるだけで解決しようとしてることは似ています。

スキルのパラメーターの振り方を考える

Webデザイナであれば、色々なスキルのフリ方があります。
最近を増えてるのがフロントエンド系のスキル（CSS/JS）やUX周りが多いですね。

デザイナの原点に戻って、グラフィックデザインに注力される方もいます。
細かいビジュアルの作り込みや感情に訴えかける表現が得意な方はこちらのほうが受けが良いですね。

そのセンスを活用して動画を扱えるようになるのも良いでしょう。

「何をデザインするか」によって、必要なスキルの幅も深さも変わってきますのでみんなと同じキャリアを考えるのではなく、あなたは何がしたいのかを見極めて必要なスキルを考える必要があります。

デザイナーのスキルに関して、様々な「あるべき論」がありますが、あれはその人の環境で必要なスキルセットで発言されてる、無視はしなくてもいいですが無理に自分が劣ってるみたいに考えなくても良いです。

スキルアップ戦略を決めるための指針

フリーランスでも会社員でもデザイナとして働く以上、市場で生き残っていく必要があります。（お賃金も大事ですので）

スキルアップ戦略を考えると以下のような基準で選ぶと必要なスキルが見えてきます。

  • 自分の好き嫌いでスキルを身につける
  • 会社から求められているスキルを身につける
  • 転職市場における需要でスキルを身につける

一度紙に書き出してみて、自分が足りてるスキル、今後伸ばしたいスキル、自分の方向性などを見直してみてはいかがでしょう。

伸ばしていくスキルを決める

大きくデザインスキル/コーディングスキル/マーケティングスキル/みたいに分けて考えると楽かなと思います。

そこで、まずはどの能力を伸ばしたいのか決めるとやりやすいかなと思います。

すでに「こうなりたい！」と決まってる人は、それを満たすスキルを選定すれば良いですが、現状から伸ばしたいスキルがあいまいな人はスキルを整理してなりたいものを調べると、はかどります。

デザインスキル

  • ツールの使い方
  • UX
  • UI
  • グラフィック
  • モーション

コーディングスキル

  • グラフィックの再現
  • CSS設計(HTML)
  • モーション製作
  • SASSとかのツール
  • 言語の基礎知識（生のJS/php/ruby）
  • ライブラリの使い方を覚える
  • JS/php/ruby設計

コーディングスキル

  • 解析
  • 人間心理
  • 企画力/問題解決力
  • ライティング

スキルアップのための勉強方法

個人的には「継続する」のが一番良いかなと考えています。
ですので、あなたが無理のない範囲でできるやり方を考えるのが良いかと思います。

あとは続けるだけではなく、発表や公開などをしてフィードバックをもらうと良いです。

私の場合は週に一回ブログを更新したり、作ったプロダクトの更新とかやったりしてます。

登壇とかはあまり積極的じゃなく、声をかけてもらったときだけですね。

インプットをする

私のインプットの中心はTwitterです。
そこで気になったものは、クリップして後で調べたりしてます。

あとは雑誌もよく見るようにしています。

Webデザイナーにオススメしたい雑誌からの情報収集

他にはデザイン系のコミュニティに入ったりしていて、そこで情報を得たりしています。

あまり活発なところは少ないのですが、個人的には、qranoko Communityの情報が役立ちすぎてやばいって感じです。

アウトプットする

インプットしたからにはアウトプットしないと身にならないですね。

私は自分でコード書いたりしてtwitterに投稿したり、ブログの記事にしたりしてアウトプットしてます。

未経験WEBデザイナーはブログを持ったほうが良いと思う私なりの理由

副業をする

アウトプットとは異なるのですが、副業をするのは結構スキルアップに繋がります。

他の会社さんにジョインしたり、直接クライアントと一人でやりとりしてものづくりすると普段では気がつけなかった事や自分のスキル不足が感じられて成長のきっかけになります。

副業をオススメする理由は下記の記事でまとめています。

Webデザイナーに副業をオススメする理由

ポートフォリオを作る

作ったものはちゃんと一つにまとめておくと自分のスキルを見える化にも繋がります。
やってきたことが見えると、自分の方向性も見えてきますので。

あとポートフォリオがあると色々なところから声がかかりやすいのでチャンスも結構回ってきます。

現役Webデザイナが教える転職で使えるポートフォリオの作り方

転職の準備をする

本気で転職するかは別として、履歴書と自分のスキルセットは常に整理していて良いです。

なぜこんなことをするのかというと、転職経験がない人や長く今の会社にいる場合自分の市場価値が全然見えてなかったりすることがあります。

今の会社でやれてるから大丈夫だと、いざとなったときに苦労される場合があります。

そのあたりの事は下記記事でまとめています。

30代のWebデザイナーが仕事を続けるために意識してること（メンタル編）

人に見せることで刺激をもらう

特に独学だったりで身につけてるものは本当に自分の評価が正しいのかわかりませんので人の意見を聞くのが近道です。

自分の中で完結させるだけだと、より良い方法にも気がつけなかったりします。

特に新しい事でチャレンジしてる場合は実際のWeb制作現場で使われるスキルに落とし込めるようにしたほうが汎用的ですので。

最後に

IT業界の速度は早いので、自分の時間を使ってでも学ぶのが当たり前になってきています。

そうでもしないと若手に追い抜かれて自分の仕事が奪われちゃいますので…。

私はこういった事はあまりネガティブにならず、Webデザイナとしてずっと成長できてると思っていますので、正直楽しいです(ゝω・)

Cntlog
投稿日:

Nuxt.jsでSCSSの変数をvueファイルでも使えるようにする

Nuxt.jsを使ってみるとSCSSで設定した変数やMixinがVueファイルで使えなかったのでVueファイルでも使える用に設定する方法を紹介します。

インストール

まずはnpmで下記をインストールします。


npm add --dev node-sass sass-loader

npm add --dev nuxt-sass-resources-loader

nuxt.config.jsを編集する

nuxt.config.jsに全体で読み込ませたいファイルを設定します。

module.exports = {
  modules: [
    ['nuxt-sass-resources-loader', [
      '@/assets/sass/config/variable.scss',
      '@/assets/sass/config/mixin.scss',
    ]],
  ],
}

私はNuxt.jsは下記のディレクトリ構成にしていますので、必要に合わせてパスは変更してください。


これで設定完了です。
簡単でしょ(*ゝω・*)

Cntlog
投稿日:

副業もできる在宅Webデザイナーへのなりかた2018年版

私はもうWebデザイナを10年以上続けています。

続けれてきた理由はこの仕事が好き、というのもあるのですがこの仕事はなくならないという、自信があったから他の仕事に移ることもなく続けれています。

生きていると、引っ越し、結婚、出産などライフスタイルの変化はどうして避けられず、これらがきっかけで仕事をやめるなんて事もよくある話ですね。

Webデザイナだけでの話ではないのですが、IT業界の仕事は在宅で出来るものも多く参入もしやすいので場所や時間に制約されずに働けます。
実際私も今は週3でリモートワークで働いています。

この記事では在宅で働きたい人向けに在宅で働けるWebデザイナのなり方を紹介したいと思います。

在宅ワーカーに人気の職業Webデザイナーとは？

まんまですがWebデザイナーはWebをデザインする仕事です。

ただ画面をデザインするだけではなくて、コーディングだったりプログラミングだったり、Webサイトの設計だったりと多岐に渡ります。

多岐に渡るといっても仕事の内容はほとんどネットを通じて行えるものなので在宅で働きやすい職業として以前から注目されています。

最近は特に求められる幅が広くなっており、人手不足の会社さんがとても多いです。

人気の理由

在宅で人気の理由は市場規模の拡大が見込まれる業界であることです。

10年前でこそ、少しネットが普及して家庭にパソコンが１台あるという状況でしたが、今では一人１台はスマートフォンを持っている状態です。

スマートフォンやタブレット端末の保有数が急増しており、13 歳～59歳の年齢層のおよそ9割の方がインターネットを利用しているという経済産業省の調査結果があります。

今やインターネットを介した商品販売やマーケティング戦略が当たり前になっており、それを行うWebデザイナーの需要も高まっている状態です。

さらに、ITやWeb業界のようにパソコンがあれば場所を問わず仕事ができる自由度が高い仕事なので、都会に住みたくない人、子供がいるので時短で働きたい、親の介護をしながら働きたいなど様々な需要に応え、在宅での働きやすい職種になっています。

在宅Webデザイナーという仕事の特徴

他の職種とどう違うかはなかなか説明しにくいのですが、Webデザイナーは下記のような特徴があります。

  • 一回担当すると継続でその仕事を続けやすい
  • 需要が比較的高く、仕事がなくなっても別の仕事がすぐ見つかる
  • 単価は案件によってまちまち
  • HTMLやCSSなどのコーディングとセットで依頼されることが多い
  • センスが問われるため、勉強しても必ず稼げるとは限らないが、誰にでもできるルーチンワーク的な仕事は結構ある

デメリットは、形のないものを作っていくので、クオリティが足りずやり直しや複数案みたいなどクライアントのわがままに付き合うようなケースが起こりやすいところです。

自分の好みのデザインだけを作っていれば良いというわけにもいきませんので、クライアントが求めるものをきちんとヒアリングして、双方で合意をするコミュニケーション能力がないとメンタルをやられやすいです。

あと在宅ですと孤独になりやすいですね。

在宅デザイナーとして働くメリット・デメリットを知ろう

メリットは、比較的需要が多く、仕事の確保がしやすいこと
需要が多い仕事ですから、仕事の受注に困ることはないでしょう。単価も、テープ起こしやデータ入力などと比較すれば、ずっと高単価。デザインが好きなら、長く続けられる仕事でしょう。

デザインはセンスによりますから、誰でも同じように稼げるとは限りません。また、できによっては納品したデザインにOKがもらえず、作成し直しとなることも。

未経験でもなれるのか

未経験の方でもWebデザイナーになることは可能です。
というか最近は異業種からWebデザイナを始める方が増えています。

もしあなたがパソコンを持っている場合初期投資も少なく始められます。

最低限必要なもの

  • パソコン（ノートパソコンのほうが望ましい）
  • グラフィックソフトと使うスキル（adobe関係）
  • コーディングのためのテキストエディタと使うスキル

スキルアップのためにやること

正直言うとパソコンを使ってデザインをデキる人は増えているので道具を買って使えるようになるだけでは在宅で仕事を探すのは難しいかと思います。

スキルアップのための方法は下記の記事にいくつかまとめていますので参考にしてみてください。

https://blog.cntlog.net/archives/820
未経験で30代でもWebデザイナーになるためのアドバイス
採用目線から見る未経験の人が最短でWebデザイナーになる方法

Webデザイナーがどんな感じか知りたい場合

自分が本当にWebデザイナーになれるかどうか不安な気持ちはわかります。
それは実際にどんな事をWebデザイナーが行うのかがイメージできていない事が大きいな原因ではないでしょうか。

その場合は現役のWebデザイナの人に聞くのも手ですが、自分で手を動かしてみてやってみるのが一番手っ取り早いかなと思います。

udemyの動画を一つ購入すると自宅で自分の好きな時間に学べますし、安いのでオススメです。

UdemyのWebデザインオススメ講座を見る

他にも初心者Webデザイナ向けの講座は下記にまとめていますので興味があればご覧ください。

Udemyで学ぶWebデザイナーのスキルアップに役立つおすすめの講座紹介

在宅Webデザイナーはどのくらい稼げるのか

こればかりはスキルと働く時間によって変わるので、なんとも言えないです…。
私の場合は、仕事を選んでやっているので時給計算するとちょっと単価高めの設定でやっています。

内容によって見積もりは変えているのですが、だいたい時給で計算すると3,500〜5,000円くらいです。

在宅でのお仕事は時給制のところもあれば、報酬型のところもあります。

自分がやりやすいようにすればよいかと思います。
在宅の場合は働く時間が調整しやすいのが最大のメリットなので、金額うんぬんで見るよりはあまり締切がキツキツすぎない案件やクライアントを見つけてやっていくのが、続けていくコツですね。

逆には稼ぎたいって人は、働く時間を増やせばその分報酬がもらえます。

在宅で仕事の見つけ方

在宅でのWebデザイナとして働こうとした場合、下記のような方法があります。

自分で仕事を探す場合

在宅の仕事って数が少ないと思われがちですが、在宅=ネットがあればできるので日本中の会社の募集に応募できますので実はそれなりに数はあります。

求人のように拘束時間が長いのを懸念される場合は、クラウドソーシングで求人を探すというのが一般的です。

有名どころですとクラウドワークス、ランサーズなんかがありますね。

どちらも、公開されている案件に応募するので、自分の余力に合わせて仕事が探せます。
ライバルが多いのはどうしようもないのですが、逆に自分の得意どころを攻めやすいので時間をかければ確実に案件が取れやすくなります。

（実際依頼者は案件の実績数を評価に見る方が多いのでどうしても最初は受注をもらうのが難しいのが現実ですね）

すでにスキルがある方の場合

すでに業界経験があったりする人は週３や時短の求人を探してみてはどうででしょう。

最近はWeb系の人手が足りていないので、フリーランスと企業をつなぐ会社さんも結構あるので、仕事探しに困ることはないかなって感じです。

有名ドコロですと、下記の3社ですね。
どうしても、東京の案件が多かったりしますがリモートOKの会社を探すと良いです。

自分のスキルで通じるか不安かと思いますが、求められるスキルは会社によって全然異なるので気になるようでしたらまずは登録してみるのが良いでしょう。

自分から動かないと何も変わりませんし、自分のスキルレベルを業界レベルで知る事ができるチャンスにもなりますよ。

自分で仕事を依頼してもらう

フリーランスのように自分に依頼を待つタイプも在宅Webデザイナーの働き方です。
私はこのタイプですね。（私は副業でこのスタイルです）

この場合はポートフォリオを作っておいて、SNS・ブログで情報発信をしたりしているとお仕事の依頼があったりします。

自分から仕事を探さないので営業してるって感覚がないので疲れにくいです。
その分収入は不安定になりがちなので、貯金や他から生活に困らない程度の収入がある場合はこの方法がオススメです。

特に「自分に依頼が来る」ということは自分を信頼してくれてる証拠なので、高圧的な態度の方も少ないですし、単価も高めに交渉ができます。
私は単価高めなのが重要なのでこの方法です。

自分で仕事を作る

Webサービスを自分で作ったり、何か教材などを作って販売したりする方法です。
ほかにもアフィリエイトなどもこの分野になります。

完全に自分で作る事になるので、人付き合いなどのわずらわしさが無くなるのが良いとことです。

反面、自分がどれだけ努力しても収益化できてない場合も誰も助けてくれないので、技術力以外にも運とセンスが求められます。

教材を売るとかですと、noteやUdemyが主流ですね。

初めての講師で不安な方は講師になるための教材もUdemyで販売されています。
価格も高くないので、これをみて自分で出来るか試して見るのが早いです。

ユーデミー講師短期養成講座をチェック

在宅のWebデザイナー向いているタイプ

在宅でwebデザインするにも実績とスキルが必要ですが、それだけでなく性格の向き不向きがあります。

実体験から下記のタイプの人が向いてるかなと感じています。

セルフマネジメントのできる人

在宅の場合、他人の目を気にしなくていいのでついついサボりがちになりやすいです（人によるけど）

きちんと納期を守れて、他の人のコミュニケーションを瞬時に返せれば問題ないのですが、自分に甘い人は人に迷惑をかけがちですね。。

セルフマネジメントというか、時間管理は自分でできないと在宅で働くのは厳しいでしょう。

自分の趣味を持っている人、または孤独が平気な人

在宅は基本的には家族以外と話す事はないので、結構孤独感があります。

仕事は問題なくても、「孤独が耐えられなかった」という理由で無理に会社員に戻った人もいます。

自分の趣味や友人が多い人は全然大丈夫だと思います。

新しい情報にアンテナを張っている人

孤独に繋がるのですが、仕事を教えてくれる先輩や同僚がいません。

Webの業界は進化の速度が異常に早いので、常に情報をキャッチしておかないとすぐスキルが使い物にならなくなります。

ちゃんと時間を見つけて、情報のインプット/アウトプットができないと長く続けるのは難しいかもしれません。

お金の管理ができる人

会社員のような一定の金額をもらう感じでしたら大丈夫なのですが、在宅の場合振込日もバラバラだったり、金額も案件によってまちまちなので、気がついたら「貯金が減ってる！」なんてことになりかねません。

他にも確定申告も自分ですることになると思いますので、きちっと領収書を集めておかないといけません。

私が在宅での仕事で気をつけてる事

私はかれこれ2年ほど在宅で働いています。
その中で気をつけている事をいくつか紹介します。

速度を意識したデザインワークを行う

人と接触しないので仕事の進行状況も相手には伝わりにくいです。

ですので完成したものを送るのではなく、途中経過を送ったりしてコミュニケーションを取ることを重要視しています。

こうすと働いてる感も見えますしね。

次の作業を意識する

この作業が終わったら次何やるかを必ず決めています。
もし次やる作業がない場合は担当者に連絡して「手すき」になっていると連絡して次の仕事を準備してもらっています。

仕事が終わってから、「あっ、つぎの作業無い」では仕事を準備してもらう時間がもったい無いので。

優先度を間違えない

仕事は一気に触ってくることがよくあります。

特に優先度がまちまちな状態で来るので、担当者、または連携して作業する人とコミュニケーションをしっかり取っていつまでに何が必要で、順番はどれかをお互い納得いくように形に残します。

データはクラウドに置いておく

作ったデータは自分以外の人が触るでしょうし、自分のパソコンが壊れてしまって「データが無くなりました」じゃ洒落になりません。。

私は大小とわず仕事で作ったデータはクラウド上に置いて共有をしています。

ちなみに、デザインデータなどは「Google Drive」
コード関係は「github」に置いています。

余力を残したスケジュール管理

在宅ですと自分のペースで仕事が行える反面、急な依頼や予想外のトラブル（体調不良など）も結構あります。

しかし、それらは会社で働いてるときとは違い一人で解決しないといけないものが多いのでスケジュールには余力を残して計画します。

別に上手いこといけば、その分早めに作業を進めればよいので、余裕をとっておいて、きちんとスケジュール内に作業を終わられたほうが人に迷惑もかけずにすみます。

よくある質問

グラフィックデザイナーでもwebデザイナーになれますか？

はい、なれます。というか結構います。

とはいえ、いきなり在宅でWebデザイナーは難しいので一度制作会社なりに就職してからのほうがやりやすいと思います。
少しデザインの経験があるとグラフィックのデザインの癖が抜けずに苦労されると思いますので…

「結婚・子育て」と「Webデザイナーという職業」を両立することはできるのでしょうか？

はい、可能です。というか結構います。

とはいえ、「楽」ではないです。

お子さんがいたら起きてるときに仕事はし辛いですし、もし家事もするならその分時間も取られます。

通勤がない分時間が作りやすいので料理の準備などを仕事の合間をみて出来るのは良いことですが、やること自体が減るわけではないので大変は大変です。

しかし、お子さんが病気になったりしたときも、まだ仕事のフォローはしやすいので働きやすいかなという感じです。

具体的な方法は下記にまとめていますので興味のある方はご覧ください。

短期間で主婦でも在宅WEBデザイナになる方法を現役Webデザイナが考えてみた

最後に

あなたができる事・なりたいWebデザイナーのイメージはありますか？

  • Webサイトのコンサルやマーケティングをしたい
  • デザイン力があるデザイナーになりたい
  • コーディングやプログラミング周りをやりたい
  • ネットショップをやりたい
  • 女性向きのサイトが得意
  • 美容関係が得意

もしあなた自身の方向性に方向性があれば、Webデザイナーとして自分の売りが伝えやすくなりますので、在宅で働くメリットが大きくなります。

最近は働き方改革の影響で副業OKだったり、時短勤務、在宅と多種多様な働き方が認められつつあるので、もしあなたが在宅で働きたいと思っているようでしたら一度Webデザイナを視野に入れてみてくださいね(ゝω・)

 

Cntlog
投稿日:

簡単にできる独自SSL（https対応）化対応のコツと方法（HTML版）

2014年頃から常時SSL化はGoogleから推奨すると発表され、2017年にはGoogle Chromeで「保護された通信」の表示が広まり、続々と対応する人が増えてきました。

この記事では、SSLの対応方法となぜSSL対応が必要なのかをお伝えします。

“簡単にできる独自SSL（https対応）化対応のコツと方法（HTML版）” の続きを読む

Cntlog
投稿日:

失敗しにくいWebデザインの制作フロー

WEbデザイナーに限らずですが、Web業界は流行り廃りや進歩が早いのでスキルアップが重要ですよね。

割と私はコーディングが得意なので、それしかできないと誤解されがちですが、全然デザインもやってます。
※グラフィックデザインは苦手なので避けてますが…。

自分のデザインに自信がないって人は多いと思います。
昔私も「Web/アプリのデザインは何が正解なんだろう…」って悩んでいました。

ときにはディレクタに「これじゃない」とか、クライアントに「ださい」とか言われる事もありました。

そういった否定を避けて、プロジェクト関係者を納得させるデザインの仕方/プロジェクトの進め方を紹介します。

“失敗しにくいWebデザインの制作フロー” の続きを読む

Cntlog
投稿日:

Gutenberg（グーテンベルク）対応のオススメできるWordPressテーマの紹介

WordPressが4.9.8から新しいエディターGutenbergをテストするようにダッシュボードから告知が始まりました。

いよいよWordPressが大きく変わる雰囲気をひしひしと感じます。

WordPressといえば、テーマをインストールして有効化することで、サイトのデザインを簡単に変更出来ることが魅力の一つですが、Gutenbergが導入される事で少し弊害が出ることが予想されています。

Gutenbergとこれまでのエディタ

これまでのエディタはビジュアルエディタと呼ばれ、コードを書かずに様々なデザインを専門知識なしで適応していました。

このあたりはWordPressの中でも需要があり様々なプラグインでさらに高度に進化していました。

これはプラグインだけではなく、テーマでも同じです。

特に有料のテーマですと記事が書きやすいようにとこのビジュアルエディタでプラグインなしで編集できるるようにとカスタマイズが施されているものが多数あります。

しかしGutenbergが導入され始めると、ビジュアルエディタが使えなくなるのでこれまでと同じ変更ができなくなってしまう可能性があります。

もちろんGutenbergがビジュアルエディタの劣化版とということはなく、より便利に使うための進化になります。

しかし、ビジュアルエディタのテーマやプラグインに依存していた場合、これからはWordPressのアップデートに不安を抱えながら運用をしていくことになりますのであまり良い選択ではありません。

そこで、プラグイン不要でビジュアルエディタの頃のように色々な機能をもったGutenbergに対応したテーマをご紹介します。

Gutenberg（グーテンベルク）で使えるテーマ

Gutenbergで使えるテーマは徐々に増えてきています。

WordPressの公式サイトで公開されているテーマで「Gutenberg」で検索すると結構な数が見つかります。


Gutenbergでも使えるテーマ

これらは無料で使えて、安心なのですがほとんどの作者が海外の方で英語メインで作られています。

プログラミングや英語に強い方でないと使い続けるのは不安かもしれません。

ですが日本人が作ったGutenberg対応済みのテーマもあります。
それがSnow Monkeyです。



Gutenbergも使えるSnow Monkeyをチェック

Snow MonkeyがGutenberg対応済みといっているのは、製作者がきちんとGutenbergで動作を確認してアップデートをしていることになります。

実際に私もこのSnow Monkeyを購入してGutenbergで運用しているサイトがありますが全然問題は起きていません。

他にも日本のWordPressテーマでGutenbergで動作チェックしてるテーマは「LIQUID PRESS」もあります。

Gutenbergの便利な使い方とテーマ対応状況|LIQUID PRESS INFORMATION

Snow Monkey とは

Snow Monkeyは2017年11月から発売された日本人が作った有料のWordPressテーマです。

特徴としては、100%GPLのWordPress有料テーマでどんなサイトにも使うことができるテーマです。
つまり、このテーマ一つ購入することで複数のサイトをSnow Monkeyで運用することができます。

WordPressのテーマを購入すると1ドメインで制限されているところも多いのでこれは嬉しいところではないでしょうか。

またほかにもHTML/CSS不要で美しいサイトをつくれる機能性が魅力です。
この部分はもちろんGutenbergを使っても言えることです。
設計からしっかりしていたSnow MonkeyはしてGutenbergとも相性が良いです。

Snow Monkey は「表側の記事のデザインと、編集中のデザインをなるべく同じにする」ということにかなりこだわっているので、記事を書きながら実際のデザインをイメージして更新することが可能です。

例えば見出しや引用のデザインが表側でもエディタ側でも同じであるとか、ショートコード（ショートコードだと挿入した文字しか見えない）ではなく、HTMLで挿入されるのでコードがわからない人でも直感的にわかる編集画面になっていたりします。

なお、作者のキタジマさんは早いタイミングからGutenbergに注目していて対応を随時アップデートしています。

100% GPL の有料 WordPress テーマ Snow Monkey の Gutenberg 対応状況（v4.2.6 現在）

価格



Snow Monkeyはいわゆる有料テーマと言われるものです。

価格は、年間で16,200円です。（一ヶ月毎の月額プランもあります）
購入ページ

Snow Monkeyはアップデートの進化が凄まじく毎週のようにアップデートされていきます。
アップデートの内容も実際に利用者から上がった声を反映しているので、製作者目線ではなく利用者目線でのアップデートばかりでどんどん使いやすくなっています。

作者は著名な方

このテーマの製作者であるキタジマさんは何年も前からWordPressの有名なプラグインやテーマを作っている人です。

WordPress への貢献|モンキーレンチ

中でも特に有名なプラグインやテーマは下記です。実際に使われてるかたも多いのでは無いでしょうか。

WorPressのプラグインやテーマを公式サイトに公開するには、WordPressの様々なルールに沿ったものでないと承認されず公開できません。

ルールの内容は様々ありますが、特にプログラム面などで規制されるものが多いのですがそれはWordPressが推奨している書き方、そうでない書き方があるため様々な人がチェックをしてそれを通過して初めて公開されるのです。

何年も前からこのWordPressのコードを書き続けたキタジマさんですので、長い間WordPressで使い続けれるテーマを開発してくれます。

継続課金モデル（サブスクリプション）形式ですので今後のアップデートもされるのも期待できます。

ちなみにキタジマさんのインタビューを下記記事の中できけるのですが、そのなかで、「日本で売られているテーマはコードの品質が悪い」といったニュアンスの事を言われてるので、プログラミングにはすごい自信をお持ちです。

有料テーマを売ることについてのもろもろ w/ 北島さん、トロユニさん

Gutenberg拡張プラグインもある

実はキタジマさんは今現在Snow Monkey用のGutenberg拡張プラグインを開発中です。
こちらは公開されたら、また追記いたします。

WordPress5.0以降を使うために

WordPressはブログを書くには使いやすいシステム（CMS）です。

使いやすい＝使い続ける。
そのためためにもGutenbergで使えない状態を維持するのは得策ではありません。

これまでのビジュアルエディタを使い続けるリスク

Gutenbergを利用したくない！無効化したい！という気持ちはわかります。

Classic Editor Pluginというプラグインをインストールして有効化すれば、ひとまずGutenbergの影響を受けることはありません。

しかし、今後WordPressはビジュアルエディタではなく、Gutenbergの方向を向いて進化続けますので、それに合わせて他のテーマやプラグインが使えないなんて事もありえます。

普段使っていたプラグインをアップデートしてサイトが真っ白になるなんてことは避けたいはずです。
そのためにもGutenbergを使う準備をするのは必須なんじゃないかなと思います。
（全部アップデートしないという選択肢もあるでしょうがセキュリティ的にNGすぎるのでまったくオススメしません。）

これまでの記事はどうなるのか

これまでの記事は、「クラシックブロック」という1つまとまりのブロックとして扱われるようになります。

Gutenbergは見出し、段落、画像、など本来それぞれの要素毎に1ブロックなので、「クラシックブロック」をそれら個別のブロックに変換できるようになっています。

全体的にはなんとなく大丈夫なのですが、以前HTMLのclassが全部削除されていたりもしていたので、これまでの記事が絶対そのままで状態で維持されるというわけではなさそうです。

ですので、Gutenbergを有効化するときは念の為バックアップを取ってからの作業をオススメします。

最後に

Snow Monkeyはコードが書けなくても色々なデザインに管理画面でカスタマイズできる素晴らしいテーマです。

Gutenbergで今のテーマに困ってる方はこれを機会に一度Snow Monkeyを検討してみてください。きっとあなたが困ってる部分を手助けしてくれるWordPressテーマになるんじゃないかなと思います。

実際に他のテーマ（ストーク/SANGOなど）から以降してきた人にインタビュー記事がありますので参考になれば幸いです(ゝω・)
他テーマから移行された方からの声|Snow Monkey

Cntlog
投稿日:

初心者が知っておきたいWeb業界の基礎知識

すでにWebというものは一般化しているのでWeb業界というとWeb制作会社の事を指すような気もしますが、あなたが目指す業界の事と思っていただければ結構です。

Webの技術や価値観を共有できる仲間がいるところと置き換えてもらえるとイメージしやすいでしょう。

この記事では、私が業界に入りたての頃に、知らなかったり・誤解していた用語などを紹介します。
“初心者が知っておきたいWeb業界の基礎知識” の続きを読む

Cntlog
投稿日:

会社員をしながらフリーランス（副業）で働くメリット

近年Webデザイナーの方から、フリーランスになろうか迷ってるという相談を受ける機会が増えました。

私自身はフリーランスではない（会社員兼業で副業してる感じです）のですが、Webにかかわらずフリーランスの友人は多いので、良いところも苦労されてるところも表立ったところくらいは知ってるつもりです。

相談される理由としても、よくフリーランスと間違われる私がなぜ会社員をしてるのかというのが気になってるあたりが相談のきっかけになってるようです。

私はフリーランス専業になることはないと思っているので、私なりになぜ今の会社員/副業のスタイルを選んだのか紹介します。

“会社員をしながらフリーランス（副業）で働くメリット” の続きを読む

Cntlog
投稿日:

無料で簡単にお問い合わせフォームと顧客管理ができるformrunの紹介

無料でインターネット上の問い合わせフォームを作成し、問い合わせのあったユーザーの情報や対応状況などを管理できるサービスが「formrun (フォームラン)」です。

この記事では、formrun (フォームラン)の魅力を紹介します。
“無料で簡単にお問い合わせフォームと顧客管理ができるformrunの紹介” の続きを読む