はてなブックマーク

アニメーション。 それはWEBサイトには欠かせない演出です。 最近のWEBサイトはアニメーションがかなり複雑になってきている印象です。 ただ、アニメーションって結構難しいですよね。 簡単なアニメーションならcssでちょちょっと書けばできますが、いくつものアニメーションが連動しているものになってくると難易度があがります。 とはいえ、そんな複雑なアニメーションでも、GSAPを使えばわりと簡単にできちゃいます。 この記事で実装する完成デモこの記事で実装するアニメーションの完成デモページは以下になります。 デモページを見る 結構複雑そうですよね。 でも、GSAPを使えば簡単に実装できます！ GSAPとは?GSAPとはアニメーションを実装するために特化したライブラリです。 公式サイト GSAPには2つのライセンスがあります。 1つは「Standard License」。 もう1つが「Business

【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き 更新日：2024/05/10 WEBサイトにスライダーを実装したことがある人は多いですよね。 そんなときいつも何を使用していますか？ スライダーのJSライブラリで有名どころとして以下の3つがあります。 ・slick ・Swiper ・keen-slider 私は今までslickを使っていました。 Swiperは機能がありすぎてよくわからないのと、slickよりも容量が重いからという理由もあります。 keen-sliderはカスタマイズ前提のライブラリで、アクセシビリティ(a11y)のサポートもされていないため使っていません。（slickとSwiperはアクセシビリティのサポートがされています。） … というような理由で、私はslick推しでした。 しかし、slickの操作感（いわゆるUX）があまり良くないと思って

HTMLとCSSで作るインフォグラフィック（円／棒グラフ・レーダーチャート）【アニメーションつき】 更新日：2022/06/03 近年では、グラフやチャートといったインフォグラフィックを導入しているウェブサイトが増えてきています。インフォグラフィック化することでデータをよりわかりやすく表示出来たり、重要なポイントを強調したりできる、といったメリットを挙げることができます。 インフォグラフィックをウェブサイトに入れる場合、作成した画像を貼るだけでは問題ないですが、そこにアニメーションをつけるとなるとHTMLやCSS、JavaScriptを用いて作成する必要があります。HTMLやCSSでインフォグラフィックを作ろうとすると、なんだか難しそう…というイメージがあるかもしれませんが、実際には、とてもシンプルに作ることができます。どれくらい簡単か、ぜひ本記事で確認してみてください。 完成のデモはこち

TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様

アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコンデザインをよく見かけませんか？あのアイコンにtabキーで移動でき、キーボード操作だけでメニューの開閉ができるサイトはアクセシビリティを意識しているのだなと思います。 首相官邸ホームページを見てみるとtabキーでメニューを移動できます。また画像の黄色い線で引いたところは、WAI-ARIAを使用していました。 アクセシビリティを高めて、多くの人に情報を届けようとしているなあと思いました。 首相官邸ホームページ アクセシビリティの向上には、HTMLの適切タグを使用したマークアップやWAI-ARIAの手法が挙げられま

TOPブログ手軽にリッチなサイトに変わる！3Dグラフィックを描画できるthree.js（WebGL）でサイトをアレンジしてみよう 手軽にリッチなサイトに変わる！3Dグラフィックを描画できるthree.js（WebGL）でサイトをアレンジしてみよう 更新日：2021/12/16 ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングできるWebGL（Webグラフィックライブラリ）。そのWebGLを簡単に扱えるライブラリ「three.js」というものを用い、ウェブサイトに3Dオブジェクトやインタラクティブなアニメーションを取り入れ、表現を少し工夫してみようと思います。 今回は、この記事を通して以下のような 見出しの後ろに十二面体のオブジェクトがあるウェブページ を作ってみます。JavaScriptをある程度触ったことのある方であれば、比較的簡単に導入することができると思うので、ぜ

