はてなブックマーク

【CSS】ol,ulを使った箇条書きデザインの実装サンプル 公開日 : 2022.12.26 コーディング こんにちは！AndHAエンジニアチームです。 書く方も読む方も便利な「箇条書き」、Webでもよく登場する表現ですね。今回は、「ol要素」「ul要素」を使った箇条書きデザインの実装サンプルをまとめてみました。 いろいろなパターンに対応できるよういくつかの方法で実装しておりますので、ぜひご参考に！

GTMでGA4イベントクリック計測をする方法 – カスタムデータ属性利用 公開日 : 2022.10.24 最終更新日 : 2023.07.10 Web 分析 この記事では、カスタムデータ属性を使った、GTM（Google Tag Manager）によるクリック計測の方法をご紹介します。 この記事で紹介する内容どおりに設定することで、ユーザーが行うあらゆるクリックアクションを「イベント」としてGA4で計測できるようになります！ 【概要】この記事の内容をサクッと紹介！GAやGTMで「やりたいことと一致する・しない」があると思うので、まずはこの記事で紹介する内容を簡単に解説します。 この記事では、下記のような計測方法を用います。 計測したい要素（リンクやボタンのHTMLコード）に対して、カスタムデータ属性(data-***=”任意の文字列”)を記述。GTMの設定にて、カスタムデータ属性を「トリ

GSAPのScrollTrigerを使ってクラスの付け外し👏 公開日 : 2022.08.31 最終更新日 : 2023.08.28 コーディング こんにちは、AndHAコーディング部です。 指定場所までスクロールしたタイミングで、クラスを付け外しすることでアニメーションを再生する表現はどのサイトを見ても当たり前に使っているところが多いと思います。 今回はGSAPのScrollTrigerを使った雛形をコピペで利用できるコードを簡単に紹介します！ gsapのバージョンは3.10.4を利用しています。 gsap – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers 完成コード.classNameは判定させたい要素に指定するクラス名、.classActive

transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ

【jQuery】slickの使い方とよく使うサンプル集 公開日 : 2022.07.04 最終更新日 : 2023.11.07 コーディング スライダーのプラグインは数多くありますが、その中でもよく使われる「slick」について、使い方とよく使う実装方法についてご紹介します。 今回紹介するサンプルを組み合わせることで様々なカスタマイズにも対応できるかと思いますので、是非参考にしてみてください！ slickの導入方法slickを使うためには、以下2つの方法があります。 ファイルをダウンロードして読み込む方法CDNを使って読み込む方法なお、slickを利用するためはjQuery本体の読み込みも必要になるので、忘れずに！ slickファイルをダウンロードして使う場合公式サイトにアクセスし「get it now」をクリックします。 「Download Now」をクリックすると、skickのファイル

【ちゃんと理解して使えてる？】 Webデザイナー必見！CSSグラデーションの仕組み解説 公開日 : 2022.07.27 最終更新日 : 2022.10.05 コーディング cssグラデーションについて記事を書いていきます。現在はジェネレータ等でさくっと作成できますが、グラデーションの指定方法を理解して使用するとより一層表現の幅が広がると思います！ 一緒に勉強していきましょう！！！ グラデーションとはCSS グラデーションは データ型で表現され、2つ以上の色の間の連続的な変化から成る の特殊型です。グラデーションは3種類から選択することができます。線形 (linear) (linear-gradient() 関数によって生成)、放射 (radial) (radial-gradient() 関数によって生成)、扇形 (conic) (conic-gradient() 関数によって生成) の3

【検索カスタマイズ】EC-CUBE3で価格帯絞り込み実装方法 公開日 : 2022.03.22 最終更新日 : 2023.07.10 コーディング EC-CUBEのカスタマイズ方法は下記のフォーラムで質問、もしくはすでに回答されている項目を参考に実装していく必要があります。 https://xoops.ec-cube.net/ フォーラム以外では超有名CMSのWordPressほどたくさんの人が解説しているわけではないので、Googleで検索しても自分が実装したいことを解説している記事も少なく、初心者にとってはEC-CUBEのカスタマイズは結構ハードルが高かったりします。 今回はよくカスタマイズで頼まれるであろう、下記のような商品の価格帯での絞り込みの実装方法を解説したいと思います。 <価格帯でさがす> 0-2000円 2000-4000円 4000-6000円 6000-8000円 【検

