ウェブページデザインの重要性
今日は曇ってますね。おはようございます。 夜は雨っていうね予報になってますけども
気候的にはなんか過ごしやすい。日差しも強くないんですが、一応 日傘をさしております。
最近ね、夜、夜っていうか風呂入っている時にスマホでゲームをしてるんですよ。
で、そのゲームってスイカゲームね。 今やってる奴いるのかなーっていうね。
一時期一世を風靡したゲームが、俺当時 アイフォンのアプリ化された時に買ったんですよ。
多分俺、お金払って買ったゲーム、スマホのゲームってこれきりなんですけども、それがまだ入ってて
ここ1週間ぐらいかな。 毎日やってるのよね。お風呂の中で。
で、全然上手くなんなくて。
ただ、2000点だっけかな。 スイカが1個できれば、まあ上的ぐらいのレベルでやってるんですが
最初の頃はさ、1回やっても終わりにしてたんだけど、 最近なんか1回で
大した点が出ないとさ、悔しいもんでもう1回やるってことになっちゃって。 なんだか風呂に入っている間、スイカゲームをやり続けてるっていう状況ですが
やっぱねー 朝起きた時に
なんかね、どっか疲れてるんだよね。 これがスイカゲームのせいかはわかんないんだけど、ちょっと
やめとこうかなと。 そんな風に思っております。
じゃあ長らキャスト始めます。 この番組は自分大好きな61歳
私笹雪の声のブログ、声の日記です。 通勤途中に歩きながら収録してますので、息がハァハァ上がったり、周りの雑音騒音、
風切音などが入ったりしますが、何卒ご容赦ください。
はい 今日はちょっと
でも歩いてたらあったかくなりそうな感じですね。 さて今日はですね
ちょっと仕事絡み
ホームページのデザイン、ウェブページのデザインっていうことでお話ししようと思うんですが
ニーズがほとんどない すごい狭いエリアの話をしますね
うちのホームページって
店の紹介をしたり、イベントやるのでイベントの案内をしたり あるいは普通にECサイトとして
商品を販売したり、いろんな要素を全部
ごたまじにした サイトなのね。でもう
2000年より前 1997年ぐらいからかな
ずっと あの
コツコツと、俺は作ってやってるんだけど
まあ本当いい加減これ変えなきゃいけないとは思ってるんですが 今のところねー
ずっと コツコツやってます
昨日もそんな作業で ウェブページ若干
改修をしてたんですけども 基本的にはですね
ムーバブルタイプっていう CMS
CMSの プログラムって言うべきかな
をベースに組んでます 昔はさ
昔って本当に2000年代とかさ もう大昔は
ホームページって1ページずつ作ってたんですよ 例えば
Aっていうカテゴリの商品10個ありますって言ったらその10個の商品の詳細ページを作るじゃないですか
そのメイン写真があって その商品の説明
買い物カゴがあってみたいな 一つの商品を丁寧に説明するページ
逆にその商品があるカテゴリに
スマートフォン対応とHTMLの進化
入っているとしてそのカテゴリのトップページには そういう
カテゴリに属するアイテムが10個並んでます
っていう10個並んだページを作る だから少なくともそういう
カテゴリのトップと 詳細ページっていうのを作るわけね
で このカテゴリを増やすと
一つのものって例えば年齢でカテゴリ分けしたり
あるいは目的でカテゴリ分けしたり あとは例えば
国とか メーカーとか
作者とか いろんな切り口で分けられるんだけど
それごとに 手作業でページを作ってたっていう時代があって
それがね すごい大変だったんですよね
ちょっと昔話多めになっちゃいましたけど
そんなのでね 出会ったのが
CMSコンテンツマネジメントシステムってやつで
当時一斉を風靡してたのが このムーバブルタイプってやつなんですね
これ 当時確か有料だったんですけども
無料のプランもあったんですが 仕事で 会社で使うっていうこともあって
有料プランにして使い始めました
これがね 本当に楽になって
要はブログを書くためのシステムって 考えればいいと思うんですけども
記事を書くと ページができる
カテゴリを設定しておいて そこをチェックすると
そのカテゴリに タイトルが表示されて
そこをクリックすると その記事が読めるっていうことで
このカテゴリをね 商品カテゴリに設定してやって
その記事のリスト インデックスページを
画像が出るような設定にしてやれば
商品一覧もね 簡単に作れるっていうことで
本当これが革命だったんですね 僕にとっては
あとは買い物カゴをどうするかっていうことだけは ちょっと工夫したんですけども
それもすごい地味な技術で
SSI サーバーサイドインクルードっていうのを使って
カゴの部分だけ別ファイル化して それを読み込むっていう形にして
今のサイトの基本的な骨格はできたんですね
で ムーバブルタイプの良かったのは
カスタムフィールドって言って
よくさ ブログの記事でも 件名 タイトルで内容
その下に例えば 日付とか書いた人とか
そういう記入欄っていうのが デフォルトで設定してあるんだけど
このムーバブルタイプは その記入欄を
無限にというと言い過ぎなんだけど
でも多分無限に 自分たちの設定したフィールドを作れるんですよ
これがね 最高に魅力的で
これをね 随分使わせてもらってます 今も
途中からですね 課題になってきたのが
その後ね HTMLがXHTMLになるとか
いろんな動きがある中で HTMLプラスCSSっていう
今のウェブの常識にはなってるんですが
当時はテーブルレイアウトっていうのが 一般的だったんですが
僕もそれに習って
当初はテーブルでレイアウトしてたんですが
どちらかというと 俺は先取りしたつもりでいるんだけど
XHTMLへの移行を始めて
結局それはHTML5っていう企画になったんだけど
やってること自体は無駄にならずに
CSSとHTMLでレイアウトするっていう形に
回収というか そんな感じにして
その後ね でもそれひと苦労だったけどね
CSSもよくわかんなかったから
それ勉強しながらだったんですけどね
ただ今言ったMovableタイプの
コードを吐き出す機能とは非常に僕は相性いいなと思っていて
それでね
そういう標準 HTML標準っていうのかな
当時の言葉としては標準化に乗っかることができて
その後に課題になったのがスマホ対応だったんだよね
これがね なかなか手間がかかったんです
このスマホの対応っていうのに結構時間がかかってというか
その最適解を見つけるのに時間がかかったんですよね
当時のイメージで言うと
スマホ用にページを作るっていうような方向性
だからPC用のページとスマホ用のページっていうのを
別で作ってるサイトも実際ありました
今でもあるとは思うんですけどね
もう一つが同じHTMLファイルだけども
見ている端末の画面サイズによってレイアウトを切り替えるっていうやり方で
僕はそっちを選びたいなと思ったんですね
ムーバブルタイプでその2つのソースコード
HTMLを書き出すことは可能だったんですけども
結構ね めんどくさいなっていうのがあって
一つのファイルで見え方を変える
ウェブサイトの構築方法
見せ方を変えるっていう方法がいいなと思ってて
Twitter社 今はXなのかな
が開発したBootstrapっていうのが非常に評判が良かったので
それをムーバブルタイプ上で展開するような形にしました
たぶんBootstrapのバージョン3を使っていて
今もそれを引き続き使ってますが
Bootstrapそのものはバージョンアップしていて
もう4も終わって今5をやってるのかな
ただまぁちょっとそのバージョンアップするためには
テンプレートの書き換えとかをしなきゃいけないんでね
なかなか腰が重い
しかも自分が作ったテンプレートっていうのが
かなりごちゃごちゃ綺麗に書けてないっていうのもあって
まあますます腰が重いっていう状況ですけども
これはこれでやりたいな
できればっていう感じでやってますが
これのおかげでね
スマホで見ても問題なく見れるようになりました
それまではさ
PC用のページをスマホで表示してるので
めっちゃ字がちっちゃくなっちゃうんですよ
だから読みにくいページだったんですけどね
ただまぁあれですね
見ているユーザーがスマホが5割を超えたあたりで
ようやく5割以上かな
もうなんとかレスポンシブに対応できるようになったんですね
そんなわけで今日は何度か話してるかもしれないんですけども
ウェブサイト私が作っているやり方を説明してきました
ムーバブルタイプの管理
ブーツストラップを当てたっていうところまでお話ししましたね
あと結構重要なのがこのムーバブルタイプで
テンプレートを作ったり
あとウィジェットパーツ化することもできるんですよね
例えばウェブサイトのヘッダー
一番上のメニューより上の部分は基本固定じゃないですか
ただ時々ちょっと変更があるみたいな状況で
それをですね基本インクルード
さっき買い物カゴもそうですけど
正確にはSSIサーバーサイドインクルードっていう技術を使って実装してるんですね
買い物カゴの部分だけピョコってサーバーがくっつけてくれるみたいな技術なんですけども
このヘッダーの部分も実はそういうふうにしてます
一度試してみたんですけど
要はムーバブルタイプのパーツとして作ることも可能なんですね
ただそれをやるとですね
変更したとき変更したいときにムーバブルタイプ上の
ブログのお書くページみたいなところで
そういった情報を書き換えてやった後に
再構築をしてやる必要があって
それがですね
俺がまだ慣れてない
分かってないからかもしれないんだけど
全部のページにヘッダーってついてるんで
それをね反映させるのが
俺の知ってるやり方だと
全ページを一回再構築しないと
新しいヘッダーを読み込んでくれないんですよね
なんかいい方法あればいいんだけどさ
そんなこともあって
ムーバブルタイプで管理せずに
そのファイルインクルードされるファイルを
僕の場合は今
アドビのドリームウィーバーを使って
そういうファイルのエディター
テキストエディターとして
それ使ったりしてるんですけど
それで書き換えたのをアップロードすれば
その瞬間に対象のすべてのファイルが
新しいヘッダーを読み込んでくれるので
手間が全くかかんないんですよね
だからやっぱりこのやり方
手間かからず早いので合理的だなと思って
今もこれを愛用しております
一度はね
このやり方ややこしいのは
ムーバブルタイプで管理してる部分と
そうじゃない部分が混在してるっていうのが
ちょっと分かりにくくなっちゃうんだよね
そのヘッダーの部分のファイルっていうのを
編集してアップロードして書き直すっていうような
ことをするんだけど
それを分かってる人間が
その分かってるファイルをやる
みたいな感じになるので
ちょっとなんていうかあれなんだよね
その作業が個人のスキルに
経験とか知識に依存しちゃうっていうところで
まぁちょっとイマイチかなと思って
ムーバブルタイプ上に置いとけばね
あのMTを触ればそこが見えるので
いいかなと思ってやってみたんですが
やはり不便でしたね
なのでまぁ今はその合わせ技でね運用して
実は昨日もね
その一度MT側で管理しようとしたんです
でやっぱりイマイチだったんで
それを元に戻すっていう地味な作業をやってました
まぁ元に戻すかもなぁと思って
もともとあったソースは
コメントで消してあるだけなので
復活は簡単だったんですけどね
ただまぁちょっと面倒は面倒でしたね
そんな感じで
まぁいろいろね
あのやんなきゃいけないなって
思ってることは多いんですが
まぁ昔ながらの古い感じのウェブサイトになっちゃいますけど
まぁこれはこれでね悪くないなと
自分で自分を納得させながらやっております
ということでね
今日は本当に誰も得しない
マニアックな話をまたしちゃいました
どうぞお許しください
最後までお付き合いいただきまして
ありがとうございました
ではまたね
ちゅー
