Warning: sprintf(): Too few arguments in /home/hamata/hamatawww.com/public_html/blog/wp-includes/theme.php on line 875

Warning: sprintf(): Too few arguments in /home/hamata/hamatawww.com/public_html/blog/wp-includes/theme.php on line 875
class="archive date has-sidebar">

トライデントコンピュータ専門学校でWebデザインの勉強をしている学生です。将来はエンジニアを目指しています。

こんにちは。北濱です。今回は、エックスサーバーでサーバーを借りたのでご報告したいと思います。とりあえず、3ヶ月分借りてきました。お値段はなんと、3ヶ月で約7000円!まあまあ、お高いですね…。でも、今エックスサーバーでサーバーを借りると、ドメインが1つ無料でもらうことができます!今がチャンスです!!

サーバーをレンタルした経緯

今回、サーバーを急遽レンタルしたわけですが、その理由は名刺を作るためです。というのも、wcanと懇親会がそろそろ迫っているということもあって人脈を増やすために作りました。名刺を作るに当たって、自分のサーバーは持っておいた方がいいということで、急遽レンタルさせてもらったというわけですね。

ちなみにこちらが今回借りたサーバーともらったドメインです。

hamatawww.com

自分でサーバーを持つと、少しだけ成長したような感覚になります。みなさんも借りてみてはいかがでしょうか。

作った名刺

そしてこれがこれから作る予定の名刺デザインです。頑張って点は好きな食べ物のイラストです。

表面
裏面

誰かに渡せるといいですけどね・・・。

こんにちは。北濱です。今回は、エックスサーバーでサーバーを借りたのでご報告したいと思います。とりあえず、3ヶ月分借りてきました。お値段はなんと、3ヶ月で約7000円!まあまあ、お高いですね…。でも、今エックスサーバーでサーバーを借りると、ドメインが1つ無料でもらうことができます!今がチャンスです!!

サーバーをレンタルした経緯

今回、サーバーを急遽レンタルしたわけですが、その理由は名刺を作るためです。というのも、wcanと懇親会がそろそろ迫っているということもあって人脈を増やすために作りました。名刺を作るに当たって、自分のサーバーは持っておいた方がいいということで、急遽レンタルさせてもらったというわけですね。

ちなみにこちらが今回借りたサーバーともらったドメインです。

hamatawww.com

自分でサーバーを持つと、少しだけ成長したような感覚になります。みなさんも借りてみてはいかがでしょうか。

作った名刺

そしてこれがこれから作る予定の名刺デザインです。頑張って点は好きな食べ物のイラストです。

表面
裏面

誰かに渡せるといいですけどね・・・。

こんにちは。北濱です。今回は重い箱と軽い箱のイージングと質感AfterEffectを使って表現してみたのでみなさんにもみてもらおうと思います。落下速度や跳ね方、振動などに注意して作りました。

ストーリー

空から落ちてきた箱をどけようとする人間。「軽」と書かれた箱は軽々と持ち上げ、放り投げることができました。しかし、「重」と書かれた箱はなかなか持ち上げることができません。その時、キノコが突如現れた。人間はそのキノコを食べてしまう。ところがなんと、そのキノコはスーパーキノコでした。人間はたちまち大きくなり、「重」と書かれた箱を軽々と押し倒します。人間はドヤ顔をしたのだった…。

コンセプト

人間が持ち上げて、一つは軽々としているが、もう一つは踏ん張っても持ち上がらないという動きをさせて重い箱と軽い箱の表現をわかりやすくしてみました。

作ってみた感想

今回、AfterEffectを初めて使ったのですが、率直な感想としては、楽しかったです。図形を自分の思ったように動かすことができるのはみていて楽しいし、日々よくみているものの動きをよく考えさせられるいい機会だと思いました。これからまたAfterEffectを触る機会はあると思うので、使い方など忘れないようにしたいです。

こんにちは。北濱です。今回は重い箱と軽い箱のイージングと質感AfterEffectを使って表現してみたのでみなさんにもみてもらおうと思います。落下速度や跳ね方、振動などに注意して作りました。

ストーリー

空から落ちてきた箱をどけようとする人間。「軽」と書かれた箱は軽々と持ち上げ、放り投げることができました。しかし、「重」と書かれた箱はなかなか持ち上げることができません。その時、キノコが突如現れた。人間はそのキノコを食べてしまう。ところがなんと、そのキノコはスーパーキノコでした。人間はたちまち大きくなり、「重」と書かれた箱を軽々と押し倒します。人間はドヤ顔をしたのだった…。

コンセプト

人間が持ち上げて、一つは軽々としているが、もう一つは踏ん張っても持ち上がらないという動きをさせて重い箱と軽い箱の表現をわかりやすくしてみました。

作ってみた感想

今回、AfterEffectを初めて使ったのですが、率直な感想としては、楽しかったです。図形を自分の思ったように動かすことができるのはみていて楽しいし、日々よくみているものの動きをよく考えさせられるいい機会だと思いました。これからまたAfterEffectを触る機会はあると思うので、使い方など忘れないようにしたいです。

Webサイトパフォーマンスによる影響

