Lifestyle Innovation | Soseki21

つぶやきのまとめ。とりとめのない思考を書き綴っています。

小説を書いたので「縦書き」のサブブログを作ってみた。

小説を書く女性:Soseki21ブログ

人間は見た目に左右されがちです。もちろん人間性や内面の美しさを重視すべきですが、多くの人間はファーストインプレッションで他人を判断します。だから、美しい、かっこいい、好感触のほうが一般的に得する傾向にある。

しかし見た目のよしあしは、普遍的なものではないかもしれません。個人的な趣味や文化の影響を受けるので、スレンダーな美女がいいと思う男性もいるだろうし、ふくよかなタイプが好みの男性もいます。

ハゲたおっさんが好みの女性だっているはずです。ワイスピ(映画『ワイルド・スピード』)のヴィン・ディーゼルドウェイン・ジョンソンはスキンヘッドだけれどかっこいいと思います。むきむきな筋肉も凄い(写真はWilipediaから)。

Vin Diesel by Gage Skidmore 2

Dwayne Johnson 2, 2013

思いつきで例えてしまいましたが、彼らに頭髪がないのはスタイルであってハゲではないな。失礼しました。というより髪がぼっさぼっさな2人が想像できんのだが。

見た目が大事だといっても、変えられることと、どうしようもないことがあります。ヴィン・ディーゼルドウェイン・ジョンソンは『ワイルド・スピード』の回を重ねるごとに筋肉が盛り上がってマッチョになっていきますが、役作りのために身体を鍛えたからだろうと考えます。しかし、たとえば肌の色は変えようがない。

したがって、肌の色で差別をすることは問題です。肌の色がどうであれ平等に生きる社会を実現しなければならない。

アメリカで警官の暴行によって尊い命をなくした事件があり、人種差別の問題が全米で社会問題化しています。全米どころか全世界に抗議運動は拡がりました。肌の色に関わらず歴史的な問題を抱えていると認識していますが、複雑な問題だからこそ解決することは難しい。

さらに社会問題だといっても、その騒ぎに乗じた破壊活動は許されるべきではないと考えています。デモは大切だけれど、どさくさに紛れて略奪や破壊を行うのは犯罪だ。

以下のツイッターでは、ニューヨークの住人が破壊活動に怒りの声を上げています。

彼女の言う通りです。ただし暴力的な破壊行為ばかりが世界に蔓延しているわけではない。ダンスによる抗議活動をツイッターで観たことがありました。この映像です。

世界は多様な側面を持っています。狭い観点だけでは判断できないこと、十分でないことがいくらでもあります。常に「自分の見ている世界は偏っているのではないか?」という疑問を忘れてはいけないですね。

どうしようもないことを諦めるのは簡単ですが、「こうだったらいいのに」を起点に「どうやったらできるか?」を考え「やってみた」と行動することが創造性の原点だと考えています。

COVID-19のパンデミック中に「マスクが配布されない!」あるいはドラッグストアに行って「いつマスクが入るんだ!」と店員に声を荒げたひとがいました。一方で「ハンカチでマスクを作る方法」「簡単にできるフェイスシールド」のような動画を流しているひともいました。

ぼくはどちらかといえば後者を支持します。なければ創ってしまえばいいじゃん?派です。

そこで唐突にブログの話になるのですが、ブログのカスタマイズは、やろうと思えばどこまでも可能です。もちろん自由度が低いサービスもありますが、はてなの場合、かなりデザインをいじることができます。

淡々と記事を書き続けること、地道な積み重ねが大切であると考えています。しかし、時間と気力に余裕があり、もう少しプロの世界に踏み込みたいと考えるなら、ブログには以下のような道楽の拡張性もあります。

  • 「デザイン」を究める  →Webサイトのデザイン、写真の加工など
  • 「メディア」を究める  →電子書籍化、動画化、ゲーム開発など
  • 「プログラム」を究める →JavaScriptjQueryCSSなど
  • 「収益」を究める    →コンテンツ販売、プラットフォームの構築など

ところで、Webサイトやブログのデザインを究める上で、日本人ならこだわりがあるはずなのに意外に見当たらないことが「縦書き」ではないでしょうか。たくさんブログを読んでいても縦書きブログに遭遇しません。。

