アン

Yukino

私のおすすめの14サイトを紹介しますね！海外サイトも使えるようになるとぐんと幅が広がりますよ！

写真素材が無料なのは広告収入があるから

Yukino

サイトの紹介の前に、なぜ無料で利用できるのか、知っておきましょうね！

インターネット上で無料配布されているほとんどのサービスは広告収入があるから無料ですね。 一般の方が写真を投稿して、DLされた分に応じて収入になるものが多く、それはサイトの広告収入から支払われる場合がほとんどです。 ここでは、安心して使えるサイトをご紹介します。

アン

カメラが得意なら投稿して副収入にしてもいいですよね！

無料で使える海外＆国内おすすめ写真素材サイト14選

Yukino

Yukino 私がよく利用するサイトです。それぞれのサイトの特徴も書いておきましたので参考にしてくださいね。

1. Pexels

https://www.pexels.com/

検索が使いやすい。ビデオも増えてきていて、素材探しの時マストで使っているサイトのひとつ。サイズ指定してダウンロードできるのがNICE!帰属表記必要なし

2. Unsplash

https://unsplash.com/

モダンアート系幾何学や特徴的な建物などアーティスティックなものが多い。ちょっと寂しさを感じるようなものにも使える。帰属表記必要なし

3. pixabay

https://pixabay.com/

明るい写真が多く、使いやすい。イラストが豊富。帰属表記必要なし

4. stockvault

https://www.stockvault.net/

カテゴリー検索がとにかく便利！素材数は他に比べて少し落ちますが、日々新しいものが追加されます。帰属表記必要なしですが、一部商用利用できないものもあります。

5. photoAC

https://www.photo-ac.com/

日本人を探すならこのサイト。無料会員だと１日に５回までしか検索できないので慎重に。帰属表記必要なし

6. PAKUTASO

https://www.pakutaso.com/

こちらも国内サイト。国内サイトはやっぱりちょっと古い感じが否めないですが、メディアやブログなどのサムネイルや商材LPなどに使える写真が多い印象。帰属表記必要なし

7. freepik

https://www.freepik.com/

写真素材はもちろん、UIデザインの参考にしたりもできるサイト。帰属表記必要！

8. BURST

https://burst.shopify.com/

Shopifyが運営する素材サイト。こちらもカテゴリー検索が使いやすい。帰属表記必要なし

9. Gratisography

https://gratisography.com/

コミカルが得意なこのサイト！ブログのサムネイルに使えそうなものが多く、切り抜いてアニメーションをつけて動かしたりしても面白いかも。帰属表記必要なし

10. picjumbo

https://picjumbo.com/

明るい光が使われているポジティブな写真が多い
プレミアムプラン月額料金の10%は、Hope for Children（https://www.hope-for-children.org/）という途上国の子ども支援団体に寄付される。
いいな！と思ったら有料プランの写真だった、ということが割と起こりますが、フリー素材も3,000以上あります。
フリー素材だけをダウンロードできる「Download All Free Photo」というのもあります。無料で3000以上の写真とモックアップ３種がボーナスで付いてきます。ダウンロードの時、有志でいくらか支払えるようになっています。
帰属表記必要なし

11. rawpixel

https://www.rawpixel.com/

クリエイティブ
アート系もあって女性的なものが多い。
フリープランは一日10枚までのDL制限があります。
一部、商用利用ができないものもあるので、DLページでRoyalty Free Photoと記載があるか確かめましょう。
no attribution

12. reshot

https://www.reshot.com/

海外サイトにあるアジア系の写真は、欧米人のイメージが強いことが多く使いにくいのですが、このサイトのアジア系写真は結構使えそうなものが多い印象。帰属表記必要なし

13. Foodiesfeed

https://www.foodiesfeed.com/

飯テロならこれ！洋食が多いですが、isockと遜色ないほどのハイクオリティです。帰属表記必要なし

14. Styled Stock

https://styledstock.co/

“Feminine stock photography”=女性的な写真ストックサイトというキャッチコピーで、掲載されている写真はまさにキラキラ女子系
帰属表記必要なし

アン

こんなにたくさんの中から選べるなんて楽しみになってきました！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

前回のレッスン↓

The post ［商用利用可］海外＆日本の無料写真素材サイト14選！ first appeared on Linksbase.

• トーン＆マナーが何か説明できる
• 参考サイトを見つけて分析できる

アン

ワイヤーフレームからどうやってデザインにしていけばいいですか？

Yukino

デザインには一定のルールが必要。それがトーン＆マナーです

トーン＆マナーとは「〇〇らしさ」

Yukino

LINEってどんなデザインですか？

アン

緑で大文字ではっきりした感じで・・

Yukino そうですね！そのイメージってLINEらしさだと思いませんか？

トーン＆マナーの目標は、そのブランド「らしさ」を伝えることです。 つまりこれはブランディングなのです。 ウェブデザインも、そのブランドのイメージを「造る」あるいは「守る」必要があります。 そのために、緑で大文字ではっきりした感じ、というルールを使っているというわけです。 これを広告業界でトーン＆マナーと言います。  

Yukino

この部分に関われるって、素敵な仕事だと思いませんか？

トーン＆マナーではターゲットと市場を常に想像しよう

