freelance-businesscard

フリーランス、名刺を作りたい!

フリーランスとはいえ。たいして人と会うことなんてないとはいえ。そろそろしっかりした名刺を作ってみようかな、と思っている。

以前、突然大手通販会社様よりアポイント頂き、慌てて即席名刺を用意した事があって、以降ずっと必要な時にはその名刺を使っているんだけど、正直渡すのが恥ずかしいレベル。だから残念、ここでも紹介できない。

ずっと作り替えたいと思いながらも、名刺を渡す機会もそんなに多いわけじゃないしな・・・と先延ばしにしていたのだが、やっぱりフリーランスでも名刺交換の場と言うのはちょくちょく出てくるもので、プライベートでも「え、ライターやってるの?名刺持ってますか?」とか言ってもらえる事があったりするから、ここらでちゃんとした名刺を作りたい。

そこで、おしゃれな名刺を作ってくれるデザイナーさんを探すインターネット放浪の旅に出て見つけた選りすぐりのデザイナー(デザイン事務所?印刷所?)を自分の覚書の為にも書いておきたいと思う。

 

シンプルでおしゃれな名刺を作ってくれるデザイン事務所・印刷所

名刺を作ろう!と思っても、フルオーダーで頼めるところ、セミオーダーで頼めるところ、自分でチャチャっと?作れるようなところ、なんか色々あるし、結構値段も幅広いなぁって言うのが印象。
名刺となるとデザイン費用だけじゃなくて印刷料金も絡んでくるわけで、本当価格差がものすごい。

私は箔押しや活版印刷がしてみたいと思っているんだけど、箔押しとか活版印刷になると、普通の印刷の何倍もの料金がかかるっぽくて、ちょっと気絶しそう・・・(笑)
でも、シンプルだけどおしゃれ。自分のために、そんな名刺を作るために、惜しまず投資したいなと思うところでもある。
実はもう依頼先を決定してお願いしてあるので、その話はまた後日、名刺が出来上がったら書こうと思っているのだが、今日は私が多分100以上のデザイン会社や個人のデザイナーさん、印刷所を探し回って見つけた素敵なデザイン事務所や印刷所をまとめてご紹介したいと思います。

 

気になった名刺制作デザイン会社

 

株式会社 桶屋

「そっと語りかけるシンプルな名刺」って言うキャッチコピーがなんかいい感じの会社。ホームページも凄くシンプル。

名刺のデザイン料金は¥30,000、名刺に載せるイラスト制作は¥20,000〜
そしてこれに印刷費・・・
お名刺だけで10万円も夢じゃない感じ・・・

だけど印刷の雰囲気もいい感じで素敵。

HP. http://studiokeya.com/menumeishi1.html

 

Creative Lilly

Creative Lillyデザインスタジオ

とにかく全体の雰囲気がめちゃくちゃ素敵で、シンプルで凄い洗練されててとても上品なデザインを作っているデザイナーさん。
箔押しとか、活版印刷とかも取り扱ってて、女子なら絶対好きな感じ!でも、キラキラしてないところがカッコよくて素敵。

デザイン料金は全てお見積もり制。私も見積もりをしてもらいましたが、見積もり制なのでここでは料金は伏せておきます。
メールの対応が丁寧でとても信頼できる感じも◎でおすすめ!

HP. https://lillydesign.tokyo
Instagram. @lilly.designstudio

 

メイシスト

活版印刷をメインにしている印刷屋さんですが、デザインからの注文もできます。
とにかく個性的な名刺を持ちたい時には最適なんじゃないかなと思います。印刷でこんなに名刺って色々個性が出せるんだな!と制作事例を見ているだけでも楽しい!!ただホームページが古いのか??制作事例はちょっと見辛いです。

名刺のデザイン料金は30,000円〜。プラス印刷費。
実は先日印刷の見積もりをもらったんだけど、めちゃ高い。他社と比べても高いです。その費用分印刷クオリティーが違うのかは分からないけど、取り扱いしている用紙も特殊紙が凄く多くて、紙で個性を出したい人にもおすすめだと思います。

HP. https://www.meishist.com/

 

名刺ってやっぱり大事!こだわりの素敵名刺を作りたい!

やっぱり名刺ってビジネスパーソンにとっては欠かせないビジネスツールで、自分の分身のようなもの。
私の手を離れた時、相手の元で私をアピールできるものじゃなくっちゃいけないって思う。

