インターネット老人会の皆さんに朗報 女子大生に「昔のホームページ」を見せた感想は「別に古いと思わない」でした！
そんな女子大生に「自分のホームページ」を作らせたらどうなるの、というお話。
前回までのおさらい
「プログラミング言語」の種類の多さに若干引き気味の女子大生。具体的に見たり触ったりしながら覚えたほうがわかるかも、ということで今回からは初心者でも扱いやすい「HTML」を使って、簡単なホームページを作ってみることにします。
とはいえ、そもそも「ホームページ」という言葉にもなじみがない女子大生。まずはどんなページを作りたいのか、いろいろとアイデアを出し合ってみました。さて、一度もWebページを作ったことのない女子大生が、最初に作るサイトはどのようなものになるんでしょうか。
中山彩歌
IT企業で働く父を持つ大学1年生。ねとらぼ連載「女子高生、『はじめてのパソコン』を買う」でITリテラシーがあんまり高くないことが判明し、おとぼけ回答を連発。その実績（？）を買われて今回の生徒役に抜擢された。もちろんプログラミングの知識はゼロ。
舘勇紀
大手電機メーカーでキャリアを培い、現在はフリーランスのエンジニアとして活躍。Webアプリの開発などを行うほか、プログラミングのオンラインレッスン「CodeCamp」の講師も務める。二児の父で初心者にもていねいに伝えるレッスンに定評がある。
Webアプリとスマホアプリは言語が違う
そもそもですけど、プログラミングって「コンピュータに指示を出す作業」っていう理解でいいんでしたっけ？
そうですよ、よく覚えていましたね。
それだけなのにいろいろ言語が違うのがよくわかんないんだよなー。
一般的にイメージされるアプリはWebアプリとスマホアプリがありますよね。Webアプリに使うのがHTML、CSS、JavaScriptなど。で、スマホアプリだとAndroidはJava、iPhoneはSwiftを使うという違いがあります。
Javaは前回聞きましたね。JavaとJavascriptって違うんですか？
名前は似てますけどメロンとメロンパンくらい違うって言われてますね（笑）。
それは確かに違うな……。同じスマホアプリでもJavaとSwiftはどっちが難しいんですか？
これはどっちも難しいですよ。似てるけど、ちょこちょこ違う部分があったり癖があって、エンジニアからしてもイラってするときがあるんですよ（笑）。ちなみに僕はJavaはできるけどSwiftはできないです。
癖があるって具体的にどういう感じですか？
プログラム言語の文法って、順番が決まっていて、例えば、Javaの文法の順番はABCなのに、それがSwiftになるとひっくり返る時が時々あるってことです。
あー、日本語でしゃべっているのに時々呼び方が「アヤカ・ナカヤマ」になる的な？
そうそう。「なんでそこだけ英語になるの？」みたいな感じでごっちゃになっているんですよ。
じゃあ、どうして統一しないんですか？ 統一したらエンジニアさんにとっても好都合じゃないですか！
そこは難しいですね。Javaは比較的なんでも使えてオールマイティなんです。だから日本だとプログラム言語の人気ランキング1位にあがってくる。
じゃあ全部Javaにしちゃえばいいのに。
一方Swiftはアップルが独自に作った言語なんですけど、例えばiPhoneアプリを作りたかったらSwiftを使わないといけない。あとMacのPCも必要ですね。それでもなんでみんなSwiftを使うと思いますか？
あっ、iPhoneのシェアが多いから！
正解！ 特に日本はiPhoneユーザーが多いですからね。
私の周りでもAndroidよりiPhone使ってる人の方が多いもんなー。
世界的にはAndroidのシェアのほうが多いんですけどね。でも日本でスマホアプリを作ろうと思ったらやっぱりiPhoneで出したい、と思う人は多い。両方出したければ両方勉強する、ということになるわけです。
「ソースを表示」でHTMLを見てみよう
えー、私やっぱりプログラミングできる気がしなくなってきました……。だって言語が多いならその分たくさん覚えなきゃですもん。
大丈夫です。多いといっても似ている箇所もありますし、全部を覚える必要もないですから。まずは簡単な言語から触れてみるということで、最初は彩歌さんのホームページを作ってみましょう。
ホームページ……どうやって作るんですか？
最初にやってもらうのはHTMLかCSSですかね。
お、名前は聞いたことありますよ！（ドヤ顔）
まあ、厳密に言うとHTMLもCSSもプログラミング言語ではないんですけど。
プログラミング言語じゃ……ない……？
とりあえず大きなくくりで「コンピュータに指示を出す」ってイメージをつかんでもらえれば大丈夫（笑）。ちなみにHTMLやCSSはWebブラウザで「ソースを表示」すれば簡単に見ることができますよ。例えばねとらぼのこのページを見ると……。
うっわ、これがいわゆるプログラミングか。読めねえな。
読めたらむしろ怖いです（笑）。
こんなに訳わかんないのにプログラミング言語じゃないんですか？
えっと、HTMLって「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の略なんですよ。
ハイパーテキ……何ですか？
つまり「クリックすると別のページに飛んでいくよ」、みたいな。
え？ でもそれって、HTMLに限らず、スマホアプリでもスタートボタンを押せばゲームが開始されるのと同じ原理じゃないですか？
確かにホームページのものもスマホアプリも見た目的に同じように見えますね。でも裏で動いている仕掛けが違うんです。その下で動いてるプログラムがHTMLかJavaかの違いってだけです。
不思議すぎるだろ、プログラミング。
作る側からすると違うんですけど、難しいですよね（笑）。でも、書いてあることって結構単純です。例えばWordで文字を太字にするのは彩歌さんもできますよね？
それはできます！
HTMLだと「strong」ってタグで太字にしたい文字をサンドイッチしてあげる。そうするとWebブラウザで見たときには文字が強調されて表示されるんです。これくらいならそんなに難しくないでしょ？
まあ、そう言われればわかるかも。あれ、この空いているスペースも何か法則があるんですか？
法則があるというか、プログラマーのマナーのようなものです。頭にスペースを入れているのは、「インデント」って呼ばれていて、一文一文ずらすことで、プログラマーは読みやすくなるんですよ。
ほう？ 意味合い的に言うと、作文でいう改行みたいなものですかね？
イメージとしてはそんな感じです。だから逆にスペースがないと僕たちプログラマーはとても読みづらいです。
スペース自体はサイトに影響しないんですか？
見た目にはまったく影響はないですよ。ただ面白いのは、当然いろいろな性格の方がプログラミングを書くので、まめに一字のずれもなくびっちり書く人もいれば、スペースをぐちゃぐちゃにして書く人もいます。
あ、じゃあ本当にプログラマーさんにとっての読みやすさで空いているスペースだったんですね。
そうです。我々の間でのコミュニケーションの支障にならない程度に空けるってだけですね。どうですか、彩歌さんはきれいにそろえられますか？
あはっ、できる気がしないです！
「個人ホームページ」を見たことがない女子大生
では、HTMLを書く前にまず作りたいページのイメージを決める必要があります。
お願いします！（ドキドキ）
いや、そこは彩歌さんが考えてくれないと（笑）。
じゃあ……全国民が爆笑するようなギャグ感のあるホームページにしてください。
一番困るタイプの注文をしてくるクライアントさんだ（笑）。
……そもそもわたしホームページって見たことないかも？
ええっ！？ ……でも最近の世代だと個人ホームページとかは知らないのかなあ。
例えばどんなのがあるんですか？
「阿部寛のホームページ」とかある意味有名ですよ。ネット黎明期の個人ホームページっぽいレトロなデザインでいまだに運営されていて、「ネット上の遺産」とか呼ばれているんです。背景に「ABE Hiroshi」って文字が横並びに書き連ねてあったり。
へー、見たことない。というか、今時芸能人のホームページなんてあるんですね。だいたい調べても、Wikipediaで基本的な情報が見れるので、あまり意識して見ていませんでした。
なるほど……昔のホームページは全部こんなつくりだったんだけどなあ。
ふーん。そもそもWebサイトのデザインをあまり意識して見てないので、阿部寛のホームページを見てもこういうページもあるんだなー程度で流すくらいですね。
最近の若い子には違いが分からないんだ！ 衝撃だなあ。
逆に今のサイトが「イケてる！」とかいうのもよくわからないっすねー。
いっそめっちゃレトロな「あやかの部屋」みたいなホームページを作らせても面白いかもな……。
作りたいページは「あやか占い」
なにかホームページのテーマを決めたほうがいいかもしれないですね。趣味だったら趣味、将来の夢なら夢って感じで。
じゃあ趣味で！ 私、ロードバイクが好きなので自転車関連のホームページがいいですね。
いいですね。彩歌さんと自転車の紹介などは載せるとして……あとはこのサイトにしかない彩歌さんだけのコンテンツがあるといいかな。
じゃあ、占いとか！ ボタンを押すと「今日のあなたにぴったりな自転車はこれ！」みたいな。それでバイクの写真なんかも表示させたら面白くなりそうです！ その名も「あやか占い」（笑）。
昔のホームページっぽい発想が出てきた（笑）。では、簡単なプロフィールの中に「あやか占い」も付け加えられてるみたいなイメージですよね。デザインはどんな風にします？
えーと、なんかオシャレでいい感じにしてください！
また悩ましいクライアントだ（笑）。であればトップ写真は、どでかい写真を使う方がデザイン的には柔らかい印象になりますよ。サイトの目的にもよるけど、右上（もしくは左上）に自分の写真があるようなリクルート的なページにすると、どうしても固い印象になってしまうので。
ページ全体がほぼ写真になるような感じですか。ホテルとか旅館のサイトみたい。
そんなイメージです。トップ写真ってそのサイトの第一印象を決めるのでかなり重要です。で、その写真の下には、アピールポイントを3つ程度用意すると、すっきりシンプルに見えます。
ふむふむ。
ちなみにこれ、2、4とか偶数を並べると不思議とむずがゆさを感じるんですよね。3つがちょうどいいんですけど、だからといって5つは多すぎる、みたいな（笑）。
なるほど！（少し面白い内容になってきたな……）
トップ写真は自分の顔を載せたほうがいいと思いますよ。4分割にして、自転車に乗ってる写真、メンテナンスしてる写真……みたいにしてもいいですね。
あれ、偶数より奇数の方がいいんじゃないんですか？
トップ写真は4分割を選ぶ人が多いです、なぜか（笑）。
へ〜〜それは、エンジニアさんの謎あるあるなんですかね。
なんでしょうね、人間の心理なんですかね。まあ、写真は4分割にするとして、3つのコンテンツには何を入れたいですか？
まず一つ目には、「愛車紹介」。二つ目に「サイクリングメモリー」的な旅の思い出を紹介するコーナーがいいです。で、最後に「あやか占い」とかどうでしょう！
いいですね！ HTMLを使うので、どうせならクリックしたら違うページに移るというのも作りますか。最初なので9割くらいの型はこちらで用意して、最後の要素を彩歌さんに付け足して仕上げてもらうという流れでいいでしょう。
あ、なんか簡単そう……。私でもいけるかも？
彩歌さんには、トップ写真と簡単な紹介文を用意してもらって、当日、HTMLに組み込んでもらいます。
プログラマーとWebデザイナーって実は役割が違う
サイトを作る場合ってこうやって決めてるんですねー。
実際はプログラマーがここまで決めることは少ないです。Webデザイナーさんが今みたいなデザインの完成系を作ってくれるので、我々プログラマーはそれを元に忠実に再現するプログラムを書くというイメージですね。
Webデザイナーか〜。なんだかプログラミングよりも楽しそう……。
お、あやかさんはWebデザインの方が興味がある感じですかね？
コクン……（頷く）。
ヤバい、連載終了（笑）。でも、Webデザイナーさんと話すときよく言われるのが、「隙間のバランスが大事」らしいんです。
どういうことですか？
例えば、縦の隙間（スペース）を50mm、横の隙間を150mmにすると隙間のバランスが悪いので、目で見たときに違和感を覚えるんです。理屈ではない部分を敏感に感じ取る感性を持っているのがデザイナーさんであって、そういう面を意識して作ってくれてます。
そうなんだ！（第六感とやらかな？）
スペースに関しては1mmの差でも気付きますよ。
すご！ 1mmとか誤差にしか思えないですけど。
ずっとやっているとそういう感覚は身につくものです。それはエンジニアでも気付く人は気付きますし。ライターの感覚で言うと、「半角と全角の数字がごちゃまぜに書かれてると気になる」みたいな？
あーー確かに！ それなら私でも気になります。そういう感覚か。
余白もそうですが、色も肝心です。メインカラー、サブカラー、アクセントカラーも配色の基本で、サイトを作るときには大事です。
うんうんカラーですね（←興味津々）。
カラーの使われている比率は「メインカラー：サブカラー：アクセントカラー＝60：35：5」で、メインカラーとサブカラーはなるべく同系色を選ぶ傾向が多いです。
なるほど！ で、逆にアクセントカラーはメインカラーとは対称的なカラーを選んで、あえて際立たせるようにするんですね。
そうです！ Ｓｋｙ株式会社の公式サイトだと余白の多いシンプルなページですが、淡い水色をサブカラーとして使ってますね。「空」をイメージした配色なんだと思います。
おおーー！ イメージつきました！
彩歌さんはメインカラーで何色を使いたいですか？
自転車が金色（ゴールド）なので、メインカラーはオレンジか黄色で統一する方がいいかなって考えています。
いいですね！ では、次回までにそんな感じでホームページの土台の部分を用意しておきます。
おおー、なんか楽しくなってきた！ わたしWebデザイナーのほうが興味あるかも！
そっちか！（笑）
今回の「女子大生から一言！」
次回予告
ようやくプログラミングを理解し始めたかと思ったら違う方向に興味が向き始めてしまった（？）女子大生。次回はいよいよ舘さん全面協力のもと、自分のホームページを完成させる予定です。
- この記事はＳｋｙ株式会社が提供する「エンジニアのちょっと未来な視点」をテーマにしたメディアとのタイアップ企画です。ぜひこちらのサイトも合わせてチェックしてみてください！
Copyright © ITmedia, Inc. All Rights Reserved.
小5のときに描いた絵→4年後…… 「ねぇ何があったん？」「鳥肌立った」中3になって描いた絵が160万再生
「娘の目が大きいのは赤ちゃんだから」と思っていたママ、成長すると…… 驚きの姿に「ディズニープリンセスだ」【海外】
「これが一番」 ユニクロ“人気590円商品”の再販に歓喜殺到
『an・an』などで人気だった占い師・中森じゅあんさん死去 「医学的な治療は難しい状態」で4月から入院も最後まで占い連載
ピラティス教室に“キャラもの”靴下を履いていったら…… 奇跡的な爆笑の“再会”が450万表示「最高過ぎてwww」「これはもう運命」
小倉唯、“廃棄処分依頼した物”が高額転売される 「刑事面での対応も視野」と声明
“絵心ないOL”、超有名人を描いたはずが…… 1700万表示の衝撃展開に「予想外www」「あかん」
ディズニーの自販機に800円入れたら…… 「だ、だれ？」まさかのキャラ登場に爆笑 「当たり」「羨ましい」の声も
ジブリパークで「シータだ、かわいい！」と言われまくった9歳娘→思わず納得の見た目に「久々ときめいた」「完璧」
猫の“今にも抜けそうな毛束”を引っ張ったら……「思ってた抜け方と違う」 420万再生の光景に「ふぉぉぉ！」「マジで全然違った」
- 急性骨髄性白血病で闘病中だったVTuber、死去 「復帰を目指して闘病」 専門学校の講師としても活動
- 万博の“着物ショー”に天皇陛下だけ許される「装束」登場で物議…… 「深くお詫び」主催者謝罪
- 「腹筋捩じ切れましたwww」 夫が塗った“ピカチュウの絵”が……？ 大爆笑の違和感に「うちの子も同じ事してたw」 投稿者に話を聞いた
- 大人なら解けないと恥ずかしい？ 「（1/8）−（1/8）」を計算せよ！【算数クイズ】
- 「女の子みたいな顔だね」と言われ続けた男の子、20歳になったら→「神がかってる」姿に驚がく 「人体の不思議」「オーラが凄い」
- 使わなくなったカラーボックス→“ずぼらシンママ”が簡単DIYしたら…… 天才的な仕上がりに「かしこーい!!」「これ作ってみよう」
- クリスマスに出会ったギャルとギャル男が21年後…… 誰も予想できない現在に「素直に凄い」「人に歴史あり」と称賛の声
- カルディ全店で販売の生ハムから「サルモネラ属菌」検出…… 「心よりお詫び」7万個自主回収
- マクドナルド、次回ハッピーセットコラボに「待ってました！」 人気作の登場に混乱の懸念も「すぐ売り切れそう」「初週ヤバいぞ」
- お隣さんから丸見えの土地→巨大ウッドフェンスを7日かけてDIYしたら…… 雰囲気ガラリで「すごい大作ですね」「ワクワクした」
- 築53年家賃4万円・何てことない団地のドアを開けると…… まさかの空間出現に驚きの声「素敵」「ここまでお洒落に」
- 小学生時代「こんなプラモ誰が買うんだよw」→40年後…… “大人になった”を実感するエピソードに「分かる」「特大ブーメランw」
- 49歳病没の大宮エリーさん、生前開催の個展で「体調も万全でなかったので不安」 3カ月前には苦しげな姿も「声が出にくい」
- 自販機に“1000円”を入れたら……？ 出てきた“とんでもないお釣り”にお口あんぐり「こんなん初めて見た」
- 自宅の犬小屋に住み着いた野良猫、1年後の姿に「泣いた」と大反響 それからどうなった？現在の様子を聞いた
- 100万円の“錦鯉”を自宅の池に入れたら…… 「おかしいでしょ」3日後、まさかの事態に「鯉は難しい…」「信用が大切ですね」
- パパに、保育園へ行く娘のヘアアレンジを任せたら…… ママがひっくり返った“仕上がり”が400万表示「重力どこ？」「頑張った感がいい！」
- 「成長したらそのうち襲ってくる」と言われたワニ、16年後……→ 280万回再生を突破した驚きの姿に「初めて見た」の声
- 人里離れた山にカメラを設置→1週間後…… 「なんで？」映っていた“意外すぎる住人”に「笑った」「実在していたのか！」
- 「神パンツきた」 ユニクロ新作“3990円パンツ”が品切れラッシュの大人気 「過去イチかも」「本当にこれは買い」
提供：Ｓｋｙ株式会社
アイティメディア営業企画／制作：ねとらぼ編集部／掲載内容有効期限：2019年11月26日