パーソルグループとＳｋｙ株式会社は、sightを通してエンジニアの自分らしいキャリアを応援しています

トップ > インタビュー・コラム > 【第３話】インターネット老人会の皆さんに朗報　女子大生に「昔のホームページ」を見せた感想は「別に古いと思わない」でした！
コラム

【第３話】インターネット老人会の皆さんに朗報　女子大生に「昔のホームページ」を見せた感想は「別に古いと思わない」でした！

#女子大生 #はじめてのプログラミング #ねとらぼ

f:id:sky-pca:20190808123434j:plain

前回までのおさらい

「プログラミング言語」の種類の多さに若干引き気味の女子大生。具体的に見たり触ったりしながら覚えたほうがわかるかも、ということで今回からは初心者でも扱いやすい「HTML」を使って、簡単なホームページを作ってみることにします。

とはいえ、そもそも「ホームページ」という言葉にもなじみがない女子大生。まずはどんなページを作りたいのか、いろいろとアイデアを出し合ってみました。さて、一度もWebページを作ったことのない女子大生が、最初に作るサイトはどのようなものになるんでしょうか。

中山彩歌

IT企業で働く父を持つ大学1年生。ねとらぼ連載「女子高生、『はじめてのパソコン』を買う」でITリテラシーがあんまり高くないことが判明し、おとぼけ回答を連発。その実績（？）を買われて今回の生徒役に抜擢された。もちろんプログラミングの知識はゼロ。

指南役（師範）

舘 勇紀

オンラインプログラミング学習サービス「CodeCamp」の大人気講師。14年間にわたり、大手電機メーカーの開発最前線で培った実装技術、デバッグのノウハウをもとに、特にプログラミング初心者にもわかりやすい指導に定評がある。現在も多くの受講生を指導する現役講師。

Webアプリとスマホアプリは言語が違う

なんとなくプログラミングというものが、薄く、淡く、かすかに分かってきたが、いまいち抽象的過ぎて理解が追いついていない。舘先生、今日もよろしくお願いします！

f:id:sky-pca:20190808163910j:plain

そもそもですけど、プログラミングって「コンピュータに指示を出す作業」っていう理解でいいんでしたっけ？

f:id:sky-pca:20190808163928j:plain

そうですよ、よく覚えていましたね。

f:id:sky-pca:20190808163910j:plain

それだけなのにいろいろ言語が違うのがよくわかんないんだよなー。

f:id:sky-pca:20190808163928j:plain

一般的にイメージされるアプリはWebアプリとスマホアプリがありますよね。Webアプリに使うのがHTML、CSS、JavaScriptなど。で、スマホアプリだとAndroidはJava、iPhoneはSwiftを使うという違いがあります。

f:id:sky-pca:20191104160605j:plain

なんでこんなにいっぱいあるんだー！（混乱）

f:id:sky-pca:20190808163910j:plain

Javaは前回聞きましたね。JavaとJavascriptって違うんですか？

 

f:id:sky-pca:20190808163928j:plain

名前は似てますけどメロンとメロンパンくらい違うって言われてますね（笑）。

f:id:sky-pca:20190808163910j:plain

それは確かに違うな……。同じスマホアプリでもJavaとSwiftはどっちが難しいんですか？

 

f:id:sky-pca:20190808163928j:plain

これはどっちも難しいですよ。似てるけど、ちょこちょこ違う部分があったり癖があって、エンジニアからしてもイラってするときがあるんですよ（笑）。ちなみに僕はJavaはできるけどSwiftはできないです。

f:id:sky-pca:20190808163910j:plain

癖があるって具体的にどういう感じですか？

 

f:id:sky-pca:20190808163928j:plain

プログラム言語の文法って、順番が決まっていて、例えば、Javaの文法の順番はABCなのに、それがSwiftになるとひっくり返る時が時々あるってことです。

f:id:sky-pca:20190808163910j:plain

あー、日本語でしゃべっているのに時々呼び方が「アヤカ・ナカヤマ」になる的な？

 

f:id:sky-pca:20190808163928j:plain

そうそう。「なんでそこだけ英語になるの？」みたいな感じでごっちゃになっているんですよ。

f:id:sky-pca:20190808163910j:plain

じゃあ、どうして統一しないんですか？　統一したらエンジニアさんにとっても好都合じゃないですか！

f:id:sky-pca:20190808163928j:plain