逆に、 緑で大文字ではっきりした感じ と聞いてLINEが思い浮かびますか？ 大半の日本人はそうでしょう。 ということは、LINEは日本でのブランディングが成功していると言えるでしょう。 しかし、これが韓国だとします。 もしかしたら 緑で大文字ではっきりした感じは、 検索エンジンのNAVERだと思われるかもしれません。  

• 作ろうとしているトーン＆マナーがお客様に浸透しやすいか？
• 業界と自社の立ち位置から、どんなイメージをトーン＆マナーとしたらいいか？

常にターゲットであるお客様と業界を見るクセをつけましょう。  

トーン＆マナーがずれているとき

ブランドの「らしさ」がないほかに、「当たり前」と違っているときもトンマナがずれていると感じます。 例えば、こちらはリラクゼーションスパのウェブデザインです。     色、フォントを変えてみます。     リラクゼーションなのに

• オレンジと青
• 太いゴシックフォント

これは多くの人がイメージする当たり前とずれています。 また、ページ内の1セクションでも違うトンマナを使ったデザインが紛れても違和感があります。 デザイン全体を通してこういった「ずれ」がないか考えるようにしましょう。  

トーンマナーの決め方

それでは実際にトンマナを決めていきましょう。 実際の現場では、クライアントを見極めて以下の方針で進めるのがおすすめです。

• こだわりのあるクライアント→一緒に考える
• デザインやブランディング 、マーケティングに弱そう→デザイナーが積極的に提案

1. 参考サイト・見本を決める

まずはお手本となる参考サイトを決めましょう。 参考サイトはとても重要です。 始めのうちは、完コピくらいの勢いでもいいでしょう。 デザインは何十年とやっているベテランでもわからないと言います。 ウェブデザインはアートではなくビジネスツールを作るものなので、そういった観点からも参考サイトを決めておくことは重要です。

参考サイトを探す

ヒアリングシートでクライアントが参考サイトを提示しているので、それに似た別サイトを2−3つピックアップします。 以下のようなサイトで探しましょう

• LP Advance
• SANKOU!
• MUUUU
• Web Design Clip
• Pinterestで「Webデザイン」「Web design」等で検索してみてください！

分析する

ピックアップしたら、クライアントが提示したものと

• 似ているところ
• 違うところ

を考えておきます。 その分析をもとに、ウェブサイトに活かすところ、オリジナリティを出すところなどを決めていきましょう。

2. パーツごとにルールを決める

参考サイトから特徴を読み取ったら、具体的にルールを決めていく段階です。

色

色の組み合わせは「hexカラーコード」をメモしましょう。 hexコードは＃で始まる6桁の英数字で表される色を特定するコードです。 コーディングで必要になるのですが、この段階では、ひとまずコードをメモる、ということだけやっておいてください。 Coolorsというサイトを使って組み合わせを考えたり、アカウントを作って保存しておくと便利です。 https://coolors.co/ ↓スペースキーを押すたびに色の組み合わせが変わります。      

フォント

フォントが与える印象は大きいのです。 絶対決めておくべきなのは ゴシック体系か明朝体系かということです。

• ゴシック体のイメージ：ポップ、活発、元気、しっかり・・・
• 明朝体系のイメージ：洗練された、都会的、高級感・・・

タイトルや見出しなど、本文以外のフォントはブランディング重視で決めておきます。 細かい文字になる本文は、読みやすいかを重視するのが良いです。   フォントが見られるサイト

• Google Fonts
• Adobe Fonts
• Font In Use
• ためしがき

イラスト・写真

使用するイラストや写真もイメージを左右します。

例えば、男の子のイラスト。印象が全く変わりますよね？

以下のサイトなどを使って、使いたいアイコンや写真のイメージを決めておきましょう。

• Photo AC
• FreePik
• Vecteezy
• Pexels
• Unsplash

商用利用ができるか確認しよう

フォント、イラスト、写真は、無料の物も多く出ていますが、以下のことを確認してから使うようにしましょう！

• 商用利用ができるか
• 引用元を明記する必要があるか

上記に反して素材を使った場合、ペナルティが課されることもあるので注意が必要です。

クライアントも巻き込んでいこう

Webデザインは制作サイドだけでなく、クライアントも一緒に考えるのが重要です。 デザインが決まるまではしっかりと話し合いをして、イメージを固めていきましょう。 これができないと、「やっぱりちがったから直して」になってしまいます。 こまめなコミュニケーションを心がけましょう！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

The post Webデザインのトーン＆マナーとブランディング first appeared on Linksbase.

• ワイヤーフレームとは何か説明できる
• XDでワイヤーフレームを作れる
• XDのショートカットを覚える

ワイヤーフレームってなんだ？

ワイヤーフレームはウェブデザインの骨格のことです。 ヒアリングシートをもとに「どこに」「なにを」配置するかを決めていきます。

Yukino

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

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

ウェブデザインのスクールに行っても、ワイヤーフレームについては教えてくれませんでした。
多分、多くのスクールがデザインツールの使い方とコードの書き方のみです。
しかしながら、ヒアリングで聞いたことをデザインにいきなり起こそうと思ってもなかなかうまく進まないものです。
大まかな設計図としてワイヤーフレームを書くことで、頭が整理されていくはずです。

なぜワイヤーフレームを書くのか？

コンテンツの過不足を確認するため

ヒアリングで聞いた情報には、重複しているものがあるかもしれません。
配置してみると、実はコンテンツが少ないページがあったりして、コンテンツを増やしたり、別のページと合わせたりする必要が出てきたりします。

