私は、デザインもパソコンも、得意だったわけでもありません。

海外が好きなので、どこでも稼ぐことができたらいいなと思ってウェブデザインの勉強をして今に至ります。

ウェブデザイナーを目指したのは、前職で「残業で稼いでいる」ことに気がついたからです。
新卒のトレーナーや、チームのリーダーも任せてもらったのに、それが給料に反映されず、だらだら残っていることで稼いでいる自分が嫌でした。

そこからスクールに通い、仕事を辞め、フリーランスとして活動しています。

フリーランスウェブデザイナーのいいところ

会社員から比べて、フリーランスのいいところはこんな感じ。

• どこでも働ける
•  いつでも働ける
• 自分で報酬を決められる
• 頑張った分だけ報酬がある
• 常に新しいことに挑戦できる

目標決め: あなたにとってのゼロイチはどこ？

フリーランスウェブデザイナーになる！

と決めたら、「ゼロイチポイント」を決めましょう。

ゼロイチは、ゼロから初めて、一人前になるポイントのことです。
どうなったら自分はフリーランスウェブデザイナーだと言えるか？という目標ポイントですね。

フリーランスウェブデザイナーと言っても、色々な働き方があります。

• 完全フリーランスで生計を立てる
• 副業として
• 子育ての傍ら

働き方が様々ならば、どんな姿を目指すのか、ゼロイチポイントを高く設定するのかどうかも人それぞれです。

1件30万、時給換算5,000円

私のゼロイチは、はじめは、ウェブデザインでお金をいただくことでした。

ただ、いざやってみると、その金額が重要だと感じました。
それで目指したのが1件30万の案件を取ることです。
だいたいこれで時給5,000円くらいになる計算でした。

世の中のブログで見るような素早い成長はしてませんが、独立半年で30万の案件を取れた時は、本当に嬉しかったです。

そしてそのクライアントさんも喜んでくださり、紹介案件にもつながりました。
この件をきっかけに、「フリーランスウェブデザイナーです」と言えるようになったなと思います。

イチからはじめられる教材をめざしています

このブログシリーズが目指していることです。
一通りやれば、フリーで活躍できるようになります！

1. ディレクションができるようになる
2. デザインとコーディングができるようになる
3. 案件獲得と満足のレビューをもらう
4. 新しい情報に敏感になる

私自身まだ経験は浅いですが、ちゃんと独り立ちできました！
だからこそ私がやってきたことを忘れないうちにシェアしたいなと思っています。
未経験から独り立ちするまでの手順書のひとつとして、初心者がググっていることの答えになりますように！

フリーランスウェブデザイナーへのロードマップ

プランニングしよう

ヒアリングシートを作成しよう

Adobe XD・イラレを使えるようになろう

XDでワイヤーフレームを書いてみよう

トーンマナーを決めよう

魅力的な写真素材を手に入れよう

アイコンを手に入れよう

ワイヤーフレームをデザインに起こそ

デザインを勉強しよう

守破離のプロセス

HTML CSSがわかるようになろう

スクールに通う

独学する

Yukinoのウェブ制作講座

個人事業主になろう

屋号を決めよう

開業届を出そう

会計ツールを使おう

源泉徴収を理解しよう

ポートフォリオをつくろう

自分のサイトをつくる

案件をもらう前に準備しよう

案件獲得の方法

契約書を交わす

案件をとろう

ココナラで破格リスティング

SNSで宣伝しよう

生の声で口コミをもらおう

アンケートを取ろう

Twitterで最新情報をGETしよう

フリーランスがつぶやくべきこと

フォローすべき先輩たちのアカウント

怪しい勧誘に注意

継続案件をもらえるようになろう

メルマガを始めよう

ブログで発信しよう

The post フリーランスウェブデザイナーになるためのロードマップ first appeared on Linksbase.

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

マスターすれば、静的で物足りなかったページが、動きのあるおしゃれなページに生まれ変わりますよ！
それでは早速やってみましょう〜！
 

用意するもの

• HTMLエディタ
• 背景用の画像３枚

スクロールしたくなるデモ

百聞は一見に如かず！
実際どんな風になるのかお見せします。
なんだか楽しくてずっと上下にスクロールしたくなりませんか？

See the Pen background-attachment by Yukino Watanabe (@yukino0on) on CodePen.

マーケティング的 背景固定のメリット

カーテンが上がっていく感じ。
と表現する人もいますね！

文字は通常通り動いていくのに、背景が固まっています。
これをマーケティング的に見ると、伝えたいことに集中させられる
というのがメリットじゃないかなと思います。

文字をあえて少なくすることで、「なになに？次は？」というワクワクを掻き立てられます。
つまり、スクロールしてどんどんのめりこませて行くLP（ランディングページ）でも有効な手法ではないでしょうか。

「リバウンド繰り返していませんか？」
「実はそれ、あなたは悪くないんです。」
「XXなら、痩せたあと体重をキープできる！」
みたいな感じですね。

デモでも一応そんな風に書いてみました。
99%の人が自分のヒジを舐められない。
でもそれを知った90%の人が試しに舐めようとする。
らしいですよ。