そこは難しいですね。Javaは比較的なんでも使えてオールマイティなんです。だから日本だとプログラム言語の人気ランキング1位にあがってくる。

f:id:sky-pca:20190808163910j:plain

じゃあ全部Javaにしちゃえばいいのに。

f:id:sky-pca:20190808163928j:plain

一方Swiftはアップルが独自に作った言語なんですけど、例えばiPhoneアプリを作りたかったらSwiftを使わないといけない。あとMacのPCも必要ですね。それでもなんでみんなSwiftを使うと思いますか？

f:id:sky-pca:20190808163910j:plain

あっ、iPhoneのシェアが多いから！

f:id:sky-pca:20190808163928j:plain

正解！　特に日本はiPhoneユーザーが多いですからね。

f:id:sky-pca:20190808163910j:plain

私の周りでもAndroidよりiPhone使ってる人の方が多いもんなー。

f:id:sky-pca:20190808163928j:plain

世界的にはAndroidのシェアのほうが多いんですけどね。でも日本でスマホアプリを作ろうと思ったらやっぱりiPhoneで出したい、と思う人は多い。両方出したければ両方勉強する、ということになるわけです。

「ソースを表示」でHTMLを見てみよう

f:id:sky-pca:20191104160609j:plain

いろいろ教えてもらったけど要するに「めっちゃ難しい」ってことだな……？

f:id:sky-pca:20190808163910j:plain

えー、私やっぱりプログラミングできる気がしなくなってきました……。だって言語が多いならその分たくさん覚えなきゃですもん。

f:id:sky-pca:20190808163928j:plain

大丈夫です。多いといっても似ている箇所もありますし、全部を覚える必要もないですから。まずは簡単な言語から触れてみるということで、最初は彩歌さんのホームページを作ってみましょう。

f:id:sky-pca:20190808163910j:plain

ホームページ……どうやって作るんですか？

f:id:sky-pca:20190808163928j:plain

最初にやってもらうのはHTMLかCSSですかね。

f:id:sky-pca:20190808163910j:plain

お、名前は聞いたことありますよ！（ドヤ顔）

f:id:sky-pca:20190808163928j:plain

まあ、厳密に言うとHTMLもCSSもプログラミング言語ではないんですけど。

f:id:sky-pca:20190808163910j:plain

プログラミング言語じゃ……ない……？

f:id:sky-pca:20190808163928j:plain

とりあえず大きなくくりで「コンピュータに指示を出す」ってイメージをつかんでもらえれば大丈夫（笑）。ちなみにHTMLやCSSはWebブラウザで「ソースを表示」すれば簡単に見ることができますよ。例えばねとらぼのこのページを見ると……。

f:id:sky-pca:20191104160613j:plain

このねとらぼ連載の第1回。このページの「ソース」っていうのを見ると……

f:id:sky-pca:20191104160617j:plain

こんなのが出てくる。暗号かな？

f:id:sky-pca:20190808163910j:plain

うっわ、これがいわゆるプログラミングか。読めねえな。

f:id:sky-pca:20190808163928j:plain

読めたらむしろ怖いです（笑）。

f:id:sky-pca:20190808163910j:plain

こんなに訳わかんないのにプログラミング言語じゃないんですか？

f:id:sky-pca:20190808163928j:plain

えっと、HTMLって「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の略なんですよ。

f:id:sky-pca:20190808163910j:plain

ハイパーテキ……何ですか？

f:id:sky-pca:20190808163928j:plain

つまり「クリックすると別のページに飛んでいくよ」、みたいな。

f:id:sky-pca:20190808163910j:plain

え？　でもそれって、HTMLに限らず、スマホアプリでもスタートボタンを押せばゲームが開始されるのと同じ原理じゃないですか？

f:id:sky-pca:20190808163928j:plain

確かにホームページのものもスマホアプリも見た目的に同じように見えますね。でも裏で動いている仕掛けが違うんです。その下で動いてるプログラムがHTMLかJavaかの違いってだけです。

f:id:sky-pca:20190808163910j:plain

不思議すぎるだろ、プログラミング。

f:id:sky-pca:20190808163928j:plain

作る側からすると違うんですけど、難しいですよね（笑）。でも、書いてあることって結構単純です。例えばWordで文字を太字にするのは彩歌さんもできますよね？

f:id:sky-pca:20190808163910j:plain

それはできます！

f:id:sky-pca:20190808163928j:plain