縦書きについて、ぼくにはこだわりがあります。

実は、2007年9月に縦書きブログに挑戦したことがありました。その当時はCSS*1というよりHTMLの記述で縦書きにしたのですが、テキストだけで何も修飾がないプロトタイプ(試作品)ができあがりました。

物語の構造分析について考えていた流れで、先日、小説を書き始めました。小説を書いてみたところ、これはやっぱり縦書きだな、と。そんなわけで、久し振りにはてなで縦書きブログができないか挑戦してみました。「創世記21掌編小説ブログ」というサブブログを先日つくって、縦書き表示を研究中です。以下になります。soseki21-novel.hatenablog.com

サンプルコンテンツは最新の書き下ろしではなく、かつて遠い昔にブログで書いた掌編小説を流用しました。

この掌編小説では、小説+音楽というマルチメディア作品をめざしました。どちらが先にできたのか忘れましたが、イメージを小説と音楽で表現したわけです。さらにYouTubeで朗読したことがあります。「滑舌が悪い」という感想を頂戴したのだけれど、その映像コンテンツも掲載します。

デザイン自体はレスポンシブです。しかしスマートフォンの端末で閲覧した場合、縦書きになりません。そこでPCの見え方として、画像を貼っておきます。

 

縦書きブログサンプル:Soseki21ブログ

久し振りにCSSと格闘したのだけれど、CSSはやっぱりよく分からんな(苦笑)。ぼくにはプログラムのセンスがないのかもしれない。

ちなみに小説の表紙(カバー画像)は、写真ACさんの素材を使わせていただき、複数の写真をAdobe Photoshop 2020で合成しました。普段のブログでも同様にアイキャッチ画像を作成しています。時間がないときには合成や加工をせずに、そのままダウンロードした写真を貼っています。

Photoshopとの付き合いは長いのですが、最近はデザインセンスの面からスキルの向上と写真の加工を勉強中です。今回はレイヤーを切って、人物の切り抜き、背景、四角形、文字を重ねました。文字は透過させて、描画モードを「ビビッドライト」にして背景の画像と合成しています。

操作画面はこんな感じ。

Photoshopの操作画面:Soseki21ブログ

プロのデザイナーさんであれば凝ったことができるのでしょうが、まだ修行中です。とはいえスピード重視で、素材選定から20分ぐらいでこの画像をつくりました。

縦書き表示をするにあたって「はてな 縦書き」などでググりました。最初に発見したのは、テーマストアに登録されている「Writter」です。

blog.hatena.ne.jp

「Writter」を使ってみたのですが、以下の点で納得がいきませんでした。

  • タイトルまで縦書きになってしまい、書体の変更が面倒
  • 長文になると横のスクロールバーが表示されて利用しにくい
  • サイドバーの配置など、全体的におしゃれではない

とりあえず縦書きにはなるのだけれど、率直な感想をいわせていただくと、あまり小説を書かれたことがない、いわゆるDTP*2に携わったことがない方が「とりあえずCSSでテキストを縦にしてみました」といった印象を受けました。

どうしても納得がいかなかったので別の方法を探したところ、「縦書き文庫」さんのエントリを発見しました。

tategakibunko.hatenablog.com

おおー!これだこれだ、と感動。

CSSのサンプルコードを流用させていただき、「デザイン」の設定でフッターの部分に挿入しました。しかし、なぜか巨大な縦書き文字が表示されてしまった。フォントをいじろうと思ったのですが、そこでハマってしまい、結局は流用させていただいた記述を使っています。

簡単に使い方を説明すると、以下2つを設定することで記事の一部を縦書きにできます。

  1. 利用しているテンプレートのフッター部分のCSSをカスタマイズする。
  2. 縦書きにしたい記事を書いて、縦書き文章を<div>タグの縦書き指定で囲む。

全部ではなくて一部を縦書きにできるところがいいですね。ただ「試してみよう!」と思う方に注意していただきたいのは、メインのブログに適用させてしまうと、きれいなデザインをぐちゃぐちゃにする可能性があります。できればテスト用のサブブログで試してみることをおすすめします。JavaScriptを利用しているようなので、自己責任を前提としてトライアルされるようにお願いします。

