ウェブデザイナーとして意識がガラッと変わった日
ウェブの世界は日々進化しています。昨日までの常識が今日から通じないなんて事もあります。※ちょっと大げさですがそのような経験は何度もしてきました。
僕がウェブサイトをデザインする上で大きな転機になったというか、意識がガラッと変わった時が何度かあります。
このお話は主に個人事業主や小規模な中小企業をクライアントとするウェブデザイナーの立場の話であり、他の方からするとピンと来ない場合もありますのでご了承ください。仕事をする領域が変われば優先事項も変わります。
数年前からの話で少々長くなりますがお付き合いください。
1.Designmode の generator との出会い
それは2013年末にこのサイトのサービスを見てからです。
YouTubeの映像を見てください。
https://www.youtube.com/watch?v=M6K-_l8lPNo
ブロック化されたパーツのカードを配置してウェブサイトの設計をしている光景が非常に印象的でした。
約8700人が参加するFacebookグループ「webクリエイターのための情報交換所」では2014年8月に別のアプリと共に紹介しています。
https://www.facebook.com/groups/241838242545737/permalink/734418763287680/
この頃はWordPressのサイトをテーマから作るようになっていた時期。
コンポーネントという言葉も聞かない頃でしたが、コンポーネントの概念をなんとなく頭の中でぼんやり意識していたぐらいでした。
「代表挨拶のブロックグループの下に事業内容の特徴のブロックグループ置いて…」みたいな。
レスポンシブデザインが広く普及しはじめ、実装に対し様々な考え方が出てきていた頃でした。PCサイトを中心に制作していたのがスマートフォンでの閲覧を無視できないようになり、多くの人が従来のレイアウト手法では無いアプローチを模索していた時期でもあります。
そこのタイミングで出会った先述の Designmode generator 。
ワイヤーフレームで行っている設計と制作工程がリンクし、クライアントにもわかりやすく、かつすごいスピードで構築できるのを見て「これだ！」と確信しましたのを覚えています。制作工程としては同じよう
な事をやってはいたものの、クライアントから見てのわかりやすさが全然違いました。
※ワイヤーフレームを理解できるクライアントは今でも少ないです（大企業をのぞいて）。
CSSフレームワークへの理解の低さ
当時はBootstrapのようなCSSフレームワークも「同じような見た目で作れるだけでしょ？」ぐらいしか理解されていませんでした（今はさすがにそんな人はいないと思います）。
これを機にBootstrapなどの本当の強さを理解できたのでCSSフレームワークを広く薦めるようになりました。ウェブサイト設計が大きく変わってくる事や、なぜそうなってきたかを広く知って欲しくて本も書きました。出るまで1年以上かかってしまいました…。
そして概念を書く事がこんなに難しいのかと打ちひしがれて本の執筆から遠ざかります…。
これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装
https://amzn.to/2XXg5dA
ただこの本も出た当時はBootstrap解説本と解釈される事が多く、本当の意味としては一部の人にしか理解してもらえませんでした。
ウェブデザイン制作工程の変化
デザインカンプを確認してコーディングしてという工程に疑問を持ち始めます。Designmode generator のようにブロックを配置して構成を確認すれば大きなデザイン変更をする事も無くなるし、クライアントも写真などは違っても実際の構成をワイヤーフレームよりはイメージしやすくなります。
「これはあくまでダミーの画面ですが、御社の場合はここにスタッフ紹介を入れる事で社員の質が高い事をよりアピールできます」といった感じで。
Blocksというアプリを使って打ち合わせをした事もあります。
https://www.youtube.com/watch?v=u05EB0jy2fE
※Designmode generatorはライセンス費用が高く、気軽に提案するようなケースには向いてないため、同じようなアプリであるBlocksを使ってました。
ブロックの配置で設計が決まれば、わざわざ全部のデザインカンプを見せる必要もなくなります。見せ方に変化をつける必要の無いものについてはスタンダードなコンテンツで展開した方が予算も抑えられます。
Bootstrapをベースに作られていればアプリで生成されたコードもそのまま使えます。全部使う事はありませんが部分的に再利用する事はありました。
主要なパーツさえしっかり作れば、後はいかに効率良く出来るかについて集中すれば良くなります。
最近は仕事のやり方が大きく変わったのもあり、CSSフレームワークを意識する事は少なくなりました。
2.中小企業アドバイザーをやって見えてきた事
この頃中小企業の派遣専門家としてアドバイザー的な動きもするようになっていました。中小企業庁や産業創造機構や商工会議所が事業者の広告の専門家を呼び支援するというものです。ミラサポとか聞いた事ある人もいると思います。
中小企業で支援を必要とする人は、制作会社に制作費を払うのは厳しいという方も多くいらっしゃいます。本来制作者として依頼を受けていたなら予算的に合わないですねで断ってきた人達とも言えます。
依頼者の中には、本当に良い商品を扱っていたり誠実に商売をやっていてもなかなか日の目を見る事がない方達も多くいるのだとわかりました（補助金目当ての甘くてどうしようもない方もいますが）。
今月乗り切れるかわからないというような方もいます。
本来デザイナーが関わったほうが良い人達ではあるのに、お金がないために何も出来ないという所はずっと課題だと感じていました。
デザイナーとしてお金がかかる部分は実働時間の長さだったりします。特にウェブデザインの場合は何週間も実働するので何十万とかには普通になります。チラシを作る程度の予算感で来られても困るとも言えます。
ここを圧縮できないかは作業の効率化がひとつのポイントだと考えます。奇をてらったり、オリジナルなデザインにしなければ（スタンダードな作りであれば）、だいぶ時間を短縮できます。
さらにフレームワークなどを利用すればもう少し時間を短縮できます。
ヘッダーフッターのデザインなどはモバイル表示ではそこまで大きな変化を出しづらいので、この辺をスタンダードなものにするだけでも変わります。
こだわればこだわるだけ高くなりますが、変なワガママを言わなければだいぶ予算をおさえる事も可能です。
前述のBlocksなどを使えば大事なコンテンツはおさえつつも予算をおさえた制作も可能になります。
デザインを行わない相談プランをはじめた
デザイナーではありますが、デザインしない相談だけのメニューを作りました。中小企業支援において公的機関経由では細かい条件があります。年3回しか相談できなかったり、相談するにも範囲が決まってたり、書類が必要だったり。
無料の制度にすがっているだけではなく、前向きに様々な事をデザイン以前から行うお手伝いをメニュー化しました。
チラシなのかウェブサイトなのか看板なのかイベントなのか？
広告やイベントの特性を理解していない経営者がこの判断をするのはベストではないと考えます。目的があって解決策をねらなければいけないのに素人が判断してしまうのは、大事な商談に新人営業マンを派遣するようなことと同じです。
特性を理解し専門家としての判断を初期の段階で入れられれば無駄な予算を使わずに済みます。ウェブが絡むならなおさら専門知識が必要と言えます。間違ったウェブの知識で失敗する中小企業さんは星の数ほどいます。
以前、中小企業支援でチラシの内容を考える（サムネイルを作る）という事がありました。チラシの内容について話し合い設計したのですが、制作はデザイナーではなく経営者の奥様でした。デザイン経験もなくしかも手書きのチラシではあったのですが、結果的には黒字化したという事を経験し、デザイナーが必ず手を動かさなくても出来る事はあるというのは相談プランが生まれる大きなきっかけでした。
3.WordPressとページビルダー
WordPress（ワードプレス）でのサイト制作を多くやっています。
WordPressのバージョン5からブロックエディターが実装されました。5.3からはブロックエディターもかなり進化し高機能になっています。でも僕は有料版のElementor Proを使っています。
ページビルダープラグイン
ブロックエディター以前からページビルダープラグインは有料のものを含めて沢山ありました（BeaverBuilderやElementorなど、ライセンス準拠してないものの掲載は控えます）。
ドラッグ＆ドロップでレイアウトが出来るものが数年前から主流になり、最近では有料版のElementor Proプラグインでテーマ自体を作れるようになっています（Beaver Builderにも同様のプラグインが存在します）。
制作者の方は素人向けの機能と思ってるかもしれませんが、プロが使えば大きな武器になるという事は知っておいても損はないと思います。
テーマを作らないWordPressサイト制作
WordPressでテーマを作るのには多くの時間がかかります。沢山のテンプレートが必要な場合も多く工数は膨らみがちです。個人で使う場合に既存のテーマを使う事は多かったのですが、海外では数年前から既存のテーマを使ってサイト制作を行う制作者も増えてきました。国内でもだいぶ増えているようです。これはテーマ数の充実も背景にあると思います。
ただ設計上、既存のテーマでは足りないという所も出てくる事があります。
プラグインでテーマ制作もカバーする
有料版のElementor Proではテーマの制作機能も備わっています。一度テーマを作った事があればドラッグ＆ドロップでテーマファイルを作っていけます。
固定ページ用、アーカイブ用、ヘッダー、フッターといった感じで。
従来のテーマ制作工程を体験した事がある方なら結構衝撃を受けると思います。1からテーマを作るよりはるかに速くテーマを作成できます。
もちろん1から作るテーマとは違い多少の制限はあります。
テーマをElementor Proで作り、コンテンツ内容に変更の少ない固定ページはElementor、通常投稿はWordPressのデフォルト機能でやる方法をとっています（Elementorを使うのをやめた場合の影響も考慮して）。
カスタム投稿などの機能面はプラグインで実装しています。
カスタム投稿などでアーカイブを別のテンプレートにしたい時などにElementor Proのテーマ作成機能がすごく便利になります。
設計上カスタム投稿を使うのは僕の中ではほぼ必須となっているのでElementor Proは非常に相性が良いのです。既存テーマを使って制作する制作者とはこの辺りで差別化をはかっています。検索エンジンへの影響も大きく変わります。
※この話は春頃イベントでやる予定です。
4.動画
近年、大きく意識が変わったのは動画です。
ここの部分はさらに長くなりそうなので後日別の記事にしたいと思います。
長い文章読んでいただいてありがとうございます。
自分で読み返すのも疲れる程なのに。
あんこでも食べて一息ついてください。
ごきげんよう。
この記事が気に入ったらサポートをしてみませんか？