10月19日現在のWebサイト全体図

リフォーム会社(仮)のWebサイト構築中

テーマはリフォーム会社

最近、空き時間にWebサイトをXDで作る作業を行っています。

今回はリフォーム会社をテーマにWebサイトを作っている再中です。

AdobeXDで作ったリフォーム会社(仮)のトップページ
↑AdobeXDで作成中のポートフォリオ作品用トップページです。

プログラミングやウェブデザインの勉強を始めてから半年になってきたので、そろそろアウトプットできるようにと足りない頭をフル回転しながら日々取り組んでいる次第です。

まだ作成途中なので完全な状態ではありません。サイト全体のレイアウトがまとまってきたら、サイト全体のカラーリング見直しやフォント見直し、コーディング作業と忙しくなるでしょう。

ページ切替時、ローディング画面を追加

あるウェブデザイナーの方の発表を見て、面白そうなので自分でも出来ないかと思い作ってみました。

人気のあるWebサイトを覗いてみると、トップページが開くまでにローディング画面が現れるといった特殊な演出を施しているサイトが多いです。

こういったエンタテイメント的なことができるようになるだけでもクライアントに注目されやすくなると思うので、皆さんもチャレンジしてみるといいでしょう。

ハンバーガーメニューを実装

まだ製作途中でレスポンシブ対応が出来ていないのでスマホ等で見るとデザインが崩れているところが多々ありますが、20年10月19日現在のWebサイト全体図です。

https://xd.adobe.com/view/a02eed9e-9d69-4c8f-a08f-e8f032733922-f57d/

10月19日現在のWebサイト全体図
↑2020年10月19日現在のWebサイト全体図。随時更新していきます。

今日はグローバルメニューの項目の一つである、『会社案内』のところにオーバーレイで表示されるようにメニューバーを実装させてみました。

まずはメニューバーを用意します。

ハンバーガーメニュー
シンプルに黒(#000000)の背景に、白(#FFFFFF)の文字と絵で考えました

そして、このメニューバーを『会社案内』のところにオーバーレイで表示されるように位置を持っていくと、

オーバーレイハンバーガーメニュー実装
↑オーバーレイ表示のメニューバー

ちなみにオーバーレイとは、上の画面のように元々ある背景の上に重ねて表示される別の画像やテキストのことを言います。

まだまだ改良の余地ありですが、滅気ずに製作がんばっていきます。

>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております!日本国内のテーマでナンバー1を目指しております。どうか皆様のお力をお貸しください。よろしくおねがいいたします。

日本国内のテーマでナンバー1を目指しております。どうか皆様のお力をお貸しください。よろしくおねがいいたします。

CTR IMG