デザイン改変的アルゴリズム

##前書き

近年、人工知能を活用したツールの進化は著しい。
様々なシステムに人工知能が組み込まれ、今まで人の手でしか出来なかった作業の多くが自動化され始めた。
例えば、このツールもその例の一つである。
[【beautiful.ai】](https://www.beautiful.ai/)
このツールはブラウザでプレゼンテーションを作成するツールだ。デザインをいくつかのパターンから選び、情報を入力するだけで、シンプルかつスタイリッシュなプレゼンテーションを作ることが出来る。

しかしながら、どうだろうか。
例えば、出来上がったプレゼンテーションの色味が何となく気に食わなかった時。
例えば、見出しのフォントがどことなくイマイチだった時。
我々人間は必ずしも、その完成されたプレゼンテーションに手を加えないとは言い切れない。
そう言った時、当記事のテーマを思い出して頂ければ、逆説的に「めっちゃ頑張って作ったんだけど最後ちょっと手を加えただけで死ぬ程ダサくなった」なんて悲劇は回避できるのではないか。
それが今回の記事を書くに当たり、全文の半分程書き終えた後に思い付いた建前だ。

さて、本題に入ろう。
仰々しいタイトルから見ると実に拍子抜けする事だろうが、
今回のテーマは**「ダサいプレゼンテーションを作る為のアルゴリズム」**だ。
ここまで読んで興味の無い方は是非ともブラウザバックして欲しい。無計画に書き始めたのでこの後の面白さは全く保証出来ない。それでも良ければ是非、最後まで御付き合い願いたい。

この手の試みは客観性を欠くと全く面白くないので、逐次画像を挿入しながら挑戦していく。
まず、『ダサい』の定義から確認して行こう。例えば、こういったプレゼンテーション。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301713/2f2b00a9-c63a-3a0b-1cfc-33fd582673d6.png)

言わずもがなだがダサい。どこがって、全体的に。
このダサさにより短い道のりで近づくため、要素を言語化し、どうダサいのか箇条書きで書き出してみる。
・背景が謎のグラデーション且つ虹色
・吹き出しの背景色が濃いのに縁取りの中の文字色も濃く、見づらい。
・ワードアートで絶妙に縁が歪んでいてイライラする
等が「ダサくなりやすい要素」として挙げられる。

また、このプレゼンテーションと下記の二つの資料から抜き出した『ダサくなりやすい要素』に５段階評価を付けていき、工数の少なさ×評価で最短且つ最強の選択肢を求める。
[資料１](https://www.youtube.com/watch?v=sC_q-a4bTTI)
[資料２](https://togetter.com/li/1580923)

##1.フォントを変える
まずわかりやすいのものから考えていく。フォントは資料でも両方で記載のある通りとても強力な要素だ。
いかに色彩の調和が取れていて美しいプレゼンテーションであっても「HGP創英角ﾎﾟｯﾌﾟ体」を適用することでそのスタイリッシュさをブチ殺す事が出来る最終兵器だ。クソダサレインボーよりはインパクトに欠け、しかしながらしっかりとダサくなるという点を評価し、ダサさ評価レベルは「4」。
工数はテキストボックスを選択→フォント変更ボックスの横のスクロールをクリック→スクロールして選択
の「３」だ。驚きの短さでもうこれでいいんじゃないかとすら思えるが、取り敢えずいろいろ試した上で最短を導き出してみよう。

フォント関連で行くと次にフォントサイズの変更だ。
これは簡単で、単純に文字をとてつもないデカさにすることでダサくする、といった方法だ。
しかしながらこれは欠点があり、タイトルページ以外にはなかなか使いづらいことだ。例を見てみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301713/7c5dbc51-7659-1577-bf30-8bd74087281a.png)

これはまだ何とか有り得る範囲のプレゼンテーションかもしれないが、本文ページで使うと・・・・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301713/5b3527b3-8064-dc45-eee0-c698df601467.png)
**読めない。**
ダサいダサくない以前にはみ出してしまって読めないのだ。しかもタイトルページに使った例を見るに「そこそこアリ」ではないだろうか。
文字サイズちょっと大きいかな？ぐらいで済んでしまって「うっわダサ」といったインパクトに欠ける。そういった点から要素の評価レベルは「２」。この時点で「フォントサイズ変更」はトップ争いから脱落する。




##2.背景色を変える
クソダサレインボーグラデーションを召喚する。
これが意外にも工数がかかる。
デザインタブ→背景の書式設定→グラデーションを選択→（グラデーションの分岐点を選択＋色を選択）×分岐点の数
分岐点は初期設定で４あるので工数は「１１」。ダサさレベルは文句なしの「５」。しかしあまりにも工数が多い為、同じ「背景色を変える」という中でもう一つ選択肢を考えてみよう。
それがこれだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301713/667a3d92-9c22-16bd-fbeb-aff6906f8df9.png)








