ふーしゃのWeb制作ブログ

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

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

Webデザイン Adobe Xd Photoshop

背景

前回記事に基づき、
公開のワイヤーフレームからのデザイン作成課題。
まずは、水族館のロゴ作りからはじめました。
ロゴ作成についてまとめていきます。

成果物

制作時間 : 3.5h

自作ロゴ
自作ロゴ
ロゴ使用のトップ部分 : ロゴ使用部分の画像

コンセプト

"さっぽろ水族館"という架空の水族館ロゴの作成。

札幌市には札幌市徽章があります。
外側の正六角形は雪の結晶を表しており、
中心の星は北斗星で北方の意を表しています。

正多角形と星の組み合わせを受け継ぐことで
ロゴを見たときに、札幌市が連想されるようにしました。

正八角形は、水族館で人気のタコを表します。
中央にお魚のシルエットを配置して、水族館のイメージを高めます。

また、水族館で撮影されるカラフルな色合いの写真に重ねるときにも
しっかりと映えるよう、色は一色かつ透明部分を含むデザインとしました。

学習ポイント

振り返って

ロゴ作成過程での反省点は、制作時間のロスとなる大きい要因が2つあったことです。
1つは特に曲線を描くとき、狙ったように引けるまで時間を要したこと。
今回は同じようなものを複数個使うことが多かったので、
コピーして変形を繰り返すと効率化できることを学びました。

また、もう1つは細かいところにこだわってしまったこと。
最終的にはかなり縮小された形で使用するので
あまり意味のない修正を繰り返した時間がありました。
(解像度の問題で後から引き延ばされて荒くなる、の逆をやった)

実は、ロゴ制作の時間ロスがほぼほぼ全体工数のオーバー分を占めており、 ぐぬぬぬぬ...と拳を握ってしまうのですが...

とはいえHPデザインカンプ上で見ると、
写真に重ねたときの映え具合については狙い通り作ることができたように思います。

次に、背景用波形素材についてまとめます！

次記事へ

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

Webデザイン Adobe Xd

背景

LP模写から自作デザインへ、と徐々に段階を踏んできた中、
独学のみの状態からより実務に沿ったものに取り組むには...？
といろいろ探していたところ、こんな記事に出会いました。

ツイートで紹介されたブログ記事 :
【ポートフォリオ掲載OK】デザイン練習に使えるワイヤーフレーム配布します - mogaBlog

今回使用した配布ワイヤーフレーム :
https://mogablog.work/demo/wireframe/aquarium.pdf

実務で使用したものに近い形のワイヤーフレームが公開されており、
これを元にデザインを制作するというもの。
制作スケジュールの目安も公開されていました！

現状でどこまでできるのか試してみたい思いもあり
早速挑戦してみました。

成果物

  • 自作ロゴ(Photoshop)
  • 背景用波形SVG(Photoshop)
  • PC版デザインカンプ(プロトタイプ含、XD)

※バナー、SP版作成は未実施

それぞれ、まとめていきます。

次記事へ

【Webコーディング】アイスクリーム専門店の仮想LP - SP版コーディング + 全体修正内容のまとめ

Adobe Xd Webコーディング Photoshop

先日はPC版コーディング内容をまとめました。

fuchsia-84.hatenablog.com

今回はSP版と全体の修正について。
レスポンシブ化に向けて行った内容をまとめます！

成果物

PC or タブレット向け (992px以下769px以上)

PC or タブレット向け (992px以下769px以上)スクリーンショット

タブレット向け (768px以下545px以上)

タブレット向け (768px以下545px以上)スクリーンショット

スマートフォン向け (544px以下)

スマートフォン向け (544px以下)スクリーンショットスマートフォン向け (544px以下) ナビゲーション開時 スクリーンショット

スマートフォン向け (544px以下) ムービー

GitHubリンク

https://github.com/fuchsia-84/Juicy_Ice_Cream_Web_Coding

制作期間 : 3/3 - 3/5 3日間
制作時間 : 3.5h

div/section別まとめ

タイトルロゴ画面