HTMLだと「strong」ってタグで太字にしたい文字をサンドイッチしてあげる。そうするとWebブラウザで見たときには文字が強調されて表示されるんです。これくらいならそんなに難しくないでしょ？

f:id:sky-pca:20191104160621j:plain

太字にするだけなのに英語を使うとかめんどくさーい

f:id:sky-pca:20190808163910j:plain

まあ、そう言われればわかるかも。あれ、この空いているスペースも何か法則があるんですか？

f:id:sky-pca:20191104160625j:plain

謎のスキマ発見！（内容はひとつもわからない）

f:id:sky-pca:20190808163928j:plain

法則があるというか、プログラマーのマナーのようなものです。頭にスペースを入れているのは、「インデント」って呼ばれていて、一文一文ずらすことで、プログラマーは読みやすくなるんですよ。

f:id:sky-pca:20190808163910j:plain

ほう？　意味合い的に言うと、作文でいう改行みたいなものですかね？

f:id:sky-pca:20190808163928j:plain

イメージとしてはそんな感じです。だから逆にスペースがないと僕たちプログラマーはとても読みづらいです。

f:id:sky-pca:20190808163910j:plain

スペース自体はサイトに影響しないんですか？

f:id:sky-pca:20190808163928j:plain

見た目にはまったく影響はないですよ。ただ面白いのは、当然いろいろな性格の方がプログラミングを書くので、まめに一字のずれもなくびっちり書く人もいれば、スペースをぐちゃぐちゃにして書く人もいます。

f:id:sky-pca:20190808163910j:plain

あ、じゃあ本当にプログラマーさんにとっての読みやすさで空いているスペースだったんですね。

f:id:sky-pca:20190808163928j:plain

そうです。我々の間でのコミュニケーションの支障にならない程度に空けるってだけですね。どうですか、彩歌さんはきれいにそろえられますか？

f:id:sky-pca:20190808163910j:plain

あはっ、できる気がしないです！

「個人ホームページ」を見たことがない女子大生

f:id:sky-pca:20190808163928j:plain

では、HTMLを書く前にまず作りたいページのイメージを決める必要があります。

f:id:sky-pca:20190808163910j:plain

お願いします！（ドキドキ）

f:id:sky-pca:20190808163928j:plain

いや、そこは彩歌さんが考えてくれないと（笑）。

f:id:sky-pca:20190808163910j:plain

じゃあ……全国民が爆笑するようなギャグ感のあるホームページにしてください。

f:id:sky-pca:20190808163928j:plain

一番困るタイプの注文をしてくるクライアントさんだ（笑）。

f:id:sky-pca:20190808163910j:plain

……そもそもわたしホームページって見たことないかも？

f:id:sky-pca:20190808163928j:plain

ええっ！？　……でも最近の世代だと個人ホームページとかは知らないのかなあ。

f:id:sky-pca:20190808163910j:plain

例えばどんなのがあるんですか？

f:id:sky-pca:20190808163928j:plain

「阿部寛のホームページ」とかある意味有名ですよ。ネット黎明期の個人ホームページっぽいレトロなデザインでいまだに運営されていて、「ネット上の遺産」とか呼ばれているんです。背景に「ABE　Hiroshi」って文字が横並びに書き連ねてあったり。

f:id:sky-pca:20191104160629j:plain

（阿部寛のホームページより）

f:id:sky-pca:20190808163910j:plain

へー、見たことない。というか、今時芸能人のホームページなんてあるんですね。だいたい調べても、Wikipediaで基本的な情報が見れるので、あまり意識して見ていませんでした。

f:id:sky-pca:20190808163928j:plain

なるほど……昔のホームページは全部こんなつくりだったんだけどなあ。

f:id:sky-pca:20190808163910j:plain

ふーん。そもそもWebサイトのデザインをあまり意識して見てないので、阿部寛のホームページを見てもこういうページもあるんだなー程度で流すくらいですね。

f:id:sky-pca:20190808163928j:plain

最近の若い子には違いが分からないんだ！　衝撃だなあ。

f:id:sky-pca:20190808163910j:plain

逆に今のサイトが「イケてる！」とかいうのもよくわからないっすねー。

f:id:sky-pca:20190808163928j:plain

いっそめっちゃレトロな「あやかの部屋」みたいなホームページを作らせても面白いかもな……。

作りたいページは「あやか占い」

f:id:sky-pca:20190808163928j:plain