デザイナーのリュウイチです。 WEBデザインのギャラリーサイトはよく見られますか？ デザインの引き出しを増やしたかったり、クライアントの要望に沿えるアイディアはないかなと普段からギャラリーサイトをチェックしています。 アワード系のギャラリーサイトでは目新しい技術を使って魅せていたりなど刺激をもらい、創作意欲を掻き立てられる日もあります。 打ち合わせの際に大まかな方向性のすり合わせや、WEB制作の実作業を始める前のイメージボードづくりなどでも重宝してきます。 しかしながら実際の業務でクライアントの職種やご要望いただくサービスや商品に沿えるものは限られてきます。 そこで制作に役立つ参考サイトの見方、参考方法をご紹介できればと思います。 WEBデザインギャラリーサイトの閲覧 ギャラリーサイトはデザインの宝庫！ 制作意図を推理しながら閲覧してみましょう。 どのデザインにも意味があり、見て感じた事は

WordPressでよく使う条件分岐（if、while）のススメ🏃 公開日 : 2022.03.07 最終更新日 : 2022.10.05 コーディング こんにちは、AndHAコーディング部です。 弊社はお客さまからのご依頼でWordPressを使ったサイト構築を数多く手がけており、WordPressに特化したメディアサイトである「WPWeb」も運営しています！ WordPress特化型メディアサイト【WPWeb】 (and-ha.com) WordPressをカスタムしていくには各ページごとの条件分岐が重要となってきます。今回はよく使う条件分岐をご紹介していきたいと思います。