だからと言っても、私は最近多いキラキラ系起業家?ママ起業?主婦起業?みたいな人が使ってる、自分の顔写真どーん、デザインごってごて〜、その上趣味やらなんやら書いてあるような、あーゆーやつは凄く嫌なの。
正直、「どんだけ自分好きなん?」「うわ、ダッサー」って思うだけで、全く見る気にならない。で、失礼承知でブッ込んじゃうけど、「え?遊びで仕事してんの?ふざけてんの?」って思う。誠実さとか真剣さが全然伝わってこないんだよね。

私は名刺はシンプルに必要な情報が記載されていれば良いなって思う。
見やすい事と、「この人と仕事したいな」って思ってもらえるような、「この人なら任せて大丈夫だろうな」って思ってもらえるような名刺がいいなって思う。
間違っても、人からキラキラ系だなと思われるような名刺にはしたくない。

そんな視点で、素敵なこだわりの名刺を作ってくれそうなところをピックアップしてみました。皆さんも是非覗いてみては!!

私の名刺は今依頼中!毎日凄くワクワクしてます!!なので、完成したらブログで報告しまーす!

0 comment
Share:
url-www

当サイトは独自ドメイン「tokyo-free.info」を使用していますが、最近すごく疑問だったのが、サイトのアドレスの統一化について。

メインで運営しているサイトはxサーバーを使って運営していますが、
xサーバーでは無料でSSL化(httpアドレスをhttps化できる)ができるので、メインのサイトではSSL化をしていたのです。

なんですが、そうなると、
「http://〜」「https://〜」「http://www.〜」「https://www.〜」って、サイトのアドレスが4つもできてしまう事になってしまったわけ。

どのアドレスを入力しても、サイトにたどり着けるようになっているのだけど、それが良いことなのかよくないことなのかも分からないまま、でも、SSL化はしておいた方が良いんだろうな〜と軽い感じでSSL化してみたのですが、やっぱりアドレスが複数あるってどうなの!?と思い直し、ちょっと調べてみました。

サイトアドレスは統一した方がいいのか。

そもそもサイトアドレスは統一しておく必要があるのかどうなのか、っていう話なんだけど、これはやっぱりURLをしっかりひとつに決め、ドメインを統一してサイトを運営していく事が大切らしい。

wwwありとwwwなしで大きな違いやSEO効果があるわけではなさそうだけど、両方のドメインでアクセスができると、パフォーマンスが分散してSEO効果が下がってしまうらしいから、ドメインはひとつに統一しておいた方が良さそう。で、このサイトのアドレスを統一する事を、『URL正規化』と言うらしい。

ともなると、最初からwwwありにするのかなしにするのかまでサーバーで選べるようにしといてよって思うのは私が初心者だからなのだろうか・・・後から変更とか、なんか難しいじゃん。

URL正規化(サイトアドレスの統一)方法

htaccessで301リダイレクトする

でました、大の苦手なhtaccess(ちょっとでも間違えると真っ白になっちゃう危険なヤツこれ)。そして未だ良くわからない301リダイレクト・・・

これは、htaccess(エイチティーアクセス)ファイルに専用コードを記述して301リダイレクトをさせる事で、wwwあり、wwwなしを統一する設定方法なのだそうだ。

wwwなしにURLを統一する場合

htaccessに以下を記述。
これで http://www.tokyo-free.info/ にアクセスされた時、http://tokyo-free.info/ に転送されるようになる。
※ちなみにURLは自分のサイトに変更してね。

Options +FollowSymLinks(XSERVERでは不要)
RewriteEngine on
RewriteCond %{HTTP_HOST} ^http://www.tokyo-free.info/
RewriteRule ^(.*)$ http://tokyo-free.info/$1 [R=permanent,L]
wwwありにURLを統一する場合

htaccessに以下を記述。
これで http://tokyo-free.info/ にアクセスされた時、http://www.tokyo-free.info/ へ転送されるようになる。
※ちなみにURLは自分のサイトに変更してね。

Options +FollowSymLinks(XSERVERでは不要)
RewriteEngine on
RewriteCond %{HTTP_HOST} ^http://tokyo-free.info/
RewriteRule ^(.*)$ http://www.tokyo-free.info/$1 [R=permanent,L]

wwwありとwwwなし、どっちが良い??

エックスサーバーでは、上記の記述をhtaccessに加えるだけで問題なく簡単にURL正規化ができた(はず)。
wwwありとなし、実際どっちが良いんだろう?と、どちらに統一するか悩んだ結果、私はwwwなしで統一した。
wwwがない方がサイトアドレスが短くなるから良いかな、と。
名刺とかに記載する時に、アドレスが長ったらしいってあんまりだなーと思ったのが理由。