クライアントからの要望でWordPressを複数のユーザーで運用する場合にユーザー毎に権限を分けたり、 元々ある権限グループ以外に専用の権限グループを追加して細かく設定したい場合があると思います。 これらを解決できる「User Role Editor」プラグインと、追加で処理を書くことで実装可能な特定のカスタム投稿の編集権限をユーザーに与える方法について紹介します。 User Role EditorのインストールWordPressの公式サイトからソースコードを取得しフォルダをアップロードするか、プラグインの新規追加からインストールします。 WordPress公式はこちら インストールができたら、有効化します。 権限グループの追加管理画面の「ユーザー」→「User Role Editor」から設定を行います。 こちらで先ずは権限グループを追加していきます。 選択すると、以下の画面のようになり

2020年末にAll in One SEO Packがメジャーアップデートされ、UIや機能面が大きく変わりました 新しいバージョンになったことで管理画面がガラッと変わり、どこで何を設定すればいいか戸惑っている方も多いのではないでしょうか 筆者もその一人で、慣れていないこともありいつもより工数をかけてしまっていました そこで、同じように悩まれている方のためにも、今後迷わずさくっと設定できるように記事にまとめたいと思います ここで紹介している設定ができれば実務レベルでOKな内容となっていますので初心者の方でも安心して読み進めていただけます また、よくある一般的な設定だけではなく、痒い所に手が届くような内容もしっかりと説明しています 少し長めの記事なので辞書的な感覚で必要なところだけ読んでいただいてもＯＫです！ それでは早速説明に入ります！

ナビゲーションやボタンは、サイトを閲覧するときに必ず操作する要素ですよね。 ちょっとした要素に素敵なホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象もよくなります。 また、ナビやボタンのホバー時のデザインはなく、コーダーにおまかせということもあります。 コーダーにおまかせしたらかっこよくないホバーをつけられてしまった…、 なんて言われないよう、素敵なホバーアニメーションをつけて、お客さまやディレクターさんの期待に応えましょう！ 本記事では、イメージ通りのアニメーションを探しやすいように、シンプル・綺麗、ポップ、スタイリッシュ・かっこいい、かわいい・柔らかい　といった、イメージ別にホバーアニメーションをご紹介していきます。 デモ・サンプルコード付きですので、ご活用ください。 また、CSSアニメーションをまとめた記事もあります。 ぜひこちらもご覧いただき、サイトをリッ

【初心者でも簡単】sessionStorageでブラウザにデータを保存してみよう【JavaScript】 更新日：2021/07/21 複数ページのサイトのシステム構築をしていると、あるページでユーザーが入力した文字列などを別のページで取得して表示させたい、という場面が度々ありますよね。 （例えば、簡単な診断コンテンツのように、設問ページでユーザーに名前や回答を入力してもらい、それを結果ページで表示させる、など） そんな時にとても便利なのが「sessionStorage（セッションストレージ）」というブラウザの保存領域にデータを保存できる仕組みです。 JavaScriptですが機能がシンプルなのでJavaScript初心者でも扱いやすく、この技術を使えばWebサイト上でデータを扱うシステムを簡単に実装できます！ セッションとは？sessionStorageは文字通り「セッションのストレージ

2020年の冬からSassが社内標準として採用されました。 最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。 Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。 SassについてSass（Syntactically Awesome StyleSheet）はCSSのメタ言語です。CSSのメタ言語をCSSプリプロセッサと呼んだりします。 メタ言語は言語を定義したり、言語についての情報を記述したりするための言語です。CSSの機能を拡張した言語の1つがSassと言えます。 SassはCSSに変換（コンパイル）する必要があります。環境構築が面倒という方もGUIコンパイラやVSCodeのプラグインなどを使えば、気軽にSassを導入できます。 GUIコンパイラの使い方については、こちらの記事を参考にしてみてください。 Sass(SCSS)を始めよう