すごく前のビデオですが、アメリカにいた時に面白い子どもの本があって、そこに書いてありました。
よかったらみて見てください。

にしても画質悪い。
当時は綺麗だと思っていたけど。たった5年でここまで進化するんですね・・。

HTML/CSSコーディング

ではやり方です！
HTMLとCSSそれぞれ見ていきます。

シンプルなHTMLでOK

今回は、箱が３つのHTMLにしました。
それぞれの箱に言葉が入っています。
これ以上説明のしようがない・・というくらい簡単な構造です。笑

クラスは、固定させたい背景を持つdiv要素に.fixedをつけています。
それぞれのdivの背景を別々の画像にしたいので、それぞれに.bg1, .bg2, .bg3というクラスをつけます。

background-attachmentで背景を固定できる

続いてCSSです。

先ほどのクラスに対して、それぞれ違う背景をbackground-imageで指定します。

ここまでは一緒ですね！
はい、ここが魔法です！笑

固定させたい背景のdivに.fixedクラスをつけたので、この子たちに
background-attachment: fixed;

というCSSを使ってあげます。
たったこれだけ。
あとは、見栄えをよくするために

• 背景をいっぱいに表示させる
• 高さを指定
• 文字を真ん中に

というような感じで整えてあります。
ぜひ使ってみてくださいね！

スマホ（iOS）では表示されない・・！！

さて、このとっても簡単に背景を固定させるbackground-attachmentというCSS。

残念なお知らせです。このCSSはiOSが未対応です。

スクロールの効果がより期待できるのはスマホなんですが、iOSではいつもと変わらず背景が動いていってしまいます。
ただ。

ご安心ください。
ちゃんと裏ワザがあります。
擬似クラスというのを使うのですが、これはまた別の記事で解説したいと思います。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

おしゃれサイト制作ならLinksbase

Linksbase（リンクスベイス）は、ワードプレスをベースに、高いデザインスキルを駆使したホームページをご提供しています！
女性ならではのおしゃれなサイトデザインながら、芸術のおしゃれだけでなく、マーケティング観点を加味したご提案いたします。

モットーは、企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作。
ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか？

The post あなたもデキル！CSSでスクロールしても背景を固定させる方法 first appeared on Linksbase.

おっしゃれー！！！！ やってみたくなったでしょ。 わかってしまえば簡単にできるのですが、検索してもなかなか難しかったので共有致します。

用意するもの

• Illustratorなどのベクター画像が作れるもの
• HTMLエディタ 私はBracketsを使ってます。AtomとかなんでもOK

仕組み

A：表示したいイラストやロゴの“ベースSVG”と B：アニメーションの動きをつける“マスクSVG” という2枚の画像を重ねて、 Aを、Bで隠している状態から、Bが書き順に沿って動くことで あたかも手書きで書いているかのように見せられるものです。  

・・・おっと、じゃあBだけでええやん と思った方。

そうです。パスだけならBだけ使えばいいんですが、 この動きのベースになっているのが、パス（線）なので、 お洒落なフォントだったり、イラストの場合、表現できないんです。

そういった場合には、今回紹介する方法がGoodです。

SVGアニメーションの作り方

動画を作りましたので、合わせて見ていただくとわかりやすいかなと思います！  

①ベース＝マスクされる側

Illustratorを使います。

1-1. レイヤーの名前を決める

こちらでは、「base」と「mask」にしています。
これが、のちにID名になり、コードを読み解く時に便利なので必ず入れましょう。

1-2. テキストツールで文字を書く

「base」レイヤーにテキストツールで好きな文字などを描きます。

• フォント選びで気をつけたいこと。
  • 文字の間隔が狭くないもの
  • 文字の太さが出来るだけ均一なもの

マスクを作った時に、重なってしまって仕上がりが雑になってしまうので、こういったフォントを選ぶのがおすすめです。

1-3. パスをアウトライン化

選択ツールに持ち替えて、描いたテキストを右クリック。

「アウトラインを作成」します。 （英語表記でごめんなさいw英語を忘れないようにと極力英語にしております。）

1-4. 複合パスを作成

オブジェクト＞複合パス＞作成 から、複合パスを作ります。
これをやっていないとなんだかうまく行かなかったです。

1-5. 塗り色を選択

塗りつぶしカラーを入れましょう。

今回はロスの夕焼けをイメージしてみました。
またの名をインスタグラムカラーという・・。

これで“ベースSVG”の完成です。

②アニメーションパス＝マスク

引き続きIllustratorです。

2-1. 「base」レイヤーをロック

先ほどのベースSVGのレイヤーを、鍵マークをつけて動かせないようにロックします。
この上にマスク SVGを描いていきます。

2-2. ペンツールでなぞる

ペンツールを持って、「出来るだけ一筆書き」で、ベースSVGをなぞっていきます。

ぺジェ曲線、難しいですよね。
私もまだまだ練習が必要です。

ここでは、書き順の通りになぞりましょう！

