Tomoya Okada

Web制作2年目.WordPress.Vue.Nuxt ■事業サイト https://…

Tomoya Okada

Web制作2年目.WordPress.Vue.Nuxt ■事業サイト https://qws-o.com/

WEBサイトレビュー#4

■ファーストビュー 2種類の映像が流れた後に、Three.jsを用いたFVに落ち着く流れになっている。 全体的に、近未来感(先進感)を演出するような形になっているように感じている。各球体から伸びている線は、「世界にも展開している」というような事を視覚的に伝える為に表現しているのではないかと考えた。 シンプルながらも目新しさのある雰囲気があり、印象に残りやすいと感じた。 ■コンテンツ 下層ページへと繋がるコンテンツは、それぞれのテーマを連想させるような画像を配置し補

Tomoya Okada

    • WEBサイトレビュー#03

      ベース：白(#ffffff) アクセント : 青系統(#297BAD) 文字色：黒(#333333) ■ファーストビュー 白を基調としていることもあり非常にクリーンな印象を受ける。 医療系は特に安心感とクリーンさを伝えていく事は重要なので、白を基調にしているのだろう。 視線誘導を取り入れており、キャッチコピーをしっかり読んでもらいたいという意思を感じる。 (女性が左を見ており、その先にキャッチコピーが配置されている) 眼科ということもあり、お年寄りもサイトを閲

      Tomoya Okada

      • WEBサイトレビュー#02

        FVにある写真のスライダーが非常に印象的です。 スワイパーで実装しており、若干右上に配置して左下に空間を空けてフレーズもしっかりと見せる形になっています。 最近になって特に奥行きや立体感のある表現が増えてきたように思います。 両サイドにあるロゴやテキスト、ボタンは画面追従になっているようです。 メニューの構成は非常にシンプルで特に変わったアニメーションは施されていません。 サービス部分は、写真とテキストが順番に左右にふられている構成になっています。 結構見慣れた構

        Tomoya Okada

        • WEBサイトレビュー#01

          FVは海外よりの雰囲気を出している。 Slickを使ってスライダー形式にしており、それぞれの写真も少しトーンを落として加工してある印象。 → 若い層というより大人の層を狙って落ち着いた雰囲気を演出するため(?) 文字も真っ白(#ffffff)ではないく、若干ベージュ寄り(#EBEBE1)の色を使っている。 →背景色とのコントラスト差で視覚的に疲れさせない為、#ffffffを使ってしまうと少しパキッとした雰囲気になってしまうので柔らかさを出すためにベージュ寄りの色味にして

          Tomoya Okada

        WEBサイトレビュー#4

        Tomoya Okada

          Nuxt.js環境下にSwiperを導入してみる。

          高性能かつ手軽に導入できるスライダープラグインのSwiperを普段からよく使っています。 シンプルHTML&CSSサイトやWordPress対応サイトでは、利用しているのである程度の導入までの流れはわかるのですが、Nuxt環境下での導入の仕方がよく分からなかったので調べてみた結果を備忘録として残しておきます。 //ターミナルyarn add swiper@5.x vue-awesome-swiper 様々な記事を見たのですが、vue-awesome-swiperのみをイ

          Tomoya Okada

          Nuxt.js環境下にSwiperを導入してみる。

          Tomoya Okada

          クラス命名について

          HTMLとCSSを勉強し始めたばかりの頃によく迷うのが「クラスの命名」だと思います。 どこになんて言う名前のクラスを付けたらいいのかってすごく迷いますよね。自分も当時はその状態でした。 クラス名のつけ方に迷ってしまう方の参考になれば幸いです。 まず、良いcssの定義を再確認しましょう。 ● 予測しやすい ● 再利用しやすい ● 保守しやすい ● 拡張しやすい 以上の４つです。 最初は一番上にある「予測しやすい」を重視してクラス名を考えていくとよいと私は考えています。

          Tomoya Okada

          クラス命名について

          Tomoya Okada

          WordPress役立ちコード(保存版)

          今まで私が案件や自分のサイトで使ってきたコードを載せます。 自分も見返せるようにしておきたいので、使い方は特には記載しません。 （記述量が多くなってしまう為） 各自調べてみてください！ ■カテゴリーすべて取得表示 <?php $categories = get_categories(); foreach ($categories as $category) { echo '<li><a href="' . get_category_link($category-

          Tomoya Okada

          WordPress役立ちコード(保存版)

          Tomoya Okada

          WordPress化について

          こんにちは。 今回は、質問の多いWordPress化について少し書こうかと思います。 ※詳しい手順については量が多いので別の記事にします。 (以下から、WordPress＝WPと記述) Q、オリジナルテーマとしてサイトを作る時は、最初からWP化して行っているんですか？ 上記のような質問をいただく事が多いです。 結論は、 「私は一度シンプルHTMLとCSSで構築してからWPに組み込んでいる」になります。 ここでポイントになるのが、「私は」という部分。 人によっては最

          Tomoya Okada

          WordPress化について

          Tomoya Okada