超・基本的なことですが、プログラムは「開始>終了」の構造で記述されています。CSSも同じです。この構造の場合、終了部分を正しく宣言して閉じないと、きちんとしたプログラムとして動作しません。WebサイトのCSSも同様で、変更が反映されなかったりデザイン自体が崩れたりします。

いくつかの指定が入れ子構造の場合、それぞれ的確に終了を指定しないときれいに表示されません。今回フォントの指定を変えようとしました。しかし、うまくいきませんでした。めちゃくちゃなやり方ですが、終了タグをコピーして入れてはプレビューして、レイアウトが崩れずに表示された状態で公開という情けない手段を取っています(苦笑)

JavaScriptの読み込みなど表示速度が遅いようです。表示速度を改善したバージョンアップ版もGitHubで公開されているようなので、時間があるときに修正しようと思います。

デジタルコンテンツの「縦書き」について、もう少し補足します。

Webサイト全体の縦書きを普及する団体としては「縦書きWeb普及委員会」という団体をみつけました。はてなの「Writter」のテンプレートも紹介されています。しかし、どのような企業で組織化されているのか、よく分かりません。2017年以降の活動も不明です。

tategaki.github.io

縦書きができるブログサービスとしては、株式会社KDDIウェブコミュニケーションズが「g.o.a.t.」を提供しています。非常に美しいデザインが用意され、クールな印象です。すべてのレイアウト(テンプレート)で縦書きが利用できるとのこと。

www.goat.at

このプラットフォームを使って、小学館とのコラボで「小説丸」さんというかたが小説を縦書きで公開しています。

shosetsumaru.goat.me

スマートフォンでも確認したのですが、見事に縦書きになっていますね。素晴らしい。しかも、パララックス*3で文字だけではなくデザインを楽しめるようになっています。

小説丸さんの作品は、小学館から紙の文庫化ならびにKindle電子書籍化されているようです。ざっと見た限りでは、「g.o.a.t.」でKindle用に書き出しができる機能は実装されていないようでした。

冥土ごはん 洋食店 幽明軒 (小学館文庫)
 

そういえば、ブログをPDFに書き出して印刷できる機能が、はてなにあったな、と思い出しました。

ブログ出版などが盛んに言われていた時代で、ブログから出版デビューするブロガーがいたこと、そこまでいかなくてもブログで記録した育児日記をパーソナルな本として残しておきたい需要があったからだと思います。いわゆるフォトアルバムのようなものです。

調べてみたところ、いまでもはてなには「製本サービス」があるようです。

はてなブログダッシュボードの「設定」のうち「詳細設定」のタブの最後に「エクスポート」という項目があり、ここから「MyBooks.jp」のサービスを利用して、はてなブログの書籍化(印刷・製本・EPUB)ができる。

「インターネット上のかけがえのないやりとりを残しておきたい」と考えるひとがいたら、利用してみるとよいかもしれません。

www.mybooks.jp

縦書きに魅力を感じるとはいえ、縦スクロールがブラウザの標準である以上、Webコンテンツ上で縦書きにする意義があるのか?という疑問も感じないわけではありません。Web小説もしくはスマートフォンで読むライトノベルは横書き仕様という標準化もありだろうし、縦書きで読みたいなら電子書籍にすればいいかもしれない。

デジタルコンテンツで配布するのであれば、電子書籍EPUBファイルでよいのではないかと考えます。

以前、電子書籍の出版を考えていたことがありました。

あまりにも採算が合わないので断念しましたが、試験的に電子書籍を作ってAmazonKindleストアで公開するところまでやってみました。

電子書籍のファイルを作成して「なーんだ」と感じたのが、EPUBのファイルは結局のところXHTMLCSSのファイルを圧縮しただけじゃないか、ということです。一見、特殊なファイルのようにみえますが、実は電子書籍はホームページとあまり変わりがない技術を基盤としています。さらにいえばWordや一太郎の文書とも大差ありません。

Wordなどの文書で一般的によく知られているのが、PDFへの変換です。