導線を決めるため

ユーザーが回遊しやすいようなサイトにするために、ボタンの位置、数、全ページへのリンクがあるのかなど決めていきます。
構造の設計になるので、ここがしっかり組めていないと後々大きく変更することになりかねないので、しっかりすり合わせましょう。

フォントのルールを決めるため

意外にも、フォントが与える印象は大きく、ブランドイメージにも関わってきます。
ワイヤーフレームの段階で見出し、本文のフォントの種類と太さを決めておくとイメージがしやすいでしょう。
ワイヤーフレームの書き方には正解はなく、案件によっても様々です。
ブランドカラーを決めてワイヤーの段階から色を決める場合もあると思います。
色々な記事を見ながら、自分にあった形にしていきましょう！

XDワイヤーフレームの作り方

用意するもの

• XDをダウンロードしていない方はこちらから。
• ヒアリングシートはこちら

Yukino

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

こちらの３つのルールを守ってワイヤーフレームを書くのがおすすめです。

白・黒・グレーのみを使う

あくまでも設計に集中したいので、色を入れるとフォーカスしづらくなります。

フォントの大きさを決める

最近は、ゴシック系のフォントで大きく表示させるデザインが流行っていますね。ヒアリングで聞いたイメージや参考サイトをもとに、フォントの大きさを決めておきましょう。

フォントを決める

フォントの種類は本当にたくさんあって、悩んでしまいますが、全体のイメージを左右するのでこの段階で決めておきましょう。

画面サイズを整えよう

まずは画面サイズを整えていきましょう。
おすすめは、横幅1366pxで、そのうち1080pxをコンテンツを表示する幅とするサイズです。
XDを開いたら、webのところから1366pxを選びます。

アートボードが開くので、左端をドラッグしてガイド線を引きます。
1080pxのコンテンツ幅にしたいので、両端から143pxのところに引くとぴったりです。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

カラーパレットを作ろう

次に、カラーパレットを作ります。
XDに指定した色を覚えさせておけば後で繰り返し使えたり、一括で色が変えられるようになるので最初に作っておきます。
四角形のツール（ショートカット：R）を持って、適当な四角を書きます。
右側のプロパティから、塗りの色を変更します。

Command + Shift + Y　を押して、アセットを開きます。
一番上の色の横にある＋マークを押すと、選択しているオブジェクトの塗りの色が記憶されます。

これを３つ作って、
黒：文字色　白：背景が黒の場合の色　グレー：写真用
を覚えさせておきましょう。
次回から図形やテキストの色を付けたい時、これらをクリックするだけでその色を使えます。
そして、このパレットの色を変えると、パレットを使用して色付けした全ての図形に反映されます。
やっぱり#DDDDDDのグレーじゃなくて#A2A2A2のグレーにしようと思った時、全ての図形をひとつひとつ修正しなくて良いという分けです。
 

Yukino

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

→XD ショートカットリストはこちら

フォントを決めよう

色の次はフォントです。
コーディングでも使うのですが、現時点ではとりあえず、
大きい見出しから順に、h1、h2、h3
本文は、pで囲むと覚えてください。
テキストツール（ショートカット：T）を持って適当なところをクリックして文字を入力します。
プロパティから文字の大きさ、太さ、フォントを選びます。
色は先ほど登録した黒にしたいので、アセットの黒をクリックして色を適用します。
このフォントスタイルを覚えさせたいので、これもアセットから登録します。
同じように、h2、h3、pを以下のように設定して、アセットに登録してみましょう。

• h1：50px　黒　好きなフォント
• H2：36px　黒　好きなフォント
• H3：20px　黒　好きなフォント
• P：16px　黒　好きなフォント

コンポーネントを使おう

XDでは、コンポーネントを使うとさらに効率よくワイヤーフレームを作ることができます。
コンポーネントは、何度も使うパーツを覚えていてくれて、使いたい時にすぐに使えるライブラリみたいなものです。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

Yukino

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

 
四角形とテキスト、線（ショートカット：L）を使って、このようなボタンと写真のパーツを作ってみましょう。

Yukino

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

パーツができたら、パーツを構成している全ての要素を選択します。
該当の範囲をドラッグで囲うか、Shiftを押しながら全ての要素をクリックしていきます。
アセットパネルのコンポーネントの横の＋をクリックすると、そのパーツが記憶されます。
先ほど作った見出しも、同じようにコンポーネントとして登録すると便利です。

パーツを組み合わせてワイヤーフレームを作ろう

登録した色、フォント、パーツを組み合わせながら、ヒアリングシートをもとにワイヤーフレームを描いてみましょう！
コンポーネントを使う時は、使いたいコンポーネントをアートボードにドラッグするだけでOKです。
コンポーネントは、最初に登録したものが”マスターコンポーネント”とされます。
このマスターコンポーネントの「色」「フォント」「大きさ」などを変更すると、そのコンポーネント全てがマスターコンポーネントと同じように変化します。

便利なテンプレートを組み合わせる

上記のようなコンポーネントが作られたXDのテンプレートファイルが、無料/有料でたくさん出回っています。
→XD日本語テンプレート
これを利用するのも良いですね！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

前回のレッスン↓

The post 完全初心者OK！XDを使ったワイヤーフレームの書き方 first appeared on Linksbase.

アン

Yukino

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

【無料配布】ヒアリングシートテンプレ