だけど、これをデザイナーさんに相談したところ、wwwありの場合、「長くなるのが嫌な場合はhttp://部分の記述を省く事が多いですよ〜」との事でした。
そういえば、私の手元にある名刺も、「www.なんちゃらかんちゃら.com/」みたいな表記になってるのがいくつかありました。

どちらが優位だとかいう話ではないみたいなので、好きな方で良いのかなーって思います!

0 comment
Share:

phpから下記の記述を削除。

<div class=”author-box”><?php echo get_avatar( get_the_author_meta( ‘ID’ ), ‘120’ ); ?> <div class=”about-author”><h4>About <?php echo get_the_author(); ?></h4><p><?php echo get_the_author_meta( ‘description’ ); ?> </div> <div class=”all-posts”><a href=”<?php echo get_author_posts_url( get_the_author_meta( ‘ID’ )); ?>”>View all posts by <?php echo get_the_author(); ?></a></div> <ul class=”social-links”> <?php if ( get_the_author_meta( ‘facebook’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘facebook’ ); ?>”><i class=”fa fa-facebook”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘pinterest’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘pinterest’ ); ?>”><i class=”fa fa-pinterest”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘instagram’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘instagram’ ); ?>”><i class=”fa fa-instagram”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘twitter’ ) != ” ): ?> <li><a href=”https://twitter.com/<?php echo get_the_author_meta( ‘twitter’ ); ?>”><i class=”fa fa-twitter”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘googleplus’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘googleplus’ ); ?>”><i class=”fa fa-google-plus”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘github’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘github’ ); ?>”><i class=”fa fa-github”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘vimeo’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘vimeo’ ); ?>”><i class=”fa fa-vimeo”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘youtube’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘youtube’ ); ?>”><i class=”fa fa-youtube”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘shop’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘shop’ ); ?>”><i class=”fa fa-shopping-cart”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘user_url’ ) != ” ): ?> <li><a href=”<?php echo get_the_author_meta( ‘user_url’ ); ?>”><i class=”fa fa-desktop”></i></a></li> <?php endif; ?> <?php if ( get_the_author_meta( ‘user_email’ ) != ” ): ?> <li><a href=”mailto:<?php echo get_the_author_meta( ‘user_email’ ); ?>”><i class=”fa fa-envelope-o”></i></a></li> <?php endif; ?> </ul> </div>

0 comment
Share:
%e4%bd%bf%e3%81%84%e6%96%b9%e3%82%82%e8%b6%85%e7%b0%a1%e5%8d%98%ef%bc%81web%e4%b8%8a%e3%81%a7%e7%94%bb%e5%83%8f%e7%b7%a8%e9%9b%86%e3%81%a7%e3%81%8d%e3%82%8b%e3%80%8epicmonkey%e3%80%8f%e3%81%8c

画像加工ができるソフトはたくさんある。

PhotoshopやIllustlatorのような高額だけどハイテクなソフトから、
標準搭載されているペイント、
アプリやインターネット上のサービスなど様々だ。

中でもあたしが普段使っていて使用感が良い画像編集ソフトを紹介したいと思う。

ブラウザ上で簡単に画像編集ができる『PicMonkey』

PicMonkey』は無料で使えるオンライン画像編集サービス。

画像編集

画像サイズの変更やトリミング、色加工やテキスト挿入の基本的な事から、
写真のコラージュやフレーム加工、メイクアップなど様々な機能が備わっていて、
操作も簡単で無料で使える事、
わざわざアプリを立ち上げる事なくブラウザ上で編集ができるところが気に入っていつも使っている。

『PicMonkey』の使い方

『PicMonkey』はアプリを立ち上げる事なくインターネット上で画像の編集が行える。

基本的な画像の編集や加工は「Edit」から、
写真を数枚並べる写真のコラージュは「Collage」から行う。

いくつか機能を紹介したいと思う。

画像編集・加工の「Edit」

画像編集のおすすめソフトフリー

「Edit」ページを立ち上げるとこんな画面が表示される。

ここで画像サイズ、トリミング、カラー変更や簡単な色調整、
テキストや画像の配置やフレーム加工、メイクアップ効果など様々な画像編集や加工を行う事ができる。

テキストの挿入も楽々。有料プランならフォントの数が増やせる。

テキスト挿入をしたい場合、自分がパソコンにインストールしているフォントを使えるのはもちろん、
PicMonkey上のフォントも種類が様々あるので
自分のパソコン内のフォントが少ない場合でも色々なフォントを使って楽しむ事ができる。

画像編集フリーソフト
上の画像はテキストマークと「ours」というタブがブルーになり、選択された状態となっている。

「Ours」はPicMonkey側で用意されているフォント、
「Yours」は自分がパソコンにインストールされているフォントになる。