PDFに変換することを電子書籍化と呼んでいる方もいらっしゃるようですが、ぼくはちょっと違うのではないか?と考えています。というのは、PDFは基本的に固定フォーマットになるため、マンガや雑誌などレイアウトが固定された出版物には適していますが、小説のような文字を流し込むタイプには適していません。

いろいろな用途で便利とはいえ、PDFは電子ファイルであって電子書籍ではない、ということが個人的な認識です。テキスト主体の電子書籍では、EPUBのリフロー型のファイルで配布したほうがメリットがあります。ちなみにEPUBは固定フォーマットにもできます。

これまでブラウザ上でEPUBファイル読んだことがなかったのですが、プラグインを準備すれば簡単にEPUB電子書籍を読むことができるようです。Chromeの場合には「Redium」がよく利用されているとのこと。

chrome.google.com

電子書籍から離れて、デザインについて少し昔話をします。インターネットの黎明期のWebサイトで感じたことです。

20年以上前だと思いますが、印刷のデジタル化の波に続いてやってきたのが、インターネットによるコンテンツの波でした。このとき右肩上がりでWebサイトのデザインの需要が高まりました。印刷会社がなくなるなどとも言われて、急遽インターネットの事業にシフトする動きもありました。

そこで雑誌などアナログで印刷物のレイアウトをされていたグラフィックデザイナーさんがWebサイトをデザインするようになったのですが、印刷物を手掛けていたかたは、とても美しい文字組みをされていた印象が強く残っています。デジタルコンテンツから始めたひとよりも、アナログのデザインの経歴が長いかたのほうがクオリティの高い仕事ができるのではないか、と当時は思いました。

ちなみに「グラフィックデザイナーって何?」という方もいるかもしれません。主にパンフレットや雑誌など印刷物のデザインをされているデザイナーさんをそう呼んでいました。

職歴を遡れば、ぼくはレイアウト指定紙に文字の指定をして、写植屋さんにバラ打ちを頼んで編集の仕事をしていた時期があります。

写植というのは「写真植字」の略で、でっかい機械を操作して印刷に使うための文字をつくります。「文字をつくる」ということは、キーボードでかちゃかちゃやってタイプしたりスマホフリック入力したり、そんなデジタルネイティブな若いひとにはイメージできないかもしれません。ばっこんばっこん音を立てながら文字通り「文字をつくって」印画紙を出力していました。

動画で見たいと思って探したところ、みつかりました。この映像の前半に写植機と手書きのレイアウト指定紙が出てきますが懐かしい。


THE MAKING (10)雑誌ができるまで

写植で文字組みをされているオペレーターさんは職人さんなので、文字を美しくみせることに途方もないこだわりがあったことを覚えています。

いい加減な文字指定をすると怒られました。あるいは未熟な若造の自分のために「これ、指定を変えてみたんですけど、こっちの方がよくないですか?」と文字組みを訂正していただいたこともあります。悔しかったですね、あれは。なので文字指定を勉強しました。

写植屋さんに指定紙を渡すグラフィックデザイナーさんも、クオリティに対する意識が高く、緊張感とプライドがありました。そもそも誤植や、変な指定をして打ち上がった写植はやり直さなければならず、時間のロスとともに追加費用が発生します。だから間違えられない。

そんな文字の専門家であるグラフィックデザイナーさんがWebサイトをデザインすると、余白の見せ方、フォントの選び方、文字のツメ、行間のアキにものすごくこだわりがあり、唸るような洗練されたデザインになりました。一方、紙媒体をデザインした経験のないWebデザイナーさんが手掛けると「とりあえずテキスト流し込みましたー!ドヤ!」みたいな、おざなりなWebサイトになった気がします。20年以上前の話なのであしからず。

だからといって、全面的にグラフィックデザイナーが勝っていたわけではありません。印刷物中心のグラフィックデザイナーさんは、インタラクティブな仕掛けや立体的な構造がつくれないことが弱点ではなかっただろうか。