Yukinoです。 勿体ぶらずにまずはこちら。 ヒアリングシートテンプレ Googleのスプレッドシートになってるので、ファイルをコピーしてお使いください。 シート1〜4に分かれていることを確認してくださいね。

なぜヒアリングシートが必要なのか？

ヒアリングシートとは、クライアントの要望や現状の問題点、サイトの目的などを洗い出すための質問リストです。 このヒアリングシートを元に、戦略的にウェブサイトを作っていきます。

思い込みやイメージは人によって全然ちがう！

クライアントと制作サイドが同じ方向に向かって行けるようにするのがヒアリングシートの役割です。 例えば、ターゲットが30代女性だとしても、クライアントが思っているターゲット層とデザイナーが思う30代女性のイメージは違っています。 より詳しくクライアントのビジネスを知る、イメージを具現化する為に、ヒアリングシートを活用してください。

Yukino

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

シート1 目的を明確にする

テンプレのシート1では、 * 目的を決め * デザインイメージの好き嫌い * コンテンツの書き出し を行います。 リニューアルなのか？LPなのか？

• なにを売りたいのか？
• なにを伝えたいのか？

プロジェクトのコアとなる目的を決めましょう。 その目的に沿って、どんなイメージで、どんな色使いで、どんなコンテンツが必要なのか書き出していきます。

シート2 ターゲットを明確にする

シート2はペルソナシートです。 ペルソナをしっかりイメージすることで、制作側　サイドとクライアントサイドのイメージのすり合わせがより明確になります。 ペルソナについてはこちら。 https://linksbase.net/marketing/what-is-persona/

シート3 強み・アピールポイントを明確にする

シート3はうちのすごいとこシートです。 ペルソナでイメージした人物に対して、営業をかけるイメージで、「うちのここがすごい！」とアピールしてみます。 ウェブサイトが優秀なセールスマンになれるように、セールストークを作っているイメージです。

Yukino

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

すごいとこシートから見出しがつくれる

シートにも記載していますが、30文字が入る列幅になっていて、狙うキーワードをできるだけ入れてもらうようになっています。 これには2つ理由があります。

1. 見出しをつくる
2. SEOに強くする

まず、「キャッチフレーズ」がh1として使えます。 そして、「提供しているサービス・商品が良い理由」がh2として使えます。 サイトのテキストを考えるのはクライアントサイドのことが多いと思いますが、要点がまとまらないことが多いです。 情熱をもってビジネスしているが故、「これも伝えたい」「これも載せたい」というふうになりがちです。 適切な見出しをつけないと、伝えたいことがまとまりまらないので、短文で的確な要素を盛り込むためにこのうちのすごいとこシートが役立ちます！ サイトに訪れるお客様にとって有益な情報が適切に掲載されていないと、いくらデザインがかっこよくても意味がないのです。 そして、「短文で適切な見出し」が書けると、SEOにも貢献できます。 検索エンジンが検索されたキーワード(=ユーザーが困っていること)に適切に答えているサイトを上位表示するからです。

シート4 必要な情報が集まるポイントにする

シート4は基礎情報です。 プロジェクトに関する基本的な情報などを記入していきます。 写真やロゴデータのやりとりなどはGoogleドライブを使うなどするとスムーズです。

クライアントと確認しよう

ヒアリングシートの記入をしてもらったら、ミーティングをして掘り下げていきます。
遠隔であっても、ビデオ会議などを利用して一度話す機会を持ちましょう。
あとから振り出しに戻らなくて済むように、ここでしっかりと基礎固めをするのが目的です。
 

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

Yukino

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

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

The post ウェブデザインになぜヒアリングシートが必要？テンプレ無料配布します！ first appeared on Linksbase.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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の購入からインストールまでの手順をご紹介します。

フリーランスっぽいAppleづくし

まずは、WindowsなのかMacなのかで迷いますよね。

私は、Apple製品づくしなのですが、フリーランスとして活動する前はなんとなくでMacを選びましたが、実際使ってみてとても便利なので大満足です。

私は会社員からフリーランスに転身しました。
会社員時代に社内の制作チームだけはMacを使っていたので、グラフィックするならiMacだろ。
という安易なイメージで決めたのですが、１年経ってみて、使いこなせるようになると、もうWindowsには魅力を感じません！

iCloudが便利すぎる

Appleづくしな理由は、iCloudが便利だからです。
同じApple IDで繋いでおけば、どこにいてもどのデバイスからでもデータが取り出せるので、外出中に緊急対応しなきゃ、みたいな時に高い確率で対応できることが多いです。

また、クラウドを使っていればデバイス自体の容量も食いにくいので便利です。
クラウドの容量拡大は月130円〜選べます。

メイン：iMac 27インチ

ポイント：とにかく大きい方が良い！

まずはメインで使用するパソコンですが、画面サイズは大きい方がいいと思います。

いろんなソフトを開きながら作業する時も、画面が大きいと分割して使っても見やすい大きさにして使えます。
テレビ買って「もう少し大きくてもよかった」 と思うことありませんか？
それと似ている気がします。
小さいより大きい方が見やすい！絶対！ デスクトップを選ぶ時点で、動かすことは想定していないので、大きいに越したことはないと思いますよ！

そして、視力が落ちてくるので、負担が少ない方が良いかなと思います。
悲しいけれど毎日画面見てばっかりなので仕方ない・・。

