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

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

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

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

先日はPC版コーディング内容をまとめました。 fuchsia-84.hatenablog.com 今回はSP版と全体の修正について。 レスポンシブ化に向けて行った内容をまとめます！ 成果物 PC or タブレット向け (992px以下769px以上) タブレット向け (768px以下545px以上) スマ…

Webデザイン 先月に引き続き自作Webデザインを。 PC版、タブレット版のデザインカンプをXDで作成！ デザインの作成過程など、別記事にまとめました。 fuchsia-84.hatenablog.com Webコーディング 上記デザインのコーディングをはじめました。 PC版、2月終わ…

先日デザインカンプを作成したオリジナルWebデザイン。 fuchsia-84.hatenablog.com コーディング内容のまとめを書いていきます！今回はPC版！ 成果物 左: デザインカンプ 右: コーディング結果 先日つくったデザインからPC版コーディングおわり！制作期間 : …

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

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

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

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

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

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

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

なんだか年が明けてからが一瞬だったように感じています...！ みなさんいかがお過ごしでしょうか。 今月は いろいろさわってみる/つくってみる を実行できた1ヶ月になったように思います。 さて、2020年さいしょの振り返り！ Webコーディング 年末に作成した…

色彩検定1級2次、結果不合格でした1級の壁あつかった…ただ、学習内容はふだんに活きてゆくはず…！！つぎは1次免除、ありがたい来年もチャレンジします#色彩検定— ふーしゃ@web (@fuchsia_84) 2020年1月28日 ということで、1から独学の初受験、 残念ながら1次…

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

前回までで準備が整ったので、レッツ・コーディング！ 前の記事 成果物 github.com 公開ページへ(GitHub Pages) スクリーンショット 動画 SP版 : pic.twitter.com/Um0Z3MfV46— ふーしゃ@web (@fuchsia_84) 2020年1月9日 コーディング時間 期間 : 1/8 - 1/9 2…

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

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

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

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

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