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

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

webサイト制作

Webサイトの構成表の作成

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

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

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

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

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

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

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

Faviconの設定

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したも…

Google デジタルワークショップ

オンライン マーケティングの無料トレーニングで、ビジネスやキャリアのステップアップに必要なデジタルスキルを身に付けましょう。Google が提供する無料コースでデジタル エキスパートになりましょう。 learndigital.withgoogle.com

第1回実技試験の内容

今回の制作の仕様 header要素の幅1000px高さは350px、同じサイズの画像を自身で制作し、「FELICA kitchen」の文字を修飾し画像に入れる。 cssファイルは外部リンクでリンクさせ、適切なリセットをかける事 h1はテキストで「FELICA kitchen」を挿入し、cssで…

Photoshopによるスライスとコーディング

既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。 作業手順 1. 既存のサイトのキャプチャーを撮る 2. Photoshopで開き、各画像…

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

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

複数ページの制作

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。以下のようにページ毎にフォルダーを…

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

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

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

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