AMP
AMP THMLを利用して写真の多いページを作成し、Google PageSpeed Insightsの評価をみてみました。
Made web-pages that are included many photos using AMP HTML
使用ツール
What software I used for copying web pages below
- モバイル
- 63/100
- PC
- 83/100
- モバイル
- 31/100
- PC
- 47/100
- モバイル
- 66/100
- PC
- 67/100
- モバイル
- 21/100
- PC
- 35/100
AMPを利用しても、画像を適切な解像度で処理しておかないと、パフォーマンスが落ちることがわかりました。
Wordpress
WordpressとWordpressのプラグイン(Welcart)を使用して、ECサイトを作成しました。
実際の運用までは至っておりません。
Made an EC site using wordpress and its plugin
使用ツール
What software I used for copying web pages below
編集したphp
- 404.php
- archive.php
- breadcrump.php
- content.php
- footer.php
- front-page.php
- functions.php
- header.php
- index.php
- page.php
- searchform.php
- sidebar.php
- single.php
- wc_item_single.pjp
トップページ
front-page.php
投稿ページ
single.php
商品ページ
カートページ
Wordpress
Wordpressの既存のテーマから子テーマを作り、自分のブログを作成しました。
現在も変更を加えている段階です。
Making my blog using wordpress theme
使用ツール
What software I used for copying web pages below
作成したphp
- archive.php
- category.php
- category-web.php
- footer.php
- front-page.php
- functions.php
- header.php
トップページ
front-page.php
固定ページ
Wordpress
授業の課題で、仮想の会社のホームページを作りました。
画像やテキスト、デザインカンプがある状態で、wordpressのページを作成しました。
Made web pages using wordpress as class lessons
使用ツール
What software I used for copying web pages below
作成したphp
- 404.php
- archive.php
- breadcrump.php
- content.php
- footer.php
- front-page.php
- functions.php
- header.php
- index.php
- page.php
- search.php
- single.php
トップページ
front-page.php
固定ページ
page.php
既存ランディングページのトレース
Copied original web pages
既存のランディングページをデザインカンプとして、トレースしました。
※実際のwebサイト、会社とは関係ありません。
使用ツール
What software I used for copying web pages below
PC版
スマートフォン版
作業時間 : 約18時間
字間やフォントサイズを実物に近づけることが、とても細かい作業でした。フッターにあるスプーンの画像をホバー時に変える効果をCSSで付けたり、トップへ戻るボタンをホバー時に少し跳ねる動きをjQueryで効果をつけたりしました。
PC版
スマートフォン版
作業時間 : 約15時間
とても長いランディングページだったので、繰り返し同じ効果を付けられる所はクラスを工夫して付けてました。そうすることで、短いコーディングになったと思います。
PC版
スマートフォン版
作業時間 : 約14時間
ブレイクポイントが３つあるランディングページだったので、それぞれに合わせたデザインを模倣するのが楽しかったです。初めてbootstrapを使ったのですが、このランディングページで大分慣れました。