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

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

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

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

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

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

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

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

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

背景 アイスクリーム専門店の仮想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 お店の特徴 フルーツアイスクリームショップ アメリカ生まれ 素材の色・風味を大事にする コンテンツ希望 お店のロゴ トップ…

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

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

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

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

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

背景 Webコーディング模写をしていて、ヘッダーのブランドロゴがsvgファイルでした。 元ページ : name of love 一般的にsvgファイルを作成となるとPhotoshopかIllustratorをつかうようですが、 今のところ気軽にさわれるのがXDだったので、XDでSVG書き出しで…

今回は、ひらともや(Twitter: @hiratomoya)さんのnote記事コーディング練習用のデザイン~お花屋さんのLP編~で知った、Shiroコーディングに挑戦してみました！ デザインは、akane(Twitter: @omsss22)さんです。 学習項目とこの経験を振り返ると共に、Shiroコ…

成果物 スクリーンショット 動画 カンプ読み取り勘違い、ヘッダー部分のコンテンツ幅が全体と統一されてなかった(absoluteでleft150pxとか設定していた)修正済みスクショ。こういうのすり抜け注意..._φ(･_･ pic.twitter.com/pzC5ilg9Yp— ふーしゃ@web (@fuch…

成果物 先日作成したデザインカンプを元に、コーディングを終了！ fuchsia-84.hatenablog.com スクリーンショット 全体スクリーンショット 動画 スマホ版#Webデザイン模写 #Webコーディング模写 #XD #HTML #CSS #JavaScript #今日の積み上げ pic.twitter.com…

成果物 デザインカンプ 動画 スマホ版(制作時間⏰:合計4時間)#Webデザイン模写 #Webコーディング模写 #XD #HTML #CSS #JavaScript #今日の積み上げ pic.twitter.com/GA9RWV5FqH— ふーしゃ@web (@fuchsia_84) 2019年10月10日 制作期間 10/9~10/10 合計4時間 学…

前回 先日、Xdでスライド作成の記事をまとめました。 しかし、前回の段階ではドットも一緒に流れてしまっていました。 今回修正できたので、別記事としてまとめます。参考書籍 : 久保田涼子「Webデザイン良質見本帳」SBクリエイティブ株式会社 成果物 このま…

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

背景 Webデザイン模写の一環として、Xdのプロトタイプをさわってみることに。 (人生初のXd、基礎理解も兼ねています。)模写しているページは、こちら。Name Of Love Topページに大きなスライドがあるので、 これをXdで再現することにしました。参考書籍 : 久…