なにかホームページのテーマを決めたほうがいいかもしれないですね。趣味だったら趣味、将来の夢なら夢って感じで。

f:id:sky-pca:20190808163910j:plain

じゃあ趣味で！　私、ロードバイクが好きなので自転車関連のホームページがいいですね。

f:id:sky-pca:20190808163928j:plain

いいですね。彩歌さんと自転車の紹介などは載せるとして……あとはこのサイトにしかない彩歌さんだけのコンテンツがあるといいかな。

f:id:sky-pca:20190808163910j:plain

じゃあ、占いとか！　ボタンを押すと「今日のあなたにぴったりな自転車はこれ！」みたいな。それでバイクの写真なんかも表示させたら面白くなりそうです！　その名も「あやか占い」（笑）。

f:id:sky-pca:20190808163928j:plain

昔のホームページっぽい発想が出てきた（笑）。では、簡単なプロフィールの中に「あやか占い」も付け加えられてるみたいなイメージですよね。デザインはどんな風にします？

f:id:sky-pca:20190808163910j:plain

えーと、なんかオシャレでいい感じにしてください！

f:id:sky-pca:20190808163928j:plain

また悩ましいクライアントだ（笑）。であればトップ写真は、どでかい写真を使う方がデザイン的には柔らかい印象になりますよ。サイトの目的にもよるけど、右上（もしくは左上）に自分の写真があるようなリクルート的なページにすると、どうしても固い印象になってしまうので。

f:id:sky-pca:20191104160634j:plain

でっかい写真をどーんと使うのがいいらしい

f:id:sky-pca:20190808163910j:plain

ページ全体がほぼ写真になるような感じですか。ホテルとか旅館のサイトみたい。

f:id:sky-pca:20190808163928j:plain

そんなイメージです。トップ写真ってそのサイトの第一印象を決めるのでかなり重要です。で、その写真の下には、アピールポイントを3つ程度用意すると、すっきりシンプルに見えます。

f:id:sky-pca:20190808163910j:plain

ふむふむ。

f:id:sky-pca:20190808163928j:plain

ちなみにこれ、2、4とか偶数を並べると不思議とむずがゆさを感じるんですよね。3つがちょうどいいんですけど、だからといって5つは多すぎる、みたいな（笑）。

f:id:sky-pca:20190808163910j:plain

なるほど！（少し面白い内容になってきたな……）

f:id:sky-pca:20190808163928j:plain

トップ写真は自分の顔を載せたほうがいいと思いますよ。4分割にして、自転車に乗ってる写真、メンテナンスしてる写真……みたいにしてもいいですね。

f:id:sky-pca:20190808163910j:plain

あれ、偶数より奇数の方がいいんじゃないんですか？

f:id:sky-pca:20190808163928j:plain

トップ写真は4分割を選ぶ人が多いです、なぜか（笑）。

f:id:sky-pca:20190808163910j:plain

へ～～それは、エンジニアさんの謎あるあるなんですかね。

f:id:sky-pca:20190808163928j:plain

なんでしょうね、人間の心理なんですかね。まあ、写真は4分割にするとして、3つのコンテンツには何を入れたいですか？

f:id:sky-pca:20190808163910j:plain

まず一つ目には、「愛車紹介」。二つ目に「サイクリングメモリー」的な旅の思い出を紹介するコーナーがいいです。で、最後に「あやか占い」とかどうでしょう！

f:id:sky-pca:20190808163928j:plain

いいですね！　HTMLを使うので、どうせならクリックしたら違うページに移るというのも作りますか。最初なので9割くらいの型はこちらで用意して、最後の要素を彩歌さんに付け足して仕上げてもらうという流れでいいでしょう。

f:id:sky-pca:20190808163910j:plain

あ、なんか簡単そう……。私でもいけるかも？

f:id:sky-pca:20190808163928j:plain

彩歌さんには、トップ写真と簡単な紹介文を用意してもらって、当日、HTMLに組み込んでもらいます。

f:id:sky-pca:20191104160637j:plain

なんかできそうな気がしてきたぞ

プログラマーとWebデザイナーって実は役割が違う

f:id:sky-pca:20190808163910j:plain

サイトを作る場合ってこうやって決めてるんですねー。

f:id:sky-pca:20190808163928j:plain

実際はプログラマーがここまで決めることは少ないです。Webデザイナーさんが今みたいなデザインの完成系を作ってくれるので、我々プログラマーはそれを元に忠実に再現するプログラムを書くというイメージですね。