【保存版】コピペでOK！Flexboxで作る頻出レイアウトの構造解説（サンプル付き） 更新日：2021/01/21 要素を横並びにするとき、Flexboxってとっても便利ですよね！ Floatを使用して実装するよりも少ないコードで、よりシンプルに実装することができるので皆様もお世話になっているのではないでしょうか？ 以前まではブラウザによって挙動が違ったりサポートしていなかったりといった問題がありましたが、最近ではほとんどのブラウザで安定して使用できるようになったのも嬉しい点です。 この記事では、そんなFlexboxを使った頻出レイアウトのご紹介と仕組みの解説をしていきたいと思います。 「子要素のテキストを上下中央揃えにしたい」「ボタンだけは下寄せにしたい」といった、よく見るデザインながら初心者さんが困りがちなレイアウトをまとめてみました。 これが分かれば、組み合わせてもっと多くのレイアウ

WordPressで記事一覧・詳細機能を実装すること多いですよね。 さらに記事の分類としてタクソノミーも出てくることも多々です。 最初の頃は「タクソノミー？ターム？ページネーション？」と躓いていた覚えがあります。 今回はカスタムタクソノミーを持つカスタム投稿タイプの一覧・詳細ページの実装方法をざっくりまとめました。下の画像のようなページを作成していきます！ 一覧ページ 詳細ページ 今回は前編としてカスタム投稿タイプ・タクソノミーの作成、詳細ページ実装まで解説してます。 カスタム投稿タイプの作成カスタム投稿タイプとは何か説明してから、実際に作成していきたいと思います。 カスタム投稿タイプとはまず、WordPressには5つの主要な投稿タイプがあります。 ・投稿 (投稿タイプ: ‘post’) ・固定ページ (投稿タイプ: ‘page’) ・添付ファイル (投稿タイプ: ‘attachment

TOPブログ【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう！【After Effects】 【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう！【After Effects】 更新日：2020/05/08 コーディングの動きの指示をする際、「このサイトのこの部分に似せて欲しい」などの具体的な指示があれば分かりやすいですが、動きを伝えるというのは難しいと思います。 また、デザイナー自身で動きが付けられるとやりとりの手間が少なくなるかと思います。 しかしJavaScriptなど、コーディングで再現するとなると苦手意識がある方も多いのではないでしょうか。 デザイナーが作るアニメーションとして、gifやAPNGの形式も魅力的です。 しかしgifは色数制限や透過の処理、APNG

[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 Part.2 更新日：2024/05/10 Part.1 からかなり間が空いてしまいました。 本記事を書いている間にもデザインツールは進歩していて、最新ツールを使いこなしているデザイナーさんならもはや気にする必要のない項目も中にはあるかもしれません。 でも、つい最近も、まさにコーディングしにくいデザインのお手本！というべきデザインデータを目にしました。 コーディングを全くしない方や、他社のデザインデータを目にする機会のない方には、まだまだ「知らなかった」「そもそも考えたことがなかった」という内容も多いのではと感じます。 本記事を通して、Webデザイン作成の中に少しでも「コーダーさんへの気遣い」を取り入れて頂けたら幸いです。 それでは、また長文となりますがどうぞ最後までお付き合いください。

みなさんは「慣性スクロール」や「パララックス」という言葉を聞いたことがありますか？　マウスで実際に動かした分よりも少し遅めにスクロールが反応し余韻が残るような効果を出す動作や、各コンテンツを異なる速度で移動させる動作などを指しています。 最近、この2つのエフェクトが実装されたウェブサイトを頻繁に見るようになっている気がしていました。自分も導入したいなと思い調べたところ、「Luxy.js」というプラグインで簡単に導入できることがわかりました。今回の記事ではその方法をまとめたいと思います。 実際に、Luxy.jsを使ったデモサイトも作りましたので、合わせてご覧ください。デモサイトは以下より閲覧いただけます。 demo 「慣性スクロール」と「パララックス」について簡単にまとめていますが、すでにご存知の方は「Luxy.jsのダウンロード」まで読み飛ばしてください。 「慣性スクロール」とはマウスで実

デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか？ 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめました。 これらの技術はデザインに沿ってコーディングをする以上のものになります。 実務では工数が掛かるためあまり行われず、知っていても使う機会は少ないと思いますが、それでも抑えておくと自身のWeb制作への理解が深まると思いますので、興味のある方はご一読下さい。 それではいきます。 はじめに制作にあたり、複数のプラグインやライブラリを使用しています。 Webサイトで使われるプラグイン(ライブラリ)の多くが海外製となっており、最近ではIEを非対応としたプラグインもあります。 特に最近の制作環境の主流である

Webフォントとは？メリット・デメリット・使い方など 完全ガイド初級編【まとめ】 更新日：2020/06/11 最近、ブランディングのためにWebフォントを使用しているサイトを多く見かけますよね。 そんな中、「Webフォントってよく分からない…」「Webフォントって重いんじゃないの…？」「使いたいフォントがWebフォントにない…」と思っている方は多いのではないでしょうか？ この記事では「Webフォントとは」から使い方、軽量化の方法まで徹底解説していきます。 おすすめの無料Webフォントサービスもご紹介しておりますので、ぜひ最後まで読んでいってくださいね！ 目次デバイスフォントとWebフォントとはデバイスフォントで使用するフォントとはWebフォントのメリットデメリット日本語Webフォント使用の注意点日本語Webフォントを軽量化する方法cssでWebフォントを指定する@font-faceの書き

最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーションのイメージはなかなか文面でも口頭でも伝えにくいもの。 「ふわふわ」「しゅっと」「するする」「ぬるっ」などとオノマトペを駆使して説明しても、ディレクターとコーダーの間の認識の共有は結構難しいのです。 結局、イメージに合った動きをしているサイトを見つけて「この動きで！」と伝えるのが楽なんですよね。 そこで本記事では、そういった言葉にしにくい部分にフォーカスを当てて、シンプル・綺麗、ポップ、スタイリッシュ、柔らかい印象などのイメージ別にCSSアニメーションをご紹介します。 デモ・サンプルコード付きですので、ぜひ

TOPブログ【WordPress】カスタムフィールドならこれ！Smart Custom Fields(SCF)の使い方完全まとめ 【WordPress】カスタムフィールドならこれ！Smart Custom Fields(SCF)の使い方完全まとめ 更新日：2024/05/24 WordPressでWebサイトを作成するときに、「決まった項目をわかりやすく入力したい」「簡易的なフォームを作成したい」という場合に便利なのが”カスタムフィールド”という機能です。 WordPress標準の機能ですが、そのままだと使いにくく分かりにくいので、プラグインを使う方法が主流です。 今回はWordPressのカスタムフィールド機能を便利に使い倒すプラグイン「Smart Custom Fields」（SCFと略されることもあります）について、インストール方法から、WordPressの実装でよく使うカスタマイズ

「Contact Form 7」「MW WP Form」徹底比較（WordPressの2大フォームプラグイン） 更新日：2024/05/24 この記事はこんな人におすすめ！ ・WordPressにフォームを導入したい ・どんな方法があるのかわからないし、どれがいいのかもわからない ・フォームのプラグインって何使えばいいの？ ・おすすめあります？ ・限られた予算・工数でフォームを作成したい WordPressでお問い合わせフォームを作成する場合、いくつか方法があります。 できれば予算や時間をかけたくない！難しいのは無理！でもセキュリティ的に問題なくて見た目もかっこいいのがほしい！と思いませんか？筆者はそう思っています。 結論から申し上げますと、プラグインを使う方法が一番おすすめです。(←リンクになっているのでお時間のない方はこちらからどうぞ。) そこで、今回はWordPressにお問い合わせ

HTMLをWordPress化！やりやすいコーディング方法をレクチャー【手順付】 更新日：2024/09/12 無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいないとか。 弊社でもWordPressの案件は多く、リニューアルから新規作成など多岐にわたります。 中でもHTMLで静的コーディングを作成してからWordPressに組み込む案件が多いのですが、コーディングする人によっては正直WPへの移行がしづらいことも(笑)。 そこで今回は、どんなコーディングにすればWordPressへの組み込みがしやすいかを具体例を交えて解説いたします。 これを読めば作業効率アップ間違いなしです！ 「HTMLファイルをどうやってWordPressに組み込めばいいかわからない」「Wor