992px以下でdisplay:noneさせた。

ヘッダー

ロゴの大きさと中央配置

768pxを境に幅と高さを変更。
配置は上下左右で中央配置。
先日のposition:absoluteとmargin:autoを応用。

グローバルナビゲーション/トグルボタン

【グローバルナビゲーションを上下にスライド】
前回のPC版SNSリンクと同様。
z-indexをヘッダーより上から下に変更。

【トグルボタンの開閉】
前回のPC版SNSリンクの応用。
display:noneからblockにして表示。
線分の置き方は以下。

<div class="nav_toggle">
  <span></span>
  <span></span>
  <span></span>
</div>

.nav_toggle {
/*前略*/
  display: block;
  width: 30px;
  height: 34px; /*線分の太さと親要素の高さ・幅に注意*/
/*後略...top、leftなど指定*/
}
.nav_toggle span {
/*前略*/
  width: 100%;
  height: 2px;
  background: #FFFFFF;
  border-radius: 5px;
/*長さ.nav_toggle幅(30px)・白・太さ2px・角丸の線分*/
/*後略*/
}
.nav_toggle span:nth-child(1) {
  top: 0; /*上*/
}
.nav_toggle span:nth-child(2) {
  top: 14px; /*中*/
}
.nav_toggle span:nth-child(3) {
  top: 20px; /*下*/
}

上、中、下と等間隔で並んだ横向きの線分について
それぞれクリック後の位置・向きの変化をつける。

上 : 45度回転してy方向中央にさがる
中 : 長さ0、透明、x方向0位置に移動
下 : -45度回転してy方向中央にあがる

#header.open .nav_toggle span:nth-child(1) {
  top: 14px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
#header.open .nav_toggle span:nth-child(2) {
  width: 0;
  left: 0;
  opacity: 0;
}
#header.open .nav_toggle span:nth-child(3) {
  top: 14px;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

【SP版SNSリンク】
各ボタンは各PC版のものと同様。
並びを縦から横並びにするため
display: blockからinline-blockに変更。
marginで間隔をあけた。

【下部の波形】
前回と同様。
div領域はグローバルナビゲーションdivのglobal_navクラス内にnav_waveクラスを設けて作成。
それぞれの高さと配置で繋げて表示されるようにした。

SNSボタン(+ボタン)

display: noneで非表示

メインコンテンツ全体(トップ~SHOP)

768px以下でwidthを画面全体(100%)、
margin-leftは0として1カラムにした。

トップ(スライダー)

高さを100vhから固定値とした以外に変更なし。

ABOUT

992pxから768pxあたりでフォントサイズと文章量の関係から
大きくレイアウトが崩れる箇所があったため、
カンプにはなかったがフォントサイズを3段階に調整した。

また、背景のフィルターをbefore疑似要素を使用しており
高さ情報がとってこれず苦労していた点も、
上記の対応により固定値の指定で解決できた。

MENU

ABOUTセクションと同様、992pxから768pxあたりで
文章がかなり密となり読みにくかったため、
カンプで指定の変更に追加して
PC版とSP版でフォントサイズと改行位置を変更した。

改行位置の変更の仕方は以下。

<p>SP版はここで改行。<br class="br_sp" />PC版はここで改行。<br class="br_pc" /></p>

/*PC版*/
.br_pc {
  display: block;
}
.br_sp {
  display: none;
}
@media screen and (max-width: 768px) {
  /*SP版*/
  .br_pc {
    display: none;
  }
  .br_sp {
    display: block;
  }
}

SHOP

flickityカスタマイズ - ボタンの位置変更はtop,leftで

前回苦労したボタンのカスタマイズについて、
SVGの改変よりもっと簡単な方法を見つけることができた。
単純に該当のボタンクラスにtop, leftなどを指定
することで移動することができた。

#shop .flickity-prev-next-button.next {
  right: -30px;
  /*右に出ている次ボタンを右に移動*/
}
#shop .flickity-prev-next-button.previous {
  left: -30px;
  /*左に出ている前ボタンを左に移動*/
}

フッター

