サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
and-ha.com
PDCAサイクルが古い?OODAループと比較、PDCAとOODAの活用方法 公開日 : 2021.07.06 最終更新日 : 2022.10.05 デザイン デザイナーのリュウイチです。 早速ですが皆さん… 最近どう?PDCA回してる? 回してますかぁ。いいですねぇ。Hi-Hi。 より良い質の仕事をしていくのには欠かせませんよね。 仕事のデザイン制作ではもちろん、 趣味のミニ四駆でもPDCAを意識してやってみていて、これがまた面白いんですよ。 そんな事をやっていたら聞こえてきた。 “PDCAサイクルは古い” … 嘘だ!俺のミニ四駆はPDCAサイクルで少しずつ早くなったんだ! じゃ〜PDCAに変わる新しいものってなんだよ!! OODA(ウーダ)ループ…? と新しい言葉と出会いまして PDCAとは何かを振り返ってみて、 OODAループとはなんぞや?と それぞれの比較もまとめていこうと思います!
ホームページにはメールアドレスを掲載してはいけない!?その理由と対策方法 公開日 : 2021.07.12 最終更新日 : 2022.10.05 コーディング お問い合わせ用などのメールアドレスをホームページ上に公開することはよくあると思いますが。 ・・そのメールアドレス、そのまま公開していませんか? 実は、何の対策もせずにメールアドレスを公開してしまうと、スパムメール(迷惑メール)に襲われるリスクが高くなってしまいます。それにより、ウイルス感染の恐れや情報漏洩などさまざまな被害リスクが高まると同時に、クライアントへも多大なる迷惑をかけてしまう恐れがあります。 これからホームページにメールアドレスを公開しようと思っている方、また既に対策をせず公開してしまっている方も、スパムの危険性を理解し今すぐ対策を行なっていきましょう! スパムメールとは受信者の意向とは無関係に、無差別かつ大量に送り付け
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは!AndHAコーディング部です。 突然ですが新人コーダーさん!コーディング勉強中の皆さん! こんな不具合に遭遇したことありませんか? 「transitionをかけたホバーアクションのopacityがちらつく!」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
WordPress化したらslick(スライダー)が動かない?!その原因はjQueryの処理タイミングかも。 公開日 : 2021.07.01 最終更新日 : 2023.08.25 コーディング たったの2単語で解決!?!?!?! 静的HTMLで一度コーディングし終え、よしWordPress化(PHP化)するぞ! 「あれ、slickが動かない、、、」という経験がありませんか? ちなみに私の場合、たった一行(というか2単語)書き換えるだけで動くようになりました。 それの原因はズバリ、jQueryの記述方法にありました。 記述方法といっても、headタグ内に記述するとか、bodyの閉じタグ直前に記述するといった「jQueryの処理自体を読み込ませるタイミング」のことではないです。 jQueryが「処理を実行するタイミング」です。 詳しく見ていきましょう。
【Three.js入門】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.09.03 最終更新日 : 2022.10.05 コーディング Three.jsを勉強しようと思っても簡単なやり方や概念を説明してくれているサイトはたくさんあるけど、実際案件で使用するためにはどうやって勉強していけばよいのか分からない人は多いと思います。 今回はThree.js初級者が中級者になるために見るべきサイトや書籍をまとめました! これら全てを行えば、初心者を脱出出来るでしょう! 【サイト】Three.js入門サイト WebGLやThree.jsのことを調べるまず最初に出てくる池田 泰延:twitterさんが初心者にも分かりやすくThree.jsのことを説明してくれています。 まずはこちらのサイトから勉強を進めてみるのが良いかと思います。 https://ics.media/tutorial-th
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)環境で
【超簡単】Local by Flywheel(現Local)を使ってWordPressのローカル環境を構築する 公開日 : 2021.06.03 最終更新日 : 2022.10.05 コーディング この記事では、WordPressの構築をローカル開発環境で行う方法についてご紹介します。 WordPressを使うには、PHPが動作するWebサーバーと、MySQLデータベースサーバーが必要になるため、HTML/CSS/JavaScriptのように、テキストエディターでコードを書くだけでは動いてはくれません。動かすためにはレンタルサーバーを借りるなどが必要になってきます。 また、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
紙出身デザイナーが教える!失敗しないWebデザインの始め方 公開日 : 2021.05.28 最終更新日 : 2022.10.05 デザイン こんにちは、デザイナーのシュウジロウです。 10年以上グラフィックデザイン、パッケージデザインを専門にやってきた私。 今の会社でwebデザインに軸を移してからもなかなかの時間が経ちました。 どちらもそれなりに積み重ねていると、作られたデータを見るだけで 「あ〜この人はグラフィック出身だ」とか 「web中心にやってきた人だ」とか わかってくるものでして。 今回はその経験を生かしまして グラフィックデザイン出身者がやりがちなコーダーに突っ込まれるwebデザインの特徴 をご紹介していきましょう! この記事を読めば明日からあなたも少し今より自信を持てるweb担当者に! フォントサイズがやたらと小さい本当に多いんです。 恐怖の8pxデータ 気持ちはわかります。
【Webディレクター】結局何をどこまでやるの?仕事の流れを詳細に解説! 公開日 : 2021.06.08 最終更新日 : 2022.02.22 ディレクション 皆さんは「Webディレクター」と言われて何を想像しますか? おそらく大体の方が思い浮かべるのは「工程やクオリティの管理をする仕事…?」だと思います。 結論から言うと、その認識で大体は有っていますが、少し抽象的なのでこの記事では弊社のWebディレクターが行っている業務フローを例に、更に詳細に解説します。 クライアントとの打ち合わせまずはお問い合わせをいただく・または受注するところからWebディレクターの業務はスタートします。 クライアントからの課題や要望を打ち合わせにてヒアリングし、現状のサイト分析と照らし合わせます。 弊社ではヒアリングシートを用意しており、お打ち合わせまでに記入していただくことで初回の打ち合わせをただの顔合わせでは
目指せ!脱初心者 Gitの基本を図解で解説 公開日 : 2021.10.14 最終更新日 : 2022.10.05 コーディング AndHAエンジニアチームです。 皆さんは開発時にGit使ってますか? Gitを使ったバージョン管理を行っておくことで、急に機能を追加する必要があったり、差分ファイルの抽出を用意しなければならない、コードの振り返り、プルリクエストによるコードレビュー、近年増えつつあるJamstack対応などなど…挙げたらキリが無いほど、無くてはならない存在です。 Gitという単語を知っていても中々難しそうで後回しになっている方、一緒に学んでいきましょう。 今回はGitを使っていく上でよく出てくる機能を紹介していきます。 リポジトリとはリポジトリとは、ファイルやディレクトリの状態を記録する場所の事です。登録する度に作業内容のファイルやディレクトリなどの変更履歴が格納されていきます
WordPressでよく使う条件分岐(if、while)のススメ🏃 公開日 : 2022.03.07 最終更新日 : 2022.10.05 コーディング こんにちは、AndHAコーディング部です。 弊社はお客さまからのご依頼でWordPressを使ったサイト構築を数多く手がけており、WordPressに特化したメディアサイトである「WPWeb」も運営しています! WordPress特化型メディアサイト【WPWeb】 (and-ha.com) WordPressをカスタムしていくには各ページごとの条件分岐が重要となってきます。今回はよく使う条件分岐をご紹介していきたいと思います。
WEBデザインに重宝される!イラストのトレンド5選と描き方 公開日 : 2021.08.27 最終更新日 : 2022.10.05 デザイン デザイナーのリュウイチです。 唐突ですが私の描くイラストはキャラクターイラストが多いです。 得意なタッチは少々クセがあり、ご依頼内容に沿ったデザインコンセプトにマッチングする機会が少なく、提案するには使う場面が中々ありません。 (お気に召しましたら、仕事ください) ですが得意なタッチ以外のイラストも描けます!! イラストを描くこと自体が好きなので、隙あらばイラストも織り込んだご提案させていただいております。 イラストを使用したWEBサイトを参考に交えながら、最近の流行を見て、最後に描き方をご紹介できればと思います。 イラストのトレンド5選アイソメトリック HELLO TOMORROW | NRIデータiテック TOYO HITEC|RECRUIT20
【厳選】WordPressへ入れておきたい最低限プラグインおすすめ3選 公開日 : 2021.06.22 最終更新日 : 2023.07.10 コーディング WordPressを構築する上で機能拡張をしてくれるプラグイン。いっぱいあって何を入れたら良いのか・・・悩みますよね? この記事では、WordPressでサイト運営する上で、まずこれだけは入れておきたい!というプラグインを、ウェブ制作者目線でお届けします。 画像圧縮編EWWW Image Optimizerウェブサイト(または記事)では、画像を多く使って表現したりするとページ内に含まれる画像全てを読み込までに時間がかかってしまい、ユーザーのストレスへと繋がってしまいかねません。 制作者の場合は、画像を適切なサイズへ調整したり・圧縮したりなどと、常に最適化を行ってデザインやコーディングを行いますが、画像数が多かったりすると中々大変な作業
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
【オススメ5選】プロジェクト管理ツールの選定ポイント 公開日 : 2021.05.31 最終更新日 : 2023.08.09 ディレクション なぜ、プロジェクト管理ツールが必要なのか?まずは、「プロジェクト管理は必要か」について。もちろん「必要」です。 スケジュールや、誰が何のタスクを持っているのかを確認するため、そしてレギュレーションを残すために必要なことだと思ってます。 仕事の規模でプロジェクト管理で決めるのではなく、どの規模だとしてもプロジェクト管理は必要になっていきます。 人はすぐに忘れる このことを必ず念頭に置いた上で、お話させていただきます。 プロジェクト管理に、「Excel」や「Google スプレッドシート」などの表計算ツールを使用している企業が多いと思います。そのツールだけでも十分にプロジェクト管理することは可能ですが、フォーマットの作成や進捗状況の確認・編集がしづらいこ
デザイナーのリュウイチです。 AndHAではWEBデザイン、広告画像制作などの業務を担当しています。 挿絵や似顔絵、キャラクターデザインとかお絵かきもします。 イラレやフォトショ、XDを使って制作していますが、 これらのツールを使えばデザイナーって訳ではありません。 クオリティ云々を問わなきゃエクセルやワード、 なんなら手書きでもデザインはできちゃいます。わお。 じゃじゃじゃじゃぁ、何をどうしたら“デザインする”って事になるのでしょうか。 “デザインする”とはどういう事なのか、みていきましょう! 前提確認 -目的/用途/素材の確認-デザインする前の確認です。 ある意味ここからもうデザインが始まります。 まず初めに何のために必要な物なのか、 どうやって使う物、使われる物なのか、 それを作るのに何が必要かをそれぞれ確認していきます。 ひとつずつ整理して行きましょう! 目的 -何のために-お客さ
「Pug(パグ)」って何? HTMLと見比べながら7つのメリットを紹介! 公開日 : 2021.11.01 最終更新日 : 2023.08.28 コーディング そもそも「Pug」とは?Pugとは「パグ」と読み、HTMLを効率的に書くための記述方法です。 「テンプレートエンジン」と言われるもののひとつです。 ※犬の種類ではないです。 HTMLの場合は拡張子が.htmlですが、Pugの場合は .pugとなります。 Pugを扱う注意点としては、PugファイルはWebブラウザが認識してくれないので、通常のHTMLに「変換」する必要があります。通常は、「コンパイル」といって、タスクランナー(gulpなど)やコンパイラーアプリ(Preprosなど)を用いて自動変換しますが、今回はPugのメリット紹介のため変換方法については割愛します。 Pugのメリット7つ今回は、PugとHTMLを見比べながら、Pug
【2021年最新版】Facebook広告の基本設定 公開日 : 2021.06.18 最終更新日 : 2023.07.10 Web 広告 Web広告の需要が高まる昨今、クライアントにお願いされて、初めての広告出稿にチャレンジされる方も多いと思います。 ところが、いざ広告を出稿しようと参考サイトや本で調べてみると、「あれ?実際の画面と違うけど…」なんて経験があるのではないでしょうか? それもそのはず、web広告のシステムは常に最新の機能を追加し続けている為、時間が経った記事では情報が追いつかなくなってしまうのです。 そんな現在設定でお困りな皆様へ、2021年6月現在の「Facebook (フェイスブック) 広告」の 設定から出稿までを画像付きでご説明していきます。 Facebookビジネスマネージャを作成まず初めにFacebookビジネスマネージャを作成しましょう。 ビジネスマネージャではビ
【企画書作成】ちゃんと伝わる!!企画書の作り方-part.2:企画書づくりのフレームワーク 公開日 : 2021.11.11 ディレクション PREP法とSDS法 いざ「企画書を作ろう!」となると、伝えたいことの取捨選択や、伝え方の優先順位などで迷ったりで時間がかなりかけてしまった事はありませんか?僕自身、頭の中で色々とこねくり回してしまい、結果的に分かりづらい企画書を作成したことが多々ありました… そうこうしているうちに、別の案件の企画書作成を依頼され、複数の企画書作成に追われてんやわんやしたこともあります。 そんな中で、「如何にシンプルに伝わり、時間をかけずに作れるか」ということを考えた結果、フレームワークを知ることで効率的かつ伝わりやすいシンプルな企画書を作ることができるようになりました。 前回の記事で伝えたことを前提に置きつつ、「どのように作るか」を考えた時におすすめなのが「PRE
【ディレクター向け】ワイヤーフレーム作成に役立つ4つのプラグイン【adobe XD】 公開日 : 2021.12.08 最終更新日 : 2022.10.06 ディレクション ディレクターやデザイナーがWeb制作時によく使用するアプリ「adobe XD」はプラグインが豊富で、「これできればいいのに〜」ということや手の届かないかゆい所に丁度いいプラグインが沢山あります。 今回はそんなXDのプラグインを4つご紹介します! Split Rowsまずは何を差し置いてもこれかなと! このプラグインは改行で区切られているテキストを一行ずつにバラす(分解してくれる)アプリケーションで、私自身ディレクション業務の中でワイヤーフレームを作成する際に、クライアントからテキストなどの素材をいただくのですが、例えば沿革などの多数の行になってしまう素材などに非常に役立ちます! unDrawこちらのプラグインは、手軽に
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-
〇〇にして〜!抽象的な指示のデザイン対処案 公開日 : 2021.11.04 最終更新日 : 2023.08.28 デザイン デザイナーのリュウイチです。 2021年の春頃にAndHAのデザインチームでTwitterアカウントを設けて、デザインに関する情報を発信しています。 今回のブログ記事では5月〜6月頃に投稿していた、 【抽象的な指示の対処案】 というシリーズの投稿をまとめ、掘り下げていきます。 まずは宣伝させてください。 デザイナーはもちろん、ノンデザイナーにも役立つ情報を発信して行きますので是非フォローをお願いします! 抽象的な指示 抽象的な指示って意外と多かったりします。 「かっこよくして〜」「可愛くして〜」などが抽象的な指示です。 カッコいいと思うものが人それぞれ違うのです。 私がカッコいいと聞いて思い浮かべるのはゴジラですし、可愛いと聞いて思い浮かべるのはピカチュウです。 抽
GTMでGA4イベントクリック計測をする方法 – カスタムデータ属性利用 公開日 : 2022.10.24 最終更新日 : 2023.07.10 Web 分析 この記事では、カスタムデータ属性を使った、GTM(Google Tag Manager)によるクリック計測の方法をご紹介します。 この記事で紹介する内容どおりに設定することで、ユーザーが行うあらゆるクリックアクションを「イベント」としてGA4で計測できるようになります! 【概要】この記事の内容をサクッと紹介!GAやGTMで「やりたいことと一致する・しない」があると思うので、まずはこの記事で紹介する内容を簡単に解説します。 この記事では、下記のような計測方法を用います。 計測したい要素(リンクやボタンのHTMLコード)に対して、カスタムデータ属性(data-***=”任意の文字列”)を記述。GTMの設定にて、カスタムデータ属性を「トリ
WEBディレクターが真っ先に習得したいデザイナーへのフィードバックスキル 公開日 : 2021.12.24 最終更新日 : 2023.07.10 ディレクション 株式会社アンドエイチエ-へWEBディレクターとして入社して早1年。 そこで感じた事のひとつに、Webデザイナーしたデザインへフィードバックをするスキルってすごい大切なスキルだし、身につけたら強強ディレクターになれるかもしれないということ。 入社したての私は、「私よりも経験があるデザイナーが作ったデザインに意見言うの?」とか、「フィードバックってそもそもどうすれば?」とあたふた。。。 そんな状況でも、しっかりとフィードバックをすることで、できあがるサイトの質を左右するなと感じました。 この記事が、新人ディレクターの手助けになれば嬉しいです。 より良いデザインフィードバックをするための方法私の場合まず、下記のセクションに分けてみました
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> この場合
Googleリスティング広告入稿方法 公開日 : 2021.08.24 最終更新日 : 2023.12.07 Web 広告 Googleリスティング広告は、ユーザーが検索したキーワードに応じて掲載される為、他のWeb広告よりもコンバージョンに繋がりやすいのが特徴です。 2021年に入ってレスポンシブ検索広告での設定がデフォルトになり、さらに広告掲載の幅が広がりました。今回は、そんなGoogle広告の作成方法について解説していきます。 Googleアカウントをお持ちでない方はまずはアカウントを作成してください。 Google広告アカウントの作成 キャンペーンを作成まずは、広告の「キャンペーン」を作成します。 サイドメニューのキャンペーンを選択し+マークから「新しいキャンペーンを作成」を選択。 キャンペーン作成画面へと移動します。 次にキャンペーンの目標とキャンペーンタイプを選択します。 作成
これだけは知っておきたい!metaタグ(メタタグ)の種類と設定方法 公開日 : 2021.12.06 最終更新日 : 2023.08.28 コーディング Webページをコーディングする際に記述するmetaタグ。内容を詳しく把握していない方も多いのではないでしょうか? 正しく設定することで間接的ではありますがSEO効果にも繋がってきますので、それぞれのmetaタグ意味を理解し正しく設定していきましょう! metaタグとは「meta(メタ)タグ」とは、検索エンジンやブラウザなどに対してWebページの情報を伝えるHTMLタグです。 文字コードの指定や、検索エンジンへのインデックス(検索結果に表示される)の可否など、メタデータと呼ばれる情報を伝えるのがメインの役割となります。 「ページタイトル(title)」や「ページの説明文(description)」以外はユーザーの目入ることはほとんどありませ
【現役デザイナーが選ぶ】駆け出しからベテランまで使える!デザイナーを助ける本10選 公開日 : 2021.07.14 最終更新日 : 2022.10.06 デザイン こんにちは、デザイナーのシュウジロウです! デザインをするのは楽しいし、ゆっくりじっくり作っていたい! そう思うデザイナーさんも多いでしょう。 はげしく同感です! ただご依頼である以上自由にやる為にはそれなりのテクニックが必要不可欠。 時間をうまく使ってこそ、こだわりたいところに力を注げます! 今回の記事ではデザインの効率アップにつながるデザイナーを助ける本について 書きたいと思います! 大きくは2つのテーマにわけて紹介していきましょう! 仕事中そばに置いておきたい本前もって読んでおきたい本是非参考にしてみてくださいね!
次のページ
このページを最初にブックマークしてみませんか?
『仙台を代表するホームページ制作会社|アンドエイチエー|AndHA inc.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く