右側にクラウンマークがついているフォントがあるが、
これは有料プランの契約をした場合のみに使う事ができるフォントだ。
ちなみにあたしはPicMonkeyを愛用しているのでもちろん有料プランのユーザー登録をしている。

背景透過のpng画像も楽々、レイヤーもあるから編集楽々!

PicMonkeyなら、背景が透過されたpng画像も簡単に作ることができる。

「Canvas Color」で「Transparent Color」にチェックを入れると、
ベースの画像が透過される。
※透過された部分はグレーと白のチェック柄で表示されます

また、画像の左側にレイヤーが表示されているのがわかると思うが、
最近レイヤー機能が追加されたため、より画像加工が簡単になったのが嬉しい。

配置する画像もPicMonkeyで用意された素材以外にも
もちろん自分のPC内に保存している画像素材も配置ができるので、
画像加工の幅が広がる。

Photoshopやイラレなどに手を出さなくても
素人がちょっとした画像を作るのにはPicMonkeyで十分だと感じている。

写真をコラージュする「Collage」

また、PicMonkeyでは画像のコラージュも簡単に作る事ができる。

画像変種フリーソフト

コラージュにしたい画像をPicMonkey上にアップロードしたら、
画像をドラッグするだけで簡単にコラージュ写真を作る事ができるのだ。

コラージュの形も、2枚横並べや3枚横並べなどのシンプルなものから、
正方形の中にいくつもの写真を配置したり、
タイル風に配置したりと様々なコラージュスタイルを選ぶ事も可能だ。

ブログを書いていると画像を横並べしたい、組み合わせて表示させたいと思う事が多々あるので、
このコラージュ機能もとても重宝している。

 

0 comment
Share:
%e8%91%97%e4%bd%9c%e6%a8%a9%e3%83%95%e3%83%aa%e3%83%bc%e3%81%ae%e7%84%a1%e6%96%99%e5%86%99%e7%9c%9f%e3%82%92%e6%8e%a2%e3%81%9b%e3%82%8b%e5%86%99%e7%9c%9f%e6%a4%9c%e7%b4%a2%e3%82%b5%e3%82%a4%e3%83%88

ブログで使う写真素材を著作権フリーの写真の中から探しているという人は多いのではないだろうか。
かく言う私も無料で使える写真を日々探している。

いくつかお気に入りの写真検索サイトをブックマークしているのだが、
最近使い勝手が良いと感じたサイトあるので紹介したいと思う。

写真検索サービス『FreePhotos.cc』

FreePhotos.cc』は、CC(クリエイティブコモンズ)写真を検索できるサイト。

無料写真素材検索サイトfreephotos

検索画面に表示された写真の中から、
お気に入りの写真を見つけたらワンクリックで写真をダウンロードできる手軽さと
ページのシンプルさがとても気に入っている。

『FreePhotos.cc』写真ダウンロードのやり方

サイトを開くとトップページに写真がいくつも並び、スクロールする事で次々に写真が表示されていくのだが、
わかりやすくサイトタイトル横にある検索欄からキーワードで写真を検索することができる。

無料写真素材

試しに「white」で検索をかけてみると、このようにキーワードに沿った写真が表示されていく。

表示される画像がトリミングされたりせず、縦横比がそのまま表示されるのも使い手としてはとてもありがたい。
おっ、この写真いい!と思っても、「あ〜なんだ、縦写真だった〜」なんてガッカリがなくなる。

無料写真素材

気に入った写真にマウスを載せると、上の写真のようにダウンロードできる矢印マークが現れる。

このダウンロードマークをクリックすると、
たったのワンクリックで写真のダウンロードが完了する。

「検索する→見つける→クリックする」
たったの3ステップで欲しい写真が手に入る。なんて簡単なんだろう!!素晴らしい!

ライセンス表示が必要な写真はライセンスを確認してから使用する

ひとつ注意しておきたいのは、
『FreePhotos.cc』の写真の中には、CCライセンス画像も含まれているということ。

CC0の写真は上記の通りダウンロードボタンをクリックするとすぐにダウンロードが開始される一方で、
CCライセンスの写真はダウンロードボタンをクリックすると新しいページが表示される。

無料写真素材検索

そこにライセンスの詳細が記載されているので確認した上でダウンロードして使用することになる。

※実際は英語表記されるものを上の画像は翻訳してます。

日本語でも検索できるのが嬉しい。

私は日本のフォトストックサービスは利用しない。
有料フォトストックサービスを見ると日本のサイトでも良質な写真が多く見られるのだが、フリーの写真だと中々これというものが見つからないからだ。