地獄の原色塗りつぶしである。
これなら
デザインタブ→背景の書式設定→（塗り潰しを選択）→色の選択
で工数は「３」（カッコ内はデフォルト選択の為０とする）。しかしレインボーのインパクトには負けるし、色選びによっては際立ってはダサくならないことから、レインボーを５として考えると赤は３、黄色は４、青は３程度だと思われ、平均した要素レベルは「３」程度と言える。
色選びが微妙だって言うのならフォントも選び方次第ではないか、との意見もあるだろうが、この企画では「出来る限りダサくする」為の最短ルートを選んでいるのでこうなる。
この原色（RGB）はどれを選んでもそこそこダサくはなるのだ。ダサくはなるのだがインパクトが薄い。


##3.頂上決戦
この時点でフォント変更が最強だと決まってしまったが、一応実物を以て比較しておこう。
・フォント変更（工数：３×要素レベル：４）
・背景色を原色で塗り潰し（工数：３×要素レベル：３）
お互いの条件以外は初期設定のままのプレゼンテーションを記載する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301713/bf81d40c-778e-a476-3b98-53ca5c9fa3e6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2301713/34ad9979-b658-81c4-e16c-15aa34242ca0.png)
どちらもダサいがこれから何を変更してもダメそうなのはどちらかというと前者ではないだろうか。
何を書こうが「オッ特売品か？？？」の気配が消えない。
雰囲気は間違いなくスーパーの売り込みチラシの香りがする。
後者は[映画「マスク」の緑の人](https://www.google.com/search?q=%E3%83%9E%E3%82%B9%E3%82%AF%E3%83%9E%E3%83%B3%E3%80%80%E7%B7%91&rlz=1C1FQRR_jaJP948JP948&tbm=isch&source=iu&ictx=1&fir=L3QwYxiNRoNAGM%252CN7J01XJoXI5sgM%252C_%253BQAAh9rHod3umZM%252C08JCTbx9QDZsxM%252C_%253BjotP2HwYryETaM%252CtnFVpb1gRvsZTM%252C_%253BAvMeBOHOGwrnMM%252C08JCTbx9QDZsxM%252C_%253B_TJAcpAOD90jkM%252CAXALP52dVKHCcM%252C_%253BkxdnOCWhFZvFFM%252Csm4_SqsHU310XM%252C_%253BNmlSjLDbEjjHBM%252C4cQ2z5SbgYTDFM%252C_%253BrzxCL59un1HsLM%252CoL6eisKFreRQVM%252C_%253BkFIzuhyFiEY2KM%252Cry88nISYfcRr7M%252C_%253ByoMqKxVD9esBAM%252CVk6BqUtKI0q-5M%252C_%253BvX_1W5B45DQ9aM%252C-nyoXQIj2KqJqM%252C_%253BcXThL6-kWn9kgM%252CGjbZVijLitVgfM%252C_%253BI5ZwdIqjORjhWM%252C6wJhAJY8U-FO3M%252C_%253BaHHLujP_rSY8EM%252Cx8uSujBMqDXMCM%252C_%253Beit2KPdKeBSCXM%252C08JCTbx9QDZsxM%252C_&vet=1&usg=AI4_-kRQ0kW0Q5XPGnymQD7rwASZV20JSg&sa=X&ved=2ahUKEwju1ePImeb0AhXMCt4KHWAUCM0Q9QF6BAgDEAE#imgrc=L3QwYxiNRoNAGM)が静かに「産技短へようこそ」と語りかけてきているような雰囲気を感じる。それはそれで怖いが。


##4.結論

結論としては、**『より効果的にプレゼンテーションをダサくするにはフォントをダサくするのが最強』**
ということが分かった。皆様もお手持ちのプレゼンテーションを最大限ダサくしたい時、この検証を役立てて欲しい。
また、この記事は一見ふざけているように見えるが、どうやったらダサくなるのかを学ぶことは逆説的にどうやればダサくならないのかを知るためにも役立つ事象であり、いわゆる「フールプルーフ」の概念をシステムに実装するための第一歩とも言える。
一見バカげた行動でもしっかり考察することは何より大事な経験につながる為、今回の記事を書くことは自分にとって有益だったと思う。
この経験が今後何らかのソフトウェアを制作する際、見やすいデザインのインターフェース制作に貢献してくれることに期待したい。




ちなみにここまで書くに至った動機は９割ぐらい好奇心なので是非参考にしないで頂きたい。