<ul class="card_list"> <li class="card_item"> <a href="#"> <div class="thum_box"> <img src="logo.svg" alt=""> </div> <div class="text_box"> <h1 class="title">タイトルが入りますタイトルが入ります</h1> <p class="desc js-textTrim"> 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。 </p> </div> </a> </li> </ul> html { font-si

【即戦力!!】すぐに使いこなせる 4つのおすすめChrome拡張機能 【Google Chrome】 公開日 : 2022.02.16 最終更新日 : 2022.05.30 ディレクション 調べ物や競合調査、検証など業務時間の大半をGoogle Chromeと過ごしている僕ですが、今回はWeb制作に関わる際に非常に役立つ拡張機能を皆さんに共有したいと思います。 WhatFontWhatFont このプラグインはアクティブにすることで、使用されているフォントの種類やサイズ・スタイルなどをわかりやすく教えてくれる拡張機能です！ テストアップされたサイトのフォントバランスや文字サイズが適正かどうかのチェックなど、かなりの頻度で使用しています。 Responsive ViewerResponsive Viewer こちらは、各デバイスやウィンドウサイズでの見え方を一覧で表示してくれる拡張機能です。

【Google広告】キャンペーンごとのコンバージョン目標「カスタム目標設定」について 公開日 : 2022.02.04 最終更新日 : 2023.07.10 Web 広告 Googleリスティング広告を出向する際に作成することの多い「コンバージョン設定」。 この設定方法について最近こっそり変更があったことはご存知ですか？ 今回はコンバージョン設定で追加になった「カスタム目標」ついてご紹介します。 設定方法まずは普段登録しているようにコンバージョン設定を進めましょう。 メインメニューのツールと設定よりコンバージョンを選択してください。 コンバージョンページの「新しいコンバージョンアクション」から新規でコンバージョンアクションを作成してください。 キャンペーンごとにコンバージョンを分けて設定する場合、これまではこの時に作成したコンバージョンアクションをそのまま各キャンペーンの設定から紐付けるこ

WebGL（Three.js）参考サイト10選【日本・海外に分けて紹介】 公開日 : 2022.01.24 最終更新日 : 2022.10.05 コーディング webGLの参考サイトを「日本サイト」「海外サイト」に分けご紹介させて頂きます！ 少しでもwebGLサイトを作る上で助けになってもらえると嬉しいです。 【日本サイト】HOMUNCULUS web業界では知らない人はいないであろう有名な制作会社のホモンクルス。 webGLを使用した美しい流線型のデザインが実装されています。 紹介されている制作実績もwebGLを使用したものが多いので合わせてチェックしてみるのもいいかも。 https://homunculus.jp/ KIRIFUDA こちらも有名企業の切札。 細部までこだわった動き、スクロール時の気持ち良さ。どれを取ってもピカイチです。 こちらの会社さんの制作実績もwebGL満載ですの

【Google広告】除外キーワード設定の3つのマッチタイプとは？ 公開日 : 2022.01.17 最終更新日 : 2023.07.10 Web 広告 Google広告にて、特定のキーワードから検索してきた場合にのみ広告表示を避けることのできる「除外キーワード設定」。 設定しておくことで似たキーワードの別の商品を探しているユーザーなどを検索範囲から除外することができる為、運用には欠かせない機能ですが、設定を間違えると広告の表示対象ユーザーが極端に絞り込まれてしまう恐れもあります。 今回はそんな除外キーワード設定をこれから行なう皆さんの為に、3つあるマッチタイプの特徴についてご説明します。 完全一致「完全一致」でキーワードを除外した場合は、登録したキーワードのみで検索された場合に広告が表示されなくなります。 ただし、その前後に別の語句を含んで検索された場合は広告が表示される為、まさしく「完全

【Facebook広告】 運用中に役立つ3つの注意点 公開日 : 2022.01.12 最終更新日 : 2023.07.10 Web 広告 Facebook広告では、実際に運用を開始してから初めて気づく思わぬ仕様などが多数存在します。 そこで今回は、実際に運用していて気になったFacebook広告の様々な仕様について解説していきます。 キャンペーン上限予算の最低金額比較的安い金額からスタートできるFacebook広告。 広告運用を始めた初期の頃、短期間で少しだけ出してみたいという依頼があり、試しに設定を確認すると、Facebook広告はキャンペーンの上限予算を設定する際の最低金額が決まっていることが分かりました。 単位を¥に指定した場合キャンペーンの上限予算は10,000円からとなるようです。 この項目は任意での設定となりますが、これからFacebook広告を提案しようと思っている方は、ク

Three.jsを使った2Dアニメーションの実装 公開日 : 2022.01.04 最終更新日 : 2022.10.06 コーディング Three.jsのWebサイトと聞くと3Dサイトがぱっと思ってしまうことが多いかと思いますが、2Dアニメーションをゴリゴリに動かしているサイトでもThree.jsが多様されています。 Three.jsを使用した2Dアニメーションのサイト例とどんな感じで作られているのかをざっとまとめてみましたので、 参考にしてみてください！ 【サイト】みさとと。 超有名制作プロダクションの株式会社SHIFTBRAINに制作されたサイトです。 FWA、Awwwards、CSS Design Awardsなど数々の賞を受賞しており、Web界隈ではかなり話題になりました。 Three.jsをうまく使って、サイトを構築しています。 https://www.town.shimane-

WEBディレクターが真っ先に習得したいデザイナーへのフィードバックスキル 公開日 : 2021.12.24 最終更新日 : 2023.07.10 ディレクション 株式会社アンドエイチエ－へWEBディレクターとして入社して早1年。 そこで感じた事のひとつに、Webデザイナーしたデザインへフィードバックをするスキルってすごい大切なスキルだし、身につけたら強強ディレクターになれるかもしれないということ。 入社したての私は、「私よりも経験があるデザイナーが作ったデザインに意見言うの？」とか、「フィードバックってそもそもどうすれば？」とあたふた。。。 そんな状況でも、しっかりとフィードバックをすることで、できあがるサイトの質を左右するなと感じました。 この記事が、新人ディレクターの手助けになれば嬉しいです。 より良いデザインフィードバックをするための方法私の場合まず、下記のセクションに分けてみました

WEB制作におすすめ！Adobe XDで出来る事 公開日 : 2021.12.22 最終更新日 : 2022.10.05 デザイン デザイナーのリュウイチです。 以前はWEBデザインはPhotoshopやIllustratorで制作していたのですが、AndHAに入ってからはXDを軸に制作しています。 制作で使用するメインツールをXDにして感じた事、お勧めしたいポイントを紹介していきます。 XDのお勧めポイントはTwitterでも何回かに分けて投稿していました。Twitterも是非ご覧ください。 XDでできること XDは大きく分けて、3つのことが可能です。 デザイン作成プロトタイプ作成共有/コメントどれも他のツールでも出来ることではあるのですが、 XDの使い始めに感じた大きなメリットがイメージの共有です。 それに加えて動作が非常に軽く、便利な機能や、豊富なプラグインで時間がかかりそうなことも

Webデザイナー初学者必見 サクッと理解！ nth-child、nth-of-typeの違い 公開日 : 2021.12.20 コーディング はじめに今回は、CSSの擬似クラスである、nth-shildとnth-of-typeの違いを書きたいと思います。初学者の頃よくわからなくなった経験があったので、自分のためにも、また現在勉強中の方に向けてできるだけわかりやすく説明します！ぜひ最後まで読んで見てください。 HTML基本構造の理解念の為、サラッとHTML基本構造のおさらいです。 <section clasa="company"> <h1>タイトル</h1> <p>AndHA-1</p> <p>AndHA-2</p> <p>AndHA-3</p> <p>AndHA-4</p> <p>AndHA-5</p> <div> <p>AndHA-6</p> </div> </section> この場合

GitHub Actionsを使ってXServerなどレンタルサーバーに自動デプロイしよう🙌 公開日 : 2021.12.10 最終更新日 : 2023.08.28 コーディング こんにちは、AndHAコーディング部です。 前回の記事ではSourceTreeを使ってコミット間の差分ファイルを出力する方法を紹介しました。 SourceTreeを使ってコミット間の差分ファイルを出力してみよう🥳 | 【運用・改善が得意な仙台のホームページ制作会社】AndHA（アンドエイチエー） リモートリポジトリをGithubに指定している場合、Github Actionを利用しワークフローを自動化することが出来ます。 Actions | GitHub 今回はよく使われるであろうエックスサーバーに対し、GitHub Actionsを使った自動デプロイを紹介します。 ※Mac（macOS 12.0.1）環境で

【ディレクター向け】ワイヤーフレーム作成に役立つ4つのプラグイン【adobe XD】 公開日 : 2021.12.08 最終更新日 : 2022.10.06 ディレクション ディレクターやデザイナーがWeb制作時によく使用するアプリ「adobe XD」はプラグインが豊富で、「これできればいいのに〜」ということや手の届かないかゆい所に丁度いいプラグインが沢山あります。 今回はそんなXDのプラグインを4つご紹介します！ Split Rowsまずは何を差し置いてもこれかなと！ このプラグインは改行で区切られているテキストを一行ずつにバラす(分解してくれる)アプリケーションで、私自身ディレクション業務の中でワイヤーフレームを作成する際に、クライアントからテキストなどの素材をいただくのですが、例えば沿革などの多数の行になってしまう素材などに非常に役立ちます！ unDrawこちらのプラグインは、手軽に

これだけは知っておきたい！metaタグ（メタタグ）の種類と設定方法 公開日 : 2021.12.06 最終更新日 : 2023.08.28 コーディング Webページをコーディングする際に記述するmetaタグ。内容を詳しく把握していない方も多いのではないでしょうか？ 正しく設定することで間接的ではありますがSEO効果にも繋がってきますので、それぞれのmetaタグ意味を理解し正しく設定していきましょう！ metaタグとは「meta（メタ）タグ」とは、検索エンジンやブラウザなどに対してWebページの情報を伝えるHTMLタグです。 文字コードの指定や、検索エンジンへのインデックス（検索結果に表示される）の可否など、メタデータと呼ばれる情報を伝えるのがメインの役割となります。 「ページタイトル（title）」や「ページの説明文（description）」以外はユーザーの目入ることはほとんどありませ

【緊急】Movable Typeの脆弱性に注意！！！ 公開日 : 2021.12.01 最終更新日 : 2022.10.05 ディレクション Movable Type とは Movable Type ( ムーバブル・タイプ / MT / エムティー ) は、シックス・アパートが開発・提供する、ブログで用いられることの多いコンテンツ管理システム ( CMS ) 製品である。プラグイン機構により機能を拡張できることが特徴である。 参照 : Wikipedia Movable Type 公式サイトはこちら 脆弱性の概要Movable TypeのXMLRPC APIには、任意のOSコマンド実行が可能な脆弱性 ( CVE-2021-20837 ) があります。本脆弱性の悪用を目的とした特別なリクエストを受け取った場合に、OSコマンドが実行され、様々な被害を受ける可能性があります。 脆弱性の影響を受け

WEBディレクターとして必要なスキル 公開日 : 2021.11.18 最終更新日 : 2022.10.05 ディレクション WEBディレクターの仕事とはWEBサイトの制作に関する進行管理者 + 仕様策定になります。( クライアント様と制作側の架け橋となるのが役割 ) そのため、WEBディレクターは知識人じゃないといけません。クライアント様との会話、制作側と技術的な話などがあるため、幅広い知識が必要なります。