紙をめくる発想でインターネットのコンテンツを考えるので、構成が単調になるわけです。あるいは、動的もしくはインタラクティブなWebサイトの場合、データベースとの連携やJavaScriptなど技術的な理解が必要になります。このような考え方は印刷物はありません。飛び出す絵本みたいなものを作っていれば別かもしれませんが。

要するに、Webデザイナーさんには柔軟な発想がありましたが、印刷物メインのグラフィックデザイナーさんは二次元的な呪縛から逃れられなかった。もちろん全員がそうだったわけではなく、Macを使いこなすデザイナーさんは、印刷物からインターネットのコンテンツ制作にスムーズに移行していました。

さすがに現在では、アナログの制作者とデジタルの制作者による前時代的な差はなくなったのではないでしょうか。むしろCSSをしっかり学ぶことによって、途方もなく美しいWebサイトやコーディングを行っているのだろうな、と。

また、印刷物もWebサイトも両方手掛けるデザイナーさんが増えたのでは?と考えています。反面「Webサイトなどデジタルコンテンツはできるけれど、印刷物はできません」と逆転している可能性があるかもしれません。

いまインターネット黎明期のデザインについて思い出して、そのことを現在に投影してみて感じるのは、PCからスマホにメインのデバイスが変わるなかで同じようなことが起きるかもしれないということと、通勤からリモートワークに働き方が変わるなかで陳腐化する技術があるかもしれないということです。

根本的に持続するものと、変化のなかで陳腐化するものがあり、それを見極めることが大切です。

たとえば、印刷に依存した会社は、インターネットの大きな波のなかで生き残れなかったのではないか。しかし、印刷の本質を「伝えたいひとから、伝えてほしいひとへのコミュニケーション」と考えて、印刷は目的を達成する手段のひとつにすぎないと考えたなら、いくらでもデジタルシフトできたはずです。事実、映像事業を展開した印刷関連の企業もありました。成功しなかったのは、装置産業的な錨を巻き上げることができなかったからかもしれません。

デザイナーであっても、プログラムをデザインする、ワークスタイルや業務プロセスをデザインすると仕事を再定義すれば、いくらでも領域を拡げることができると考えます。このとき活動領域はある程度ゆるく設定しておきながら、こだわりについては先鋭化するとよいのでは。

ぼくはデザイナーでもなければプログラマーでもありません。「じゃあ何?」と言われると昔から言葉に詰まったのだけれど、ライターでもないし、プランナーでもない。けれども、いろいろな職種のセンスを貪欲に吸収していたい。

現在の信条は「何者でもないからこそ何者にもなれる」です。

自分をブロガーであると自負していたことがありましたが、いまぼくはブロガーではない何者かになりたい。そして、自分が何者か名乗ったとき成長が止まってしまうのではないか、と考えています。というのは、言葉というものは発言したときに過去になり、人間の思考を固定するデメリットがあると強く認識しているからです。

肌の色や言語は強力なルーツになる反面、そこにこだわっている以上、差別思考からは逃れられません。「こだわりつつ/解放している」「闘いながら/平和」という二律背反の矛盾した状況を大事にしたほうがよいと思います。COVID-19の状況についても、外出自粛で身体は拘束されながら精神は自由、みたいな。

ウィズコロナとか、ポストコロナとか、アフターコロナとか、言葉遊びはどうでもいい気がしますが、いま時代が求めている本質的な姿勢は、そういうことではなかろうか。

それから「大切なことは、あえて言葉にしない」、内なる言葉に留めて、その言葉が燃えるチカラを利用して創造の原動力にする。もしかするとそんな決意が必要な時代かもしれません。

*1:Cascading Style Sheets:カスケーディング・スタイル・シート。Webサイトのデザインが複雑になるにつれて、デザインや構造を別のシートに分離して細かく設定するようになりました。そのための指定とファイルのこと。

*2:DeskTop Publishing:デスクトップ・パブリッシング。PCのディスプレイ上で書籍や雑誌のレイアウトをしてプリンターで出力すること。ディスプレイで確認した通りにプリントアウトできることから「WYSWYG(ウィズウィグ:What You See Is What You Get)」が特長。

*3:Parallax:視差効果。スクロールにしたがって背景の写真が変化するなどの演出。jQueryなどの技術を使う。