webサイト制作
5-10 Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。 function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //-------------------------------…
5-10 Google Search Consoleとは Search ConsoleとはWebサイトの検索結果の状況とそれに付随する情報（Webサイトの改善案・被リンク数・キーワードなど）やGoogleが認識しているページ数、Googleクローラーのクロール状況が把握できるツールです。Search Con…
5-09 今回のフォームは、商品紹介ページに「商品A」「商品B」「商品C」の3つのコンテンツがあり、それぞれの購入ボタンをクリックして申し込みページに遷移した時、それぞれの商品のラジオボタンにチェックがはいっている状態にしたい。申し込みページ以降は…
5-07 SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が…
04-23 www.nxworld.net See the Pen scroll-down-animation by yachin29 (@yachin29) on CodePen.
4-21 テクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 LPのアウトライン(あくまでも一例) Attention部分のコンテンツ タイトル（ロゴ画像orテクニカルアカデミーwebサイト制作科） キャッチーなコピーが入ったリード文（テクニ…
4-21 ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のこ…
4-14 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>particles.jsその2</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
4-14 img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイス…
4-05 felica29.starfree.jp 「.htaccessファイル」を使った動的配信 動的な配信 | 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分け…
3-24 Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ画像集を公開しています。ファイル形式はPNGとSketchとな…
3-23 インスタグラムの投稿一覧をWebサイトに表示させる場合、Instagram APIを使う方法やWordpress化させプラグインを使う方法がありますが、どちらも導入するには少し敷居が高く、専門知識が必要になってしまいます。 ja.wordpress.org LightWidget このLig…
3-18 入力画面index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>フォームの作成｜入力画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>…</h1></body></html>
3-17 コーディングの質はSEOにも直結するので、デザインの質と同じくらい大事です。細かい部分も1つ1つ確認して行きましょう。 ファイル名はすべてindex.htmlになっているか フォルダ名は適切な名前になっているか ページ毎に適切なタイトルがついているか …
今回は入力画面、確認画面、完了画面の3ステップでお問合せフォームを作成します。項目は お名前 メールアドレス お問い合わせ内容 入力画面input.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>入力画面</title> </meta></meta></meta></head></html>
3-11 今回はgoogle formのアドオン「Email Notifications for Google Forms」を使って自動返信機能をお手軽につけてみましょう。 返信するためのメールアドレス（Sender's Email）送り主の名前（Sender’s Name）を入力します。管理者への通知メールが不要で…
3-11 コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。メガドロップダウンメニューであれば、リンク先のページの中の目当てのコ…
3-10 <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>phpでの変数と文字列の扱い方</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>入力画面</h1> </body></html>
3-10 EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。対面でのサービスが難しくなった今日「お問い合…
2-28 headers.netlify.app www.sidethree.co.jp <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>navgationの作成その1</title> </meta></meta></meta></head></html>
2-26 １、プロジェクト概要 今回作成するサイトの概要 ２、クライアント情報 クライアントの情報 クライアントの要望 要望に対する答え ３、サイトのコンテンツ概要 ページ構成 各ページのコンテンツ ターゲットとなるユーザー像（ペルソナ） 入れる機能（ス…
2-21 フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何と…
2-19 SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索（自然検索 / Organic Search）と…
2-17 カンプとは、広告やwebサイトなどの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。 「カンプ」の名称は英語名の「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった…
2-15 画像編 burst.shopify.com girlydrop.com stock.adobe.com o-dan.net イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com isometric.online enpitsu-sozai.com https://www.pexels.com/ja-jp/ soco-st.com www.linust…
2-15ワイヤーフレームとは「サイトの設計図」です。サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共…
2-15 要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第３者でも分かるように明確化しておく作業のことです。要件定義は、Web サイトやアプリ開発において非常…
2-10 Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」などは、…
2-08 Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。 SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内…
01- 13 スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。なので、スマートフォンサイトを制作する場合には必ずス…