f:id:sky-pca:20190808163910j:plain

Webデザイナーか～。なんだかプログラミングよりも楽しそう……。

f:id:sky-pca:20190808163928j:plain

お、あやかさんはWebデザインの方が興味がある感じですかね？

f:id:sky-pca:20190808163910j:plain

コクン……（頷く）。

f:id:sky-pca:20190808163928j:plain

ヤバい、連載終了（笑）。でも、Webデザイナーさんと話すときよく言われるのが、「隙間のバランスが大事」らしいんです。

f:id:sky-pca:20190808163910j:plain

どういうことですか？

f:id:sky-pca:20190808163928j:plain

例えば、縦の隙間（スペース）を50mm、横の隙間を150mmにすると隙間のバランスが悪いので、目で見たときに違和感を覚えるんです。理屈ではない部分を敏感に感じ取る感性を持っているのがデザイナーさんであって、そういう面を意識して作ってくれてます。

f:id:sky-pca:20191104160557j:plain

Webデザイナーってすげー！

f:id:sky-pca:20190808163910j:plain

そうなんだ！（第六感とやらかな？）

f:id:sky-pca:20190808163928j:plain

スペースに関しては1mmの差でも気付きますよ。

f:id:sky-pca:20190808163910j:plain

すご！　1mmとか誤差にしか思えないですけど。

f:id:sky-pca:20190808163928j:plain

ずっとやっているとそういう感覚は身につくものです。それはエンジニアでも気付く人は気付きますし。ライターの感覚で言うと、「半角と全角の数字がごちゃまぜに書かれてると気になる」みたいな？

f:id:sky-pca:20190808163910j:plain

あーー確かに！　それなら私でも気になります。そういう感覚か。

f:id:sky-pca:20190808163928j:plain

余白もそうですが、色も肝心です。メインカラー、サブカラー、アクセントカラーも配色の基本で、サイトを作るときには大事です。

f:id:sky-pca:20190808163910j:plain

うんうんカラーですね（←興味津々）。

f:id:sky-pca:20190808163928j:plain

カラーの使われている比率は「メインカラー：サブカラー：アクセントカラー＝60：35：5」で、メインカラーとサブカラーはなるべく同系色を選ぶ傾向が多いです。

f:id:sky-pca:20190808163910j:plain

なるほど！　で、逆にアクセントカラーはメインカラーとは対称的なカラーを選んで、あえて際立たせるようにするんですね。

f:id:sky-pca:20190808163928j:plain

そうです！　Ｓｋｙ株式会社の公式サイトだと余白の多いシンプルなページですが、淡い水色をサブカラーとして使ってますね。「空」をイメージした配色なんだと思います。

f:id:sky-pca:20191104160601j:plain

ほんとだ！（Ｓｋｙ株式会社公式サイトより）

f:id:sky-pca:20190808163910j:plain

おおーー！　イメージつきました！

f:id:sky-pca:20190808163928j:plain

彩歌さんはメインカラーで何色を使いたいですか？

f:id:sky-pca:20190808163910j:plain

自転車が金色（ゴールド）なので、メインカラーはオレンジか黄色で統一する方がいいかなって考えています。

f:id:sky-pca:20190808163928j:plain

いいですね！　では、次回までにそんな感じでホームページの土台の部分を用意しておきます。

f:id:sky-pca:20190808163910j:plain

おおー、なんか楽しくなってきた！　わたしWebデザイナーのほうが興味あるかも！

f:id:sky-pca:20190808163928j:plain

そっちか！（笑）

 

 

今回の「女子大生から一言！」

やっとプログラミング風の会話になってきましたが、実際にプログラム言語を見てみると、「わからない！」という焦りより、「HTMLくらいなら私でもイケるかも？」と思うようになってきました。思うのは簡単ですけど（笑）。

中学の頃は美術部だったのでデザインの話はかなり好きです。正直プログラミングよりもWebデザイナーという職業に楽しそうと思い始めているくらい（笑）。

ただ、次回から実際にプログラムを書くのでちょっとだけ楽しみになってきました。ちょっとだけ。

次回予告

ようやくプログラミングを理解し始めたかと思ったら違う方向に興味が向き始めてしまった（？）女子大生。次回はいよいよ舘さん全面協力のもと、自分のホームページを完成させる予定です。

【第4話】いよいよ、Let's Programming !　Coming soon