【スマホサイト制作】実際に阿部寛のホームページをスマホサイト化してみる

19

お世話になります、杉下です。
過去2回の記事では阿部寛のホームページをスマホ対応にさせるため、コーディングの学習を1から行ってきました。
そして今回はいよいよ実際にそのホームページを作っていきたいと思います。

デザインの決定

早速ホームページの制作を始めていきたいのですが。ページを作るのあたってどういうデザインのページにするのか、先に考えておく必要があります。なんだか面倒に聞こえますが、こういったものは先に考えておいた方が結果的には作業を効率的に行えますので先に考えてしまいましょう。

当然ですがデザインをする時、大切なのはデザインをする目的です。ここで今一度第一回の記事を振り返り、当初の目的を確認してみましょう

1

間違えました。正しくはこちらです
2

つまり、「スマホでも読みやすく」すること、これが今回のデザインの目的ですね。しかし「スマホで読みやすいデザイン」とはいったいどんなデザインなのでしょうか??現在の阿部寛のホームページが抱えている問題も踏まえた上で、いくつか読みやすいデザインの要素を洗い出してみましょう。

  • (1)画面サイズが調整されている
  • (2)指でもタッチしやすいボタン
  • (3)文字サイズや文字間、行間が調整されている

ざっと見たところこれらの点は現段階で改善の余地がありそうですね。ここからはイラストレーターを使い、これらの要素を基準にデザインの改築を行っていきましょう。

画面サイズが調整されている

 まずはここから始めていきましょう。基本的にスマホサイトというのは横スクロールを使う必要がないので、画面を縦長に調節した上、画面左に配置されているメニューは画面下に再配置します。

4

指でもタッチしやすいボタン

 次にボタンを変更します。スマホはパソコンに比べて画面が小さいので、その分だけボタンも大きくしなくてはいけません。元々の阿部寛のホームページは文字の部分だけしかボタンになっていなかったので、今回は文字の周りの枠もボタンに変更。指でタッチしやすいようにしてみます。

5

文字サイズや文字間、行間が調整されている

 (2)に近い点ですが、画面が小さいので文字も大きくしなくてはいけません。小さい画面に小さい文字がひしめき合っているページは見てて疲れてしまいますからね。さらに、文字を大きくすると同時に文字の縦横にとるスペースも調整する必要がありそうです。

6

こんな感じですね。背景が文字なので少し読みにくいですが、このホームページの「素材の味」を大切にしていきます。

目次へ 人事から直接フィードバックをもらおう!

実際にスマホに対応させる

 準備も完了したところで、実際に阿部寛のホームページをスマホ対応にさせていきましょう。

まずは阿部寛のホームページをそっくりそのまま自分のローカルサーバー上に作ります。

7

あれ、なんか変なレイアウトになっちゃったな…

8

ん?これどうやったら治るんだ?とりあえずググってみるか…

9

あ゛ぁーーーー!!!全くわからん!!やってられるか!!
そもそもこんなもん!!誰も欲しがっとらんわーーーー!!!!

(なぜ…)
ん!?
0
(なぜ…スト…)
声が聞こえる…
10
(なぜべ…ト…さ…いのか…)
この声、どこかで聞いた覚えがあるぞ…
11
(なぜベストを…さない…か…)
はっ!!!!!!!!これってもしかして!!!!!!
12
「なぜベストを尽くさないのか?」
あ、阿部寛!!!??
13
「なぜベストを尽くさないのか?」
いや、だって…なんかもう…全然わかんないんだもん…
14
「なぜベストを尽くさないのか?」
なぜって言われたって…てかそんなに言うなら自分で作ればいいじゃん…
15
「なぜベストを尽くさないのか?」
聞こえてるよ!!それしか言わねぇな!
16
「」
もういいよ!わかったから!ベスト尽くすから!!
17




18
まだ、読んでくれてますか??

やっと完成しましたよ。落ち込んだりもしたけど、私は元気です。
ちなみに。今回のページはBootstrapというフレームワークを使用して制作しました。このフレームワークを使うとページ上のレイアウトがとても簡単に操作できるようになるのでとてもオススメです。
ただ、そのBootstrapの基本仕様のせいで左右に余白が出来てしまいました。初心者の僕はこの余白がどうすれば消えるのか、全く分かりません。しかし、ベストを尽くしたので今はとても清々しい気分に包まれています。