なので、基本的にいつも英語で検索をして写真素材を探しているのだが、
『FreePhotos.cc』は一応日本語で検索することもできるのが嬉しい点。

ちなみに全くの余談だが、「家」と検索してみると、こんな写真も出てきた。

無料写真素材をダウンロード

ドラマの「家売るオンナ」の画像ドドン。
へ〜こんな写真もあるのか〜

英語が不得意な人間にとっては、日本語検索ができるというのは大きなメリットではないだろうか。

ライセンスにだけ注意すれば魅力的な『FreePhotos.cc』

CC0とCCライセンスの写真が混ざっているところに注意が必要で、
写真が一覧表示された時点ではCC0なのかCCライセンスなのか、どちらの写真なのか見分けられないという点に少々不便さを感じるものの、
やっぱりシンプルで使い勝手は良いサイトだと思う。

くれぐれもライセンスだけには気をつけて
素敵な無料写真素材を見つけましょう。

0 comment
Share:
%e8%b6%85%e5%88%9d%e5%bf%83%e8%80%85%e3%81%a7%e3%82%82%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%a7%e7%b0%a1%e5%8d%98%e7%a7%bb%e8%bb%a2%ef%bc%81%e3%83%ad%e3%83%aa%e3%83%9d%e3%83%83%e3%83%97

WEBサイトの表示がめちゃめちゃ遅くって、とにかくストレスだったので、
表示速度をアップさせるため、過去様々なチャレンジをしてきた。(わかる範囲で)

当初よりはかなりマシになったものの、
やっぱり表示速度が満足いくまでのスピードには改善されなかったので、ついに意を決してサーバーをお引越ししてみた。

今回やったこと:ロリポップ→エックスサーバーへ引越し

これまでずっと有料レンタルサーバーはロリポップ!を使っていた。

価格の安さもあり使っている人が多いため、
ちょっとでも迷いやトラブルが起きた時に情報も探しやすく、サポート体制も整っており分からないことがあったらサポートに問い合わせメールを送るとかなり早く対応してもらえたので、
初心者にとってはとても使い勝手がよくて気に入っていた。

しかしながら、ページが増える・アクセス数が増えると共に速度の遅さが際立ってきてしまったので、この度サーバーのお引越しを決意。

引越し先に選んだのはエックスサーバー。
サーバーを比較する精神力がなかったので細かなところはチェックしていないのだが、
至る所でよくエックスサーバーという名前を見かけていたことと、ざっと見た感じ評判が良さそうだったので選んでみた。

紹介するのは、超超初心者向けのサーバー移転方法です

今回ロリポップからエックスサーバーへお引越しするにあたり、
とにかくググりまくって色んなサイトで移転のやり方と経験談を読み漁ってみた。

結果、残念なことに超初心者のあたしにはさっぱり意味が分からない。

WEBに通ずるみなさんには当たり前なところさえ、
あたしには理解が出来ず、読みながらフリーズしてしまうのだ。

サーバー移転の理想として

  • サイト移転中はみなさんには旧サーバーでサイトを観覧できる状態にしておいて(つまり引越し前のままの状態)
  • その間にささっと内容を新サーバー上に移す。
  • 全て新サーバーに移しおわったところで旧サーバーを削除し、新サーバーに切り替え

っていう流れができればいいな、とそのやり方を探しており、
先人たちが書かれている方法はこれを全て満たしてくれるやり方だったと思うのですが、
残念ながらあたしにはこの手順は理解できませんでしたので。

バッチリ移転完了→新サーバー切り替え
という理想の移転スタイルを諦めざるを得なかったわけですが、
なんとか無事に、そしてめっちゃ簡単にサーバーお引越しが完了できたので、そのやり方を覚書として記しておきたいと思う。

これからご紹介するのは、

  • FTP!?
  • MySQL!?
  • データベース!?
  • PHPMyAdmin!?

っていうレベルの人向けです。

上の通り、バッチリ移転完了→新サーバー切り替えというやり方ではありませんので、こちらのやり方で行う場合は自己責任にてお願いします。
クレーム受け付けれませんので悪しからず。

ロリポップ→エックスサーバーお引越しの手順(右も左も分からない超初心者向け)

①プラグインを使ってサイトデータを丸ごとエクスポート

まずは、「All-in-One WP Migration」というプラグインをインストール。
このプラグインは、投稿データ、固定ページデータ、プラグインやテーマのデータ、画像データ、とにかく丸ごとエクスポートができるプラグインです。

「All-in-One WP Migration」をインストールして有効化→「Export」をクリックすると、下のような画面が表示され、ブルーの文字の「Advanced options」をクリックすると、下の画像のようにチェック項目があらわれる。

