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
3年前

WEBサイトレビュー#03

ベース:白(#ffffff) アクセント : 青系統(#297BAD) 文字色:黒(#333333) ■ファーストビュー 白を基調としていることもあり非常にクリーンな印象を受ける。 医療系は…

Tomoya Okada
3年前
1

WEBサイトレビュー#02

FVにある写真のスライダーが非常に印象的です。 スワイパーで実装しており、若干右上に配置して左下に空間を空けてフレーズもしっかりと見せる形になっています。 最近…

Tomoya Okada
3年前

WEBサイトレビュー#01

FVは海外よりの雰囲気を出している。 Slickを使ってスライダー形式にしており、それぞれの写真も少しトーンを落として加工してある印象。 → 若い層というより大人の層を…

Tomoya Okada
3年前

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

高性能かつ手軽に導入できるスライダープラグインのSwiperを普段からよく使っています。 シンプルHTML&CSSサイトやWordPress対応サイトでは、利用しているのである程度の…

Tomoya Okada
3年前
1

クラス命名について

HTMLとCSSを勉強し始めたばかりの頃によく迷うのが「クラスの命名」だと思います。 どこになんて言う名前のクラスを付けたらいいのかってすごく迷いますよね。自分も当時…

Tomoya Okada
3年前
1

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

今まで私が案件や自分のサイトで使ってきたコードを載せます。 自分も見返せるようにしておきたいので、使い方は特には記載しません。 (記述量が多くなってしまう為) …

Tomoya Okada
3年前
4

WordPress化について

こんにちは。 今回は、質問の多いWordPress化について少し書こうかと思います。 ※詳しい手順については量が多いので別の記事にします。 (以下から、WordPress=WPと記述)…

Tomoya Okada
3年前
3
WEBサイトレビュー#4

WEBサイトレビュー#4



■ファーストビュー

2種類の映像が流れた後に、Three.jsを用いたFVに落ち着く流れになっている。
全体的に、近未来感(先進感)を演出するような形になっているように感じている。各球体から伸びている線は、「世界にも展開している」というような事を視覚的に伝える為に表現しているのではないかと考えた。

シンプルながらも目新しさのある雰囲気があり、印象に残りやすいと感じた。

■コンテンツ

もっとみる
WEBサイトレビュー#03

WEBサイトレビュー#03



ベース:白(#ffffff)
アクセント : 青系統(#297BAD)
文字色:黒(#333333)

■ファーストビュー
白を基調としていることもあり非常にクリーンな印象を受ける。
医療系は特に安心感とクリーンさを伝えていく事は重要なので、白を基調にしているのだろう。

視線誘導を取り入れており、キャッチコピーをしっかり読んでもらいたいという意思を感じる。

(女性が左を見ており、その先

もっとみる
WEBサイトレビュー#02

WEBサイトレビュー#02



FVにある写真のスライダーが非常に印象的です。
スワイパーで実装しており、若干右上に配置して左下に空間を空けてフレーズもしっかりと見せる形になっています。

最近になって特に奥行きや立体感のある表現が増えてきたように思います。

両サイドにあるロゴやテキスト、ボタンは画面追従になっているようです。

メニューの構成は非常にシンプルで特に変わったアニメーションは施されていません。

サービス部分

もっとみる
WEBサイトレビュー#01

WEBサイトレビュー#01



FVは海外よりの雰囲気を出している。
Slickを使ってスライダー形式にしており、それぞれの写真も少しトーンを落として加工してある印象。
→ 若い層というより大人の層を狙って落ち着いた雰囲気を演出するため(?)

文字も真っ白(#ffffff)ではないく、若干ベージュ寄り(#EBEBE1)の色を使っている。
→背景色とのコントラスト差で視覚的に疲れさせない為、#ffffffを使ってしまうと少し

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

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

高性能かつ手軽に導入できるスライダープラグインのSwiperを普段からよく使っています。

シンプルHTML&CSSサイトやWordPress対応サイトでは、利用しているのである程度の導入までの流れはわかるのですが、Nuxt環境下での導入の仕方がよく分からなかったので調べてみた結果を備忘録として残しておきます。

//ターミナルyarn add swiper@5.x vue-awesome-swi

もっとみる
クラス命名について

クラス命名について

HTMLとCSSを勉強し始めたばかりの頃によく迷うのが「クラスの命名」だと思います。

どこになんて言う名前のクラスを付けたらいいのかってすごく迷いますよね。自分も当時はその状態でした。

クラス名のつけ方に迷ってしまう方の参考になれば幸いです。

まず、良いcssの定義を再確認しましょう。

● 予測しやすい
● 再利用しやすい
● 保守しやすい
● 拡張しやすい

以上の4つです。
最初は一番

もっとみる
WordPress役立ちコード(保存版)

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

今まで私が案件や自分のサイトで使ってきたコードを載せます。

自分も見返せるようにしておきたいので、使い方は特には記載しません。
(記述量が多くなってしまう為)

各自調べてみてください!

■カテゴリーすべて取得表示

<?php $categories = get_categories(); foreach ($categories as $category) { echo '<li><

もっとみる
WordPress化について

WordPress化について

こんにちは。
今回は、質問の多いWordPress化について少し書こうかと思います。

※詳しい手順については量が多いので別の記事にします。
(以下から、WordPress=WPと記述)

Q、オリジナルテーマとしてサイトを作る時は、最初からWP化して行っているんですか?

上記のような質問をいただく事が多いです。

結論は、
「私は一度シンプルHTMLとCSSで構築してからWPに組み込んでいる」

もっとみる