公式自己満サイト『あーとくWEB』運営してます。

あーとくWEB

別にライブもCD販売もしてませんが、アーティストページを意識して作ったサイトです。内容的には自己紹介サイトみたいなモノですが、技術的な事のトライアルでやってます。こだわりポイントを紹介します(=゚ω゚)ノ

こだわりポイント

①ほぼ全部手書き

HPビルダーとかDreamWeaverみたいなソフトは一切使ってません。Jimdoなどの無料HPサービスを利用すれば、あっという間にサイト構築が可能な世の中ですが、テキストエディターでチマチマ書いてます。こだわりです。

②レスポンシブデザイン

レスポンシブデザインとは、端末によって表示を最適化させる様なデザインの事を言います。リキッドデザインなんてのもありますね。

PCで見る場合と、スマホやタブレットで見る場合で、表示が異なります(PCの場合、ブラウザの横画面のサイズを変えると、表示の切り替わりが確認できます。)

最近ではスマホでネットサーフィンする人の方が多いので、こういった機能は必須とされています。スマホ対応の方がGoogleさんからも優遇してもらえます。

ちなみにこのブログも、デフォルトでレスポンシブになってます(=゚ω゚)

※一部のタブレットではPCビューになるようです。

③TOPの動画(PCビュー)

TOP画面で動画が延々とリピートされてます。HTML5のビデオ要素ですね。過去にYouTube用に撮影した動画を使用しています。

ネトゲのランディングページなんかでたまに見かけるので(YouTubeとか使ってる場合が多いですが)、真似してみました。

※IE8や9の様な旧ブラウザでは正常に表示できません。

④日替わり背景(スマホ・タブレットビュー)

スマホタブレットで見ると、バックの背景画像が日替わりで表示されます。全31種類(笑)31番目は31日のある月しか見れません。

⑤CSSスプライトで高速読み込み

複数の画像を一枚にまとめて、表示速度を向上させる技術として、CSSスプライトを採用してます(全部じゃありませんが、ところどころで多用してます。)

その他、スクリプト類やスタイルシートを一つのファイルにまとめて、読み込みの高速化をはかっています。インターネットの世界では、ファイルの転送よりも、接続とかに時間がかかるので、ファイルの容量が大きくなっても、通信する回数を減らす方が高速になりやすいようです。

 

遊びに来てください

その他にも、ぼくの自作TABもどき(?)とか、昔作ったお気に入りの動画、お気に入りの写真などを紹介しています。最近またチマチマ更新して写真も増えてますので、よかったら遊びに来てくださいね(=゚ω゚)ノ

>『あーとくWEB』へ

Pocket