webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

webサイト制作

Google Formにオリジナルのcssを適用させてカスタマイズと自動返信機能を追加

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…

vs code でEmmet機能を使う

EmmetというのはHTMLやCSSを効率よくコーディングするためのプラグインで、SublimeText、Dreamweaver、Bracket、vs codeなど様々なエディターやIDE(統合開発環境)で利用することができます。もともとはZen-Codingというものでしたが、その次期バージョンが…

GoogleサーチコンソールとGoogle アナリティクス

Google Search Consoleとは Search ConsoleとはWebサイトの検索結果の状況とそれに付随する情報(Webサイトの改善案・被リンク数・キーワードなど)やGoogleが認識しているページ数、Googleクローラーのクロール状況が把握できるツールです。 Search Console…

OSS(オープンソースソフトウェア)とは?

オープンソースソフトウェアとは、利用者の目的を問わずソースコードを使用、調査、再利用、修正、拡張、再配布が可能なソフトウェアの総称である。 GithubやCodePenのようにソースコードをオープンして共有する、と言う考え方は最近出来た考え方では無くPC…

配色の基本

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。 3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。 初心者にとって配色は難しい部分ですが、まずは既存のサイトやサ…

cssのクラス命名規則

小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…

8の倍数デザイン論とそれに伴ったブレイクポイント

従来、divや余白の大きさはデザインやコンテンツのボリュームによってマチマチですが、その都度値を決めるのでは無く、ある指針(ガイドライン)に沿って決める場合がよくあります。 その中でも、 「8の倍数デザイン論」と呼ばれる、全ての物を8の倍数でデザ…

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

htaccessを使った動的配信

「.htaccessファイル」を使った動的配信 動的な配信 | Google 検索デベロッパー ガイド | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を…

コーディング作業のさいのチェックリスト

モバイルフレンドリーテスト search.google.com リンク切れがないか dead-link-checker.com 表示速度 www.thinkwithgoogle.com alt属性を適切に設定する meta属性を適切に設定する ファイルのデイレクトリ ページ毎に適切なタイトル faviconの設定 タッチア…

ファビコンにsvg形式の画像を使う

以前、授業でファビコンを作成した際には、一度、png等のビットマップで作成し、そのあと.ico用のジェネレーターで変換していましたが、とうとうファビコンもSVG形式が対応されるようになりました。SVGを使えばこれまで使われてきたPNGなどのビットマップ形…

フリーで使えるSVGアイコン

icooon-mono.com iconbox.fun flat-icon-design.com iconmonstr.com remixicon.com icons.pixsellz.io アニメーション付きのSVGアイコン www.potlabicons.com SVGパターン また、最近はドット、モザイク柄など、様々なパターンのsvgを要素の背景に簡単に使え…

スニペットを使ってホバーアニメーションを付ける

最近はcss3のアニメーションだけで色々な事が出来るようになっています。特にホバー時のように小さいアニメーション(マイクロインタラクション)であればcssのみで充分表現できます。 とは言え、css3のアニメーションをゼロからスクラッチで書いていくのは…

レスポンシブイメージの設定

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみ…

ワイヤーフレーム の作成

ワイヤーフレームとは「サイトの設計図」です。 サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…

cssで作るメガドロップダウンメニュー

メガドロップダウンメニュー 最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります…

webサイトの主なレイアウト

レイアウトを考える時に常に独創的でユニークなレイアウトである必要はありません。それどころか訪問者の多いサイトを見れば、多くのサイトで似たようなレイアウトが採用されています。それは偶然でも手抜きでもありません。そこには次のような利点があるの…

アクセシビリティーについて

「ウェブアクセシビリティ」とは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」を意味します。 qiita.com 一般的なコントラスト比とは液晶画面の最も明るい部…

サイトマップとディレクトリマップ

サイトマップ サイトマップとは、サイトの全体像を描く見取り図であり、サイト内での情報の分類を定義するものです。サイトマップによってサイトの骨格を設計し、掲載する情報の組織化・構造化を進めていきます。 サイトマップには単なる設計資料としての役…

コーディングルールの設定

複数人でコーディング作業を進める場合、共通のルールや約束事を「コーディング規約」として事前に決めておきます。例えば担当者が独自の勝手なルールでコーディング作業を進めてしまうと、その担当者以外の者がコーディング作業する事が出来なくなってしま…

ガントチャートの作成

クライアントワークが来週から本格的に始まります。 ただ、しばらくは授業と平行でクライアントワークの準備を進めて行くため、どうしても厳しいスケジュールになりがちです。 その為、しっかりとしたスケジュール管理が必要となってきます。 まずはガントチ…

モバイルファーストでの既存サイトのトレース

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。www.bl…

タッチアイコンの設定方法

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

冬休みの課題2

webライティングとカウンター・アーギュメント Webライティング11のルール from Tsutomu Sogitani www.slideshare.net 今回のテーマは「これからのweb」 以下の記事を読み、webの危険性と利便性を踏まえて、今後のwebとアプリがどうなっていくか、自らの考え…

Google品質評価ガイドラインを読む

SEO対策にはサイトが必ず自動的に掲載順位 1 位になるような秘訣は無く、とにかく自身のコンテンツの品質を高める事が結果として検索結果の上位表示に繋がるという事をしっかりと理解しましょう。 www.dentsudigital.co.jp 低品質のページに該当されやすいペ…

要件定義の作成

要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第3者でも分かるように明確化しておく作業のことです。 要件定義は、Web サイトやアプリ開発において非常に重…

クライアントワークの目標

いよいよクライアントワークが始まります。まずはクライアントワークを行う目標を明確にしましょう。http://katoshun.com/blog/からの抜粋です。 未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。スクールの課題で作った架空…

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」 などは、必…

webサイトにGoogleAPIを導入する

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。 Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選…