スペックについては、私のは完全スタンダードですが、予算が許すならHDDからSSDに変更するオプションをおすすめします。
処理能力が上がるので、上記のような同時進行にも強いのかなと思います。
ただこれはラグジュアリーオプションと思っていいです。

キーボードも本当はテンキーが付いているものがいいなと思ったのですが、YAMADA電機のポイント還元がスタンダードキーボードじゃないと頑張れないとのことで断念しました。
ただ、実際使ってみて不自由はないです。

が、使って1年でdeleteキーが使えなくなって買い換えましたw

デスクはIKEAの組み合わせできるテーブルで、白いテーブルトップに黒い脚を選びました。
多分こんな感じ。安い。

会社員時代に、「仕事ができない人は机が散らかっている」と言った上司の持論が忘れられず、よりすっきり片付けられそうな白にしました 引き出しがないので、100均のファイル入れを取り付けています。

書類や本、文具は別の棚にしまって、デスクには物を広げないように心がけています。

外出時用：iPad第６世代

ポイント：ペンとキーボードが使えて軽いもの。

実質ゼロ円で購入！ ホームオフィスは息がつまるのでカフェに行くことも多いのですが、そんな時はiPadを使っています。

MacBookにするか悩んだのですが、仕事の工程ごとに使いやすいデバイスを使うという方法で落ち着きました。

詳しくは活用術を読んでください。

なぜ第6世代か？ まず、安かったから。
メインiMac購入が引っ越しをするタイミングだったのでインターネットも乗り換えて、PC購入のポイント還元とネット契約のキャッシュバックを使い、実質ゼロ円で手に入れることができました。

今は第６世代がなく、iPadとされているのがその後継モデルですね。

私のはBluetooth keyboardですが、Apple純正のsmart keyboardが使えるようになったみたいです。

iPad Proも比較対象ですが、高スペック過ぎます。

スマホ：iPhone XR

元々iPhone 7を使っていて古くなってきていたことと、Xでの見え方が結構特殊ということで買い換えを決意しました。

ある時、Xを使っているクライアントさんが、「ここがこう見えるんだけど」とスクリーンショットを送ってくれました。

ChromeやFirefoxの検証機能で、モバイルでどう見えるかは確認していたのですが、Xの特殊な形だったり、iOSが特殊対応が必要なCSSがあったりと、実際に見てみないと分からなかったことがちょこちょこありました。

これを言い出すと、じゃあAndroidだっておかしい時あるぞ。
とかキリがないのですが、こういったことをきっかけに新しいのも欲しくなって買い換えました。

なんにせよ、Appleで揃えることが重要です。

アプリケーションは必要な時に揃えよう

最近のアプリケーションは月額制が多くなっています。

つまり毎月の経費になってしまう。
月何千円がいくつもあれば、結構な出費で頭を悩ませることになるので、本当に必要になったら揃えれば良いというスタンスをおすすめします。

デザイン３種の神器

Illustratorで素材作成

用途：ロゴ、バナー、アイコンなど、Webデザインの素材作りの必需品 イラレは年間一括を月換算すると2,180円です。

ベクター画像（拡大縮小しても画質が落ちない）素材を作れるので、いろんなブラウザやデバイスで見られるウェブには、必要なものかなと思います。

無料の代替ソフトもなくはないですが、ここはケチっても良い方向には行かないと思います。

Photoshopはデザインの要

用途：画像編集とデザインカンプ作成 ウェブデザインって画像の使い方でかなり印象が変わります。

クライアントが提供した画像を効果的に見せられるように加工したり、文字やロゴを載せたりするとき、必要なアプリケーションです。

Adobe Compで時間とコストを削減

用途：ワイヤーフレーム、デザインカンプ作成 無料アプリでワイヤーフレームやデザインカンプ作成が鬼のように早くなる！！ これはまじでおすすめです。

iPadで無料でダウンロードできます。
ペンを使って（指でもできますが）簡単にオブジェクトや画像、テキストを書くことができ、ワイヤーフレームやデザインカンプを作成するのにとっても便利です。 詳しい使い方は別途紹介します。

コーディング

Brackets

用途：コーディング 他にAtomとかありますが、なんとなくこちらに落ち着きました。 シンプルで使いやすいです。

クライアントとの連絡

LINEって便利なようで便利じゃないと思うんです。

まず、プライベートと同じにしたくないですし、データのやりとりをするには不便です。 という訳で、私は下記の３つを使っています。

Chatwork

ポイント：ファイル送信もラクラクし、プライベートを守ります。

チャットっぽく会話ができてかつファイルの送受信もしやすいのでこれが一番好き。 既読機能もないのでペースを乱す/乱されることなく仕事ができます。

Instagram

ポイント：集客→問い合わせがスムーズ。

個人事業主向けには便利。
とはいえChatworkを使っている個人の方って少ないです。

LINE教えて、となる前にインスタのメッセージでもいいですよとしておくと、インスタも見てもらえるので使っています。

Yukinoのインスタはこちら

Slack

これは私もまだあまり使いこなせていないんですが、なにやらとても便利そう。

でもアカウントだけ作って放置なうです。

Office系はGoogleで賄え

PC買う時に高確率で進められるOffice系アプリケーション。

でもこれ、本当に本当に必要？ 確かに便利なのですが、純正のOfficeがなくても、Googleのウェブアプリが結構使えるのでご紹介します。

• エクセル→Google Sheets
• パワポ→Google Slides
• ワード→Google Docs

Sheetsは関数がエクセルとほぼ同じように使えて、クライアントと共有もでき、お互いの更新が反映されます。

私はプランニングシートをGoogle Sheetsで作ってクライアントといつでも見れるようにしています。

Slidesはプレゼン資料だったり、納品時にお渡ししている手順書を作っています。
指示書などがOfficeのものだという場合もあります。 そんな時もGoogleで開いてみると大抵クリアできます。 読めればおっけーなので。

「必要なものを必要な時に」が鉄則

今回は、フリーランスウェブデザイナーの私が実際に使っているパソコンやアプリケーションを紹介させていただきました。

独立する！ということで形から入りたくなるのもすごくわかりますが、しっかり必要なものを見極めて投資してくださいね！

ワードプレスでテーマやプラグインを購入したり、営業・広告にもお金がかかるので、必要なものが何か一旦考えてみてください。

参考になれば幸いです！

The post フリーウェブデザイナーの私が使っているパソコンとアプリケーション first appeared on Linksbase.

タカ Yukinoさーん！レンタルサーバーがありすぎてどれにしたらいいかわかりません！！

Yukino それなら、エックスサーバーかへテムルがオススメです！

ホームページを作るなら絶対に必要なサーバー。

個人や小規模企業であれば大規模なサーバーは必要なく、レンタルサーバーで十分です。

でもレンタルサーバー選びでありがちなのはこんな疑問。

• 種類がありすぎてわからん！
• 出来るだけ低価格がいい！
• どんなスペックのものを選べばいいの？

端的に申し上げると、Linsbaseでは、エックスサーバーかへテムルを強くお勧めしています。

サーバー契約をどうしようか迷っている方や、新しく移行を検討している方の参考になれば幸いです。

この記事でわかること

• レンタルサーバー選びがなぜ重要か？
• レンタルサーバー選びの検討事項
• なぜエックスサーバーがおすすめか？
• 無料レンタルサーバーがありえない理由

レンタルサーバーは慎重に決めよう

レンタルサーバーは一度決めたら変更しづらいです。

まずは、ホームページがどういう仕組みで動いているのかみてみましょう。

サーバーとホームページ

ホームページの仕組みは家に例えられることが多いです。

サーバーは土地。ドメインが住所。ウェブサイトが家のような関係です。

土地であるサーバーも２つの管理方法があります。
自分で管理する自社サーバーと、専門の会社が管理するサーバーを借りるレンタルサーバーです。

特別なシステムを組んだり容量が多く必要な大きい会社ではない限り、レンタルサーバーを利用するのが一般的です。
ウェブサイトを見るということは、住所を辿って家へ訪ねているということです。

つまり、ウェブサイトを作ることは、土地、住所を借りて、家を作るといういうことです。

サーバーは一度決めたら変更が面倒

引っ越しって面倒ですよね。

サーバーも一度決めたら変更が面倒です。

部屋のインテリアがホームページのデザインとすると、新しい部屋にもそっくりそのまま持っていかなければなりません。

この引っ越しの間に別のページを構築したり、はたまたURLが変わるときには転送させる設定も必要です。

サーバーはなるべく変えないのが得策ですので、しっかり検討しましょうね！！

何を基準に選ぶべきか？

それでは、どうやってサーバーを選ぶとよいか？について解説します。

スペック

ここでは、個人や個人事業主、小規模・極小規模の会社がホームページやブログを開設するのに必要なスペックを紹介します。

ディスク容量

大抵の場合、ディスク容量＝Web領域+メール領域です。

Web領域には、サイト構築のデータが入りますが、WordPressに必要なデータベースにもスペースが必要なのですが、これは別でカウントされます。

エックスサーバーの場合、ディスク容量は200GB、データベースは1GB/1データベースになっています。

たとえば私のサーバーのディスク使用量は、4GBくらいです。

エックスサーバーのX10プランでこのサイト以外にも3つドメインを持っていて、すべてWordpressのサイトになっています。この4サイト全てで容量がこれくらい。

たしかに私のサイトはまだ記事数も少ないので画像容量も少ないですが、足りなくなるってことはないでしょう。

SSL

タカ 「やらなきゃまずい」って言ってたやつね。セキュリティはしっかりしたいわ。

SSLについては『5分でできるSSL設定方法！今絶対に必要なhttps接続とは？』で説明しています。

サイトのセキュリティに欠かせないSSL設定、特に、独自SSLがサービスに入っているか確認しましょう。

記事にも書いていますが、Googleさんの意向によって、おおよそのレンタルサーバーがこれに対応している状態です。

ちょっと前だとここはしっかり見ておいたほうがいい項目でしたが、よほど安すぎるサーバーでなければデフォルトで出来るはずです。

転送量

どれくらいのアクセスに耐えられるか、というのが転送量です。

『ページの重さ×アクセス数』で計算します。

ウェブページを表示する時にその重さのページをサーバーからダウンロードしているので、この式になります。

ちなみにLinksbaseのトップページの重さは9.49KB。

1日に1万アクセスあれば、9.49 x 10,000 = 9490KB 1日に100万アクセスなら、9.49 x 1,000,000 = 9,490,000KB=9GBぐらい もちろんみんながみんな同じページばかり見ている訳でもないですし、画像の量などで1ページあたりの容量はかなり変わってきます。