そして、あとはこれをスマホ対応にするだけです。
19

目次へ

完成

出来たーー!!ようやく完成しました!

苦節20日、思えば沢山の事がありました。何もわからないという大きな壁にぶつかったり、TRICKを観て現実逃避したり、少林サッカーを観たり…

そう思うとロクなことしてないですね

遊んでいた様にも見えますがしっかり学習もしていましたよ!
その成果がどれほどのものかは、このページを観ていただければみなさんにも伝わると思います。
20
こちらが「スマホ対応になった阿部寛のホームページ」です。
課題であった画面サイズ・ボタン・文字のすべてををしっかり調整した事で、とても観やすくなりました。とても満足な出来です。
何より阿部寛のホームページが持つ「2000年代のホームページ感」をスマホに詰め込んだ事で生まれた独特のレトロフューチャー感が最高です。まるでワンレン・ボディコン姿の広瀬すずみたいです。

早速この完成したホームページを阿部寛本人に見せてあげたいと思い。Gmailを開いた時、ある事実に気がつきました。

「俺、阿部寛のアドレス知らないわ…」

アドレス知りませんでした

というわけで今から早速阿部寛のメールアドレスを探してみたいと思います。

無理です、探せません。

しかし、たとえ本当の阿部寛にこのページを見せる事ができなくとも、僕の心の中に住む阿部寛は今、とても穏やかな笑顔を浮かべています。

そう、始めから彼はそこにいたのです、いやむしろ、そこにしか存在しないと言っても良いでしょう。

その顔を見る事が出来ただけでも。もう何も思い残す事はありません…

目次へ

ホームページ制作を学んでみて

 ここまで記事をお読みいただき、本当にありがとうございます。先週から計4回に渡り「阿部寛のためにホームページ制作をする」を連載してきましたが。いかがだったでしょうか?楽しんでいただけましたか?

ホームページを制作すると言うと何か専門的な技術に聞こえますが、実際には文系学生がたった2週間で出来る事なんです。もちろん、今回僕が学んだ事は基礎中の基礎の事です。

しかし、それは裏を返せば「たった10時間の学習で基礎を学ぶ事が出来る」という事です。

基礎というのは算数で言う「四角形の面積の求め方」に似ています。基礎で有る事には変わりませんが、それを応用するだけで三角形や台形、立方体や円錐の面積まで求められるようになります。
つまり、基礎を学ぶ事さえ出来てしまえば、あとはそれを利用するだけ。言ってしまえばもう何も学ぶ事はないのです。

これを指して昔の偉い人はこんな名言を残しました。

「始めは全体の半ばである」と。

実際はそういうものなんです、一見難しそうに見えることでも、まずは基礎だけ学んでみましょう。そして基礎が身につけば、その道はもう半分踏破したも同然なんです。

なので、次の記事では応用編として
「自分のブログを作ってみたい」と思います。

今回までに制作したスマホ版の阿部寛のホームページはローカルサーバー上でしか公開されていませんが、次回は実際にサーバーをレンタルし。
インターネット上で公開するためのホームページを制作していこうと思います。

では最後にもう一つ、偉い人の名言を書き記して今回のシメとしましょう。
21
「なぜベストを尽くさないのか?」

Fラン文系学生がSNSで就活したら5社から内定が出た
Fラン若大将が2週間でプログラミングを覚えた話
【入門編】初心者文系学生はじめてのHTMLによるWebコーディング
【実践編】デザインデータを元にphpでWordpressプログラミング
【スクール不要】自分のブログをレスポンシブデザインで作ってみる

関連記事

ピックアップ記事

  1. pexels-photo-296282
    最近、ベンチャー企業へ就職を考えている就活生は多くなってきております。 しかし、ベンチャー企業へど…
  2. 01d542488c30a8493ac354bdbb8b0067_m
    大学生活も3年生になると、周りは皆就活を始めて、焦り始める方も多いのではないでしょうか。 いざ、就…
  3. 9_26_2_16545022
    就活生に見られる2つのパターン 2017卒就活生のデータにおいて、2016年8月1日時点で「内…
最短内定・就活プロフェッショナル
ページ上部へ戻る