特に特筆する点はなし。

苦労したところ

ブレイクポイントの境目で崩れるレイアウトへの対応

PC版/SP版の境目で大きくレイアウトが崩れ、
新たにブレイクポイントを設け
フォントサイズ変更・改行位置変更・全体の幅/高さ/余白の調整
などさまざまな対応をとりました。

文章量と要素の大きさと余白のバランスから、
デザイン段階で対応を考えておくか、あるいは
カンプを見た段階でCSSでの対応を予測できるよう
になると楽かも...

後退不具合に注意

例えば今回、グローバルナビゲーションについて
PC版ではヘッダーより上に重なり、
SP版ではヘッダーより下となるので
z-indexを変更しますが...

このように、元あった要素を改変したり
似た名前の要素をさわることが多い場合。

改変後、前にできていたことができなくなり、
原因究明に苦労するなどしました。

まとめと感想

今回は、SP版でのコーディングと全体修正での内容をまとめました。
PC版での準備がうまくいったようで、
内容対比で今までで最短ペースで仕上げられたように思います。

個人的には、わりと長めにflickity頼りでスライダーつくってきて
ボタン位置変更に気付けなかったのは盲点でした。
今回すこし前進できたようでよかった。

しかし、カンプのスクリーンショットと比較(前回)をしてみると
未熟な点も浮き彫りになったようで...

今後の制作に活かしていきます！

【定期振り返り-2020年/2月】

Webデザイン

先月に引き続き自作Webデザインを。
PC版、タブレット版のデザインカンプをXDで作成！

デザインの作成過程など、別記事にまとめました。
fuchsia-84.hatenablog.com

Webコーディング

上記デザインのコーディングをはじめました。
PC版、2月終わりに完了。内容をまとめました！
現在SP版を仕上げ中です。

fuchsia-84.hatenablog.com

書籍学習 - Vue.js

昨年からトライしては挫折を何回か繰り返していたので、
こちらの書籍で基礎に立ち返ってみました。

これからはじめるVue.js実践入門

これからはじめるVue.js実践入門

今年上半期中には何かしらのアウトプットができればいいな。

さいごに

2月に入ってから発熱なしの軽い風邪が続き、
例のウィルスのこともあり心配でした。

札幌では緊急事態宣言、外出は控えるように...とのことで
普段のリフレッシュ方法がほぼすべてアウトドアな自分には
大打撃...

思い通りに行かないことも多いですが
巣ごもり生活でも楽しみながら
3月も継続してやっていきますー

【Webコーディング】アイスクリーム専門店の仮想LP - PC版コーディング内容のまとめ

Webコーディング

先日デザインカンプを作成したオリジナルWebデザイン。

fuchsia-84.hatenablog.com

コーディング内容のまとめを書いていきます！今回はPC版！

成果物

デザインカンプコーディング結果
左: デザインカンプ 右: コーディング結果

github.com

制作期間 : 2/25 - 2/27, 29 4日間
制作時間 : 合計11.0h
※2/29 ABOUTセクション背景の修正

div/section別まとめ

タイトルロゴ画面

ロゴを画面中央に配置(上下左右で中央)

上下左右の配置は、position:absoluteとmargin:autoの方法で。
上下左右の位置指定(auto以外にする)を忘れずに。