エクスポートしたくない(しなくて良い)ものはチェックすることで除外できるので、選択。
あたしは、スパムコメントと投稿リビジョンは必要なかったので、上の二つにチェックを入れた。

チェックを入れ終わったら、一番下の緑の「EXPORT TO」というボタンをクリック→「FILE」をクリックするとエクスポートファイルが作られるので、完成したらダウンロードする。

②新サーバーを用意。新サーバーにワードプレスをインストールする。

今回あたしはエックスサーバーに申し込みをしました。ちなみにプランはx10。

エックスサーバーでの手順は省きますが、
移転したいドメイン(私の場合はこのtokyo-free.infoというやつですね)をエックスサーバーに登録し、
ワードプレスを自動インストールする。

③ネームサーバーを書き換え

ここからいよいよ通常の手順とは異なります。

新サーバーへワードプレスのインストールができたら、もうネームサーバーを書き換えてしまう。

あたしの場合、ドメインをムームードメインで取得しており、その独自ドメインをロリポップで運用していたため、
下記はムームードメインでのネームサーバーの設定変更手順です。

「ネームサーバー設定変更」を開くと『ロリポップ!レンタルサーバー』というところにチェックが入っていたのだが、
これを『GMOペパボ以外 のネームサーバを使用する』というところにチェックを移し、エックスサーバーのネームサーバーを設定する。
エックスサーバーのネームサーバーはこちら
(他サーバーはご自身でご確認をお願いします。)

ネームサーバーの書き換えには時間がかかることがあるのだが、
このブログは3時間近くかかったので結構長かった・・・

ネームサーバーの書き換え中は、ブログが今まで通り普通に表示される。

ネームサーバーの書き換えが終了すると、ブログが初期化された状態で表示されるので、
ブログが初期化状態で表示されるようになるまでこまめに確認をしておくと良い。

ムームードメイン記載情報によると、ネームサーバー書き換えには数日かかることもあるそうなのだが、
いくつかサーバー移転をしたものの、さすがに数日かかった事はない。

④サイト情報を新サーバーのワードプレスにインポートする。

ブログが初期化されたらダッシュボードにログインし、①で使った「All-in-One WP Migration」というプラグインをインストールする。
※ネームサーバーの書き換えで初期化されているので、先ほど入れたこのプラグインも消えているんですよ〜

インストールして有効化したら、今度は「Import」をクリック。

こんな画面が出てくるので、①でエクスポートしてダウンロードしたファイルをドラッグ。
(あたしはダウンロードしたものがPC下部に表示されるようになってるのでここからこのままドラッグしましたが、自分のエクスポートデータがどこに入っているかは自身で確認してください)

これで完了。

難しくて良く分からない工程は省きたいけど引越ししたい!

あたしはFTPソフトは持っているし、使った経験もある。
でも、正直得意ではないのであまりよく分からなくて使いたくなかった。

キャッシュが〜MySQLが〜FTPソフトで〜hostsファイルを〜
すごい先人たちのブログに並ぶ言葉はできる人からしたら当たり前でも、私にはいちいち思考停止する言葉ばかりで、
どうにかプラグインひとつでサクッと移転がしたい!と、ただそれだけの思いでこの手順で移転をしたのだ。

「危険だよ」と言われるやり方かも知れません。もしかしたら。

しかしながら、今回この手順で3サイト(このブログ含む)を移転完了させられたので、
超初心者なあたし的には、よくわからないことをして、失敗してパニックになるよりは、この方法がいいかなと思ってこのブログにも手順を書いてみた。

ちなみに、仮に。
仮に、エクスポートしたデータをインポートできないとかいう事態が起こったとしたら、ネームサーバーを元のものに戻せば大丈夫なはずなので、
旧サーバーからドメインを削除するのは、
④までの手順で完了させて、プレビューして、見た目や動作に問題ないことが確認できてからにするのが安全かと。

というわけで、超初心者でもロリポップからエックスサーバーへのサーバー移転がプラグインひとつで完了できますよ!
のお話でした。

0 comment
Share:
%e3%83%95%e3%82%a1%e3%83%93%e3%82%b3%e3%83%b3%e7%94%a8%e3%81%ae%e7%94%bb%e5%83%8f%e3%82%92%e7%b0%a1%e5%8d%98%e3%81%ab%e3%81%a4%e3%81%8f%e3%82%8c%e3%82%8b%e3%82%b5%e3%82%a4%e3%83%88

ファビコンを作りたい!!!

ファビコン(favicon)とは、
ブラウザ上のタブやお気に入り一覧で表示されるサイトのアイコンのこと。