Google
サイト表示が0.5秒遅くなると、検索数が20%減少する
Amazon
サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する
Aberdeen Groupの調査結果
表示速度が1秒遅くなるとページビューが11%低下、コンバージョン率が7%低下、顧客満⾜度が16%低下する

このように、Webサイトの表示速度はかなり重要であることがわかります。今回は、Webサイトのパフォーマンスを向上させる方法を書いていきます。

画像の最適化

できるだけ画像を使わない

文字は画像ではなく、標準フォントかアイコンフォント、Webフォントを使う。

適切な画像サイズにする

画像サイズが大きいと、容量も大きくなってしまうので、実際の表示よりも大きいサイズにはしない。

PC用とスマートフォン用で画像を分ける。

画像を圧縮して軽量化する

<画像圧縮のWebサービス>

TinyPNG
JPEGmini(JPEGのみ)

CSSスプライト

使いたい画像を1つの画像ファイルにまとめてCSSで使いたい画像のpositionを指定する方法。画像リクエスト数を減らせる。

CSS・JavaScriptファイルを圧縮(ミニファイ化)

ミニファイ(minify)とは
簡単に言うとコードの圧縮化のことです。縮小化・軽量化とも言われます。
具体的には余分なスペース・改行・インデントなどの不要な部分を取り除き、軽いファイルに変換します。可読性が悪いため編集することを目的とせず、ライブラリとして使用するために圧縮されることが多いです。

CSS・JavaScriptファイルをミニファイ化するサービス

Online JavaScript/CSS Compressor
Minify your CSS

ブラウザのキャッシュを活用する

ブラウザキャッシュとは
Webブラウザが表示したWebサイトのデータを一時的にパソコンに保存しておく機能です。
次に同じWebサイトを表示したときに、サーバーにアクセスして情報を取得してくる手間を省き、パソコンに保存されたデータを表示するため、初回よりも速くページを表示することができます。

つまり、最初のサイト訪問時にダウンロードされたデータは、2回目のサイト訪問時のときにはダウンロードする必要がないため、数個のダウンロードでページを速く表示することができるらしい。

キャッシュを有効にするには、.htaccessで設定しなくてはならない。ブログ主はまだいまいち説明ができないので、こちらを参考にして欲しいです。

まとめ

今まとめたものはわずかな部分でしかありませんが、これらをすることでページの表示速度があがることがわかりました。そこで、実際に授業で作ったサイトを以上のポイント(ブラウザキャッシュを除く)に気を付けて作ってみました。結果、83点くらいというまあまあいい得点が出たので、自分のブログなどにも活かしていきたいと思います。

Webサイトパフォーマンスによる影響

Google
サイト表示が0.5秒遅くなると、検索数が20%減少する
Amazon
サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する
Aberdeen Groupの調査結果
表示速度が1秒遅くなるとページビューが11%低下、コンバージョン率が7%低下、顧客満⾜度が16%低下する

このように、Webサイトの表示速度はかなり重要であることがわかります。今回は、Webサイトのパフォーマンスを向上させる方法を書いていきます。

画像の最適化

できるだけ画像を使わない

文字は画像ではなく、標準フォントかアイコンフォント、Webフォントを使う。

適切な画像サイズにする

画像サイズが大きいと、容量も大きくなってしまうので、実際の表示よりも大きいサイズにはしない。

PC用とスマートフォン用で画像を分ける。

画像を圧縮して軽量化する

<画像圧縮のWebサービス>

TinyPNG
JPEGmini(JPEGのみ)

CSSスプライト

使いたい画像を1つの画像ファイルにまとめてCSSで使いたい画像のpositionを指定する方法。画像リクエスト数を減らせる。

CSS・JavaScriptファイルを圧縮(ミニファイ化)

ミニファイ(minify)とは
簡単に言うとコードの圧縮化のことです。縮小化・軽量化とも言われます。
具体的には余分なスペース・改行・インデントなどの不要な部分を取り除き、軽いファイルに変換します。可読性が悪いため編集することを目的とせず、ライブラリとして使用するために圧縮されることが多いです。

CSS・JavaScriptファイルをミニファイ化するサービス

Online JavaScript/CSS Compressor
Minify your CSS

ブラウザのキャッシュを活用する

ブラウザキャッシュとは
Webブラウザが表示したWebサイトのデータを一時的にパソコンに保存しておく機能です。
次に同じWebサイトを表示したときに、サーバーにアクセスして情報を取得してくる手間を省き、パソコンに保存されたデータを表示するため、初回よりも速くページを表示することができます。

つまり、最初のサイト訪問時にダウンロードされたデータは、2回目のサイト訪問時のときにはダウンロードする必要がないため、数個のダウンロードでページを速く表示することができるらしい。

キャッシュを有効にするには、.htaccessで設定しなくてはならない。ブログ主はまだいまいち説明ができないので、こちらを参考にして欲しいです。

まとめ

今まとめたものはわずかな部分でしかありませんが、これらをすることでページの表示速度があがることがわかりました。そこで、実際に授業で作ったサイトを以上のポイント(ブラウザキャッシュを除く)に気を付けて作ってみました。結果、83点くらいというまあまあいい得点が出たので、自分のブログなどにも活かしていきたいと思います。