サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
and-ha.com
【企画書作成】ちゃんと伝わる!!企画書の作り方-part.2:企画書づくりのフレームワーク 公開日 : 2021.11.11 ディレクション PREP法とSDS法 いざ「企画書を作ろう!」となると、伝えたいことの取捨選択や、伝え方の優先順位などで迷ったりで時間がかなりかけてしまった事はありませんか?僕自身、頭の中で色々とこねくり回してしまい、結果的に分かりづらい企画書を作成したことが多々ありました… そうこうしているうちに、別の案件の企画書作成を依頼され、複数の企画書作成に追われてんやわんやしたこともあります。 そんな中で、「如何にシンプルに伝わり、時間をかけずに作れるか」ということを考えた結果、フレームワークを知ることで効率的かつ伝わりやすいシンプルな企画書を作ることができるようになりました。 前回の記事で伝えたことを前提に置きつつ、「どのように作るか」を考えた時におすすめなのが「PRE
CSSだけで画像をトリミング!画像サイズに依存しないサムネイルの表示 公開日 : 2021.11.08 最終更新日 : 2023.08.28 コーディング WEBサイトでは、以下のような様々なサムネイル付きのカードや記事一覧がよく見られます。 このような記事一覧などは、「WordPress」などのCMSで管理していることが多いです。 記事を投稿するたびに、サムネイルの画像を適性サイズにリサイズする手間や、レイアウト崩れを防ぐために、基本的にはどんなサイズの画像が登録されても綺麗に領域内に収まるようにあらかじめ組んでおく必要があります。 今回は、CSSのみで画像サイズに依存しないサムネイルを表示する方法をご紹介します。 カード型の記事一覧については、こちらの記事で解説しているので是非合わせて確認してみてください。
〇〇にして〜!抽象的な指示のデザイン対処案 公開日 : 2021.11.04 最終更新日 : 2023.08.28 デザイン デザイナーのリュウイチです。 2021年の春頃にAndHAのデザインチームでTwitterアカウントを設けて、デザインに関する情報を発信しています。 今回のブログ記事では5月〜6月頃に投稿していた、 【抽象的な指示の対処案】 というシリーズの投稿をまとめ、掘り下げていきます。 まずは宣伝させてください。 デザイナーはもちろん、ノンデザイナーにも役立つ情報を発信して行きますので是非フォローをお願いします! 抽象的な指示 抽象的な指示って意外と多かったりします。 「かっこよくして〜」「可愛くして〜」などが抽象的な指示です。 カッコいいと思うものが人それぞれ違うのです。 私がカッコいいと聞いて思い浮かべるのはゴジラですし、可愛いと聞いて思い浮かべるのはピカチュウです。 抽
「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
【Canvas2Dとは】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.10.29 最終更新日 : 2022.10.06 コーディング 「WebGL」が多くのサイトで使われるようになって来ていますが、それに合わせて「Canvas2D」という言葉も多く聞こえて来るようになってきています。 Canvas2Dとは何のことか分からない人から学び初めの人に向けて、見るべき有料サイトや書籍をまとめました! ぜひ確認してみて下さい! 【Canvas2Dとは】canvasタグにおける「getContext(‘2d’)」って何?を説明します Canvas2Dのことを優しく例題を使いながら説明してくれています。 まずはこちらのサイトから概要を掴むのが良いかと思います。 https://blog.framinal.life/entry/2020/03/29/084651 canvasのgetCon
SourceTreeを使ってコミット間の差分ファイルを出力してみよう🥳 公開日 : 2021.10.25 最終更新日 : 2022.10.05 コーディング こんにちは、AndHAコーディング部です。 前回の記事ではGitの基本を学びました。 :目指せ!脱初心者 Gitの基本を図解で解説 Gitでファイル管理していると様々な事が行えますが、その中でも便利な機能としてコミット間の差分出力を行ってみたいと思います。 今回はGitクライアントソフトのSourceTreeからカスタムアクションを追加して差分抽出を行います。Mac(macOS 10.15.7)環境で記事作成していますがWindowsでも使えるコードを掲載しています。用意する物 SourceTree本体すでに管理されているGitブランチバッチファイル(記事内で解説していきます。)この記事を読むことでできるようになること コミット間の
目指せ!脱初心者 Gitの基本を図解で解説 公開日 : 2021.10.14 最終更新日 : 2022.10.05 コーディング AndHAエンジニアチームです。 皆さんは開発時にGit使ってますか? Gitを使ったバージョン管理を行っておくことで、急に機能を追加する必要があったり、差分ファイルの抽出を用意しなければならない、コードの振り返り、プルリクエストによるコードレビュー、近年増えつつあるJamstack対応などなど…挙げたらキリが無いほど、無くてはならない存在です。 Gitという単語を知っていても中々難しそうで後回しになっている方、一緒に学んでいきましょう。 今回はGitを使っていく上でよく出てくる機能を紹介していきます。 リポジトリとはリポジトリとは、ファイルやディレクトリの状態を記録する場所の事です。登録する度に作業内容のファイルやディレクトリなどの変更履歴が格納されていきます
APEXから紐解くコミュニケーション能力を上げるために気をつけるべき事 公開日 : 2021.10.11 最終更新日 : 2022.10.05 ディレクション 皆さんはゲーム、好きですか? 僕はあまりゲームをやってこなかったタイプなのですが、1年ほど前からAPEXというFPSゲームにハマっています。 Twitterで事あるごとにトレンド入りしているため知っている方も多いのではないでしょうか?(大体はネガティブな文脈でトレンド入りしてますが) APEXの優れている機能このAPEXというゲームはパーティの行動指針をピンで指す(シグナル機能)というコミュニケーション方法があり、VC(ボイスチャット)を使わずともある程度の認識共有が出来るという非常に優れた機能があります。 この機能の優れているところは、この機能一つでコミュニケーションと、試合でのマイルストーン設定が出来ることです。 ゲームの性質が
【Webデザイナーになるためには?】Webデザイナーに必要なスキル・知識 公開日 : 2021.10.06 最終更新日 : 2022.10.05 コーディング はじめにこんにちは!AndHA新人コーダーのタイガです! Webコーダーとして働き始めて、三ヶ月。前回と前々回では、「HTMLセマンティック」と「CSS設計」について記事を書きました! 今回、Webコーダーとして最低限必要なスキルについて書いていきます。 これからWebコーダーになろうと思っている方、もしくはやってみたいなと思っている方!ぜひ最後まで読んでみてください! Webコーダーとは?まず始めに、私が担当している業務についての紹介をします。 皆さんがよく耳にするであろう、Webデザイナーという職業を細分化していくとWebディレクター、デザイナー、コーダーの三つに分けられます。私が担当しているのは、三つ目のコーダーという業務にな
画像のファイル形式にはさまざまな種類があり、書き出す時にどの形式がいいのか迷う方も多いのではないでしょうか?webサイトに画像を載せるとき、適切なファイル形式を使うことによって、画質の劣化を防いだり、サイトの表示速度を早めることにも繋がってきます。 それぞれのファイル形式の特徴を理解し、もう迷わず適切なファイル形式を選択できるようにしっかり覚えてしまいましょう! 画像ファイル形式(拡張子)とは画像ファイル形式とは、「画像をどの種類のファイルで保存するか」ということです。画像フォーマットなどとも呼ばれます。 そして、どのファイル形式で保存されているかを判別するために使われるのが「拡張子」です。拡張子は画像ファイル名の末尾についていて.(ドット)で区切られています。「.jpg」「.png」などがそれにあたります。 ビットマップ画像とベクトル画像画像の種類には、ビットマップ画像(ラスター)とベク
【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
【品質アップ】サイト公開前に必ずチェックしたい5項目!チェックツールも紹介。 公開日 : 2021.08.31 最終更新日 : 2022.10.05 コーディング Webサイトを公開する前にチェックしたい項目として5項目にまとめてみました。 これから紹介するチェック内容は、弊社AndHAでも実践している内容の一部です。 サイト制作のちょっとしたテクニックやツールも紹介していますので、是非参考にしてみてください! 各Webブラウザでのチェックまずは必須中の必須。各主要ブラウザにて「崩れ」がないかをチェックします。 下記ブラウザでチェックすればおおよそ大丈夫でしょう。 ※案件のレギュレーションに合わせる必要があるので、この限りではありません。 Google Chrome(PC & スマホ)Safari(PC & スマホ)Microsoft Edge(PC & スマホ)Mozilla Firef
WEBデザインに重宝される!イラストのトレンド5選と描き方 公開日 : 2021.08.27 最終更新日 : 2022.10.05 デザイン デザイナーのリュウイチです。 唐突ですが私の描くイラストはキャラクターイラストが多いです。 得意なタッチは少々クセがあり、ご依頼内容に沿ったデザインコンセプトにマッチングする機会が少なく、提案するには使う場面が中々ありません。 (お気に召しましたら、仕事ください) ですが得意なタッチ以外のイラストも描けます!! イラストを描くこと自体が好きなので、隙あらばイラストも織り込んだご提案させていただいております。 イラストを使用したWEBサイトを参考に交えながら、最近の流行を見て、最後に描き方をご紹介できればと思います。 イラストのトレンド5選アイソメトリック HELLO TOMORROW | NRIデータiテック TOYO HITEC|RECRUIT20
Googleリスティング広告入稿方法 公開日 : 2021.08.24 最終更新日 : 2023.12.07 Web 広告 Googleリスティング広告は、ユーザーが検索したキーワードに応じて掲載される為、他のWeb広告よりもコンバージョンに繋がりやすいのが特徴です。 2021年に入ってレスポンシブ検索広告での設定がデフォルトになり、さらに広告掲載の幅が広がりました。今回は、そんなGoogle広告の作成方法について解説していきます。 Googleアカウントをお持ちでない方はまずはアカウントを作成してください。 Google広告アカウントの作成 キャンペーンを作成まずは、広告の「キャンペーン」を作成します。 サイドメニューのキャンペーンを選択し+マークから「新しいキャンペーンを作成」を選択。 キャンペーン作成画面へと移動します。 次にキャンペーンの目標とキャンペーンタイプを選択します。 作成
MacにNode.jsの開発環境を用意しよう 公開日 : 2021.08.18 最終更新日 : 2022.10.05 コーディング こんにちは、AndHAコーディング部です。 新しいPC環境に「Node.jsを導入しよう!」と思った時、たくさんの情報があり、どの方法でインストールしようか悩んだことはないでしょうか。。。 そこで本記事では、AndHAコーディング部が実践している導入方法として、ご紹介します! 今回ご紹介する場合の環境はmacOS Catalina 10.15.7となります。 また、Mac環境はまっさらな状態を想定して解説しています。 Homebrewを導入しようまず、下記のパッケージマネージャーを導入しましょう。 macOS(またはLinux)用パッケージマネージャー — Homebrew サイトにアクセスするとインストール用のコードが掲載されています。コードの記載右側のアイ
ホームページ制作・リニューアルの流れと注意点 公開日 : 2021.08.11 最終更新日 : 2021.10.08 ディレクション ホームページを作るには、お客様の協力が絶対に必要になってきます。お客様の中には要望も何もなく、かっこいいサイトを作って下さい、今っぽくリニューアルして下さいなど完全にお任せなご依頼もあるのですが、弊社では出来る限りお客様にも制作に参加して頂いています。 理由としては、サイト制作中のミスマッチを防ぐという理由もありますが、一番の理由は「良いホームページ」を作るためです。 そこでお客様にもご協力頂けるように今回はホームページが出来るまでの工程を改めてご説明させて頂きます。 ホームページを作る目的を明確にするまずは、「なぜホームページを作るのか?」を明確にした上で、ホームページを制作していきます。目的が明確になっていないホームページは数多く存在しますが、目的に応じ
【企画書作成】ちゃんと伝わる!!企画書の作り方-part.1:論理的に作る 公開日 : 2021.08.03 ディレクション 皆さんが作る企画書。それ、本当に 「伝わる企画書」 になっていますか? 企画書は、案件を受注する際のまず最初の入り口です。この入り口が伝わらない入り口であった場合、その会社のドアを開けて社内に入りたいと思うでしょうか。。。 この記事では2回に渡って企画書の考え方や作り方を説明します。※「企画書作りのフレームワーク」 についてはpart.2にて説明します。 目的を明確にするまず企画書を作る上で一番重要なのが、「その企画の目的を明確にする」ということです。「明確に」 とは具体的にどういうことかと言うと、 「現状の課題を整理」 「その課題を解決することを最大目的として策定」 「最大目的が達成されたかを測る指標を設定」 することです。そしてその指標を達成する 「施策」 を提
この記事では、サイトでよく見かける下記のようなカード型の記事一覧を作成する方法をご紹介します。 あくまで一例として、参考にしてみてください。 今回はカードのエリアにホバーすると、サムネイル部分に黒いマスクと「Read More」がフワッと出現するようにしてみます。 <section class="ly_section"> <div class="ly_section_inner"> <h2 class="el_lv2Heading">3カラムの記事一覧</h2> <!-- ここから3カラム記事エリア --> <ul class="card_items"> <li> <a class="card_item" href="#"> <article> <figure class="card_item_imgWrapper"> <img src="assets/img/photo.jpg" alt
【Facebook広告】iOS14アップデート後のCV(コンバージョン)計測方法 公開日 : 2021.07.21 最終更新日 : 2023.12.07 Web 広告 Appleの発表したiOS14アップデートによる変更により、Facebook広告のCV設定にも影響がでていることはご存知ですか? 「運用中だった広告が突然ストップしてしまった」 「新規で作ったカスタムコンバージョンがうまく設定できない」 など、これまでにない現象に戸惑う方も多いのではないでしょうか? 今回は、現在のFacebook広告でコンバージョン測定に必要な「ドメイン認証」と「合算イベント測定」についてご紹介したいと思います。 iOS14って結局どう変わったの?そもそもiOS14のアップデートにより一体何が変わったのか? 広告マネージャのリソースセンターを確認すると不穏な単語が並んでいますが、結局なんのことなの?という方
【CSS? 良いCSS? 悪いCSS?】 新人プログラマー必見!CSS設計の基本 公開日 : 2021.07.28 最終更新日 : 2022.10.05 コーディング はじめにこんにちは!AndHA新人コーダーのタイガです! Webコーダーとして働き始めて、二ヶ月が経ち、ちょっとずつ仕事にも慣れてきました! しかし、まだまだ必要な知識は盛り沢山、、、、。 前回は「新人プログラマーがセマンティック・マークアップを学習してわかったこと。」と題しHTMLのセマンティック・マークアップについて記事にしました! 読んでくれましたか? 今回はすごく大切なスキル「CSS設計」について書いていこうと思います。 CSSとは?知ってるよ!と言われそうですがあらためておさらいです。(私個人のためにも) CSS(Cascading Style Sheets、カスケーティング・スタイルシート)とは、Webページの見
【簡単に設定】Basic認証のかけ方 公開日 : 2021.07.20 最終更新日 : 2023.11.07 コーディング Basic認証をかけたいディレクトリのフルパスを調べる.htaccessファイルを作成する際に、Basic認証をかけたいディレクトリの『フルパス』を知る必要があります。 ちなみに、フルパスとは「絶対パス」のことです。一番上の階層もしくは一番外側を基準にして、2つ目3つ目などの該当のファイルまで道のりすべてを記述したものです。 参考:フルパスについて 以下、フルパスを調べるための3手順です。 1. PHPファイルの作成フルパスを調べる方法として「PHP」を使う方法があります。 まずは、テキストエディターで任意の名前のPHPファイルを作成しましょう(本記事では「sample.php」というファイル名で作成します)。 作成したPHPファイル内には下記の3行を記述してください
【jQuery】「ページトップへ戻る」ボタンを作りながら、jQueryの基礎を学ぶ 公開日 : 2021.07.16 最終更新日 : 2022.08.29 コーディング 今回は、Webページによくある、一定以上スクロールするとボタンがふわっと表示され、そのボタンをクリックするとページ上部にスムーズに戻るといった処理を使って、jQueryを詳しく紐解いていきます。 今回ご紹介しているコードは、コピペで動きます。 ただ、「なぜ動いているのか」「どういう処理が行われているのか」をいまいち理解できていない方もいると思います。今回はそんな方への参考になれば幸いです。 早速見ていきましょう! 今回のコードまず、今回のご紹介&解説するコード全体がこちら。 ※jQuery自体の読み込みなどは省いています。 <body> <div id="js-pagetop"> <span>Top of Page</sp
【現役デザイナーが選ぶ】駆け出しからベテランまで使える!デザイナーを助ける本10選 公開日 : 2021.07.14 最終更新日 : 2022.10.06 デザイン こんにちは、デザイナーのシュウジロウです! デザインをするのは楽しいし、ゆっくりじっくり作っていたい! そう思うデザイナーさんも多いでしょう。 はげしく同感です! ただご依頼である以上自由にやる為にはそれなりのテクニックが必要不可欠。 時間をうまく使ってこそ、こだわりたいところに力を注げます! 今回の記事ではデザインの効率アップにつながるデザイナーを助ける本について 書きたいと思います! 大きくは2つのテーマにわけて紹介していきましょう! 仕事中そばに置いておきたい本前もって読んでおきたい本是非参考にしてみてくださいね!
ホームページにはメールアドレスを掲載してはいけない!?その理由と対策方法 公開日 : 2021.07.12 最終更新日 : 2022.10.05 コーディング お問い合わせ用などのメールアドレスをホームページ上に公開することはよくあると思いますが。 ・・そのメールアドレス、そのまま公開していませんか? 実は、何の対策もせずにメールアドレスを公開してしまうと、スパムメール(迷惑メール)に襲われるリスクが高くなってしまいます。それにより、ウイルス感染の恐れや情報漏洩などさまざまな被害リスクが高まると同時に、クライアントへも多大なる迷惑をかけてしまう恐れがあります。 これからホームページにメールアドレスを公開しようと思っている方、また既に対策をせず公開してしまっている方も、スパムの危険性を理解し今すぐ対策を行なっていきましょう! スパムメールとは受信者の意向とは無関係に、無差別かつ大量に送り付け
PDCAサイクルが古い?OODAループと比較、PDCAとOODAの活用方法 公開日 : 2021.07.06 最終更新日 : 2022.10.05 デザイン デザイナーのリュウイチです。 早速ですが皆さん… 最近どう?PDCA回してる? 回してますかぁ。いいですねぇ。Hi-Hi。 より良い質の仕事をしていくのには欠かせませんよね。 仕事のデザイン制作ではもちろん、 趣味のミニ四駆でもPDCAを意識してやってみていて、これがまた面白いんですよ。 そんな事をやっていたら聞こえてきた。 “PDCAサイクルは古い” … 嘘だ!俺のミニ四駆はPDCAサイクルで少しずつ早くなったんだ! じゃ〜PDCAに変わる新しいものってなんだよ!! OODA(ウーダ)ループ…? と新しい言葉と出会いまして PDCAとは何かを振り返ってみて、 OODAループとはなんぞや?と それぞれの比較もまとめていこうと思います!
WordPress化したらslick(スライダー)が動かない?!その原因はjQueryの処理タイミングかも。 公開日 : 2021.07.01 最終更新日 : 2023.08.25 コーディング たったの2単語で解決!?!?!?! 静的HTMLで一度コーディングし終え、よしWordPress化(PHP化)するぞ! 「あれ、slickが動かない、、、」という経験がありませんか? ちなみに私の場合、たった一行(というか2単語)書き換えるだけで動くようになりました。 それの原因はズバリ、jQueryの記述方法にありました。 記述方法といっても、headタグ内に記述するとか、bodyの閉じタグ直前に記述するといった「jQueryの処理自体を読み込ませるタイミング」のことではないです。 jQueryが「処理を実行するタイミング」です。 詳しく見ていきましょう。
便利ツールをさくっと紹介!Alfredでブクマ検索 公開日 : 2021.06.24 最終更新日 : 2022.10.06 コーディング AlfredとはAlfredはMac専用のランチャーアプリです。 Macユーザーならフォルダ検索やアプリ起動にはお馴染みのSpotlightを使うと思いますが、Alfredはそれらに加えてブックマーク検索が使えるんです! (私はこの機能のために導入しました) 仕事柄ググるのは日常茶飯事で気になった記事はブクマしているのですが、探す度に一々ブラウザ開いてお気に入りを探す手間を省いてくれます。 ブックマーク検索機能をONにするデフォルトだとブクマ検索機能はOFFになっているので、左側の「Features」→「Web Bookmarks」→「Sources」の対象ブラウザにチェックを入れると設定完了です。 下記はChromeに設定している例です。 設定後に検索
【厳選】WordPressへ入れておきたい最低限プラグインおすすめ3選 公開日 : 2021.06.22 最終更新日 : 2023.07.10 コーディング WordPressを構築する上で機能拡張をしてくれるプラグイン。いっぱいあって何を入れたら良いのか・・・悩みますよね? この記事では、WordPressでサイト運営する上で、まずこれだけは入れておきたい!というプラグインを、ウェブ制作者目線でお届けします。 画像圧縮編EWWW Image Optimizerウェブサイト(または記事)では、画像を多く使って表現したりするとページ内に含まれる画像全てを読み込までに時間がかかってしまい、ユーザーのストレスへと繋がってしまいかねません。 制作者の場合は、画像を適切なサイズへ調整したり・圧縮したりなどと、常に最適化を行ってデザインやコーディングを行いますが、画像数が多かったりすると中々大変な作業
【2021年最新版】Facebook広告の基本設定 公開日 : 2021.06.18 最終更新日 : 2023.07.10 Web 広告 Web広告の需要が高まる昨今、クライアントにお願いされて、初めての広告出稿にチャレンジされる方も多いと思います。 ところが、いざ広告を出稿しようと参考サイトや本で調べてみると、「あれ?実際の画面と違うけど…」なんて経験があるのではないでしょうか? それもそのはず、web広告のシステムは常に最新の機能を追加し続けている為、時間が経った記事では情報が追いつかなくなってしまうのです。 そんな現在設定でお困りな皆様へ、2021年6月現在の「Facebook (フェイスブック) 広告」の 設定から出稿までを画像付きでご説明していきます。 Facebookビジネスマネージャを作成まず初めにFacebookビジネスマネージャを作成しましょう。 ビジネスマネージャではビ
次のページ
このページを最初にブックマークしてみませんか?
『仙台を代表するホームページ制作会社|アンドエイチエー|AndHA inc.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く