ファビコン例

フェイスブックやグーグルのタブを見てもらうと、
ページタイトルの横に、なにやら見覚えのあるマーク。

これが、サイトのアイコン、ファビコン(favicon)!!

超絶簡単!ファビコンの作り方をご紹介

まずはファビコンにしたい、正方形の画像を用意する。

ファビコンは自身のサイトの目印になるため、ロゴをファビコンにしているサイトが多く見られるのだが、
タブに表示される時にはかなり小さなサイズになってしまうので、
オリジナリティーがあり、簡単でわかりやすい画像を使うのが良いのではないかと思う。

とりあえず今回、こんなファビコン画像を用意してみた。

東京フリーランスの頭文字をとって「TF」・・・た・・・たんじゅーんっ!爆!!

さて、自作して用意したこの画像はjpg画像なのだが、
ファビコンを表示させるには、ファビコンの形式(.ico)に変換しておく必要がある。

ファイルの変換は、
Favicon From Pics』というサイトを使うと、とっても簡単!

ファイルをアップロードしてダウンロードするだけで簡単に保存形式がファビコン形式の(.ico)に変換されている。
ダウンロードしたファイルはzipファイルなので、解凍しますよー!

ワードプレスサイトにファビコンを設定する方法

ファビコン用の画像が出来上がったら、お次はいよいよワードプレスにファビコンを設定。

プラグインFavicon Rotatorをインストールし、
ファビコン画像をアップロードして設定すればOK!

設定が完了すると・・・

こんな感じでこのサイトのファビコンが表示されるようになりました!!

わーい!
ファビコンがつくだけでなんかちゃんとしてるサイトっぽくないですか!!!るん♩

0 comment
Share:
web%e3%82%b5%e3%82%a4%e3%83%88%e8%a1%a8%e7%a4%ba%e3%81%ae%e9%ab%98%e9%80%9f%e5%8c%96%e3%80%82%e3%80%9c%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e3%82%ad%e3%83%a3%e3%83%83%e3%82%b7%e3%83%a5

前回の『PageSpeed Insights』での結果を受け、今回はブラウザキャッシュを活用すべきという修正点につい設定をしていこうと思う。

ブラウザのキャッシュを活用する

ブラウザのキャッシュの活用方法、一般的には「.htaccess」を設定する必要があるそう。

「.htaccess」は、強力な設定ファイルなため、この設定を誤ってしまうとサイトが不具合を起こしてしまいかねない超危険ファイル。
素人レベルのあたしのような者がこのファイルを触るのはとても危険で恐ろしいことで、
実際何度も失敗してOH MY GODな状態に陥った事がある。

ただ、ブラウザのキャッシュを活用する方法の設定自体は、「.htaccess」に少し追加をするだけと簡単そうだったので挑戦をしてみる。

「.htaccess」はあたしの使用しているロリポップの場合、
「WEBツール」→「ロリポップFTP」→設定したいサイト→「.htaccess」で書き換えることが可能。
(使用サーバーによって場所が違うと思います)

ブラウザのキャッシュを活用した後のサイト表示結果

設定完了後、再度『PageSpeed Insights』で解析を行ったところ、モバイル表示が38→40、パソコン表示が34→40まで改善されました。び…微妙…

パソコン表示から、修正すべき箇所としてブラウザキャッシュの項目が削除されたものの、
モバイル表示では、未だに修正すべき箇所としてブラウザキャッシュの項目が並ぶので、まだ改善する必要があるようだ。

50点切っているので、まだまだ高速表示させるための修正を続けていきたいと思う。

0 comment
Share:
web%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%81%8c%e7%89%a9%e5%87%84%e3%81%8f%e9%81%85%e3%81%84%e3%80%82%e3%80%8epagespeed-insights%e3%80%8f%e3%81%a7%e4%bf%ae%e6%ad%a3%e7%ae%87

メインWEBサイトの表示速度が遅すぎる。

メインで運営しているWEBサイトの表示速度が遅いんだという話を、
前回前々回させてもらいました。