ですが、個人サイトであれば50GB〜あれば十分なのかなと思います。 ご自身の状況に合わせて選ぶ基準を決めてください。

ページ容量の調べ方

こんなサイトだったらどのくらいの容量なのかな？と調べたい時は、firefoxを使ってすぐに調べることができます。 ①firefox で調べたページを開きます

②外枠メニューのツール＞ページの情報 ③ポップアップで情報が出てきます。

サポート

初心者だと特にですが、何か会った時サポートがあると安心ですね。

オススメのエックスサーバーだと電話サポートがあります。 メールでの問い合わせもスムーズでした。

一度海外からのアクセスについて問い合わせたのですが、丁寧に対応いただきました。

また、エックスサーバーくらいのメジャーのものだと、ヘルプ記事もたくさん出ているので、検索すれば大抵のことは解決します。 へテムルも電話サポートありますね。ますます互角・・。

オススメはエックスサーバーかへテムル

私見ですが、下記の通りまとめみました。

エックスサーバー

￥900〜/月（36ヶ月契約）

• ディスク容量：SSD 200GB
• 転送量目安：70GB/日
• 情報量：★★★★★
• 使いやすさ：★★★★★
• FTP：★★★★☆

画面が見やすいことと、WordPressやサイト運営に関するちょっとした作業がワンタッチで出来るように始めから組んでくれているところが使いやすいです。

WordPressのインストールから、サイトを編集しているときにアクセス制限をかけたりするのもコード要らずでカンタン。

初心者ならエックスサーバーが断然オススメ。

管理画面は3つに分かれていて、わかりやすい構造です。

①支払いや契約の情報がわかるインフォパネル
②サーバーの使用状況や設定をするサーバーパネル
③ファイルマネージャ

これがなぜ良いかというと、弊社のような開発担当は、②のサーバーパネルだけ見られれば良いので、個人情報である①を見られなくて済むということですね。

実は最初これがわかっていなくて、クライアントさんに①へのアクセス教えてもらっていました。
申し訳ないことをしていました（汗）もちろん悪用してませんよw

FTPは、可もなく不可もなくという感じで、全く問題はないけれど、ファイルをクリックしたらダウンロードされてしまうのがちょっと使いづらい。

無駄にindex.phpをダウンロードしてしまったりするんですよね・・笑。
あとはファイルのコピペができないのがちょっと不便かな。 エックスサーバー公式ページはこちら

へテムル

￥800〜/月（36ヶ月契約）

• ディスク容量：SSD 200GB
• 転送量目安：80GB/日
• 情報量：★★★★☆
• 使いやすさ：★★★★★
• FTP：★★★★★

なかなか聞かない名前かもしれませんが、FTPがとっても使いやすい！

リニューアル案件のクライアントさんが使っていて知ったんですが、なかなか良いです。
今回調べていて思いましたが、エックスサーバーと互角すぎてあまり差が見つけられませんでした。

強いて言えば、困った時の情報量というところでエックスサーバーに軍配かなと思います。
ただ、転送量がへテムルの方が多いのでアクセス集中を見込んでいる場合はへテムルをオススメします。 へテムル公式ページはこちら

その他のおすすめレンタルサーバー

ロリポップ！

安い！というイメージのロリポップです。
いくつかプランがありますが、月額500円のスタンダードプラン以上にしましょう。

管理画面が見にくいと思った印象があります。 ロリポップ公式ページはこちら

さくらのレンタルサーバ

こちらも長年使われているサーバーで、料金もお手頃です。 さくらのレンタルサーバ公式ページはこちら

無料レンタルサーバーの落とし穴

最後に、無料レンタルサーバーと検索される方が多いみたいなのでお伝えします。

無料なんてありえない！ 検索するとあるはありますが、上記のスペックには遠く及びません。

• SSDじゃなくてHDD
• PHPが使えない＝WordPressが動かない
• ディスク容量が1GB
• 広告表示が外せない

などなど。 ちょっと試してみたい、というようなニーズに答えるようにも見受けられるのですが、エックスサーバーやへテムルの無料体験で十分なのではないかなと思います。

サービスを利用するので、儲からない無料なんてことはないのです。

ワードプレスホームページならLinksbase

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

企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作がモットー。

ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。
「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか？

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.

タカ

Yukino

SSLは、《ウェブサイトのセキュリティに欠かせない最低限の設定》です。絶対やってください！（キッパリ）

アカネ

SSLってどうなっていたら設定されているの？

Yukino

ウェブサイトのURLが、https〜で繋がっていれば設定されています！

SSLについて検索したあなたは、

• httpsにしたいけどどうやればいいの？
• レンタルサーバーの比較にSSL対応と書いてるけどなんのこと？
• ウェブ制作の見積書をもらったらSSL作業費という項目。なんのこと？
• WordPressインストールの手順にSSL設定があるけどなんのこと？

こういった疑問が浮かんだ方ではないでしょうか？
というわけで、徹底解説です。

基本知識

SSLの意味

SSLとは、Secure Sockets Layer=安全な接続口の層
を意味していて、インターネット上のデータ通信を暗号化する技術です。
色々なサイトで、サイトとサイト訪問者が情報のやりとりをしますが、そのやりとりを暗号化してくれるものです。
なんだか難しく感じますが、みなさんもごく普通に利用していますよ。
例えば、

• 英会話の体験レッスンに申し込むとき、
  問い合わせフォームに「名前」「メールアドレス」「電話番号」を入力。