今回は、「Los」「An」「geles」「gの点」という感じで分けました。
（後でgの点が入っていないことに気づいたのと、Aの綴りがなんか不自然だったのであとで修正しました。）

2-3. なぞった線を太くしてベースSVGを隠す

ダイレクト選択ツールなどを使って、線を修正しながら、ベースSVGが「完全に隠れるように」でも「他の線に被らないように」なぞっていきます。

マスクSVGの線が、書き順に沿って消えていくことで、下のベースSVGが浮き上がっているように見えるということなのですが、 線を太くしたばっかりに、一画目の線が次の画も隠してしまっていると、アニメーションにした時に不自然な画が自分の番じゃないのに出てきてしまうということなんですね。

ですので、線の太さが大きく違うフォントを使うと、画数ごとにレイヤーを分けて、それぞれ太さを変えて、という作業が増えるということです。

増やしてもいいですがなかなかめんどくさいです。
あとは、アニメーションのスピードでごまかせるところもありますのである程度は妥協もしましょう。笑

透明度は70%くらいでやるとうまくできると思います。

2-4. 線の名前をつけてグループ化

最後に、マスクSVGの線レイヤーにわかりやすいように名前をつけておきます。

線たちのグループ化は、ビデオではやりましたが、まあやらなくても良いかなと後で思いました。

最終的に落ち着いたのはこんな感じ。

結局「Los」「A」「Angeles」の３種で分けました。 「A」がどうしても重なってしまうんですが、スピードでごまかしています・・w これで“マスクSVG”の完成です。

③SVGに書き出し

名前をつけて保存か、エクスポートからSVGを保存します。

名前をつけて保存の方が、htmlで見た時に行を分けてくれていてわかりやすいのでおすすめです。

④エディターでコードを書く

さあ、ここまできたら簡単です！

4-1. テンプレをコピー

エディタで、〇〇.htmlというファイルを作ります。
そうしたら、その中に下記のコードをコピぺしてください。

<!DOCTYPE html>
<html lang="ja">

<head>
  <title>手書き風SVG文字アニメーション</title>

  <style type="text/css">
    /* CSS コピペ */
  </style>
</head>

<body>
  <div class="svgall">
    <svg class="mask" viewBox="コピペ" id="move">
      <defs>
        <!-- アニメーション画像 -->
        <mask id="clipMask">
          <!--マスクのpath-->
        </mask>
      </defs>
      <!-- ベース画像 -->
      <image xlink:href="ファイルパス" width="100%" height="100%" mask="url(#clipMask)"></image>
    </svg>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
  <script>
    new Vivus('move', {
      type: 'scenario-sync',
      duration: 100,
      forceRender: false,
      animTimingFunction: Vivus.EASE
    })
  </script>

</body>

</html>

4-2. ③で保存したSVGをエディタで開く

上下や左右のウィンドウを利用して、さっきのSVGを開いておきましょう。

4-3. 必要情報をSVGから拾ってくる

SVGのコードの中から、CSSの部分・viewboxの数字をコピーしてきましょう。

CSSの中にある、マスクレイヤーの線のクラスのなかの、 fillとstrokeは fill: none;　と　stroke:#fff に修正しておきましょう！

次に、<g id=”mask”>から</g>まで全部を切り取って、htmlのマスクのpathというところに入れます。
そして、<g id=”mask”></g>はいらないので削除します。

4-4. ベースSVGのファイルパス

先ほど、マスクのpathを切り取った＝マスクのレイヤーのデータがなくなったので、SVGには、ベースSVGのみが残っている状態です。

このSVGのファイルパスを、htmlの中に入れて、読み込ませます。

⑤CSSとHMTLでSVGがアニメーションに！

完成です！おめでとうございます。

動きの理由は、htmlの中に読み込ませているscriptのおかげです。

vivus.jsを利用しています。
new Vivus〜のところで、スタートするタイミングやアニメーション全体のスピードなどを操作できるので、色々試してみてください。  

いかがでしたでしょうか。

私はこのhtmlマークアップのところでなかなかつまづいてしまって悔しかったのですが、テンプレを使ってしまえばめちゃ簡単にできたので嬉しい限りでございます！

誰かのお役にたてば何よりです。

SVGアニメーション参考リンク

今回色々と調べていて参考にさせていただいた記事です。

つまづいたら色々と見比べてやってみると良いと思います。

https://nycreation.jp/blog/archives/91/
https://theorthodoxworks.com/front-end/svg-handwriting-animation-js/
https://www.willstyle.co.jp/blog/1569/ http://herrkf.com/20190422/3517  

おしゃれサイト制作ならLinksbase

Linksbase（リンクスベイス）は、ワードプレスをベースに、高いデザインスキルを駆使したホームページをご提供しています！

女性ならではのおしゃれなサイトデザインながら、芸術のおしゃれだけでなく、マーケティング観点を加味したご提案いたします。

モットーは、企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作。 ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。

「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか？

The post [ビデオ解説付] CSSとSVGで手書き風のアニメーションを作る方法 first appeared on Linksbase.