ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

Webデザイン

【ウェブデザイン技能検定 3級】受験記 - 合格しました!

背景 Web制作関連の資格をいろいろな試験を受けているけど、国家資格ってあるのかな?と思い調べてみたところ「ウェブデザイン技能検定」がみつかりました。 公式サイトへ 受験資格について、3級・2級・1級と"誰でも受けられる"から"実務経験○年以上まで"と制…

【Webデザイン】オリジナルWebデザイン : 農家の新鮮野菜通販HP

背景 お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組みました。(有料noteです) Webデザインカンプを1から作るための説明書|こばやす|Webデザイナー|note 成果物 それぞれブログ記事にまとめています。 PC版デザインカンプ(Figma…

【Webデザイン】オリジナルWebデザイン : 農家の新鮮野菜通販HP - 2 SP版デザインカンプ

背景 お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組んでいます。(有料noteです) 今回はSP版デザインカンプ制作について記事にまとめます! 前回: fuchsia-84.hatenablog.com 課題元: Webデザインカンプを1から作るための説明書|…

【Webデザイン】オリジナルWebデザイン : 農家の新鮮野菜通販HP - 1 PC版デザインカンプ

背景 お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組みました。(有料noteです) Webデザインカンプを1から作るための説明書|こばやす|Webデザイナー|note 成果物 ワイヤーフレーム デザインカンプ 制作スケジュールと工数 12/7 …

【Web制作】ポートフォリオサイトにOGPつけてみた

背景 OGPとは SNS等でURL共有した際に出てくるこれ! 画像や説明文などと一緒に表示され、クリックすると該当ページに飛べます。 以前 #架空サイトPJ で制作した水族館の仮想HPデザインのコーディングです。 PC版を記事にまとめました!【Webコーディング】…

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP

背景 2020年夏頃、ワイヤーフレームからオリジナルWebデザインをつくる課題に挑戦しました。 fuchsia-84.hatenablog.com 今回はこちらのコーディング作業のまとめになります。 成果物 実際のwebページへ ※Chrome・Safari対応、レスポンシブ対応(2021/8/30) ※…

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP - 2 SP版コーディング内容のまとめ

背景 先日PC版コーディングを終えたページのSP版コーディングについてです! fuchsia-84.hatenablog.com 成果物 実際のWebページをみる(GitHub Pages) ※Chrome/Safari対応、レスポンシブ済 2021/8/30現在 #架空サイトPJ レスポンシブ対応完了しましたキャプ…

オリジナルのギャラリーポートフォリオをつくってみた【Webデザイン】【Webコーディング】【JavaScript/jQury】

記事にするのが遅くなりましたが、今年リニューアルしたポートフォリオの制作についてまとめてみました! 背景 筆者のこれまでのポートフォリオはこんな履歴でした↓ HugoテーマをNetlifyデプロイ(2019/1) Hugoテーマ使用のポートフォリオ できたこと : はじ…

【HTML5プロフェッショナル認定試験 レベル1】受験記 - 合格しました!

背景 コロナ禍で自粛を極める中、Web制作関連で新たに資格を取得しようと思い、主にjavascriptに関わるもので調べ、受験しました。 html5exam.jp 受験の準備 勉強期間 2ヶ月ほど 教材 大きく2つ使用しました。 まず、書籍から。 HTML5プロフェッショナル認定…

【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 2 SP版デザインカンプ

背景 公開されているワイヤーフレームからカンプ制作する課題です。 【ポートフォリオ掲載OK!】実践的なWeb制作課題を配布します | PENGIN BLOG 前記事のPC版カンプをもとに、SP版カンプも制作しました。 成果物 画像 SP版デザインカンプ 制作スケジュール…

【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 1 PC版デザインカンプ

背景 公開されているワイヤーフレームからカンプ制作する課題です。 【ポートフォリオ掲載OK!】実践的なWeb制作課題を配布します | PENGIN BLOG PC版のデザインカンプから先に作成しました。 理由としてはワイヤーフレーム上にお客様側から掲載要望に上がっ…

【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP

背景 実務に近い形のワイヤーフレームからwebデザインカンプを制作する課題ページを見つけたので、取り組んでみることにしました。 課題ページ↓ 【ポートフォリオ掲載OK!】実践的なWeb制作課題を配布します | PENGIN BLOG 成果物 PC版デザインカンプ(プロト…

【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 3 PC版デザインカンプをつくる

背景 公開のワイヤーフレームからのデザイン作成課題。 前回は背景用の波形SVG作成についてまとめました。 今回は、PC版デザインカンプ全体のまとめです。 成果物 画像 PC版デザインカンプ プロトタイプ →プロトタイプ工夫点 :・メイン写真映えるようヘッダ…

【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 2 背景用波形素材をつくる

【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 2 背景用波形素材をつくる 背景 公開のワイヤーフレームからのデザイン作成課題。 前回は自作ロゴの作成についてまとめました。 今回は、セクション境界に使用した波形素材の制作についてまとめま…

【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 1 水族館ロゴをつくる

背景 前回記事に基づき、 公開のワイヤーフレームからのデザイン作成課題。 まずは、水族館のロゴ作りからはじめました。 ロゴ作成についてまとめていきます。 成果物 制作時間 : 3.5h 自作ロゴ ロゴ使用のトップ部分 : コンセプト "さっぽろ水族館"という架…

【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP

背景 LP模写から自作デザインへ、と徐々に段階を踏んできた中、 独学のみの状態からより実務に沿ったものに取り組むには...? といろいろ探していたところ、こんな記事に出会いました。 ポートフォリオに掲載OKなワイヤーフレーム公開しました。実務で使って…

【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 終 SP版デザインカンプをつくる【Adobe XD】

背景 アイスクリーム専門店の仮想LPの作成過程をまとめています。 前回は、PC版デザインカンプ制作の総振り返りでした。 本記事で、さいご。 SP版デザインカンプの総振り返りです。 制作物 続タブレット版プロトタイプつぎはコーディング!✊#今日の積み上げ …

【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 5 PC版デザインカンプをつくる【Adobe XD】

背景 アイスクリーム専門店の仮想LPの作成過程をまとめています。 前回は、単体のアイスクリーム画像の制作についてまとめました。 本記事では、PC版デザインカンプの総振り返りとなります。 制作物 続プロトタイプでうごきもみれました制作期間 : 1/31、2/3…

【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 4 背景が透明な単体アイスクリーム画像をつくる【Adobe Photoshop】

背景 アイスクリーム専門店の仮想LPの作成過程をまとめています。 前回は、水彩背景素材の制作についてまとめました。 本記事では、同じくメニューセクションにて使用した 背景が透明な単体アイスクリーム画像の制作について まとめていきます。 制作物 単体…

【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 3 自作の水彩背景素材をつくる 【Adobe Fresco】

背景 アイスクリーム専門店の仮想LPの作成過程をまとめています。 前回は、自作ロゴの制作についてまとめました。 本記事では、メニューセクションにて使用した 水彩背景素材についてまとめていきます! 制作物 水彩背景画像 - strawberry 水彩背景画像 - or…

【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 2 自作のお店ロゴをつくる 【Adobe Fresco】【Adobe XD】

背景 アイスクリーム専門店の仮想LPの作成過程をまとめています。 前回は、ワイヤーフレーム作成についてまとめました。 fuchsia-84.hatenablog.com 続いて、画像素材の作成へ。 本記事では自作ロゴの制作についてまとめていきます! 制作物 自作ロゴ 実際の…

【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 1 ワイヤーフレームをつくる

アイスクリーム専門店の仮想LPの作成過程をまとめています。 お題/全体のまとめは前回記事にて。 まずはワイヤーフレームから! 制作物 制作したワイヤーフレーム 制作期間 制作期間 : 1/31 合計制作時間 : 約4.0h 学習ポイント 2カラムレイアウトの幅と余白…

【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP

2つめの自作Webデザインについてのまとめ記事です。 出来上がったデザイン(左:PC版、右:SP版) お題 アイスクリーム専門店の仮想LP お店の特徴 フルーツアイスクリームショップ アメリカ生まれ 素材の色・風味を大事にする コンテンツ希望 お店のロゴ トップ…

はじめてのオリジナル制作 - アクセサリーショップの仮想LP【Webデザイン】【Webコーディング】

背景 Webサイト制作について学習する中、いつも制作済みのデザインをコーディングし、使用ツールもXDばかりになっていたので、はじめて1からオリジナルデザインを制作し、コーディングしてみることにしました。 今回はワイヤーフレームをAdobe Comp、デザイ…

【Webデザイン】はじめてのWebデザイン自作・番外編 - PhotoshopデザインカンプからXDへ

背景 はじめてオリジナルデザインカンプをPhotoshopで作成しました。 すぐにコーディングに入ろうというところでしたが、 今までのnote模写課題の形式に則りまずはデザインカンプのXD化を考えました。 そこから、レスポンシブデザインもつくってしまいます。…

【Webデザイン】はじめてのWebデザイン自作・終! - PhotoshopでWebデザイン

背景 前回記事からの続き、はじめてのWebデザイン自作シリーズ完結編です。 今回は、Photoshopにてデザイン作り込み。 成果物と、作業中のポイント、苦労した点についてまとめたいと思います。 成果物 はじめてWebデザインを自作することができました! 制作…

【Webデザイン】はじめてのWebデザイン自作・続 - Webデザイン制作のためのPhotoshop環境設定【Photoshop

背景 前回の記事で、Compで作成したワイヤーフレームをPhotoshopに取り込むことができました。 fuchsia-84.hatenablog.com これから作り込み...!と思った矢先、あれあれ...できないぞ...???という点がたくさんありました。 原因はWebデザイン作成のため…

【Webデザイン】はじめてのWebデザイン自作・続 - Compで書いたワイヤーフレームをPhotoshopに取り込む【Adobe Comp】【 Photoshop】

背景 前回の記事で、Adobe Compでワイヤーフレームを作成しました。 fuchsia-84.hatenablog.com 今回はデザイン作り込みのため、そのワイヤーフレームをPhotoshopに取り込みます。 ぐぐったりして調査するも実際にできるまですこし時間がかかったので、自分…

【Webデザイン】はじめてのWebデザイン自作 - Compでワイヤーフレームをつくる【Adobe Comp】

背景 去年からコーディング・デザインの模写をはじめ、許可いただいたものはポートフォリオに掲載するなどしてきました。 その経験を総動員し、一つオリジナルのものを作成してみたいと考えました。 ワイヤーフレーム作成ツールとしては色々なものがあります…

【Web活動振り返り】Xd収穫祭【9月-4週目】

旅行から帰ったら、一気に季節が進んでいました。 秋服追加でホクホク、 はじめてXdさわってホクホクの1週間。北の大地はすぐ雪が降って冬まっしぐら、 秋が特別みじかく感じるので めいいっぱい秋をたのしんでいきたいところ! Web模写 引き続き、こちらの…