• オンラインショッピングで「クレジットカードの番号」を入力してTシャツを買った。

ここであなたは、サイト側に対して名前やメールアドレス、電話番号、クレジットカードの番号などなど、個人情報を提供しています。
このサイトとのやりとりが暗号化されていないと、第三者の悪い人たちからも情報が丸見えの状態で、横からひょいっと簡単に盗まれてしまうのです、、！
恐ろしいっ！

GoogleのSSLに対する姿勢

SSL化していないと、今後表示されなくなります。
あのGoogleさんもこの危険性を重要視しているんです。
2018年の2月に、Googleは下記のように発表しています。
”2018年の7月リリースのChrome 68から、全てのhttpサイトに「保護されていない通信」と警告を表示します。“
ユーザーとしては、保護されていない、と警告されると不安になりますね。
つまりSSL設定していないとユーザーも離れていってしまいますし、企業側の信頼にも影響します。

「常時」SSL

今までは、問い合わせフォームや購入フォームなど、秘密情報をやりとりするページでのみSSL設定する方法が用いられてきました。
これに対して「常時」SSLとは、サイト全体を「https://」接続できるようにするセキュリティ方法が主流になってきています。
今までは常時SSLが有料オプションだった多くのレンタルサーバーも、今では無料でついてくるようになっています。

常時SSLはどう違う？

安全？危険？SSL対応か1秒で見分ける方法

冒頭でも触れたように、サイトのURLが「http://」ではなく、「https://」で繋がっていればSSL対応しています。
また、サイトを開いたとき、URLの横に南京錠マークが出るか確認してください！

これが、SSL対応している、という証です。
逆に、SSL対応していないページだと、警告が出てしまいます。

リダイレクトもチェック！

SSL対応していても、リダイレクト設定をしていないと、「http://」でも繋がってしまいます。
「http://」でサイトを開くときに自動で「https://」に切り替わるようになっているかも、チェックしておきましょう。

WordPressでのSSL設定方法

ここからは、設定方法です。
開発者向けの内容なので、制作会社に依頼する方は、上記の基礎知識だけで十分です！
SSL設定は難しい設定ではありません。
ここでは、エックスサーバー を使用しているWordPressのサイトということで設定方法を紹介します。
新規作成する方はWordPressがインストールされたらすぐ、やりましょう！

バックアップを取ろう

もう持っているサイトをSSL化する場合は、まずバックアップを取っておきましょう！
新規作成チームはスキップです。

サーバーからの設定をしよう

サーバーパネルにログインしましょう。
もしくは、Xserverアカウント（旧インフォパネル）＞サーバー管理に移動します。

ドメイン＞SSL設定をクリックして、次の画面で、設定するドメインを選択します。

独自SSL設定追加をクリックし、ドメインを選択。

「追加する」をクリック。

時間をおいて、確認

サーバーでの設定が終わったら、反映されるまで待ちましょう！
数十分で終わることもあります。
５分でできると言っときながら待つんかいっ
というツッコミは受け付けません。笑

それでは、サイトに「https://」を付けてアクセスしてみましょう。
もしくは、先ほどのエックスサーバーの画面で「SSL設定の一覧」というタブから、SSL用アドレスというのをクリックします。

SSL対応していないとき

↓

SSL対応している時

警告が出ないことを確認したら次に進みます。
いつもの表示と違っても、警告じゃなかったら大丈夫です。

WordPress側の設定

WordPressダッシュボード＞設定＞一般に移動します。
Wordpressアドレス（URL）
と、
サイトアドレス（URL）
両方のURLを「https://」に変更して、保存します。

すると自動で再ログイン画面に移るかと思いますので、ログインします。

これで、https://接続ができるようになりました！！
URLに南京錠マークがつきましたか？？

http://→https:// 自動リダイレクト

またサーバーに戻ります。
インフォパネル＞ファイル管理
表示されたフォルダから
ドメイン＞public_html（＞「任意のディレクトリ」wpなど）
「wp-admin」や「wp-content」というフォルダがある階層が開きましたか？
そこにある「.htacess」というファイルを
ダウンロードしてから、編集します。
ここ重要です。
このファイルは元に戻せなくなったら大変なので、
まずダウンロードしてから、編集しましょう。
編集するには、横っちょにチェックを入れて、右側の編集から編集できます。

.htacessファイルの一番上に下記のコードを書き足して保存します。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

これで「http://」から「https://」に自動リダイレクトするようになっているはずです。
新規作成の方はこちらで終了です！

サイト内のリンクを置換する

最後に、既存サイトをSSL化した方は、内部リンクを一気に置換してしまいましょう。
画像なんかも今まで全てhttp://〜で保存されているので、今画像が表示されないようになっています。
ダッシュボード＞プラグイン＞新規追加
「Serch Regex」というプラグインをインストール、有効化しましょう。

ツール＞Search Regex
から置換する元のURLと後のURLを入力します。

一旦、「Replace」を押して置換される文字列を確認しましょう。
大丈夫だな、と確認ができたら、「Replace & Save」です。

SSLも！ウェブ制作ならLinksbase

Linksbase（リンクスベイス）は、ワードプレスをベースに、高いデザインスキルを駆使したホームページをご提供しています！
企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作がモットー。
ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか？

今すぐ相談！

The post 5分でできるSSL設定方法！今絶対に必要なhttps接続とは？ first appeared on Linksbase.