【独学でWebデザイナーになった人の記事紹介付】未経験者が１個レスポンシブサイトを作ってみてわかったこと
どうもこんばんは。
最近はL'Arc〜en〜Cielのアルバム聴きながら脳内でヘドバンしてます。
今現在私は「HTML5＆CSS3 デザインブック」を教科書代わりにレスポンシブサイトの勉強をしています。
書店のWeb関連のコーナーをのぞいたり、アマゾンで関連書籍をさがしてみると数多の本がある中で
何故これを選んだかと言うと
結構、未経験者からWebデザイナーになった方のブログなどで紹介されていることが多かったからです。（当社比）
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (5件) を見る
私は10月にWebデザイナーに転職することを決意した初めのころ、
専門のスクールに通おうかなと思っていましたが
様々なお話を聞いたり、考えた結果、（主に金銭面が原因で）独学で頑張ってみようと決意しました。
どうしてもスクールって、就職率の数字が出ているところがなかったので、
ここなら安心できる、というのが、イマイチ見つからなかったんですよね。
なので、それよりも実際に独学からWebデザイナーになった人の話を参考にしたほうがずっと説得力があると思い
スクールを断念した後、色々そういった方たちのブログ記事をあさりまくったんです。
それで今月は、こいつ1冊とにらめっこしながらサイトをとりあえず一通り作ってみようと制作中なのです。
１個レスポンシブサイトを作ってみて感じた3つのツボ
で、実際に本をもとに一個作ってみたわけですが
レスポンシブデザインってここを押さえておけばあとは応用だなあと思いました。
１．ページをbox単位で見る視点
正直ページレイアウトはboxのパズルゲームだな！と思ったのが感想。
実際この本の一番最初の章で扱ってたのは基本的に「boxでどうページを組み立てるか」の説明でした。
その基本編を終わった後に実際にページを作る章に入っていくのですが、作ってみるとその意味が深く理解できます。
なのでページレイアウトを考え、実際にコードに落とし込むときは
「ゴールのレイアウトを表現するには、どうやってbox分割してあげればよいか？」を考える作業がとても重要になってきます。
２．display、floatの理解
まあこれは1番目のboxのレイアウト視点が大事だからこそ、ということではあるんですけど
boxベースでレイアウトを扱う上で、この二つの理解はおろそかにはできないです。
何故displayをblockにしたらレイアウトがうまくいくか、とか
floatを指定するのはいいけど結局どういう仕組みで左行ったり右行ったりできるの、とか
レスポンシブサイト創るにあたって仕組みレベルでまず理解すべきはまずこの二つだなと感じました。
この二つに関しては、後日自分の復習のためにも記事としてまとめたいと思います。
３．paddingとmarginを使ったページレイアウト調整力
ページが違和感なくきれいに見せるためにはこれは不可欠。そう感じました。
この本での勉強に入る前に自分で何個かページレイアウト練習につくったときも感じていましたが
レイアウトが崩れるのもレイアウトがきれいに整うのも、すべてはpaddingとmarginを操れるかどうか！にかかっています。
なのでboxレイアウトを行うにあたってbox内でのpaddingとmarginのルールは理解必須です。
（以前boxレイアウトでぶち当たったときに書いた記事の内容とか特に重要でした）
独学でWebデザイナーになりたい人向けのおすすめ記事
…とまあえらそうに講釈たれてるようになってしまいましたが、
まだ１冊は終えていないので理解が抜けてたり慣れていなかったりすることは多々あるのですが
今月の終わりは今度はフォトショとイラレ練習のための本に取り掛かるスケジュールなので、たゆまず残りの分も読んでまた作っていきます。
最後に、私が「この人の記事はまた参考にしよう！」と思った方の記事を紹介します。
あとでFeedlyにも登録しとこうっと…
yamasha.net
www.designmap.info
tsukuruiroiro.hatenablog.com
□「Webデザイナーになるには何すればいいか？」という一番初めの疑問にぶち当たったときに参考になりました。
どれも簡潔にまとまってるので計画が立てやすくなります。
□上の二つの記事を読んで、何をやるかは決まった！じゃあ具体的に目指すべきゴールは？と考えたときに参考になります。
blog.cntlog.net
kuraokura.xsrv.jp
□紹介しているサイトが役に立つものが多いです。
また、実際にWebデザイナーってどういうことやるのか、何が必要なのか、についてのお話は業種未経験者にはありがたいです。
個人的な今の気持ちとしては、早くフォトショ＆イラレ練習用教科書に取り掛かって、ばんばん模写をやりたいという気持ちが高まってます。
いずれにせよ年内にはどちらも終わらせたいので、これからも日々積み重ねていこうと思います。
【Woekshop】Web Design/Layout編「ベーシックカラムレイアウトのサイトを作る」追加しました
ワークショップサイト更新しました。
今回は、Web Design/Layout編の「ベーシックカラムレイアウトのサイトを作る」のお題目を元に
よくサイトで見かけるような基本的なレイアウト5種類を一枚っペラページで作ってみました。
」
仕事でタグを操作することはあるので、レイアウト組みはそんな難しくないだろうと思っていましたが、
CSSでちょこちょこつまずきました。
floatを扱う際のカラム落ち、幅と余白とのバランスの考慮はあまり業務で直面してこなかったので
この機会にいい勉強になりました。
良ければお立ち寄りください↓
boxのwidthをパーセント指定して扱うとぶち当たったよくある落とし穴
どうもです。
天気良い日は部屋から窓の外の青空を見てるのが好きな引きこもりです。
1カラムレイアウトで一つのボックス内にボックス二つ並べたろーとwidthをパーセント指定しながらコーディングしていたら
なんだかうまくいかない現象にぶち当たったのでちょっと調べてみました。
結論から言うと、boxレイアウトするなら知っておくべき基礎的なことでした。ぶちあたってよかった。
横並びにならないboxのCSS指定とその対処法
【HTML】
<div id="sub"> <div id="sub1"> <ul> <li>side bar1</li> <li>side bar2</li> </ul> </div> <!-- / #sub1 --> <div id="sub2"> <ul> <li>side bar1</li> <li>side bar2</li> <li>side bar3</li> <li>side bar4</li> </ul> </div> <!-- / #sub2 --> </div> <!-- / #sub -->
【CSS】
#sub { color: #fff; width: 830px; background: #F36; padding: 15px; margin-bottom: 10px; } #sub:after { content: ""; clear: both; display: block; } #sub1 { float: left; width: 50%; padding: 10px; background: #F36; } #sub2 { float: left; width: 50%; padding: 10px; background: #F36; }
これでイメージ的にはsub1とsub2が横に二つトントンと並んでくれるだろうーと思ってブラウザ立ち上げたらこうなりました。
(゜ω゜)？
「あれ…？幅50％ずつ指定だから綺麗に二分割されるんじゃ…？なんでカラム落ち…？」とちょと悩みましたが、
CSS見ていたらなんか怪しいところあったので修正してみたのがこう。
【HTML】
<div id="sub"> <div id="sub1"> <div id="paddingSetting"> <ul> <li>side bar1</li> <li>side bar2</li> </ul> </div> <!-- / #paddingSetting --> </div> <!-- / #sub1 --> <div id="sub2"> <div id="paddinfSetting"> <ul> <li>side bar1</li> <li>side bar2</li> <li>side bar3</li> <li>side bar4</li> </ul> </div> <!-- / #paddingSetting --> </div> <!-- / #sub2 --> </div> <!-- / #sub -->
【CSS】
#sub { color: #fff; width: 830px; background: #F36; padding: 15px; margin-bottom: 10px; } #sub:after { content: ""; clear: both; display: block; } #sub1 { float: left; width: 50%; background: #F36; } #sub2 { float: left; width: 50%; background: #F36; }
sub1とsub2のpaddingとっぱらいました。そもそもこれいらないだろうと思ったし。
なおりましたﾜｰｲ。
どうも内部の計算的には、sub1の幅＝sub1のwidth + sub1のpaddingとなっていた模様で
どうもここら辺の理解ちゃんとできてないっぽいぞ、と思い、
なぜこの現象が起きたかググってみました。
幅指定の考え方
よく見かけるboxの関係図です。
このboxに対してwidthを指定したとき、初め私はBorderまでを含めてwidthかと考えていたのですが
実際のところboxで指定するwidthとはContentの幅のことを言っているのです。
つまりContentの部分はちゃんと親のsubから見ると50%の幅になってはいますが、
修正前のCSSだとさらにPadding分の幅も加わって結果的にboxが幅50％以上になりでカラム落ちしてしまったわけなのです。
（もちろん指定があればBorder、Margin分も広がるとのこと）
カラム落ちしないようにwidthとpaddingを同時に設定するには
今回は練習用に作っていたのでpadding絶対にいる！ということはないのですが
もしどーしても指定したいという事態が起こったときに対処するにはどうしたらいいか、ついでに見っけたので書いておきます。
①入れ子にして別々に指定
widthとpaddingを同時に指定したらおかしくなるなら
widthとpaddingを別々に指定するように変えればいいじゃないという考え方。
【HTML】
<div id="sub"> <div id="sub1"> <div id="paddingSetting"> <ul> <li>side bar1</li> <li>side bar2</li> </ul> </div> <!-- / #paddingSetting --> </div> <!-- / #sub1 --> <div id="sub2"> <div id="paddinfSetting"> <ul> <li>side bar1</li> <li>side bar2</li> <li>side bar3</li> <li>side bar4</li> </ul> </div> <!-- / #paddingSetting --> </div> <!-- / #sub2 --> </div> <!-- / #sub -->
【CSS】
#sub { color: #fff; width: 830px; background: #F36; padding: 15px; margin-bottom: 10px; } #sub:after { content: ""; clear: both; display: block; } #sub1 { float: left; width: 50%; background: #F36; } #sub2 { float: left; width: 50%; background: #F36; } #paddinfSetting { padding: 10px; }
※sub2のboxの上に変な余白で来たのがちょっと謎…
すんませんまだここは解明できてないです；；
②box-sizingを利用する
要素の幅と高さを計算する為に使用されるboxの既定のルールを変更することができるそうです。もとのルールから変えてしまえホトトギス。
【HTML】
<div id="sub"> <div id="sub1"> <ul> <li>side bar1</li> <li>side bar2</li> </ul> </div> <!-- / #sub1 --> <div id="sub2"> <ul> <li>side bar1</li> <li>side bar2</li> <li>side bar3</li> <li>side bar4</li> </ul> </div> <!-- / #sub2 --> </div> <!-- / #sub -->
【CSS】
#sub { color: #fff; width: 830px; background: #F36; padding: 15px; margin-bottom: 10px; } #sub:after { content: ""; clear: both; display: block; } #sub1 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; background: #F36; padding: 10px; } #sub2 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; background: #F36; padding: 10px; }
※うまいこといったんですけど…
これ、DreamweaverCS6のデザインモードでみるとやっぱりカラム落ちしたままに見えてしまうので
ちょいと「は？」となってしまいますので注意。ブラウザで見るとちゃんとなるのにな…
てなてな感じで。
レスポンシブデザインは今やスマホが主流の現在において避けて通れないこと。
んでそんな中でwidthにパーセンテージ指定って結構ザラなので
今回けつまずいて勉強になったのでよかったです。ふう。
今度はベンダープレフィックスについてちょっと調べてみないとな。
Wix楽しくいじってます
こんばんは。Wix絶賛いじりまくってます。
昨日公開したワークショップサイトをちょこちょこ更新するのがいよいよ楽しくなってきましたウエノミオです。
どんなサービスやツールやアプリケーションにしてもそうですけど
使えば使うほど手になじんでくる、という感覚ってあると思うんですが
私の場合、Wixのホームページエディタは比較的早く手になじんできている感がとてもあります。
SEという仕事柄ということもあり、
なおかつ趣味のイラストでデジタル絵を描く場合は片手ペンタブ片手はショートカットキー連打で作業している性質が講じて
ショートカットキーは覚えるものは覚える、使えるものは使いまくるのが普段のモットーな私。
WixのWebサイト制作は基本クリック＆ドラッグですが、ちゃんとショートカットキーも効くように動いてくれるので、
私にとってはとてもストレスフリーで使えば使うほど慣れてきます。
これもいわゆるWebアプリケーションの一つですけれども
普段仕事では業務用Webアプリケーションを扱っている人間からすると、
こういうBtoC向けのWebアプリケーションって作るときにまた視点が違うんだろうなあと思えてきます。
BtoC向けのサイトにしろアプリにしろサービスにしろ、
触っていると業務用アプリよりもずっとUI/UXについて注意や考えがめぐらされているなと感じます。
アニメーションをよく使うところとか、こちらの違和感を与えない色彩設計とかしているなと思ったりするので、余計に。
ただ一個不満を言うなら、フォントの数字入力の時に
直前で全角入力に変えた状態のまま数字入れようとすると
全く反応してくれなかったときはナンダコレと思いましたが…
しかし感覚的にはエクセルとかワードとか使ってる時と近いので、
おかげでだいぶん突貫工事感は薄れつつあります… ※あくまで当社比
てな感じな状況は置いといて。
ワークショップのお題の一個はレンタルサーバからのサイト閲覧がうまくいけば公開できそう、なのが今日の進捗。
今週末にギャラリーに載せられるような作品（生まれたての蟻かと思うくらいの少なさですが）をまとめてあげたいなと思っていますが
どうも仕事の方が、土曜に出勤命じられそうな勢いひしひし感じて肝がひやひやしている今日この頃です…
ところで。
最近はベッドではなく無駄にリクライニングとかできちゃう机の椅子で寝て起きての生活をしています。
いつぞやかの大学時代にイベントに向けて床で寝ては起きて作業、な修羅場だけどすごく楽しい日々を思い出して
私自身結構そんな生活を楽しんでますが
なんとなく体には変な負荷がかかっていそうでそろそろ恐ろしく感じる年老いた自分がいるのもまた事実。
時の流れには逆らえないものです…
ワークショップサイト、はじめました
どうも、お久しぶりですこのブログ(白目)
一番最初の記事書いてた時からわかっていたけど超絶不定期更新になりましたこの日記。
三日坊主はまさしく私のためにあると自信持って言えます。自慢にならないけど。
さてはて。
ほっぽらかしてた間何やってたんやただ遊んどっただけかいと言われたら
そこは全くもってそうではなくて。
仕事も相変わらずしてたのはもちろんですが
9月、10月、自分の人生というかキャリアを動きながら考えていました。
で考えた結論。
ワークショップサイト作りました。
http://cre30r0ad.wixsite.com/yorozuya-koubou
今現在見た瞬間だと
「は？！？！？！なんもねえ？！？！？！」
「しかもこれ工事中じゃね？！？！？！」という感じに
仕事では絶対やってはならない未完成物を納品するというやらかしをやっているようにみえますね。
(白状しますとWIX今まで全く使ったことなかったから
いざ使ってみて保存しようとしたら間違って公開しました。
人生そういうこともあるあるきっと)
まあしかしながら、残念なことに私現在本業がSEであるために
「これはアジャイル開発の一環だ！」と思うという都合のいい解釈術知ってまして
このURL載せてる今も割と鼻歌うたえる心境です。ふんふふん。
(仕事では絶対やってはいけない解釈術です)
脇道はこれくらいにしといて。
なんでこれ作ったかというと
私やっぱりWEBデザイナーになりたいんだとわかったんです。
だからそのために、自分の勉強部屋、兼、自分の実験部屋、兼、自分の画廊をどこかに欲しかった。
自分の思いをぶつけるために、
自分の熱意に油を注ぎ続けるために、
自分の「好き」「楽しい」「追求したい」を発散するために。
それだけの理由です。
その答えにたどり着いたのが10月。
そこに着くまで色々ありましたけど、
まあ10年20年以上生きてれば当然といえば当然ですが色々ありましたけど。
とりあえず、近頃の私はこんな感じ、というところです。
てなわけで。
今のところこっそりひっそりがっつり転職活動しながら作品作ってます。
SEからWebデザイナーにキャリアチェンジするため動けばその分そこそこ色々課題が出てきますが
なんだかそんな毎日が今厳しくも楽しいです。
てな訳で。
今後勉強のためにつくったものとか
自分の実力を表すための作品とかをこのサイトに置いていこうと思ってますので
このサイト更新したら、連動してこのブログも更新していこうと思います。
どうでもよいけど90年代のJ-POPMV特集どっかでやってくれないかな。
映画「君の名は。」を見てきて「すばらしい！」と思った３つの点 【その3】
ヒットを支えた二つの意識 ―――エンタメ性と大衆性
前回の記事から間が空いてしまいましたが、最後はマーケティング的なすばらしさと言う観点から。
私自身、どういう言葉をチョイスしようか迷ったんですけど
この映画を見終わったとき、「うまいなあ～」という感想を抱いたんです。
それは同意味で「うまいなあ～」と思ったのかを、述べていこうと思います。
新海監督作品と言えば「秒速５センチメートル」が代表作、と言う風に
「君の名は。」が登場する以前はファンの中での定位置化していましたが
新海監督曰く、「常に新作は前作を超えるものを作りたい」「皆さんから好評をいただいた『秒速』を超える代表作を作りたいという思いはあった」と以前の記事（第一回）の動画の中で語っていました。
（過去のインタビューでも「一番最新の作品がつくってもらえるように」と言う心がけは常に持ち続けていた方だとうかがえます。参考はこちら↓）
そんな各作品に自分なりのマイルストンを設定して作品作りを行ってきた新海さんの集大成が今回いかんなく発揮された結果となりました。
この集大成を発揮するにあたって、
前回、前々回で述べたような新海さん自陣の作品の個性が持つ魅力が詰まっているだけではなくて
「エンタ―テメントとしての側面」という点と
「一般の人々にいかにアニメを届かせるか」という点を新海監督が自覚的に行い、制作側も協力したからこそ
爆発的なヒットをかましたのではないかと考えています。
その二つの意識が要となっているとうかがえるインタビュー記事がありましたので
ちょっと紹介します。
※途中新海監督のコメントは以下の記事から抜粋しています。
◆「エンタ―テメントとしての側面」という意識
このインタビュー記事にも書いてありますように、「君の名は。」では今までの作品の中でも特に目を惹くくらい前向きな空気を醸すようになりました。
本人曰く「『言の葉の庭』と『君の名は。』の間にした色々な仕事からの連続性」の結果としてこの空気になった、と語っています。
新海（以下敬称略）『なかでも本作をつくるうえで最も大きかったのが、「ダ・ヴィンチ（KADOKAWA）での小説版「言の葉の庭」の連載です。
およそ8カ月、オムニバス形式の連載だったので、ひと月ごとに物語を完結させる。それらは今思えば、物語づくりのトレーニングとして、「君の名は。」につながっています。1話を書くにあたって、数冊の本を読んだり、数人の人に会って、話を聞いたりしていて、創作に関わる一連の活動で得た手応えや手つきを使ったという意味で、「君の名は。」にも連続性を感じますね。』
そして、そういった仕事の中で物語作りの力を蓄え本作の製作に取り掛かった際に
監督は「なにかしらの願いの物語にしたいという気持ち」を念頭に置いて邁進していったと語っています。
新海『東宝で300館規模だから、とかではなく、なにかしらの願いの物語にしたいという気持ちがありました。震災以降、大きな事件や災害があった中で、いろんな人が願ったり祈ったりした気がします。「こうじゃなかったらよかったのに」とか「こうすればよかった」と。
2010年代は、そういう、社会全体が強い願いや祈りに支配された時間が何度かありました。現実で実際に叶ったもの、叶わなかったものがあったと思いますが、フィクションでは、そこに希望を込めた物語を描きたかったんです。
例えば「秒速5センチメートル」をつくったときは、そういう感覚がなかったんだと思います。強い願いや祈りみたいなものを持っている人は個々にはいたんだろうけど、社会全体としては持っていなかったと思うんです。みんなが実際に体験したことだからこそ、絵空事ではない、もう少し生の感覚として描けると思って、今回のような結末を描けたんだと思います。』
つまり監督はこの「君の名は。」に関しては特に見ているお客さんの等身大の気持ちに寄り添うことを意識し、
そのためにエンターテイメント性を高めることを狙ったと考えられます。
例えば、今回この作品において監督はお客さんの気持ちの上がり下がりを完全に把握したうえで作品を完成させる、という試みを重視したと語っています。
新海『「君の名は。」の上映時間である107分間をいかにコントロールするかは、僕にとっての大きな仕事でした。具体的に言うと、107分間の観客の気持ちの変化を、自分の中で完璧にシミュレーションする。過去の作品では把握しきれなかった時間軸を、今回は完全にコントロールしようと思いました。
とにかく見ている人の気持ちになって、できるだけ退屈させないように、先を予想させない展開とスピードをキープする。一方で、ときどき映画を立ち止まらせて、観客の理解が追いつく瞬間も用意する。それらを作品のどの場面で設けるか、徹底的に考えました。』
また、「言の葉の庭」 から関わりがある東宝アニメーション側の意見もうまく取り入れて作品に反映させている節も見られます。
特にプロデューサーである川村元気氏からのアドバイスは新海監督も積極的に向き合っており、度々インタビューの中でもお話を伺うことができます。
これまで数々の映像作品を世に送り出してきた大手と言うこともあり、
大衆向け映像コンテンツはどういうツボを押さえると売れるのか、と言う視点に関しては東宝はプロフェッショナルです。
そういう「エンタメを売るプロ」の視点も交えながら作品の方針を固めて言った姿勢からも
今回の作品をよりいろんな人に見てもらおうという意気込みは特に強かったのでしょう。
新海監督はもともとおひとりで自主製作のアニメーションから始まったというところもあり、
それまでは作品がいかにウケるかと言うよりも、作品に自身が表現したいものを最適な形で表現することに重きを置いていたと見受けられます。
結果的に彼のその感性が大反響を生んだ最初の作品が「秒速5センチメートル」だったわけですが、
こちらの作品はどちらかと言うといわゆる「玄人ウケ」する作品のため、大衆性と言う意味では今回ほどは意識していないようです。
しかし、作品作りをこなしていくにつれ、作品を作るにつれて監督自身の環境の変化やそれに伴う影響、心境の変化が相まって、
よりお客さんに届けるための作品を、という意識が強まっていったのではないかと考えられます。
◆「一般の人々にいかにアニメを届かせるか」という意識
さて上記でも少し述べましたが、今回監督は「君の名は。」でお客さんに届かせることを意識して作品制作に臨んでいたということを述べました。
とはいえ、監督の今までの作品層は基本的にアニメに興味がある、またはアニメ文化に造詣が深いどちらかといえば「オタク」ないしは「ニッチ」な人々にウケていました。
しかし今回は「幅広くいろんな人に見てもらう」ということを念頭に置いているため、
これまでの作品とは違い「幅広く色々な人に見てもらうには」の対策を打っていると見受けられる部分があります。
①「一般向け」アニメと「アニメ好き向け」アニメの感覚のミックス
監督曰くこれは偶発的にできたというふうにおっしゃっていますが、
「君の名は。」のキャラクターは「一般向け」アニメと「アニメ好き向け」アニメの両方の成分がうまく融合して動いています。
キャラクターデザインの田中将賀さんは「あの日見た花の名前を僕たちはまだ知らない。」「心が叫びたがってるんだ。」などでも知られる、
深夜アニメ好きなら一度は目にしたことがある「アニメ好き向け」の人々には認知度が高い方です。
一方、作画監督の安藤雅司さんは「もののけ姫」「千と千尋の神隠し」などのジブリ作品を中心に活躍されている、いわゆる「一般向け」アニメを手掛けてきた方です。
そのため、キャラデザはアニメに詳しくない人々からすると新鮮に映る反面、
キャラの表情の動きやしぐさ等は昔見たジブリアニメのキャラクターたちに感じるやわらかさがあるため、
比較的違和感なく幅広い観客に受け入れられやすくなった、と言う効果が生み出されています。
これが深夜アニメ等のノリでつっこんでしまうと、いかにも「アニメ好きが喜びそうな作品」に偏る可能性があるため、
両方の持ち味をミックスしたことで、新鮮だけどなじみのある映像に仕上がっています。
②キャスティングと音楽の親和性
また、キャスティングや音楽の起用についても結果的にこの役目を意識した部分はあるのではないかとうかがえます。
劇中音楽には 若者に人気のRADWINPSが起用され、また彼らの曲が劇中にあえて目がひくように取り入れられるという斬新な活用を行っています。
世代ではありませんが大ファンだったという監督の希望もあって今回の抜擢になったそうですが、
作品を宣伝するにあたって「あのバンドが音楽やってるんだ！」というアピールは10代から20代の若年層には響いている節は少なからずあるでしょう。
さらに、主人公やメインキャラクターに有名な俳優や女優を起用したことも、
ジブリ作品ではよくみられる傾向ではありましたが、「君の名は。」の注目度を高めた一因です。
（特に主人公に神木龍之介さんを起用したことは若い世代の女性には大きなアピールポイントとなっているようです。実際私が見に行った時も、彼目当てで見に来たらしきお客さんを結構見かけました…ｗ）
そして特にこれらの起用の仕方も、どちらかと言うと10代～20代にウケがよかったとううのが大きなポイントであると私は考えます。
というのも、現代の10代～20代といえばSNS世代ど真ん中の方々なので
彼らはSNSを中心とした口コミ拡散力、ないしはそれらの情報に対する信頼度が他の世代と比べて高い傾向にあるため、
この世代のお客さんにみてもらう、評判を広めてもらう、ということは、現在の社会では大きな影響力を持つのです。
数々のテレビメディアの朝情報番組でも「君の名は。」が取り上げられるようになったのも、実はTwitter等を中心としたSNS上での盛り上がりが一端を担っています。
このように、新海監督はこの作品をより広く様々な人々に見てもらうために
今までの作品と比較するとエンタメ性と大衆性を強めたことがうかがえます。
ですが、その二つを強める上で、監督自身が得意とするシチュエーションや語り口を使いつつ作品を作り上げていったため
昔から新海監督を知っている人も、初めて監督の作品を見る人にも比較的分け隔てなく受け入れられた結果となっているのでしょう。
これもひとえに、新海監督が様々な作品作りにおいて、向上心、挑戦心を絶やすことなく高めていったことが一番の要となっているのだと感じています。
…とまあ三日分にわたって「君の名は。」のレビュー的なないしは分析的何かをつづってきましたが、
何はともあれ、色んな人に一回は見てほしい作品です。
ついでにいうともう一回くらいは見に行ってみたくなる作品です。見に行きましょう（真顔）
今回作品の良さを伝えるにあたってつたない文章になってしまったのが私自身の反省点ではありますが、
他の様々なネット上の意見からうかがえるように、一回見てみると気づいたらいろいろ考えさせられる素敵な作品なので
（本当は「震災後の作品としての一つの在り方」という観点で「君の名は。」を分析するのも面白いなあ…と思いましたが…趣旨が違うのとさらに長くなりそうなので割愛しました）
今後もさらに「君の名は。」が見ていない人にも広まってくれることを願うばかりです。
新海監督、素晴らしい作品をありがとうございます１
だってそんな簡単に手にできるものじゃないから泣けてくるんじゃないですか
それにしても今回のリオ五輪、日本人選手大躍進でしたよね。
（今更それ言うかテメエとかいう感想はこの際ご容赦ください）
私の周りでも、
オリンピックニュース見たぜ！
日本人選手がんばってるよね！
オリンピック試合見るために夜中まで頑張ったぜ！とかとかな声が
ちらほら聞こえていた8月でした。
ところがどっこい、そんな状況の中私は、オリンピックの試合やニュースを、積極的には見ていませんでした。
テレビでの試合は一度も見ていないです。
生中継はおろか、ダイジェスト版でも試合の様子は、見ていません。
これを聞くと
「オリンピックにすら関心がない人間なの？」
「興味の有無にしろ一般常識的に見るというのが普通なんじゃ…」
と言ったご意見が人々から寄せられるかもしれません。
ただ、勘違いしてほしくないのが、
私はオリンピックに興味がないわけではないのです。
むしろ、今日は日本人選手がどんな結果を出したのだろう、メダル取れたのかな、と気になっていた普通の人間の一人です。
では何故あえてあまり情報を追わなかったのか。
泣くからです。
オリンピックのニュースや試合を見ただけで、泣いてしまうからです。
最初のころ、私も他の普通の日本人と同じようにオリンピックの結果が気になり
朝通勤電車の中で読んでみました。
読んで一分後、視界がにじんでそれ以上新聞記事を読むことを断念しました。
メダルを取った選手、惜しくも逃した選手、
彼らの歓喜の表情、悔恨の表情、日本のメディアが好き好んでつづる選手の裏話…
ちょっと読むだけで、そこにはそれぞれの選手の何かしらの物語があるじゃないですか
。
ましてやオリンピックと言う選ばれたものたちが集う決戦場、
そんな簡単に立てる舞台じゃない。
だからこそ、そこにたどり着くまでも様々な競争があり努力があり衝突があり様々な人間ドラマがあったはずです。
この歓喜、この悔しさには、それまで積み重ねてきた悲喜交々な物語があったんだと思うと、
涙なしにはニュースなんて追うことなんて私にはできなかったです。
なので、日々のオリンピックニュースを追いたい気持ちが満々だったにもかかわらず、
追ったらおったで号泣してしまいそのあと到底仕事には使えないっ情緒不安定さを発揮してしまったらそれこそ色々支障をきたすと判断したので
あえて平日はオリンピックのニュースを追わないことにしました。
そして土日にみてボロ泣きしました。
何かを成し遂げんとしている人って、
その思いが強い分直面する壁や障害や出会う景色や人々がたくさんあって
その中で邁進していく彼らの姿は、とても魅力的です。
そして、その魅力の裏にある物語も、また魅力的なのです。
簡単にいかないものほど、泣けてきてしまうって、こればっかしはどうしようもないんですよねえ。
ただいつも思うこと。
号泣した次の瞬間には激しい頭痛が追ってくるのは、辛い。
