本WEBサイト ( eizo-gak.com ) を開設してから、まもなく1年となります。この場所で記事を真面目に書くようになったのは最近のことですから、「意外に早いな」と思われるかもしれません。いまだにYouTubeのほうで「新しいサイトになったよ！」と告知をしていないのですが、その割にはいつもたくさんの方に訪れていただいており驚いています。 今日は、このサイトの技術面についてのお話です。 まず、このサイトの基本的な構造について。 eizo-gak.comは、本質的には個人ブログやアフィリエイトブログなどと大差ありません。WordPressというサービスをレンタルサーバーの上で動かすことで、みなさんのブラウザに記事を表示させています。 いずれ古いドメインは捨ててしまおうかなと考えています。現在は旧ブログのURLを踏むと、自動的にeizo-gak.comへつながるようになっているはずです。昔のURLしか知らない方でもeizo-gak.comへやって来られるように設定しています。 昨年の、ちょうど今ぐらいの季節に頑張っていたのが、WordPressのテーマ選びです。 WordPressには「テーマ」という概念があります。テーマによってサイトの大枠のデザインが定義されており、世界中の様々なWebデザイナーさんが、このテーマを有償無償問わず配布してくれています。いろいろな用途向けにたくさんのテーマが作られており、ブログ用のもの、企業LP用のものから、写真家用のものまで、探せば何でもあります。 このテーマに頼ることで、HTMLやCSSの知識がなくても、デザインの整ったサイトを作ることができます。 日本で売っているWordPressテーマにも有名どころがいくつかあります。まぁ本来ならそれを選んでおくのが無難なんですが、私はあえて避けることにしました。日本のテーマはどうしても「ジャパニーズ・アフィリエイトブログ」感が抜けないし、どれも定価が1万円ほどと高価です。私はHTMLもCSSも得意ではないのですが、だからといって1万円もかけて、それでありふれたものしか手に入らないというのは、少し面白みに欠けるような気がしました。 それに映像学区は「趣味で安くそれなりのモノを創作しましょう」というポリシーを抱えているので、課金ルートに愚直に従うのも微妙だなぁと思いました。 結局国産テーマにいまいち馴染めなかった私は、英語圏のおしゃれなWordPressテーマを修正することで、映像学区新ブログを制作すればいいんじゃないかという結論に至ります。 「日本語サポートよりも自由度を優先したい。コードはある程度自分で書き直せばいい」 いろいろと悩んだ末に「Envato Market」というデジタルコンテンツ販売サイトを探し回り、汎用的に使えそうでデザインの良いWordPressテーマを買うことにしました。日本で見かけたテーマとは違い、価格も7000円程度。さらにブラックフライデーセールで5000円でした。なんと安いこと。 手順はもちろん英語でしたが、eizo-gak.comにWordPressテーマを認証させるのはすんなり行きました。ここからは頑張ってデザインをカスタマイズします。 まず苦労したのがフォントの設定です。 日本語の「游ゴシック」と「Noto Sans CJK」を使うことにします。しかしフォントを変えるだけではいいデザインに仕上がりません。プレビューを繰り返しながら、字間行間余白の設定を追い込んでいきます。スマホ表示時とPC表示時で理想のフォントサイズは異なるのですが、元のテーマではうまく調整できなかったので一から実装しました。もちろん誰も日本語向けサポートなんてしてくれないので、頑張ってWEBデザインについて調べます。 次に苦労したのがトップページ周りです。トップページでは、「Elementor」というプラグインを「固定ページ」上で走らせています。トップページに手をつけた当初は、何がどこで機能しているのかさっぱり分からずたいへんでした。 どう設定してもデモどおりにならなかったんです。サイトの要であるヘッダーが、なぜか変な動きをしたり2つ表示されたりして、本当に挫けそうになりました。とにかく管理画面のボタンをon/offしながら、トラブっている箇所を特定しつつデザインを改善していきます。そんな試行錯誤の繰り返しです。 色々試して分かったのは、購入した海外テーマでは「WordPressにもとから備わっているカスタマイズ機能」「テーマ独自のプラグイン」「Elementorプラグイン」という3つの土俵で、サイトデザインの設定が絡みあっているということです。 なんだかめんどくさい構造にも見えますが、ある意味では合理的な作りといえます。3つの土俵を組み合わせることで、私のようなWEBに無知な人間でも、デザインに奥行きがあるサイトを実現できるのです。とはいえ、もちろんメリットばかりではありません。まれに3つの土俵が干渉しあうことがあります。たとえば写真を拡大表示してくれる「Lightbox」という機能を実装した際にも、なぜか動かなかったり、逆に2回も拡大されたりして大層困りました。 つづいて苦労したのが（カテゴリ）記事一覧のページです。 テーマに付属してきた記事一覧のデザインが気に食わなかったので、トップページで学んだElementorと固定ページを使って「カテゴリ記事一覧ページ」を作りなおすことにしました。本来の記事一覧に飛ぶはずのURLから、作りなおした固定ページに無理やり飛ばす必要があるため、しかたなく「Redirection」という外部WordPressプラグインを導入しました。 ところが肝心のElementorに欠陥が見つかったんですよね。ページ送りをElementorでやろうとすると、どういうわけか次ページへ進んでも、ページ上部に戻ってくれないのです。このままでは記事一覧の閲覧性が最悪です。Elementorは有名なプラグインのはずなんですが、なんと有償版でもこの問題は修正されていないようです。 しかたなく、記事一覧だけは「Post Grid」という外部WordPressプラグインで組み立てることにしました。しかしこの外部プラグインでも、今度は「レスポンシブ表示がまともに表現できない」という問題がありました。 そこでしかたなく、「visibility」という外部プラグインを導入しました。「スマホ用の記事一覧ブロック」と「PC用の記事一覧ブロック」の2つを用意して、それぞれみなさんの環境によって、見せたり見せなかったりしています。 HTMLもCSSもPHPもなんにもできない私ですが、このような迷走を1年つづけて満足のいくデザインを手に入れました。万人にはおすすめできないですが、自分だけのWEBサイトを持つ喜びというのは、何物にも代えがたいものがありますね。