前回は、対応策として、
[blogfard url=”http://tokyo-free.info/archives/292″]
画像最適化のプラグインを入れて対策を取ったわけです。

が。

やっぱり相変わらず遅いんです。

「ん?ネットの回線切れてる!?」とかちょっと不安になるほど遅い。

いろいろと表示速度やランクをはかることができるようですが、
実際にストップウォッチを使い、PCでの表示にかかる時間を計ってみました。ら。

なんと、サイト表示までに5.57秒もかかったのです。

サイトが表示されるまで5.57秒、激遅です。

表示速度が2秒遅いだけで50%も直帰率が上がってしまうと言われているので、
この表示速度の遅さはWEBサイト運営をするに当たっては物凄いダメージ。

自分で見るのにも遅くてイラっとするしね。

 PageSpeed Insightsを使ってWEBサイトコンテンツの解析をしてみた

そこで、今回は『PageSpeed Insights』というツールを使用し、
WEBサイトコンテンツの解析をしてみました。

『PageSpeed Insights』はサイトのURLを入力するだけで、ページの読み込み時間を短くするための方法を提案してくれるGoogle Developersのツールなのです。

早速やってみたところ、これがもう、なんとも散々たる結果であったのです・・・

これはモバイル表示での解析結果。なんと38点です。
赤点レベルです。

パソコン表示での結果は34点。もっと赤点レベルでした。

体感的に分かってはいたことだけど、うーん・・・・・・・・ショック!!!

しかし、『PageSpeed Insights』は、きちんと修正すべきポイントを教えてくれるので助かります。

 修正が必要なもの・修正を考慮した方が良いもの

今回修正が必要とされたのが、以下。

  1. 画像の最適化
  2. スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
  3. ブラウザのキャッシュを活用する
  4. サーバーの応答時間を短縮する
  5. 圧縮を有効にする
  6. 表示可能コンテンツの優先順位を決定する
  7. CSSを縮小する

 

6、7だけが修正考慮で後は全て修正すべき必要箇所でした。

 

次回は実際に修正作業に入りたいと思います。

0 comment
Share:
wordpress%e3%82%92%e9%ab%98%e9%80%9f%e5%8c%96%e3%81%99%e3%82%8b%e2%91%a1-%e3%80%9c%e7%94%bb%e5%83%8f%e3%82%92%e6%9c%80%e9%81%a9%e5%8c%96%e3%81%97%e3%81%a6%e8%a1%a8%e7%a4%ba%e9%80%9f%e5%ba%a6%e3%82%92

サイト表示速度を上げるため、まず着手したのが、画像を最適化すること。

GTmetrix」では、ページ速度を下げている原因がズラリとレポート表示されるのですが、
そこに表示された、サイト速度を遅くしている原因のひとつとして、画像がありました。

メインサイトではヴィジュアルもかなり重視しているため、
割と多めに画像を入れているのですね。

それなのに、画像対策って一切していなかったんです。

そりゃ重くなるわけです。

というわけで、有名なプラグインを導入してみることにしました。

[h2 text=’画像最適化プラグイン「EWWW Image Optimizer」’]

まずはじめに導入してみたのが、「EWWW Image Optimizer」というプラグイン。

これからアップロードする画像、そして過去にアップロードしていた画像も全てを圧縮できるのに、
画像が粗くなったりなどの劣化もないという神プラグイン。

[h3 text=’「EWWW Image Optimizer」の使い方’]

プラグインをインストールし有効化すれば、これからアップロードする際に画像を適正に圧縮してくれます。

で、これまでにアップロードした画像も圧縮したいので、
そちらをやってみます。

「メディア」に「Bulk Optimize」という項目があるので、そちらをクリックします。

その中の「Optimize media Library」という項目をクリックし、
「Start optimizing」というボタンをクリックすれば、メディア内の画像圧縮が開始されます。

今回試したサイトでは、2300枚近くの画像の圧縮があり、作業時間は1時間ちょっとでした。
メディア内の画像量によって作業時間が異なるのだと思います。

圧縮作業が全て終わるとFinishedと表示されます!

 

[h2 text=’画像圧縮「EWWW Image Optimize」使用後の表示速度’]

気になるのは、こちらのプラグインを使用し、画像を圧縮した後の表示速度に変化があったのかどうか。ですね。

前回グーグル・ヤフーどちらもC評価だったわけですが、
「EWWW Image Optimize」プラグインを有効化し過去画像も全て圧縮した結果、こうなりました。

サイト表示高速化

グーグル評価のPageSpeedがB評価へと1ランクアップされました。
Yslowは変わらずですね。

で、数値よりも気になる表示速度変化の体感ですが…個人的にはこれといった変化は見られませんでした。

「おっ、すっごくはやくなった!」みたいなのを期待してましたがね〜
ひとつのプラグインだけでそう簡単にはいきませんね。
(私のサイトの場合、他にも問題だらけでしたから)

とはいえ、画像を多く扱うサイトにとって画像圧縮はとても重要だと思うので、
是非このプラグイン使ってみてくださいね〜!
いろんなサイトで高評価されている優良プラグインですので♪

 

引き続き、あれやこれやしてサイトの表示速度を上げたいと思います!

0 comment
Share: