webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

webサイト制作

Google検索の仕組み|概要

www.google.com Google Partners Google Partners プログラムは、AdWords アカウントを管理する広告代理店やオンライン マーケティング コンサルタントなど、ウェブ プロフェッショナルの方々に、Google との関係を最大限に活用していただくためのプログラム…

今のトレンドを知る

photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net photoshopvip.net

GoogleMapのカスタマイズ

今回はGoogleMapをカスタマイズする方法です。 GoogleMapのピンを会社やお店のロゴ画像に変え、さらに通常のGoogleMapでは色が多く少しうるさいので、カラーをグレースケールにしてみましょう。 通常のgooglemap カスタマイズしたGoogleMap http://straight-…

コピーライトの記述方法

フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何となく…

カラースキーム|色彩計画

色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。 サイト制作において配色は非常に大事で配色次第で、そのサイトのイメージが決まってしまうと言っても過言ではありません。そのサイト…

Webサイトの構成表の作成

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

Googleフォームに自動返信機能を付ける

Googleフォームに自動返信機能を付ける 以前作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。 自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、…

webサイトにGoogleAPIを導入する

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

TwitterやFacebookなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…

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

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

Wirify-見ているサイトを一瞬でワイヤーフレーム化してくれる便利なサービス

見ているサイトを一瞬でワイヤーフレーム化してくれる便利なサービス、「Wirify」 使い方もいたって簡単です。 1. 「Wirify」のサイトにアクセスし、「Wirify by Volkside」をブラウザのブックマークツールバーに入れる。2. ワイヤーフレームにしたいサイト…

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

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

クライアントへのヒアリング

いよいよサイト制作が始まります。 サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。 ヒアリングで1番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライアントに伝え、…

サイト制作のワークフロー

webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…

アイコンをwebフォントで表示

以前、授業でGoogleのwebフォントを使用してみましたが、最近はテキストだけでなくアイコンもwebフォント化されていて、それを使用しているサイトもよく見かけます。 フォントなのでテキストとのベースラインが合わせやすい フォントなので拡大縮小はcssのfo…

第1回実技試験

今回の制作の仕様 header要素の幅960px高さは350px header画像は自身で制作し、「CAFE de FELICA」の文字を画像に入れる h1はテキストを挿入し、cssで隠す ボタンは4つを均等の幅で設置し、高さは50px コンテント要素の幅650px 高さ500px フッター要素の高さ…

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

未経験者にとってポートフォリオをどうやって作れば良いか? 非常に悩むところです。http://katoshun.com/blog/からの抜粋です。 未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。スクールの課題で作った架空の会社のサイト …

無料サーバーの取得とデータのアップロード

制作したデータをインターネット上で表示させるためには作ったデータをサーバーにアップロードする必要があります。 サーバーには無料のものと有料のものがありますが、授業では無料サーバーを使用していきます。 webサイト制作においてサーバーは必須のもの…

adobe brackets|オープンソースの高機能テキストエディタ

adobe bracketsとは? HTMLやCSS、JavaScriptのコーディングに特化したOSS製テキストエディターとして、2011年12月から開発をスタートし、Windows版やmacOS版に限らずLinux版(Debパッケージ)をGitHub上で公開している。Adobe SystemsはBracketsを「HTML/CSS/…