Q. 動画にOPを付けたら「長いので飛ばした」と言われました。 せっかく頑張って組んだOPがいまいち評価されない、ってなかなか悔しいことですよね。できれば回避したいものです。似たような経験は私にもあります。昔「OPが長い」と言われたことがあり、最近はわざと短く済ませているんです。 OPは各動画投稿者なりに出せる最高の表現技法を駆使することが多く、作っている側としては思い入れがあります。ただその分、ついつい凝りすぎたり尺をとりすぎたりしてしまうので、気を付けなければなりません。 まずは「なぜ動画にOPを添えるのか」という動機を整理してみましょう。きちんとした理由もない映像表現は過剰になってしまいますから。 OPには、動画シリーズの統一感を出すことができたり、冒頭に内容のダイジェストを挟めたりできる、というメリットがあります。あくまでダイジェストなので、YouTubeに出すような動画のボリューム感でいえば、OPの長さは最大10~20秒くらいが妥当ではないでしょうか。 とはいえ、20秒くらい延々と図形や画像だけで場を持たせるのは、ちょっと荷が重いのも事実です。そこで1つ、視聴者を飽きさせないためのヒントを紹介します。参考にするのは写真旅シリーズ「18-300mmレビュー」回です。 ここで取り入れたのが、語りをOPに詰め込む手法です。冒頭約1分20秒を使って、あいさつ・投稿の経緯・レンズの紹介・印象的な作例をテンポよく仕上げました。喋りが飛び交うことで、ある程度ゆっくりした動きの背景でも飽きにくくなると思います。特に動画をシリーズ化するなら、「動画によって1本1本違う文言＋いつもの決め台詞」のナレーションにすると盛り上がりますよね。 NHKの『映像の世紀』や『新日本風土記』は、毎度この「OP語り」で雰囲気をブチ上げようとしているので、参考になるかと思います。これらはどちらかというと壮大な映像作品ですが、動画の雰囲気に限らず、この「語りで何とか場を持たせるテクニック」は使えると思います。 長いOPを作る、というよりは「イントロを作る」という気持ちでいたほうが、いいものができるかもしれません。