.logo {
  display: block;
  /*幅と高さ指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

ロゴをクリックで上にスライド

スクリプトにてクリック時にクラスを追加し、
CSS側でそのクラス内容にてクリック後のスタイルを指定。

// 前略
   $('.title_wave_logo').on('click', function() { //ロゴがクリックされたら
// 中略
      $('.title_wave_pc').addClass('title_open');
// 後略
/*前略*/
.title_open {
  top: calc((100vh + 300px)* (-1)); /*タイトル画面+波部分の高さだけ上にずらしている*/
}
/*後略*/

タイトル画面表示中、スクロール不可にする

body全体にoverflow:hiddenをかけてスクロールさせない。クリック後に解除させた。

// 前略
   $('.title_wave_logo').on('click', function() { //ロゴがクリックされたら
// 中略
      $('body').addClass('scroll_on');
// 後略
/*前略*/
body {
  overflow: hidden; /*クリック前はスクロール不可*/
}
.scroll_on  {
  overflow: visible; /* after click title logo */
}
/*後略*/

下部は波形

波形SVGでdiv領域内をマスク。
CSS側でmask-image関連タグを使用。
ベンダープレフィックス付で記述すると以下。

.title_wave {
  mask-image: url(../img/svg/wave.svg); /*ソース指定*/
  -webkit-mask-image: url(../img/svg/wave.svg);
  mask-position: center; /*マスクする位置を中央に指定*/
  -webkit-mask-position: center;
  mask-size: cover; /*拡縮する指定*/
  -webkit-mask-size: cover;
  mask-repeat: no-repeat; /*リピートしない*/
  -webkit-mask-repeat: no-repeat;
}

ヘッダー

ロゴとグローバルメニューページ内リンクを含む形で
幅を固定してposition:fixedでスクロール時固定。
模写など今まで作成したものとほぼ同じやり方で作成。

※SP版用のSNSリンク要素をdisplay:noneで準備しておいた。
※スクリーンショットでは高さにズレが出ているように見えますが、
Chromeブラウザ上ではなくなっている...

SNSボタン(+ボタン)

ハンバーガーメニューのトグルボタンの応用。
クリック時にtoggleClassでクラスが追加/削除される。
クリック後のスタイル指定については、
メニューclose時に＋形、メニューopen時は−形となるように
1本の線の回転角度を変化させた。

SNSアイコン部分

fontawesomeのアイコンを使用。
border-radius:50%で領域を円系にし、白色のborderをつけた。
アイコン要素はtext-align:centerとpadding-topを指定して中央に配置。
各ボタンはmargin-bottomで等間隔に縦に並べた。
背景色について、instagram以外は固定色。
instagramは3色・斜めのグラデーション。
linear-gradient(角度、色1, 色2, ...)で指定。
角度について、
ベンダープレフィックス付のdeg ＝ 90 – 通常のdegに注意。

  background: -moz-linear-gradient(-45deg,#F7EB62,#F485BC,#6A407D); 
  background: -webkit-linear-gradient(-45deg,#F7EB62,#F485BC,#6A407D); 
  background: linear-gradient(135deg,#F7EB62,#F485BC,#6A407D);

メインコンテンツ全体(トップ~SHOP)

widthを画面全体 - ヘッダー横幅分、
margin-leftをヘッダー横幅分として
ヘッダーとメインコンテンツの2カラムに分けた。

トップ(スライダー)

flickityを使用してスライダーを作成。
ドットやボタンを非表示、オートプレイとドラッグを有効。
スクリプトで指定できた。

$(function() {
    $('.top_slider').flickity({
        autoPlay: true,
        draggble: false,
        prevNextButtons: false,
        pageDots: false,
    });
});

ABOUT

背景にブラーと半透明効果(2/29追記)

ブラーについてはセクション全体の大きさをもつinner要素にbackdrop-filterを適用。

#about .inner {
  ....
  backdrop-filter: blur(1px) ;
  -webkit-backdrop-filter: blur(1px);
  ...
}

半透明効果は、XDカンプで設定されていた明るさup・少し透けさせるを
白い要素を重ねることで表現。
aboutセクションの疑似要素beforeの背景色で設定した。

#about {
 ...
  background-image : url(../img/bg/about_bg.jpeg);
  background-size: cover;
  position: relative;
}
#about::before {
  content: '';
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(255,255,255,0.4);
}

MENU

各メニューの互い違いレイアウトはnth-of-type(odd/even)をつかって偶/奇でスタイルを分けた。

SHOP

こちらもflickityを使用してスライダーを作成。
スクリプトでドット/オートプレイ無効。(トップの項目を参照)
さらに、1枚目の戻るボタン非表示、ボタンのスタイルはCSSにて記述。

.flickity-button {
  background: transparent; /*ボタン背景*/
}
.flickity-prev-next-button {
  width: 84px; /*ボタンのサイズ*/
  height: 128px;
}
.flickity-button-icon {
  fill: #777777; /*ボタンの色*/
}
.flickity-button:disabled {
  display: none; /*1枚目戻ボタンを非表示*/
}

フッター

特に特筆する点はなし。

カンプと比較

タイトル画面 : ○

ヘッダー : △
高さのズレはブラウザ上では確認されず、スクリーンショットのみ確認。
ロゴ・グローバルメニュー部分ではズレなし。

トップ : ○

SNSボタン(+) : △
border外側/内側の考慮ができていなかったので境界分大きくなっている。

SNSアイコンボタン : △
上記と同様

ABOUT : ○

MENU : △
XDデフォルトのテキスト余白とのズレで縦の余白指定にズレが出ている。
背景にズレあり。領域幅は合っていそうなのでsize、potisionの見直し。

SHOP : ×
SVG画像マスクでの余白によるズレ。
flickityボタンカスタマイズ不足。

フッター : ○
※カンプにミスあり。
テキストをメインコンテンツ幅に対して中央揃えに修正。

アニメーション全体: ○

苦労したところ

トランジション指定

SNSリンクボタンは通常非表示のためdisplay:noneしていたが、
CSSのtransitionがdisplay:none要素には効かなかった。
そこで、visility/opacityを用いて記述した。

/*前略*/
.sns_pc ul#sns_links_pc { /*close時*/
  visibility: hidden;
  /*中略*/
  opacity: 0;

  transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  -webkit-transition: all 1s ease-in-out 0s;
  -o-transition: all 1s ease-in-out 0s;
  -ms-transition: all 1s ease-in-out 0s;
}

.sns_pc.open_sns_pc ul#sns_links_pc { /*open時*/
  visibility: visible;
  bottom: 220px;
  opacity: 1;
}

他にも、keyframeを使用する方法もあった。

display: none; のDOMに対してtransitionを使う際の注意 - Qiita

flickityカスタマイズ

今回、SHOPセクションのスライダーについて、ボタンのカスタマイズをカンプとぴったり合わせることができなかった。
調べると、flickityデフォルトでボタンの形状はarrowShapeという名前のSVGパスとして記述されているよう。

https://flickity.metafizzy.co/options.html

これをいじれば形も変えられるようだ。

SVG画像マスクの制御

意図していた(XD作成時)よりも余白が多く切り取られたために、SHOPセクション全体のサイズ指定に大きく影響した。

まとめと感想

今回はオリジナル2作目となるWebコーディング、PC版での内容をまとめてみました。

新しく挑戦したかった内容である2カラムレイアウト・マテリアルデザイン・SVGで画像マスクでそれぞれ苦しんでいた印象。

いつもより制作時間が倍くらいかかりました。(ちょっとかけすぎでは...)
また、SHOPセクションについてflickityカスタマイズとSVGマスク制御のWショックでカンプとぴったり合わせられなかった点も反省です。 (比較をみるとよくわかります...)

成長点としては、htmlでのクラス分けミスが出てないこと・ほとんどググらずスクリプトを書けたことがあったかなと思います。

SP版のことを考えながら書いたので、そちらもうまくはたらいてくれるといいな...

引き続き、SP版をコーディングしていきます！

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

Webデザイン Adobe Xd

背景

アイスクリーム専門店の仮想LPの作成過程をまとめています。
前回は、PC版デザインカンプ制作の総振り返りでした。

本記事で、さいご。
SP版デザインカンプの総振り返りです。

制作物

制作期間

制作期間 : 2/12
制作時間 : 3.0h

使用ソフト/ツール

まとめと感想

PC版のデザインでは、波形のロゴボタンからトップページに遷移し、
2カラムレイアウトでヘッダーにロゴ・グローバルメニューを配置。
さらに、SNSリンクは+ボタンで開くマテリアルデザインを採用していました。

これをタブレット・スマホ版にどのように落とし込んでいくかかなり試行錯誤しました。

最終的に、1カラム・ヘッダーにトグルボタンでグローバルメニュー開閉(スライド)の形としました。
波形はグローバルメニュー下部に継承させ、
マテリアルデザインの+ボタンはなくし、
アイスクリームに見立てたカラフルな円形SNSボタンは残して
グローバルメニュー内に入れることにしました。

あまり新しくはないけれども、見やすくて操作しやすい
といった印象になったかと思います。

コーディング的には、＋ボタンとSNSリンクをまとめたPC版でのdivと
グローバルメニュー内に挿入されるSNSリンクは別々につくり、
それぞれをdisplay:none;で切り替える方法しか今のところは思いつかない...

こういう部分はつくらない方がいいんじゃないかなぁ...
と思いながら。

これで、SP版も完成。

コーディングも楽しみです！

さいごに

アイスクリーム専門店の仮想LPのWebデザイン制作過程、
まとめ記事はこれで終わりとなります。

取り組んだ内容が多かったので記事をわけたことで、
2/15より毎日投稿することができました！
ブログへのアウトプット経験と、
それぞれの制作物についてできたこと・できなかったことを振り返り、
まとめることができたことも大きな収穫でした。

コーディングを終えたら、そちらも記事にまとめて
次の制作にすすみたいと思います。

今後も"つくってみた"を積み上げて
精進して参ります。

よろしくお願いいたします！

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

Webデザイン Adobe Xd

背景

アイスクリーム専門店の仮想LPの作成過程をまとめています。
前回は、単体のアイスクリーム画像の制作についてまとめました。

本記事では、PC版デザインカンプの総振り返りとなります。

制作物

制作物(パーツ)

  • 自作ロゴ
  • 水彩背景素材
  • 単体アイスクリーム画像素材

※リンクから各まとめ記事へ飛べます

制作スケジュール

PC版デザインカンプ制作期間
全体 : 1/31 - 2/4 約20.0h

内訳 :

自作ロゴ : 1/31 - 2/3 約6.0h
水彩背景素材 : 2/4 約2.0h
単体アイスクリーム画像素材 2/4 約2.0h
ワイヤーフレームから全体修正 : 2/4 約1.5h
テキスト内容執筆 : 2/4 約1.5h
画像素材の検索その他 : 合計約5.0h

使用ソフト/ツール

まとめと感想

｢自作の画像素材をつかった自作Webデザインとつくる｣というテーマを掲げ、
お題・コンセプトを決めてスタートした今回の制作でしたが、
無事制作物として落とし込むことができました。

また、｢つくったことのないレイアウトに挑戦する｣ということで、
2カラムレイアウト・マテリアルデザイン、写真をマスクしたデザインをとりいれました。

今までの模写&コーディングからは一歩踏み出せたものを
つくることができたのではないかと思っています。

一方で、現在は実務未経験ながらひたすら手を動かし
"つくってみた"を積み上げようとしているところですが、
現在のやり方が実務とどれだけ離れているのかということを
客観的にみつめる場がない・情報がないという点が気になっていました。

すると、実務に近い形で制作に取り組める資料を公開して下さっている方を発見...！

みてみると、制作スケジュール目安がありました。

水族館のWebサイト制作依頼、
ワイヤーフレームからデザインをおこす設定。
ロゴの制作も含んでいます。

この条件で、
PC作成は2人日、とあります。つまり16.0h...

今回の制作では全体が20.0hでしたので
少々オーバー気味でありながら、そこまで乖離しているわけでもなかった...！
すこし達成感を感じつつ、
クオリティー込みでかんがえると身の引き締まる思いがしました。

さらに衝撃だったのが、
現状で自分がつくるワイヤーフレームはただのスケッチ、こちらは仕様書
という印象を抱くほどにワイヤーフレームの時点でかなりしっかりと設計されていたことです。
今後の作成で、見直していきたいです...！

そして、ポートフォリオ掲載も許可とのことでしたので
今回の制作の次には是非ともこちらのデザインカンプ制作を行いたいと思っています。

さらなる成長に向けて...！
一つ一つ、積み上げていきます。

次回

次は、SP版のデザインカンプ制作振り返りです。