）対応した時の手順10

September 26, 2017, 5:00 pm

≫ Next: クリックひとつでサイト公開！「Wix」を使ってブログサイトを作った時の流れ

≪ Previous: 媒体資料（メディアガイド）を制作した時の手順【デザイン編】

さくらのサーバーでWordpressをSSL（https://）対応した時の手順10

今年10月からChromeでHTTP ページのフォームに「保護されていません」という警告が表示される

8月中旬に、Search Consoleから「Chrome のセキュリティ警告を示します」という件名のメールが届きました。どうやら、今年10月からChrome(バージョン 62)でテキストフォームに入力すると、「保護されていません」という警告が表示されてしまうとのことです。

「テキストフォーム」とは、ブログでいうところの「お問い合わせ」や「コメント」、「サイト内検索」にあたるフォームが該当します。さらに、メールには「長期的には、HTTP で配信されるすべてのページを『保護されていません』と明示することを計画しており、この新しい警告はその一環です。」とあるので、サイトをSSL(https:// )対応することは避けられない流れです。というわけで、10月を目前に、今まで先延ばしにしていたSSL(https:// )対応を実行することにしました。

1.CSRの作成

まずは、コントロールパネルから「公開鍵」と「秘密鍵」を作成し、それを元に「CSR」の作成を行います。「CSR」とはサーバー証明書を発行するために必要なもので、それは「公開鍵」と「秘密鍵」というふたつの情報をもとに作成されます。詳しくはさくらのサポート情報局の情報を引用します。

CSR（Certificate Signing Request）とは、SSLサーバ証明書を発行するための証明書署名要求のことです。 CSRには公開鍵の情報と、組織名や所在地等の情報（Distinguished Name＝識別名）が含まれており、認証局は提出されたCSRにサーバ認証機関の署名を行い、サーバ証明書として発行します。 CSRの作成 – さくらのサポート情報

というわけで、まずはさくらのサーバコントロールパネルへログインしましょう。コントロールパネルのサイドバー（下のほう）にある「ドメイン設定」をクリックすると、自分の管理しているドメイン一覧が表示されます。SSL対応したいドメインの証明書欄の「登録」をクリックします。

「秘密鍵を生成する」をクリック。

ここで、証明書認証局へ申請する情報を入力します。入力する項目は「ドメイン」「会社名」「国コード」「都道府県」「市町村」の5つです。ちなみに、「会社名」の部分はブログ名で構わないようです。入力できたら「CSRの作成」をクリック。

すると、作成したCSRが表示されるので、ここでテキストエリア内のCSRをコピーし、テキストエディタに貼り付けておきましょう。そして、「ラピッドSSL（有料サービス）のお申し込みへ進む」ボタンをクリック。

「サーバー証明書のお申し込み」をクリック。

2.SSLの申し込み

「オンラインサインアップ」のページにログインしましょう。ログインすると、申し込み画面が表示されるので、ここで「新規取得」を選択し、プランを選びます。私は「ラピッドSSL」を選びました。

支払い情報などを入力し、約款に同意すると、「CSR（証明書情報）の内容確認」ページに遷移するので、ここで先程コピーしておいたCSRをペーストし、「→」をクリックします。 CSRの情報が表示されるので、正しいことを確認して申し込み内容を確認しましょう。

申し込みが完了すると以下の画面が表示され、「お申込受付完了のお知らせ」というメールが届きます。これでサーバー証明書の申し込みができました。

3.認証ファイルをダウンロード＆fileauth.txtとしてアップロード

申し込みをしてから少し待つと「SSLサーバ証明書認証ファイルのアップロードについて」というメールが届くと思います。だいたい数十分など時間は人によってマチマチらしいのですが、私は2時間ほどかかりました。メールが届いたら、会員メニューにログインしましょう。グローバルナビの「契約情報」をクリックし、「契約サービスの確認」を選択すると、自分が契約しているサービスの一覧が表示されます。

認証ファイルをダウンロード＆fileauth.txtとしてアップロード（さくらサーバー）

契約しているSSLサービスの右側にある「サーバ証明書」をクリック。

「認証ファイルDL」をクリックし、認証ファイル（fileauth.txt）をダウンロードし、どこかに保存しましょう。

保存した認証ファイルを、以下の場所にアップロードします。

認証ファイルのアップロード先 http://申請したFQDN/.well-known/pki-validation/fileauth.txt または https://申請したFQDN/.well-known/pki-validation/fileauth.txt 【ラピッドSSL】オンラインサインアップからの申込手順 – さくらのサポート情報

「/.well-known/pki-validation/」のフォルダは自分で作ります。つまり、FTPソフトなどを使って初期フォルダ（/home/アカウント名/www）に「.well-known」というフォルダを作成し、その中に「pki-validation」というフォルダを作成し、その中にfileauth.txtをアップロードするということですね。 FTPの詳しい設定や構造は以下のページをご参照ください。ホームページの公開 – さくらのサポート情報ちなみに、この認証ファイルは30日以内にアップロードしなければならないので、この作業は早めにやってしまいましょう！

4.中間CA証明書をインストール

認証ファイルをアップロードすると、今度は「ジオトラスト SSLサーバ証明書発行のお知らせ」というメールが届きます。ちゃんとできたかヒヤヒヤしましたが、今回は30分ほどでメールが到着しました。メールが届いたら、メールに記載されている内容に従って認証局のサイトから中間CA証明書をコピーし、エディタに貼り付けて任意のファイル名で保存してください。 ※SSLのプランが「ジオトラスト　ラピッドSSL」の場合、コピー元URLは以下となります。中間CA証明書(ラピッドSSL用)ダウンロード(SHA-2)｜SSLサーバ証明書ジオトラスト中間CA証明書が用意できたら、サーバコントロールパネルへログインしましょう。「ドメイン設定」をクリックし、インストールするドメイン名の右側にある「登録」をクリックします。

「中間証明書のインストール」をクリック。

先ほどエディタで保存しておいた中間CA証明書をペーストし、「送信」をクリックします。これで中間CA証明書のインストールが完了。

5.証明書をインストール

中間CA証明書のインストールが終わったら、次はSSLサーバ証明書です。会員メニューにログインし、認証ファイルをダウンロードした時と同じ手順で「契約情報」→「契約サービスの確認」と進みます。契約しているSSLサービスの右側にある「サーバ証明書」をクリック。

「サーバ証明書DL」をクリックし、SSLサーバ証明書 (.crt)をダウンロードしましょう。

SSLサーバ証明書が用意できたら、再びサーバコントロールパネルへログイン。「ドメイン設定」→「登録」をクリックします。

「証明書のインストール」をクリック。

ダウンロードしたSSLサーバ証明書 (.crt)をテキストエディタで開き、コピーしてテキストエリアに貼り付け、「送信」をクリック。

インストールが完了すると、「SNISSLが利用可能です」と表示されるので、「ドメイン設定」からSSL設定を有効にしましょう。

6.SSL設定を有効にする

サーバコントロールパネルで、「ドメイン設定」→「変更」をクリックします。先ほどの流れからたどり着いた場合はそのままで。

ここは利用しているプランやSSLの種別によって選択項目が違うらしいので、詳しくはサポートページを参照してください。【ラピッドSSL】オンラインサインアップからの申込手順 – さくらのサポート情報さくらのレンタルサーバスタンダード・プレミアム・ビジネスの場合は「SNI SSLを利用する」を選択し「送信」をクリック。

「ドメイン詳細設定 - 完了」と表示されます。これで、SSLの設定が終わりました！

7.サイトが「https://」でも表示できるか確認

さっそく自分のサイトが「https://」で見れるかどうか確認してみましょう！どうやら、トップページは問題ないようです。

ですが、下層ページのスタイルシートが外れて表示が崩れていることが判明！ここから、Wordpressの細かい設定をしていきましょう。

8.さくらの「常時SSL化プラグイン」を有効化

SSL対応した直後は、先ほどの下層ページのcssが外れて表示が崩れる以外にも様々な事象が起きます。いずれも、慌てず「.htaccess」を修正したり管理画面からひとつずつ設定していけば解決できますが、さくらのレンタルサーバでWordpressのSSL対応をするなら、さくらの「常時SSL化プラグイン」をインストールする方法が簡単です。 ※こちらはさくらのレンタルサーバ、マネージドサーバ上でのみ動作するもので、さくらのVPS、クラウド、他社レンタルサーバでの動作はしません。まず、WordPressの管理画面へログイン後、「プラグイン」→「新規追加」を選択し、キーワード検索に「さくらのレンタルサーバ　簡単SSL化プラグイン」と入力しましょう。「SAKURA RS WP SSL」が表示されたら、有効化します。

SSL対応の設定は以下の3つの項目にチェックするだけです。これだけで、以下のようなSSL対応に必要な面倒な作業を全てプラグインが行ってくれます！

.htaccessを編集し、httpでのリクエストをすべてhttpsにリダイレクトする
Wordpressのサイト設定を変更し、管理画面のサイトのURLをhttpsに切り替える
投稿内の画像URLや投稿URLをhttpsに置換してくれる

有効化すると、いったん管理画面からログアウトされますが、再度ログインし、サイトを表示すると、https:// でもきちんとサイトが表示されているはずです。 SSLの種類などによってチェック項目が違うこともあるため、プラグインの詳しい説明や使い方はこちらからどうぞ。【WordPress】常時SSL化プラグインの使い方 – さくらのサポート情報

常時SSL化プラグインの注意点

とっても便利なさくらの常時SSL化プラグインですが、いくつか注意点があります。

PHPのバージョンが古いとプラグインが有効化できない

さくらの常時SSL化プラグインを有効化する際に以下のような画面になったら、使っているPHPバージョンが古い可能性があります。コントロールパネルからPHPのバージョンを新しいものに切り替えましょう。

サーバコントロールパネルで、「アプリケーション設定」から「PHPのバージョン選択」をクリックすると、現在使っているPHPのバージョンが表示されます。常時SSL化プラグインはPHPバージョン5.6、7.1で動作するので、該当するバージョンを選択しましょう。よくわからない場合は、「（推奨）」と記載されてあるバージョンを選択するのが確実でしょう。 ※ただし、この作業を行うと、他の部分に影響を及ぼす可能性があるので、十分注意して行ってください。

「変更」をクリック後、バージョンが切り替われば完了です。

PHPのバージョン切り替え後、プラグインがちゃんと有効化できたらOKです。サイトの表示や、他のプラグインなどに影響や異常がないかもチェックしましょう！

プラグインをいったん停止すると設定が初期化される

常時SSL化プラグインを停止すると、設定がすべて初期化されてしまいます。そのため、有効化するだけでなく、再度プラグインの設定をし直さなければなりません。 3つの項目にチェックを入れるだけなのでそこまでの手間ではありませんが、Wordpressの更新時などに少し面倒かもしれませんね。その他のトラブルについては以下のページに詳しく記載されています。【WordPress】常時SSL化プラグイントラブルシューティング – さくらのサポート情報

9. SSLエラー対応

URLバーの表示が以下のようにグレーの文字だった場合は、何かしらのエラーが出ています。落ち着いてひとつひとつの原因を探っていきましょう。

エラーはChromeのデベロッパーツールを開き、「Console」タブで確認するとエラーの一覧が見れて便利ですよ。

左側に鍵マークがつき、緑色の文字で「保護された通信」と表示されれば、SSLのエラーは出ていない証拠です。

10.SSL対応したらやっておきたいその他の作業

サイトがSSL対応できてひと安心…と思いきや、それだけではないんです。Google系のサービスの設定変更も一緒に済ませてしまいましょう。

Google Search Consoleの設定

「https://」のプロパティを追加

Search Consoleに現在登録されているのはSSL対応する前のURLなので、新規に「https://」のプロパティを追加する必要があります。 Search Consoleにログインし、「プロパティを追加」をクリックします。

SSL(https:// )対応後のGoogle Search Consoleの設定

「https:// 」から始まるURLを入力し、追加をクリック。すると、「（サイトURL）の所有権を確認します。」という画面が表示されます。画面内の指示通りにHTML確認ファイルをサーバーにアップロードし、「私はロボットではありません」にチェックして「確認」をクリック。

「（サイトURL）の所有権が確認されました。」と表示されればOKです。

XML サイトマップを送信

新規にプロパティを追加しただけでは検索エンジンにサイトがインデックスされないので、XMLサイトマップを送信しましょう。サイドバーの「クロール」から「サイトマップ」をクリック。

画面右上の「サイトマップの追加/テスト」をクリックすると、入力欄が表示されるので、サイトマップのファイル名（sitemap.xml ）を入力して「送信」。

「アイテムを送信しました。」とメッセージが出ればOKです。「ページを更新する。」をクリックすると、今回登録したサイトマップが表示されますよ。

「 Fetch as Google 」でクロールを依頼

サイトマップの送信までで一通りの作業は完了ですが、なるべく早くクローラーにインデックスしてほしい場合は、「 Fetch as Google 」を使いましょう。サイドバーの「クロール」から「 Fetch as Google 」をクリック。

クロールを依頼したいプロパティの URL をクリックし、PCを選択した状態で「取得」をクリックします。テキストボックスには何も入れずOKです。

下部に結果一覧が表示されるので、「インデックス登録をリクエスト」をクリックします。ステータスが「完了」になれば、PC版のクロールの依頼が完了です。

モバイル版もある場合は、「PC」を「モバイル：スマートフォン」にして先ほどの要領で「取得」をクリックすればOKです。この時、私の場合はモバイル版についてはステータスが「一時的にアクセスできません」となり、若干焦りましたが、おそらくプロパティを追加したばかりだったので色々とまだ準備ができてなかったのかもしれません。そのまま放っておいても数日経ったらインデックスが開始されるようになったらしいので、問題なかったのだと思います。

Google Analyticsの設定

Analyticsは再度プロパティを追加する必要はありませんが、設定からURLを「http:// 」から「https:// 」に変更する必要があります。まず、左下の歯車アイコンをクリックして設定画面を開き、「プロパティ設定」をクリックしましょう。

「デフォルトのURL 」を「 https:// 」に変更し、「保存」をクリック。

同じ要領で、設定画面の一覧ページに戻り、今度は「ビュー設定」をクリック。

「ウェブサイトの URL 」を「 https:// 」に変更し、「保存」をクリック。これで、Analyticsの設定は完了です。簡単ですね！

Google Search ConsoleとGoogle Analyticsの関連付け

必須というわけではないけれど、忘れがちなのはこの作業ではないでしょうか。Analyticsで検索クエリなどのデータを見たい時は、「Search Console」と連携している必要があります。管理画面から「プロパティ設定」を開き、下のほうにある「Search Consoleを調整」をクリック。

すでにSearch Consoleと関連付けされている場合は、URLが記載されているので、その右側の「編集」をクリックします。

Search Consoleのページに飛ぶので、「リンクされているサイト：(URL)」の横の「削除」をクリックし、関連付けを解除します。

その後、Analyticsの管理画面に戻り、「Search Console の設定」からもう一度「編集」をクリックすると、再びSearch Consoleのページに飛びます。今度は「https://」のURLが選べるようになっているので、ラジオボタンにチェックをつけた後「保存」をクリックします。

これで、AnalyticsとSearch Console関連付けできるようになりました！

さいごに

SSL（https://）対応は緊張して精神力を使った面もあり、個人的には「かなり面倒だった」というのが正直な感想ですが、一度やってしまえば「保護された通信」と出るので安心感があるし、何より気が楽です。はてブなどのシェア数が消えてしまうのは少し寂しかったですけどね。まだ中にはエラーが残っているページもあると思いますが、徐々に対応していこうと思っています。最後になりましたが、SSL対応をしたことで、ブログのURLが「https://designcolor-web.com/」になったので、お気に入りやブックマークなどに登録していただいている方がいたら、変更していただければと思います。また、何か不具合等があった場合は教えていただけると助かります！以上、彩でした！

↧

クリックひとつでサイト公開！「Wix」を使ってブログサイトを作った時の流れ

October 23, 2017, 5:30 pm

≫ Next: Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法

≪ Previous: さくらのサーバーでWordPressをSSL（https://）対応した時の手順10

「Wix（ウィックス）」とは？

「Wix（ウィックス）」とはhtmlやプログラミングの知識がなくても簡単にWebサイトを作れる無料ホームページ作成ツールです。オンラインサービスなのでPCにインストールする必要もなく、ドラッグ＆ドロップで直感的にサイトデザインの編集ができます。

Wix

今では「自分のホームページを持つ」という事はごく一般的となりましたが、知識のない状態でいざ作ろうとするとかなり大変ですよね…。デザインを作って、コーディングして、サーバーを借りて、ドメインを取得して、FTPでサイトをアップロードして…。CMSを使う場合はインストールから諸々の設定まで、最近ではモバイル対応はもちろん、SSL（https://）やAMP対応も必要になってきます。こう書き出してみると、プロでもかなりの労力を要しますね…。このように、ゼロからWebサイトを作るのはなかなか手間がかかりますが、それを”全て”自動でやってくれるツールがあったならどうでしょう？たとえ初心者じゃなくても、興味が湧いてきませんか？というわけで、次からは実際にWixを使ってブログサイトを作り、使用感や制作のポイントなどをレビューしていきたいと思います！

ブログサイト作成の流れ

1. アカウント作成

まずは「アカウント作成」。メールアドレス以外にFacebookやGoogle+でも登録することが可能です。

アカウントを作成してログインするとすぐに「どんなホームページを作成しますか？」と聞かれます。話が早くていいですね！いくつかテンプレートを見てみましょう。

2. テンプレート選び

Wixの驚くべきは何と言ってもテンプレートの豊富さです。美容系、飲食系、ビジネス系、ブログ系何でもござれ。

仮に、もし理想のデザインのテンプレートがなかったとしても、「白紙テンプレート」を選べば、自分でデザインを作ることが可能です。

サムネイルにカーソルをあて、「表示」を選ぶとテンプレートの中身が確認できます。すぐにカスタマイズに取り掛かりたい場合は「編集」を押せばOK。

[caption id="attachment_9949" align="aligncenter" width="800"]

「美容サロン」テンプレートの中身（スマホ/PC）[/caption] また、先ほどの画面でサムネイル左下の「詳細」をクリックすると、どんな人にオススメか教えてくれる親切設計。 [caption id="attachment_9950" align="aligncenter" width="800"]

「美容サロン」テンプレートの詳細[/caption] 今回、私は写真のブログサイトを作ろうと思っているので、「ブログ」カテゴリーのテンプレートをチェック。写真ブログ専用のテンプレートは複数ありますが、今回はこちらのテンプレートに決めました！テンプレート上部の「このサイトを編集」をクリックすると、すぐにデザインを編集できます。

3. デザインを編集

編集画面はこんな感じ。要素をクリックすると、その要素に対して何ができるのかが表示されます。まずはヘッダーイメージを変更っと。

またも驚かされるのはデフォルトで選べるイメージ素材の豊富さです！何を選択してもカッコよくできそうですね。動画背景なんてのもあります。今風！

ですが、私はあえて手持ちの写真で勝負したいと思います。このテンプレートが「山」にフォーカスした写真ブログなので、私は最近ハマっている「滝」にフォーカスしてみますよ！というわけで写真をアップロード。

アップロードしてみたものの、自分の拙い写真だとテンプレートのようにカッコよくならない…と凹んでいたところ、なんと画像編集機能を発見。Photoshopを使わなくても、こんなこともオンラインでできちゃうんですね…。これなら、私の写真も少しはInstagramのようにオシャレにみせられるはず！

背景の差し替え完了。ついでにタイトルも変更します。「girl」って歳でもないですが、テンプレートのタイトル「Mountain Man」に対抗してみましたよ。

4. ブログを管理

デザインが編集できたら、今度は記事を投稿してみましょう。ブログの管理からブログ編集画面へ移動できます。

使い方はいたってシンプル。一般的なブログツールと基本的な操作は一緒です。さっそく新しい記事を作ってみましょう。

地味に嬉しかったのは、アップロードした写真をフォルダで管理できることですね！便利。

そのほか、予約投稿やSEO対策など、基本的なことは全てできます！htmlの挿入もできるので、Googleマップの埋め込みなんかも簡単にできました。

5. モバイル表示をチェック

モバイル版の表示もチェックしてみましょう。右上のアイコンから簡単にモバイル表示を確認できます。

モバイル対応してるってことは、レスポンシブなのかなーと勝手に考えてたんですが、テンプレートを切り替えてるみたいですね。何もしなくてもちゃんと綺麗に整っているので、少しの微調整でいけます。

また、必要に応じて、ハンバーガーメニューの色やデザインを変更できたり、「トップへ戻る」ボタンなどのパーツも追加できます。かゆいところに手が届く感じですね！

6. サイトを公開

モバイル対応ができたら、いよいよサイトを公開。 URLは任意で決めることができますが、自分のユーザー名が最初にくる仕様になっているので、設定したいURLに応じてユーザー名も考える必要がありますね。なお、有料プランで独自ドメインを設定することも可能です。サイト名を決めたら、「今すぐ公開」をクリック。

ワンクリックで公開できてしまいました！出来上がったサンプルサイトをどうぞ見てみて下さい！

サンプルサイト「Waterfall Girl」

実際に使ってみて感じたことなど

必要最低限のことはすべて無料＆自動でできる！

先ほどの制作過程でも触れましたが、モバイル対応はもちろんのこと、先日私がかなり苦しんだサイトのSSL対応なんてのも、デフォルトで対応してくれているのが大変嬉しいです。ちなみに、そういったサイトについての設定は、以下の「サイトを管理」という画面から行います。

また、AMP対応もワンクリックでできるようです。これも、私が以前にWordpressで実装するのにかなり苦労した部分。ワンクリックで…できるなんて…。

なお、Google アナリティクスについては有料プランで導入可能のようですが、ブログの管理画面の中に「インサイト」というアクセス解析機能があったので、無料プランでも簡易的なアクセス解析は使えるようです。

「アプリ」で様々な機能を追加

WixはWordpressの「プラグイン」のように、「アプリ」を追加することで、様々な機能を使えるようになります。

たとえば、「Wix SEO Wiz」というアプリを使えば、「SEOってなに？」という人でも、最適な数でキーワードを設定できたり、検索結果で上位表示させるためのチェックリストを作ってもらえます。

他にも、お問い合わせフォームはもちろんオンライン予約やショッピングカート機能なども使えるようです。すごい…！

さらに作り込むことも可能

クリックやドラッグ＆ドロップだけで基本的な見た目を変更することができますが、更にこだわりたい人はボタンのホバー効果やページ遷移のアニメーションなどを加えることも可能です。パララックスなどのスクロールエフェクトもワンクリックで実装できてしまうのだから驚き。

テンプレートをオシャレにカスタマイズするには知識が必要かも

誰でも直感的にテンプレートを編集できるものの、元のオシャレ感を保ったままカスタマイズするにはデザインの知識が多少なりとも必要かもしれないと感じました。例えば、制作を進めるうちに、どうしても以下のような作業にも気を配る必要が出てきます。

情報整理
写真選び・加工
フォント選び
テキスト調整

というのも、ブログを実際に作ってみて実感しましたが、画像やテキストを手持ちの素材と入れ替えただけでは、テンプレートのようにカッコよくならないんですよね…。写真の雰囲気や色味もある程度統一させる必要があるし、テキスト量などもきちんと考慮しないとレイアウト崩れを引き起こすことがあります。

また、海外製のテンプレートを選んでしまうと、いざ英語の部分を日本語に入れ替えた時に違和感が出ることもあります。日本語フォントについてはデフォルトで選べるのが以下の5通りのみとなり、デザインの時に少し物足りなく感じるかもしれません。

MSゴシック
MS明朝
MS Pゴシック
MS P明朝
メイリオ

ただそのあたりは、手持ちのフォントをアップロードできるため、Webフォントとして使うことでカバーできそうですが、Webフォントはライセンス表記の問題もあるので、導入に注意が必要です。

もし自分でデザインするのが難しい場合には、テンプレートを自分で選択し、その上でカスタマイズをプロに依頼するという方法もアリだと思います！

無料プランではサイト上下にWixの広告が表示される

気になれなければ問題ないですが、無料プランではサイトの上下にWixの広告が表示されます。ただし、有料プラン（コンボ：¥841/月〜）に切り替えれば消すことが可能なので、本格的な運用を考えている人は「コンボプラン」以上がオススメです。ちなみに、プラン一覧は以下をご参照ください。料金やクーポン、プレミアムアップグレードについて | WIX

Wix間の引っ越しはできるが外部に移転はできない

注意点として、サイトを移転したい時はWix間であれば引っ越し可能ですが、外部のサーバーにエクスポートはできません。例えば、記事をある程度書きためた段階で他のブログサービスに移行しようとしてもできないので、そのあたりはサイトを作る前に考慮する必要があります。

さいごに

先日このブログのSSL対応をした時に、それだけで一日がかりの作業になってしまい、かなり疲れました。知識があれば自分の好きなようにデザインしたり、最適な環境を整えることが可能ですが、それには割と「労力」が必要なんですよね。その点Wixを使えば、そういった手間のかかる部分は全てワンクリックで実現できます。初心者はもちろんのこと、Web製作者にとっても大変助けになるツールだと感じました。「速く・簡単に自分でサイトを作りたい」、または「低予算でサイト制作を依頼したい」などの場合にはピッタリなので、機会があれば試してみてはいかがでしょうか。

↧

Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法

November 27, 2017, 5:00 pm

≫ Next: ゴッホを取り上げた映画・小説・展示会が続々公開！それぞれの特徴や見どころを紹介

≪ Previous: クリックひとつでサイト公開！「Wix」を使ってブログサイトを作った時の流れ

Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法

スマートニュース（SmartNews）風の表示とは

「スマートニュース（SmartNews）」とはスマートフォン用のニュースアプリです。巷では略して「スマニュー」なんて呼ばれています。読み込みが速いため、いつも情報収集にお世話になっているアプリですが、レイアウトも見やすいんですよね。縦だけでなく、2〜3列で横並びになったりと見た目に変化があって記事が見つけやすいんです。スマートニュース（SmartNews）画面

SmartNews ただ、この見た目をfloatやdisplay: inline-block;で実装しようとするとかなり面倒…と思っていたそんな時、柔軟に対応できるFlexboxの存在を知りました。次からは、Flexboxを使った実装方法をお伝えしていきますよ！

Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法

以下が実装用のコードです。「CSS」のタブをクリックして確認してみてください。

See the Pen Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する by 彩 (@maritime_color) on CodePen.

実装のポイント

親要素にdisplay: flex;とflex-wrap: wrap;を指定する

実装のキモはやっぱりFlexbox！親要素であるulタグにdisplay: flex;を指定しましょう。さらに、並びを複数行にわたって配置するために、flex-wrap: wrap;も併せて指定してください。 [css] display: flex; flex-wrap: wrap; [/css]

:nth-child()で表示を切り替える

:nth-child()を使って要素の順番によってwidthやborderの有無などのcssを切り替え、デザインに変化を与えます。 :nth-child()で表示を切り替える

ここでは1〜2個めは2つ並び、3〜5個めは3つ並び、6つめ以降は縦並びというようにcssを指定しています。 [css] /* —————— 1〜2個め（2つ並び） —————— */ li:nth-child(-n+2){ width: 50%; } /* ------------ 3〜5個め（3つ並び） ------------ */ li:nth-child(n+3):nth-child(-n+5){ width: 33%; border-top: 1px solid #ddd; } li:nth-child(n+3):nth-child(-n+5) p{ /* 行数が多くなるため4行で省略 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } /* ------------ 6個め以降（縦並び） ------------ */ li:nth-child(n+6){ border-top: 1px solid #ddd; } li:nth-child(n+6) a{ display: flex; } li:nth-child(n+6) .image{ width: 30%; margin: 0 8px 0 0; } li:nth-child(n+6) p{ flex: 1; } [/css]

数が足りない時はflex-grow: 1;で要素の幅を伸ばす

今回のサンプルでは7つの記事を一覧で表示させていますが、例えば記事が7つに満たなかった場合も大丈夫！flex-grow: 1;を指定すれば、スペースが余っても要素の幅を伸ばすことが可能なんです！子要素（liタグ）に以下の一行を足せばOK！ [css] flex-grow: 1; /* 要素の数が足りない時に幅を伸ばす */ [/css] 数が足りない時はflex-grow: 1;で要素の幅を伸ばす

-webkit-line-clampで行数を調整

こちらは必須ではありませんが、見た目の調整のために！以下のように3列表示にした場合、スマホだと文字の折り返しが多くなって高さが出すぎてしまうので、途中でテキストを省略したくなりますよね。 -webkit-line-clampで行数を調整

そんな時は-webkit-line-clampを使って指定した行にクランプ文字（...）を付与してみましょう。ここでは4行で省略するために「4」を指定していますが、任意の数字に変えてOKです。さらに、overflow: hidden;ではみ出した部分を非表示にすれば完成です！ [css] /* 行数が多くなるため4行で省略 */ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; [/css] -webkit-line-clampは、IEやEdge、Firefoxに対応していないため、PCでの使用にはまだ向いていないかもしれませんが、ChromeやiOS Safari、Android Browserなどには対応しているので、スマホサイトでの導入であれば問題ないと思います。 -webkit-line-clampのブラウザ対応状況

Can I use... Support tables for HTML5, CSS3, etc

さいごに

いかがでしたか？私がFlexboxを初めて実務で使ったのがこのスマートニュース（SmartNews）風の表示方法でした。それまではfloatばかり使って要素を並べていたのですが、Flexboxを使ってみてこんなに簡単に実現できるのかと感動したのをお覚えています。最近では、要素を横並びにする時は、柔軟に対応できるFlexboxを主に使うようになりました。まだ勉強の最中ですが、今後もFlexboxを使って色々なことができたら楽しいなと思います。以上、彩でした！

↧

ゴッホを取り上げた映画・小説・展示会が続々公開！それぞれの特徴や見どころを紹介

December 17, 2017, 5:00 pm

≫ Next: 無料で大規模Webサイトが作れる！Wixの新機能「Wix Code」を紹介【データベース作成編】

≪ Previous: Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法

ゴッホを取り上げた映画・小説・展示会が続々公開！それぞれの特徴や見どころを紹介

映画「ゴッホ～最期の手紙～」

なんと、全コマ油絵で制作されたというゴッホの生涯を描いたアニメーション映画。2016年のゴッホ記事でも紹介しましたが、ようやく今年11月に公開されました。アーティストたちによる62,450枚ものゴッホの絵画がスクリーン上で動き出す様はまさに圧巻です！

ゴッホはなぜ死んだのか？ゴッホの死の真相を探るアートサスペンス

[caption id="attachment_10082" align="aligncenter" width="800"] 映画「ゴッホ～最期の手紙～」のワンシーン

映画のワンシーン（引用元：映画『ゴッホ～最期の手紙～』日本版予告編 - YouTube）[/caption] この映画のもうひとつの特色は、ゴッホを描いた映画でありながらゴッホが不在であるということ。主人公はゴッホではなく、ゴッホが親しくしていた郵便配達人の息子アルマン・ルーラン。弟のテオ宛に書いたゴッホの手紙を届けるため奔走するアルマンが、やがてゴッホの死の真相に迫っていくというストーリーです。緊張感があり引き込まれるサスペンスなので、ゴッホファンはもちろん、ゴッホやその作品についてよく知らない人でも楽しめる内容となっているはず。

[caption id="attachment_10083" align="aligncenter" width="500"]

ゴッホ「アルマン・ルーランの肖像」[/caption] [caption id="attachment_10084" align="aligncenter" width="550"]

映画のワンシーン（引用元：映画『ゴッホ～最期の手紙～』日本版予告編 - YouTube）[/caption]

詳しい情報は公式サイトをご参照ください！ゴッホ～最期の手紙～

展示会「ゴッホ展巡りゆく日本の夢」

日本人はゴッホが大好きなことで有名ですが、ゴッホも生前、日本に深く魅了されていたことをご存知でしょうか？日本美術に多大な影響を受けたゴッホは、日本について書かれた小説を愛読したり、特に浮世絵版画に関しては自身もコレクションしていたほどの日本好きだったのです。

ゴッホの絵からわかる浮世絵との共通点とは

現在開催中の展示会「ゴッホ展巡りゆく日本の夢」では、ゴッホが浮世絵からどのように影響を受け、どのように作品に盛り込んでいったのかを、構図や色彩の観点から多角的に解説しています。さらに、第2部では多くの日本人がゴッホが最期の時を過ごした「オーヴェール」につめかけた当時の資料などが公開されています。「聖地巡礼」って、当時からあったんですね…こちらも興味深かったです。

[caption id="attachment_10086" align="aligncenter" width="500"]

ゴッホ「日本趣味：雨の大橋」[/caption] [caption id="attachment_10087" align="aligncenter" width="500"]

歌川広重「大はしあたけの夕立(夏の部)」[/caption]

開催概要

東京での展示会は1月8日（月）までと、かなり迫っております。足を運ぶ方はお早めにどうぞ！また、京都展は1月20日（土）から開催予定です！

期間：2017年10月24日(火) 〜 2018年1月8日(月・祝)
休館日：月曜日、12月31日(日)、1月1日(月・祝) ※ただし、1月8日(月・祝)は開室
入場料（当日）：一般 1,600円 / 大学生・専門学校生 1,300円 / 高校生 800円 / 65歳以上 1,000円
会場：東京都美術館
公式サイト：http://gogh-japan.jp/

小説「たゆたえども沈まず」

「楽園のカンヴァス」や「暗幕のゲルニカ」などのアート小説の先駆けとして知られる原田マハが書いたゴッホの小説。弟テオとゴッホの純粋な絆をはじめ、ゴッホが深く魅了された浮世絵のこと、そのきっかけを作った一人の日本人画商「林忠正」の存在を明らかにしています。個人的にはこの小説を読んだ後に展示会「ゴッホ展巡りゆく日本の夢」に足を運ぶと、より日本や浮世絵へのゴッホの想いが伝わってくるのでオススメです！歴史や作品の予習にもなりますしね。また、本の帯文にはなんと1枚で2名まで使えるゴッホ展の100円割引券がついてきますよ！小説「たゆたえども沈まず」についてくる展示会「ゴッホ展巡りゆく日本の夢」の100円割引券

小説「たゆたえども沈まず」についてくる展示会「ゴッホ展巡りゆく日本の夢」の100円割引券

切なすぎる兄弟の絆と天才画家「フィンセント・ファン・ゴッホ」誕生に関わるひとりの日本人画商

この小説も映画「ゴッホ～最期の手紙～」のように、ゴッホの視点ではなく、ゴッホの弟テオや林忠正の助手である重吉の視点から語られています。そのため、ゴッホの人間性や彼が画家としていかに天才だったのかをより客観的に知ることができます。自画像ではいつも眉間にシワを寄せて気難しそうな顔をしているゴッホですが、小説の中では感情豊かで人間臭く、実に活き活きと描かれているので、個人的にはぜひその点に注目してほしいです。

[caption id="attachment_10090" align="aligncenter" width="500"]

ゴッホ「包帯をした自画像」[/caption] [caption id="attachment_10091" align="aligncenter" width="500"]

ゴッホ「渦巻く青い背景の中の自画像」[/caption]

今でこそ「天才」の名を欲しいままにしているゴッホですが、生前は全く無名の画家なので、端から見るとかなりの「ダメ人間」なんですよね。転職を繰り返し、経済面では弟に依存し、そのくせ弟の仕送りの金を自分の酒代に替えてしまうという…。ですが、そんなゴッホがただひとつ、何があっても決してやめないことがありました。それは芸術を愛すること。世間に認められずくすぶり続けても、常にどんな絵を描きたいか、そのためにはどうしたらいいかを考えています。「ダメな人だな」と思う反面、「こんなにダメな人なのに、なんでこんなにいつも一生懸命でいられるんだろう」と思います。 [caption id="attachment_10092" align="aligncenter" width="800"]

ゴッホ「星月夜」[/caption] 何か大事を成そうとして、上手くいく人なんてほんの一握りです。皆、一生懸命やっている中でも無意識にどこかで限界を作ったり、妥協してしまったりするのではないかと思います。つまずき、傷つきながらも自分が死を迎える最期の日まで、常に全力を出し切れる人は、世の中にどれだけいるのでしょうか。私にはそれこそが、天才を天才たらしめる不可欠な要素に思えてなりません。この作品のもう一人の天才である日本人画商「林忠正」も、どんな困難にぶつかっても、日本美術を世界中に広めるという信念を全力で貫いています。林忠正と違って不器用なゴッホは何をやってもいつも上手くいきません。ですが、誰よりも純粋で、絵を描くことに関しては誰よりもひたむきで、誰よりも弟のことを愛しています。そんな彼のことを、誰も、どうしても嫌いにはなれないのではないかと思うのです。長くなりましたが、とにかく必読の一作です！

たゆたえども沈まず (幻冬舎単行本)

posted with amazlet at 17.12.17

幻冬舎 (2017-10-24)
売り上げランキング: 949

Amazon.co.jpで詳細を見る

さいごに

映画・小説・展示会と各方面からクローズアップされたゴッホ。少しでも興味をもってもらえたらいいなと思います。以上、彩がお伝えしました！

↧

無料で大規模Webサイトが作れる！Wixの新機能「Wix Code」を紹介【データベース作成編】

January 29, 2018, 5:00 pm

≫ Next: いつまでに何が必要？不妊治療の助成を受けるためのやることリスト＆気をつけるべきポイント

≪ Previous: ゴッホを取り上げた映画・小説・展示会が続々公開！それぞれの特徴や見どころを紹介

Wix Codeとは

簡単操作で手軽にWebサイトが公開できる「Wix」ですが、今までは手動でコンテンツを流し込むだけの「静的」なWebサイトしか作成できませんでした。それゆえに、今までWixを使って作れるものは「必要最低限のホームページ」だったと言えます。それだけでも無料で作れるのは驚くべきですが、今回追加された新機能「Wix Code」を使えば、より充実したコンテンツを扱う「動的」なWebサイトを作れるようになります。例えば、今までは1ページずつ手動で流し混んでいた商品情報などのコンテンツを、「Wix Code」を使えばデータベースとして一元管理することができます。データベースとテンプレートを連携させることで全商品の情報ページを自動で生成できるようになるため、多くの情報を取り扱う大規模なWebサイトも作成可能です。

「Wix Code」でできること

「Wix Code」には大きく分けて5つの機能があります。

1. データベースコレクション

サイトのコンテンツをデータベースとして管理できる機能。テンプレートと連携し、データベース上の情報を好きな場所に表示することができる。データ量の制限はなし。

2. 動的ページ

データベース上の情報を呼び出し、コンテンツページを動的に作成することができる機能。作成されたページは個別のURLを持ち、SEOにも対応している。

3. カスタム入力フォーム

ドラッグ＆ドロップで簡単に入力フォームを作成でき、ユーザーが入力した情報をデータベースに保存することができる機能。チェックボックスのオン・オフに応じて動作を変えたり、入力漏れがある場合はエラーを表示させるなど入力フォームの機能を充実化させることも可能。

4. カスタムインタラクション

ホバーやクリックなどのユーザーの動作に応じて、ページにスライドやトグルなどの動きや表示の変化を加えられる機能。Javascriptが分からなくてもワンクリックで設定できる。

5. API

自分でコンソール画面にJavaScriptコードを記入してページに動きを加えたり、外部APIと接続できる機能。この機能のみ使用にコーディングの知識が必要となるが、例えば天気予報を取得してサイトに表示させたりなど様々なことができるようになる。このように、「Wix Code」には多くの機能があります。詳しくは以下の公式サイトやブログ記事が参考になります。

Wix Code新登場 : コーディングの力で限りない拡張性を実現する新ツール｜Wix公式ブログ Wix Code - Advanced Web Application Development | Wix.com

Wix Codeの使い方【データベース作成編】

今回はWix Codeの機能のひとつ「データベースコレクション」についてご紹介したいと思います。以前にサンプルとして作った滝の写真ブログ「Waterfall Girl」を使い、滝のデータベースを作ってみます。

「Wix Code」を使うには

データベースを作る前に、Wix Codeはデフォルトでは「機能オフ」の状態になっているため、まずは機能をオンにしてみましょう。 Wixの編集画面トップにあるメニューバーから、「ツール」を選択するとポップアップメニューが表示されます。その中の「デベロッパーツール」という項目にチェック。これで、Wix Codeの機能が使えるようになりました！「Wix Code」をデベロッパーツールからオンにする

データベースを作成

デベロッパーツールをオンにすると、画面左に「サイト構成」というメニューが表示されるので、この中から「Database」という項目を選択します。「Add new collection」をクリックしてみましょう。 Wix Codeでデータベースを作成

「作成をはじめる」をクリック。 Wix Codeでデータベースを作成

ここで、データベースの名前を決めます。私は滝のデータベースを作るため、名前を「Waterfall」にしました。 Wix Codeでデータベースを作成

ちなみに、その下の「Site Content」とはデータベースのアクセス権限のこと。「Site Content」は、その名の通りサイトのコンテンツなので、アクセス権限の内容は「設定：管理者のみ / 閲覧：誰でも」ということになります。 Wix Codeでデータベースを作成

他にも「Form Input（入力：誰でも / 閲覧：管理者のみ）」や「User-Generated Content（設定：サイトメンバーのみ / 閲覧：誰でも）」など、アクセス権限には様々なパターンがあるので、用途に応じて最適な権限を設定しましょう。また、アクセス権限は後からでも変更可能です。 Wix Codeでデータベースを作成

英語ですが、以下のページにアクセス権限の表が掲載されているので、詳しく知りたい方はこちらをご参照ください。 About Collection Permissions | Help Center | Wix.com

データベースの項目を設定

データベースの設定ができると、以下のような画面が表示されます。なんだかExcelの表みたいですね。ここで、データベースを作成していきますよ。 Wix Codeでデータベースの項目を設定

「Title」というカラムがデフォルトで設定されています。これはデータベースの項目のことです。 Wix Codeでデータベースの項目を設定

データベースを作成する時には、どの項目が必要かあらかじめ書き出しておくとスムーズに作成できます。例えば、今回作りたいデータベースの項目はザックリ書き出すと以下のようになります。

滝名
都道府県
市町村
住所
URL
滝の画像
滝幅
落差

というわけで、項目の名前を私のデータベースで言うところの「滝名」に変えてみます。「Title」にカーソルを合わせると右側にアイコンが表示されるので、そのあたりをクリック。 Wix Codeでデータベースの項目を設定

「Edit Properties」を選択します。 Wix Codeでデータベースの項目を設定

項目の名前を変えましょう。名前が決まったら「Update」をクリックします。 Wix Codeでデータベースの項目を設定

データベースの記念すべき1カラム目が作成できました！この調子で他の項目も作成していきましょう。項目を追加するにはカラムの右横の「＋」をクリックします。 Wix Codeでデータベースの項目を設定

データの型について

ここで、データの「型」について触れておきます。たとえば先ほど作成した項目は、データの型は「Text（テキスト）」となっています。これはデータの中身がテキストデータ（文字情報）であるということです。 Wix Code　データの型について

データベースを取り扱う際には、データの中身が何なのかをあらかじめ設定しておく必要があります。デフォルトでは「Text（テキスト）」となっていますが、中にはそうでないものもあります。たとえば、私が作成したいデータベースの中には「滝の画像」や「滝幅」、「落差」などがあります。これらのデータの型はテキストではなく、「Image Source（画像）」や「Number（数値）」となるので、そのように項目を設定する必要があります。方法は簡単。項目設定の際に「Data Type」をクリックします。データの型が画像の場合は、「Image Source」を、数値の場合は「Number」を選択します。 Wix Code　データの型について

※型は後からでも変更できます。

データの入力

ひととおり項目が作成できたら、いよいよデータを入力していきましょう。データはカラムをダブルクリックで入力することができます。 Wix Codeでデータの入力

データの型が画像の場合は、入力時にカラム中央に「+」が表示されます。 Wix Codeでデータの入力

クリックすると、画像の選択画面が表示されます。私の場合はすでに画像を何枚かアップロード済みでしたが、新たに画像をアップロードすることも可能です。データベースに入力したい画像を選択しましょう。 Wix Codeでデータの入力

カラムに画像が表示されました。カーソルを合わせると画像の詳細を見ることができます。 Wix Codeでデータの入力

ようやく一行全ての情報を入力できました。もうひとつ新しい行を追加するにはレコード下の「＋」をクリックしましょう。 Wix Codeでデータの入力

完成したデータベースがこちらです。基本的にUIが英語なので少々とっつきにくいですが、操作はExcelのようにわかりやすいため、行の追加だけでなく削除や挿入、ソートなども簡単にできますよ。 Wix Codeで作成したデータベース

さいごに

いかがでしたか？面倒なデータの管理も、Wix Codeでデータベースを作れば楽になるのではないでしょうか。先述したようにデータ量の制限がないため、本格的なデータベースを作ることもできそうですね。次回は、作成したデータベースの情報を新しいページに表示させる「動的ページ」について紹介していきたいと思います。以上、彩がお送りしました！

その他のWix関連の記事

クリックひとつでサイト公開！「Wix」を使ってブログサイトを作った時の流れ

↧

いつまでに何が必要？不妊治療の助成を受けるためのやることリスト＆気をつけるべきポイント

February 26, 2018, 5:00 pm

≫ Next: もうイヤだ！遅い旧型iMacを外付けSSDでサクサク動かす方法【買い替え不要】

≪ Previous: 無料で大規模Webサイトが作れる！Wixの新機能「Wix Code」を紹介【データベース作成編】

特定不妊治療助成制度とは

不妊治療とは「不妊症」を改善するための治療のことです。具体的にはタイミング療法や人工授精など様々な治療法がありますが、今回紹介する「特定不妊治療」とは「体外受精」と「顕微授精」、それと「男性不妊治療」のことを指します。この特定不妊治療にはとてもお金がかかります。病院によりますが、大体1回の治療にかかる費用が30〜60万ほどになってしまうのです。そういった夫婦の負担を軽減するための制度が「特定不妊治療助成制度」です。助成金額は治療1回につき15万円まで（初回のみ30万円まで）。助成を受けられる回数については年齢によって異なります。対象となる治療範囲など、詳しくは詳しくは各都道府県の公式サイトを確認してくださいね。

助成制度を使える「指定医療機関」について

「助成を受けよう！」と書類を揃える前に、自分の通っているクリニックが「指定医療機関」かどうかをチェックしておきましょう。指定医療機関とはその名の通り不妊治療の助成制度を使うことのできる病院やクリニックのことです。私はクリニックを何度か移りましたが、大体どこのクリニックも指定医療機関だった記憶があります。私が通ったクリニックが、すべて体外受精や顕微授精まで実施している所だったからかもしれません。指定医療機関の一覧は以下のページでチェックできます。不妊に悩む方への特定治療支援事業　指定医療機関一覧｜厚生労働省

都道府県の不妊治療助成制度

都道府県の実施している助成を受けるために、必要なものをまとめました。地域によって若干異なる点があるかもしれません。

助成を受けるために必要なもの

特定不妊治療費助成申請書（申請の回数分必要）
特定不妊治療受診等証明書（申請の回数分必要 / 病院に書いてもらう）
領収書（原本）
住民票（3ヶ月以内）
戸籍謄本（3ヶ月以内）
住民税課税（非課税）証明書（原本）
振込先の通帳（キャッシュカード）のコピー
口座振替依頼書（2回め以降はいらない）

申請期限

基本は治療が終了した日の属する年度内(3月31日)まで。ですが、3月にも治療を受けるなどして書類の提出が間に合わないという場合は、特例として保健所などの申請窓口へ年度内(3月31日)に連絡すれば、年度を越えても申請できる場合があります。ただし、この対応は都道府県によって変わってくるらしいので、詳しくは一度保健所などの申請窓口に問い合わせてみましょう。

1月と3月に治療を受けた場合（千葉県）

例えば、千葉県は特例の場合は5月31日まで申請が可能です。その場合は以下のような流れになります。

1月分の治療の助成に必要な書類をいったん揃えて3月31日までに申請
申請窓口に間に合わない旨を連絡し、3月分の治療の助成に必要な書類を揃えて5月31日までに申請

市区町村ごとの不妊治療助成制度

都道府県の助成制度に上乗せするなど、市区町村ごとに独自で実施している助成制度もあります。利用できる方は都道府県の助成と併せてこちらも利用したいですね。ただし、市区町村ごとの助成制度については、制度の有無や金額などもバラバラなので、それぞれの自治体のHPで確認する必要があります。以下のサイトが市町村ごとの助成金についての情報を紹介してくださっているので大変参考になりますよ！不妊治療助成金は、地域で違う？知らないと損する助成制度 | 妊活ナビ.com

助成を受けるために必要なもの（松戸市）

以下に備忘録と一例を兼ねて「千葉県の助成制度に加えて松戸市の助成も受ける場合」の申請に必要な書類を載せておきます。

松戸市特定不妊治療費助成金支給申請書（「特定不妊治療費助成承認決定通知書」の枚数分必要）
同意書
特定不妊治療受診等証明書のコピー
特定不妊治療費助成承認決定通知書のコピー
振込先の通帳（キャッシュカード）のコピー

申請期限

千葉県より送付された「特定不妊治療費助成承認決定通知書」の発行日から1年以内違う場合の内容については松戸市の公式サイトを参照してくださいね！特定不妊治療費助成を行います　まつどDE子育て｜松戸市

助成を受けるためのやることリスト

来年から手順を忘れないように、申請にあたって私が行った作業をリストアップしておきます。

1. 自分の通っている病院が「指定医療機関」かどうか確認

まず自分の通っているクリニックが助成制度を受ける対象かどうかを確認します。これは初めて助成を受ける時というより、クリニックを決める段階でチェックしました。

2. 書類一式を公式サイトからダウンロード・印刷

自分が助成の対象かどうかがわかったら、さっそく書類一式を集めます。書類は保健所でも配布されていますが、公式サイトからダウンロードするのが早いですね。

3. 特定不妊治療費助成申請書に記入する

こちらは自分で記入する書類です。名前や住所・過去の受給歴など。

4. クリニックに特定不妊治療受診等証明書を書いてもらう

こちらは自分の通っているクリニックで書いてもらう書類です。助成を申請する治療の回数分書いてもらいましょう（例えば1月と3月に受けた治療分をそれぞれ申請したい場合は2枚書いてもらう）。ちなみに、この書類の作成は有料です。作成にかかる料金や時間はクリニックによって異なります。また、私の住んでいる地域では、県と市の助成申請の両方でこの書類が必要なので、この時点で証明書のコピーをとっておきました。

5. 領収書を揃える

領収書も添付する必要があるので、クリニックでもらった領収書は大切に保管しておきましょう。助成の対象とならない領収書でも、医療費控除で使えますしね！

6. 役所に戸籍謄本や住民票・住民税課税（非課税）証明書を取りに行く

役所や各支所で各種書類を申請しましょう。最近では住民票はマイナンバーカードがあればコンビニでも取得できるみたいですね。私の住んでいる地域では、戸籍謄本に関しては必ず必要なのは初回だけで、2回目以降は住民票で婚姻関係が確認できる場合は必要ないようです。

7. 通帳（キャッシュカード）のコピーを取る

振込先の通帳やキャッシュカードのコピーを取ります。私は市の申請でも必要だったのでコピーを2枚取りました。

8. 全書類を封筒に入れて申請

すべての書類がそろったら封筒に入れて、いざ申請です。申請方法は、郵送だったり申請窓口へ提出だったりと地域によって異なるようです。私の住んでいる地域では保健所に来所して申請する必要がありました。その際は念のため印鑑を持参しましょう。押印し忘れなどがあったとしてもその場で直せますしね。

経験してみて感じた気をつけるべきポイント

助成額が大きい「初回」の申請をいつにするかは自分で決められる

不妊治療の助成金は、初回のみ申請額が30万と大きいのが特徴です。しかも、その「初回」というのは必ずしも実際の初回の治療でなければならないわけではありません。自分でいつの治療分を「初回」として申請するか決められるのです。ただし、初回の助成を受けた後に、さかのぼって初回以前の治療分を申請することはできないようなので、注意しましょう。

申請するなら満額助成される時に

不妊治療の助成額は「治療ステージ」というものに左右され、中でもステージC・Fの場合は7.5万までとなっています。せっかく15万まで助成が受けられるのに7.5万までしか助成されないのはもったいないですよね（しかも初回なら助成額は30万！）。なので、申請するならばステージCやFのときではなく、なるべく満額受け取れるステージA・B・D・Eの際に利用した方がお得（？）ではないかなと思います。ですが、不妊治療が長引くとも限りませんし、このあたりの判断はケースバイケースかもしれません。

できるなら申請は年度末にまとめる

以上の話から、いつの治療分を申請するのかをギリギリまで見極めるという意味でも、申請は年度末にまとめて行ったほうが効率がいいと思います。申請をまとめれば住民票などの書類も一部でいいし、クリニックに書いてもらう書類もまとめて作成してもらえます。 ※地域によって書類の扱いが違うかもしれないので、詳しくは申請窓口に確認してみてください

年度をまたいで申請する場合は住民票や住民税課税（非課税）証明書のコピーは利用できない

私の住んでいる地域では、年度内ならば住民票や住民税課税（非課税）証明書（発行から3ヶ月以内）は新たに取得する必要はなくコピーでOKらしいのですが、年度をまたいでしまうとコピーは不可で原本が必要となるようです。なので、申請の年度またぎが確定している場合は住民票や住民税課税（非課税）証明書をあらかじめ2枚ずつ取得しておくと手間が省けます。 ※地域によって書類の扱いが違うかもしれないので、詳しくは申請窓口に確認してみてください

忘れずに！医療費控除の書き方

恐らく不妊治療の助成を受ける方なら医療費控除も申請すると思います。不妊治療の助成金を受け取る場合は、実際に助成された金額は除いて医療費控除を申請する必要があるのです。とはいえ、私はいつも2月〜3月とギリギリのタイミングで申請するので、まだ助成金額が確定していない場合があります。その場合は助成されるであろう見込み額を補填金の欄に記入しておきましょう。

さいごに

ここ数年は、ずっとWebやデザイン系の記事のみを書くことにしていましたが、今年からはこういったWeb系以外の記事も書いていこうと思います。本当はブログを別に立ち上げてそちらに書いたほうがいいのかもしれませんが、ひとまずは今のブログでやってみることにしました。自分が仕事だけでなく普段の生活でも「困った」という時に、そういった様々なことをアウトプットできるブログ。それが同じような誰かのためになればいいな、という気持ちで今後もブログを続けていこうと思います。以上、彩がお伝えしました！

↧

もうイヤだ！遅い旧型iMacを外付けSSDでサクサク動かす方法【買い替え不要】

March 26, 2018, 5:30 pm

≫ Next: データベースから自動でページ作成！Wixの新機能「Wix Code」を紹介【動的ページ作成編】

≪ Previous: いつまでに何が必要？不妊治療の助成を受けるためのやることリスト＆気をつけるべきポイント

私のPCのスペック

私の使用しているiMacのスペックです。2013年のモデルですが、買ったのは2015年くらいだったと思いますので、OSはYosemiteでした。買ってすぐに新しいモデルが出ちゃったパターンですかね…。

モデル：iMac Late 2013
画面サイズ：21.5インチ
CPU：2.7GHzクアッドコアIntel Core i5プロセッサ
メモリ：8GB（4GB x 2）
ストレージ：1TB（5,400rpm）ハードドライブ
グラフィックス：Intel Iris Pro 1536 MB

Appleからではなくヨドバシカメラのオンラインストアで購入したので、何もカスタマイズされていない標準モデルといったところ。恥ずかしながら、MacはおろかPCのスペックというものに対して全く知識がない自分は、「そんなに大した作業をするわけじゃないし、カスタマイズしなくてもきっと大丈夫」という訳のわからない自信のもとに購入に踏み切ってしまいました。そうしたら…起動した瞬間から処理が遅いのなんの…。どのアプリを使おうとしてもなかなか起動しないどころか、レインボーカーソルが常にグルグル回ってとにかくストレス。「こんなもんなのかな…」と半ば諦めながら使ってきましたが、さすがにもう限界を感じ、本格的に対策を練ろうと思いました。

ほとんど同じ状況の方の記事を見つけた！

買い替えもひとつの手段ですが、高いし…ということで、別の方法はないのかとあれこれ調べるうちに、「外付けSSD」なるものの存在を知りました。なんだかよくわからないけど、これを使えばPCが速くなるそうな。だがどうやって…。すると、私とほとんど同じ状況の方の記事を発見！「外付けSSDにOSをインストールして起動ディスクにする」という意味がこの記事を読んでようやく理解できました。ありがとうございます！

【iMac】外付けSSD起動にして爆速になりました。

さっそく参考にさせていただいたところ、なんと半ば諦めていた私のiMacも爆速に！！

iMacを外付けSSDで起動させる方法

外付けSSDを用意

今回お世話になった外付けSSDはこちらです。手のひらよりも小さくて場所を取りません。

SanDisk エクストリーム500 ポータブルSSD500GB [国内正規品] SDSSDEXT-500G-J25

posted with amazlet at 18.03.11

サンディスク (2017-05-19)
売り上げランキング: 15,618

Amazon.co.jpで詳細を見る

実は、選んだきっかけは以前に読んだ以下のベーコンさんの記事です。記事中の「最強を買いたい人はこれ」というSSDに憧れていましたw他にも色々なSSDを紹介してくださっていますよ！

iMacや音楽制作でも使えるレベル！おすすめ外付けSSDジャンル別に紹介 - ベーコンさんの世界ブログ

買おうとした当時Amazonに在庫がなかったため、同じSanDiskのSSD（500GB）を購入しました。他にも250GBと1TBのモデルがあります。

SSDをフォーマット

まずはSSDをMacで読み込める形にフォーマットします。というわけで、「ディスクユーティリティ」を起動しましょう。画面が開いたら左上にあるアイコンをクリックし、「すべてのデバイスを表示」を選択します。「ディスクユーティリティ」でSSDをフォーマット

サイドバーからフォーマットしたいSSDを選択し、「消去」をクリック。「ディスクユーティリティ」でSSDをフォーマット

すると、「◯◯を消去しますか？」ときかれるので、各項目を入力しましょう。名前は自分がわかれば何でも構いませんが、フォーマットは「Mac OS拡張（ジャーナリング）」、方式は「GUIDパーティションマップ」を選択します。「ディスクユーティリティ」でSSDをフォーマット

選択したら右下の「消去」ボタンをクリック。以下のような表示が出たら「完了」をクリックします。「ディスクユーティリティ」でSSDをフォーマット

選択した方式でボリュームが作成できていれば、フォーマット完了です！「ディスクユーティリティ」でSSDをフォーマット

OSをダウンロード

AppStoreで最新のOSをダウンロードします。現時点では「macOS High Sierra」ですね！

macOS High Sierra - Apple（日本）

SSDにOSをインストール

OSのダウンロードが完了すると、インストーラが自動的に開きます。

同意して次へ。

「すべてのディスクを表示」をクリックします。外付けSSDにmacOSをインストール

すると、PCに接続されているディスク一覧が表示されるので、インストールしたいSSDを選択し、「インストール」をクリック。外付けSSDにmacOSをインストール

パスワードを入力。

すると、SSDにインストールが開始されます。このまましばらく待ってインストールが終了するのを待ちましょう。外付けSSDにmacOSをインストール

SSDにデータを移動

ここからは画像なしでご紹介。インストールが終了すると、「ようこそ」というMacおなじみの初期設定画面が表示されるので、画面の指示通りに進めていきます。途中で移行アシスタントの設定が始まります。ここで内蔵HDDまたはTime Machineから外付けSSDへデータを転送できます。移行元のデータ量が移行先の容量より大きい場合などは、「今は情報を転送しない」を選択し、あとで必要なデータのみ選んで移動することもできるようです。私はこの時点で内蔵HDDから外付けSSDへごっそりデータを転送しました。

無事起動できたら完了！

データ量にもよりますが、データの転送にはめっちゃ時間がかかりました…。外付けSSDからMacが起動できれば作業は終了です。お疲れ様でした！

結果としてどれだけ早くなったの？

外付けSSDから起動するようになって、体感的にはものすごく快適になりました。まるでPCを新調したかのような気分です。例えば、今まではアプリを立ち上げる時はDockでアイコンが何度もバウンドしていたのに、外付けSSDを起動ディスクにしてからは数回のバウンドでスッとアプリが開けるようになったんです！今までの私のイライラは何だったんでしょうか。言葉ではうまく伝えられないこの喜びを数値で表現するべく、読み書き速度を測定できるアプリ「Blackmagic Disk Speed Test」を使ってみようと思います。

Blackmagic Disk Speed Test
カテゴリ: ビデオ, ユーティリティ

まずは内蔵HDDのスピードから。こういう数値には全く詳しくないんですが、1秒間に38MBくらいの読み書きができる…？ということは、約2GBのPhotoshopを起動するのに大体50秒くらいかかるということでしょうか（違ったらゴメンナサイ）。たしかにそれくらいかかってたような…。「Blackmagic Disk Speed Test」で効果測定

次に、外付けSSDの結果。なんだか明らかに数値が大きくなっています！こちらは読み込み速度のほうが数値が大きいんですね。間をとって300MB/sくらいとすると、大体2GBのPhotoshopを立ち上げるのに…7秒くらい！そうなんです。実際に時間を測ったわけではありませんが、以前は起動中にコーヒーでも入れてくるか…というレベルだったPhotoshopの起動が、本当に数秒になったんですよ（感涙）！！「Blackmagic Disk Speed Test」で効果測定

非常にザックリとでしたが、どのくらいPCがサクサク動くようになったのか分かっていただけたでしょうか？とにかく、「やってよかった！」の一言です。むしろもっと早くこうすればよかった！！

さいごに

いかがでしたか？次からはさすがに私も気をつけてPCを購入すると思いますが、もし私のようにうっかり遅いMacを買ってしまい、イライラしている方がいたらお役に立てれば幸いです。以上、彩がお伝えしました！

↧

データベースから自動でページ作成！Wixの新機能「Wix Code」を紹介【動的ページ作成編】

April 23, 2018, 5:00 pm

≫ Next: Search Consoleで「インデックスカバレッジ」の問題が発生→Fetch as Googleで解決までの手順

≪ Previous: もうイヤだ！遅い旧型iMacを外付けSSDでサクサク動かす方法【買い替え不要】

サンドボックスデータをライブデータと同期

データベースのデータは、すぐにサイト上で使えるわけではありません。出来上がったデータベースの上部を見てみると「Sandbox」「Live」というふたつの項目があります。 Wixでサンドボックスデータをライブデータと同期

Sandboxは「サンドボックスデータ」といい、公開する前のテストデータのようなものです。サイト上で使えるデータとして反映させるには、「Live（ライブデータ）」にコピーしてあげる必要があります。以下の通り、まだライブデータは使えません。 Wixでサンドボックスデータをライブデータと同期

ライブデータにデータベースが反映させるには、画面右上の「公開」をクリックします。 Wixでサンドボックスデータをライブデータと同期

「Live」に切り替えると、何やらデータベースが反映されていますが、「サンドボックスのデータを同期してください」というダイアログが出ています。サイト上でデータベースが使えるようになりましたが、このままではまだデータベースの中身は同期されていないようです。 Wixでサンドボックスデータをライブデータと同期

データを同期させるためにはデータベースの上の「Sync」をクリックします。 Wixでサンドボックスデータをライブデータと同期

すると、選択項目が表示されるので、「Copy all items to Live」を選び、「Sync」をクリック。 Wixでサンドボックスデータをライブデータと同期

もう一度「Live」に切り替えると、今度はデータベースの中身もきちんと同期されています！ Wixでサンドボックスデータをライブデータと同期

動的ページの作成

URLを決める

いよいよ、データベースの情報を使って動的ページを作成します！まずは左サイドバーから「Database」という項目を探しましょう。作成したデータベースの右側にあるアイコンをクリックし、「Add a Dynamic Page」を選択。 Wixで動的ページの作成

動的ページのタイプを選択します。各データごとの単一ページ（Item Page）を作成するか、カテゴリーごとに分けられたページ（Category Page）を作成するかが選べます。今回は「Item Page」を選択。 Wixで動的ページの作成

動的ページのURLを作成することができます。デフォルトでは「/データベース名/データの名前/」となっていますが、この末尾の部分はデータベースの他の項目に変更することができます。「Add Field」をクリックすると項目一覧が表示されます。 Wixで動的ページの作成

今回は「データの名前（滝の名前）」のままにしましたが、現実的に運用することを考えたら同じ名前の滝が複数あったりするので、そういった場合はURLの末尾は「ID」などにしたほうがいいのかもしれませんね。 Wixで動的ページの作成

また、URLは直接編集することもできますよ。URLが決まったら、右下の「Create Page」をクリック。 Wixで動的ページの作成

動的ページとデータベースを連携させる

動的ページが作成できると、以下のような編集画面になります。 Wixで動的ページの作成

左サイドバーに動的ページの項目が生成されていますね。 Wixで動的ページの作成

さっそく編集画面で動的ページのデザインを作っていきましょう。まずはタイトルを配置します。画面左側のメニューアイコンの中から「追加」をクリックし、「テキスト」の中から好きなデザインのタイトルを選んで画面上にドラッグ＆ドロッグ。 Wixで動的ページの作成

タイトルを適当な場所に配置できたら、右上の「データに接続」アイコンをクリックします。すると、「テキストを接続」というダイアログが表示されます。「Connect Dataset」はデータベースをひとつしか作っていなければひとつしか選べませんので、そのままでOK。 Wixで動的ページの作成

「テキストの接続先」をクリックすると、データベースの項目一覧が表示されます。タイトルにはデータベースの「滝名」と連携させたいので、「Waterfall Name」を選択。 Wixで動的ページの作成

連携が完了すると、アイコンの色が緑色に変わります！ Wixで動的ページの作成

果たしてちゃんと表示されるでしょうか…！画面右上の「プレビュー」をクリックし、確認してみましょう。 Wixで動的ページの作成

ちゃんと滝名が表示されていますね！これでデータベースとの連携ができました。簡単ですね！ Wixで動的ページの作成

この調子で編集画面でデザインを作りつつ、画像やボタンなど他の要素にもデータベースと連携させていきましょう。 Wixで動的ページの作成

できあがった動的ページがこちらです！文章や画像など、ひとつひとつの要素がデータベースからデータを読み込んで表示されています。 Wixで動的ページの作成

別の動的ページを表示させるには画面右上のページャーをクリックします。 Wixで動的ページの作成

画面右上の「公開」をクリックして動的ページを公開しましょう。作ったものをサイト上に反映させるにはいつでもこの作業が必要です。 Wixで動的ページの作成

以上で動的ページが作成できました！ Wixで動的ページの作成

公開されたページのURLは、ちゃんと先ほど設定した「/データベース名」/データの名前/」になっていますね。 Wixで動的ページの作成

ここまで作った動的ページのサンプルはこちらです。動的ページサンプル

動的ページへの誘導リンク（リスト）を作成

動的ページはできましたが、この状態では動的ページへの誘導リンクがないため直接URLを入力しないと見ることができません。というわけで、誘導リンクとなる「滝リスト」を作ってみます！画面左上の「ページ：サイト名」をクリックし、１番下の「ページを管理」を選択します。 Wixで動的ページへの誘導リンク（リスト）を作成

「サイトメニュー」に移動。ここで新しいページを作ったり、削除したり、または非表示にしたりなどのページの管理ができます。今回は新しいページを作るので、「ページを追加」を選択。他のテンプレートをコピーしたければ各メニューの右側のアイコン（…）をクリックし、「複製」でもOKです。 Wixで動的ページへの誘導リンク（リスト）を作成

ページに任意の名前をつけます。 Wixで動的ページへの誘導リンク（リスト）を作成

すると、新しいページが作成されました。ちゃんと先ほど付けた名前でリンクも生成されています。ここからまた先ほどのようにデザインを作っていきますよ。 Wixで動的ページへの誘導リンク（リスト）を作成

とりあえずページタイトルを変更。 Wixで動的ページへの誘導リンク（リスト）を作成

次に、リストの作成です。左側のアイコンから「追加」をクリックし、「リスト＆グリッド」を選択します。これはコンテンツを繰り返し同じレイアウトで表示できるパーツで、色々なデザインが用意されています。パーツが決まったら画面上にドラッグ＆ドロップ。 Wixで動的ページへの誘導リンク（リスト）を作成

今回はこちらのパーツを元にしてデザインを作ります！ Wixで動的ページへの誘導リンク（リスト）を作成

まずは動的ページと同じようにタイトルを変更し、滝の名前を表示させてみます。データベースのアイコンをクリックしましょう。 Wixで動的ページへの誘導リンク（リスト）を作成

「データセットを作成」をクリックし、連携させたいデータベースを選択。 Wixで動的ページへの誘導リンク（リスト）を作成

「テキストの接続先」に、表示させたい項目を選びます。今回は滝の名前なので「Waterfall Name」と。 Wixで動的ページへの誘導リンク（リスト）を作成

連携できたらアイコンが緑色になります。さっきと同じですね！ Wixで動的ページへの誘導リンク（リスト）を作成

さて、画面右上の「プレビュー」をクリックして、表示を確認してみましょう。 alt="Wixで動的ページへの誘導リンク（リスト）を作成"

タイトルのところだけ滝の名前になっているのがわかりますね！ Wixで動的ページへの誘導リンク（リスト）を作成

この調子で動的ページの時と同じように、他の要素にもデータベースと連携させながらデザインを作っていきましょう！ Wixで動的ページへの誘導リンク（リスト）を作成

出来上がったリストがこちらです！元のデザインよりシンプルになりました。 Wixで動的ページへの誘導リンク（リスト）を作成

仕上げに画面右上の「公開」をクリックしたら、完成です。 alt="Wixで動的ページへの誘導リンク（リスト）を作成"

これで動的ページへの誘導リンクができました！ Wixで動的ページへの誘導リンク（リスト）を作成

出来上がった誘導リンクのサンプルは以下となります。参考にどうぞ！誘導リンクサンプル

さいごに

いかがでしたか？データベースとの連携や、誘導リンクの設置は自分でやるとデータベースに接続して、変数に格納して…とかなり面倒ですが、Wix Codeを使えばクリックの作業だけで出来てしまうので楽ちんですね。以上、彩がお送りしました！

その他のWix関連の記事

↧

Search Consoleで「インデックスカバレッジ」の問題が発生→Fetch as Googleで解決までの手順

June 25, 2018, 5:30 pm

≫ Next: コーディング速度を上げる！Webサービス・ジェネレーターなどの便利ツール7

≪ Previous: データベースから自動でページ作成！Wixの新機能「Wix Code」を紹介【動的ページ作成編】

Search Consoleからの通知メール

Search Consoleから届いたメールは以下のようなもの。「送信されたURLにnoindexタグが追加されています」とあります。何かのURLにnoindexタグが入っていたので、Googleさんが情報を読みに行けなかったようです。とりあえず、「Search Consoleを使用してインデックスカバレッジ件の問題を修正」というボタンを押してみることに。 Search Consoleからの「インデックスカバレッジ」エラー通知メール

Search Consoleのインデックスカバレッジ画面

Search Consoleの「インデックスカバレッジ」ページに飛ぶと、何やら数日前からエラーが1件出ているのがわかりますね。 Search Consoleのインデックスカバレッジ画面

下にスクロールすると、どうやら以前に書いた記事にエラーが出ているようです。 Search Consoleのインデックスカバレッジ画面

ちなみに該当の記事はこちら。 Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法 | Design Color

そもそもnoindexとは

noindexとはGoogleの検索結果に表示されないようにする設定のことです。metaタグに以下のように記載することで、クローラーに「このページは読みにこなくて結構です」と教えてあげるわけですね。

<meta name="robots" content="noindex">

そういう設定があるならば、エラーではないのでは？と思いますよね…。ですが、おそらくエラーが出たということは、「XMLサイトマップは送信されているのにも関わらず」という点がポイントになってくると思います。

XMLサイトマップとは

XMLサイトマップとはサイト内のURLや更新日などを集約させたファイルで、クローラーがサイトを読み取るための地図のような働きをします。基本的にWordpressでもなんでも、ひとつ記事を書いたら自動的にXMLサイトマップに情報が追加されてGoogleへ送信されるため、クローラーはそれを頼りにサイトへ情報を読み取りにきます。ここでもし、クローラーが読み取りにきた記事にnoindexがついていたならば、「XMLサイトマップには情報があったのに、いざクローラーが読み取りにきたらnoindexだった」という矛盾した状況になってしまいますよね。なので、もし記事にnoindexをつけたなら、XMLサイトマップからはその記事を除外するという手順を踏む必要があるのです。 XMLサイトマップとnoindexの矛盾のしくみ

【だがしかし】記事にnoindexをつけた覚えはない

自身でnoindexをつけた覚えがあるならば、XMLサイトマップからページを削除すれば解決ですが、今回のケースはそうもいきません。なぜなら、私は書いた記事をnoindexにしていないのです。実際に、該当ページのソースを確認してみても、やはりnoindexはついていませんでした。 noindexの記述がないソースコード

とりあえずひとつひとつ原因を探ろう

robots.txtを確認

エラーが出ている該当URLをクリックすると、右にバーが現れます。ここで原因を探っていくことに。「ROBOTS.TXTによるブロックをテスト」を押してrobots.txtの状態を見てみましょう。

noindexの他に検索結果に表示させないようにするには、robots.txtに記載するという方法もあります。noindexは「インデックスをしなくていい」という設定ですが、robots.txtの設定はもっと拒否の度合いが強く、「クローラーのアクセス自体を拒否する」時に使います。ですが、こんなところにそんな設定を書くはずもなく…、robots.txtにエラーは出ていないようです。 robots.txtを確認

検索結果を確認

次に3番目の「検索結果として表示」を押してみます。

すると、何やらおかしい。検索結果に該当のURLの情報が何も表示されません。どうしてこうなったのかは不明ですが、Googleからエラーが出ていたのは恐らくこれが原因のようです。 XMLサイトマップで送信されているのに、せっかく書いた記事が検索結果に表示されていないのは問題ですね。

Fetch as Googleで再クロールしてもらおう

noindexの記述がなく、サイト側に原因がないのであれば、解決方法としては「再クロールしてもらう」という手段が挙げられます。さっそく、右サイドバーの「FETCH AS GOOGLE」をクリックしましょう。

クリックするとFetch as Googleのページに飛びます。クロールしてほしいURLを入力しましょう。

プルダウンから呼び出すGooglebotの種類を選択し、「取得」をクリック。「取得してレンダリング」でもOKですが、こちらは少し時間がかかります。「取得してレンダリング」のほうではGooglebotからの見え方とブラウザでの見え方を確認できたり、取得できなかったリソース一覧を表示してくれたりします。 FETCH AS GOOGLE「取得」

ちなみに、呼び出すGooglebotの種類は、通常は「PC」を選択するそうですが、私は一応「PC」と「モバイル：スマートフォン」両方とも取得しました。取得が完了したら、ステータスの右側に「インデックス登録をリクエスト」というボタンが表示されるので、クリック。

ポップアップが表示されるので、「このURLのみをクロールする」を選択して送信します。（「私はロボットではありません」にチェックを入れるのをお忘れなく！）

ちなみに、「このURLと直接リンクをクロールする」を選択すると、指定したURLとそのURL上に掲載されたすべてのリンクをクロールします。通常はトップページなどで利用されるそうです。また、それぞれの送信できる数には上限があるので、早くクロールしてほしいからといって送信しすぎないよう注意しましょう。

この URL のみをクロールする：1日につき10件まで
このURLと直接リンクをクロールする：1日につき2件まで

インデックスされるのを待とう

インデックスを送信できたら、最後にエラー画面に戻り、「修正を検証」ボタンを押します。

すると、ステータスが「検証：開始」になり、Googleから「『インデックスカバレッジ』の問題を検証しています」という件名のメールが届きます。

あとはもう早くクロールされてページに間違いがないことを分かってもらえることを待つのみ。

後日メールが届いたら完了

数日すると、問題が修正された旨を知らせるメールが届きます。私の場合は3日で問題が修正されたようです。やってみれば、なんてことはないんですね。「インデックスカバレッジ」問題が修正された旨を知らせるメール

さいごに

いままでに何回かSearch Consoleのメールで飛び上がって手探りで修正してきましたが、イマイチきちんとひとつひとつ理解してこなかったので今回は勉強になりました。もし、自分と同じようにnoindexなんかつけた覚えないけど…という人の役に立てればいいなーと思います。以上、彩でした！

↧

コーディング速度を上げる！Webサービス・ジェネレーターなどの便利ツール7

July 3, 2018, 5:00 pm

≫ Next: さくらのサーバーでシマンテックのSSLサーバ証明書を再発行した時の手順6

≪ Previous: Search Consoleで「インデックスカバレッジ」の問題が発生→Fetch as Googleで解決までの手順

1. Font-familyの選定「Font-familyメーカー」

Windows・Mac・iOSの標準フォントの一覧が見れて、ドラッグ＆ドロップで自分で組み合わせて好きなFont-fammilyが作れるWebサービスです！全部に共通してインストールされてるのはどれだろうとか、このOSではこっちのフォントで代用しよう…なんてあれこれ考えながらFont-familyを考えることができます。有名サイトで使われているFont-familyが見れたり、特にこだわりが無い時はサルワカさんの「おすすめ」が見れたりと、かゆいところに手が届く便利サイト！ Font-familyメーカー：標準フォント一覧からサクッと指定

2. 画像の縦横比計算「web計。」

昔からお世話になってる縦横比を計算してくれるWebサービス。サムネイルのサイズを計算する時など、本当に時短になって助かってます。黄金比や白銀比、16:9などの縦横比をサクッと出力してくれます。さらには、横幅に対する画像数なんて面倒な計算もしてくれたりする優れもの。計算が苦手な方はぜひ！ web計。黄金比・白銀比などの計算

3. シンプルなダミー画像生成「Placehold.jp」

任意のサイズのダミー画像を生成してくれるWebサービスです。150 x 150など、文字で画像サイズが自動で入るのもお気に入り。もちろん、任意のテキストを入れることもできるし、画像の色を変更したりもできます。生成した画像をjpgかpng形式でダウンロードもできるし、わざわざ画像をローカルにダウンロードして読み込まなくても、imgタグで直接urlを指定するだけで使えるんです！便利！デザインを作る時も使うし、コーディング時にもめちゃめちゃ使います。 Placehold.jp｜ダミー画像生成モック用画像作成

4. オシャレなダミー画像生成「Lorem Picsum」

こちらも任意のサイズでダミー画像を生成してくれるWebサービスですが、先ほど紹介した「Placehold.jp」と違うのはオシャレな写真を切り出して生成されたダミー画像だということ！「Placehold.jp」だとシンプルな無地の画像しか生成されないので、デザインに使った時にイメージが湧きづらいなーという時にはこちらを使います。ちなみに画像は有名な海外の無料の写真素材サイト「Unsplash」なので、クオリティの高いものばかり！ Lorem Picsum

5. グラデーション生成「Ultimate CSS Gradient Generator」

グラデーションを作成してくれるcssジェネレーター。Photoshopのスライダーように直感的にグラデーションを作れて、その場でコードをコピーできるサイトです。もちろんベンタープレフィックスにデフォルトで対応していますが、ブラウザごとの対応状況も掲載されているので、参考にしながら削ってもよさそうですね！ Ultimate CSS Gradient Generator - ColorZilla.com

6. フキダシ生成「cssarrowplease」

吹き出しを作成してくれるcssジェネレーター。吹き出しってイチから作ろうとするとなかなか面倒じゃないですか…？こちらは、吹き出しの先の三角のサイズや向き、borderの太さを設定するだけで簡単に吹き出しのcssが作成できます！あとは自分のソースコードにコピペ＆整形して使うだけです。楽ちん！ cssarrowplease

7. CSSのパーツ辞典「copypet.jp」

色々なcssで作られたパーツのコードを掲載しているWebサービス。ハンバーガーメニューや画像のホバーエフェクトなど、コーディング時に実装する機会の多いパーツがてんこ盛りです。実装の難しさを「ニャン易度」として表しているのもカワイイ！ cssだけでなく、.htaccessの設定集や特殊文字一覧など、忘れがちだけど意外とよく使うコンテンツまで取り扱ってくれています！ありがたや！ copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

【番外編】いろいろなCSSコードのサンプル集

ここからはWebサービスではないですが、私がコーディング時によく参考にしているありがたいCSSサンプル集の記事をご紹介します！いつも助かってます！

まだある！パーツごとのCSSサンプル集

私もCSSで実装できるパーツのコードを掲載した記事をいくつか書いているので、興味があれば覗いていってください！

さいごに

コーディングを早く終わらせるには自分の知識がもちろん必要不可欠ですが、こういった便利なWebサービスやジェネレーターなどを知っておくとグッと時短になってオススメです！以上、彩がお伝えしました〜！

↧

さくらのサーバーでシマンテックのSSLサーバ証明書を再発行した時の手順6

July 31, 2018, 5:00 pm

≫ Next: 口コミ機能も作れる！Wixの新機能「Wix Code」を紹介【カスタム入力フォーム編】

≪ Previous: コーディング速度を上げる！Webサービス・ジェネレーターなどの便利ツール7

SSLサーバ証明書が無効化されるとどうなるのか？

「https://〜」が「http://」になるだけじゃないの？と思うなかれ。7月24日にリリースされた「Google Chrome」の最新安定版v68.0.3440.75で、すべてのHTTP接続サイトが“安全でない”サイト扱いになったことが話題になりましたよね（参考：HTTP接続サイトは“安全でない”サイト扱いに～「Google Chrome 68」が正式公開 - 窓の杜）。この“安全でない”状態でSSLサーバ証明書が無効化されてしまうと、ブラウザの警告表示によって、以下のようにサイトの閲覧ができなくなってしまうというのです！これは対応せざるを得ませんね…。 [caption id="attachment_10480" align="aligncenter" width="565"] SSLサーバー証明書が無効化されたサイトの見え方

出典元：シマンテックの SSL/TLS サーバ証明書の入れ替えについて | DigiCert & Symantec[/caption]

さくらインターネットの場合

さくらインターネットでは、以下の2つの場合において、SSLサーバ証明書の再発行の対象となります。

対象１：2016年5月31日以前に発行されたSSLサーバ証明書（ラピッドSSL、クイックSSLプレミアム）

対象２：2016年6月1日以降、2017年11月30日までに発行されたSSLサーバ証明書（ラピッドSSL、クイックSSLプレミアム、セキュア・サーバID、セキュア・サーバID EV、グローバル・サーバID）

引用元：デジサート社証明書再発行対応について（2018年6月更新） – さくらのサポート情報「対象1」については、すでに2018年4月17日にリリースされたGoogle Chrome66でSSLサーバ証明書が無効化されているようです。そして私の場合は2017年9月頃にラピッドSSLを契約しているので、バッチリ「対象2」に当てはまります！対象2の場合は、有効期限が2018年9月13日以降の場合コントロールにおいて、証明書の再発行が必要になります。 SSLサーバ証明書が無効化されるのは2018年9月13日です。あと1ヶ月ちょっとなので、該当の方はお忘れなく！ちなみに、今回の再発行に関しては費用はかからないので、無料で対応することができます。詳しくは以下のさくらインターネットのサポートサイトをご参照ください。デジサート社証明書再発行対応について（2018年6月更新） – さくらのサポート情報

自分のサイトのSSLが再発行の対象かどうか確認する方法

確認するにはChromeではブラウザのURL欄の「保護された通信」→「証明書」をクリックするとSSLの発行元を確認することができます。一見何の問題もないように見えるんですけどね。自分のサイトのSSLが再発行の対象かどうか確認する方法（Chrome）

Chromeの場合「組織」の部分が「GeoTrust Inc.」だと再発行の対象です。自分のサイトのSSLが再発行の対象かどうか確認する方法（Chrome）

また、ブラウザ上で右クリック→「検証」でデベロッパーツールを開き「Console」タブを開くと、このSSLはそのうち信用されなくなりますよ、みたいなニュアンスの警告が出ています。自分のサイトのSSLが再発行の対象かどうか確認する方法（Chromeデベロッパーツール）

自分のサイトのSSLが再発行の対象かどうか確認する方法（Chromeデベロッパーツール）

ちなみに、Firefoxではこんな感じ。こちらも「認証局」の部分が「GeoTrust Inc」になってますね。自分のサイトのSSLが再発行の対象かどうか確認する方法（Firefox）

SSLサーバ証明書の再発行手順

再発行対象の方にはさくらインターネットから「【重要】[さくらインターネット]SSLサーバ証明書再発行のお願い」という件名のメールが届いているはずなので、そのメールを見ながら対応していきましょう。再設定の流れは基本的には新規契約時と一緒なので、以下の記事も併せて読むと、より流れがわかりやすいかもしれません。

【1】「デジサート社証明書再発行サインアップ」からSSLサーバ証明書を再発行

メールに記載されているURLから再発行専用画面へアクセスします。さくらインターネットの会員IDでログインしましょう。「デジサート社証明書再発行サインアップ」からSSLサーバ証明書を再発行

ログインすると再発行対象の証明書の横に「再発行」ボタンが表示されているので、ボタンをクリック。「デジサート社証明書再発行サインアップ」からSSLサーバー証明書を再発行

すると、証明書情報の確認画面が表示されます。内容を確認し、「再発行する」をクリックしましょう。「デジサート社証明書再発行サインアップ」からSSLサーバー証明書を再発行

【2】認証ファイルをダウンロード＆fileauth.txtとしてアップロード

SSLサーバ証明書の再発行申請をして、しばらくすると申請完了のメールが届きます。私は10分ほどで届きました。このメールを見ながら次は認証ファイルのアップロードをします。メールに従って会員メニューにログインし、「契約情報」の一覧から「契約サービスの確認」をクリック。認証ファイルをダウンロード＆fileauth.txtとしてアップロード

契約しているSSLサービスの右側にある「サーバ証明書」をクリック。認証ファイルをダウンロード＆fileauth.txtとしてアップロード

「認証ファイルDL」をクリックし、認証ファイル（fileauth.txt）をダウンロードし、どこかに保存しておきましょう。認証ファイルをダウンロード＆fileauth.txtとしてアップロード

保存した認証ファイルを、メールに記載されている指定の場所にアップロードします。アップロード先については過去に書いた記事に詳しく書いてあるので、こちらもご参照ください。 ※この認証ファイルは30日以内にアップロードしなければならないので、注意しましょう！

【3】SSLサーバ証明書をダウンロード

認証ファイルのアップロードが終わって、またしばらくすると今度はSSLサーバ証明書の発行完了メールが届きます。今回もだいたい10分〜20分くらいでメールが届きました。またもメールに従い会員メニューにログイン。認証ファイルをダウンロードした時と同じように「契約情報」→「契約サービスの確認」と進みます。契約しているSSLサービスの右側にある「サーバ証明書」をクリック。詳細画面で「サーバ証明書DL」をクリックし、SSLサーバ証明書 (.crt)をダウンロードしましょう。 SSLサーバ証明書をダウンロード

【4】メールに記載されているURLから中間CA証明書を取得

次に、メールに記載されているURLから中間CA証明書をコピーし、エディタに貼り付けて任意のファイル名で保存してください。メールに記載されているURLから中間CA証明書を取得

【5】「SSLサーバ証明書」と「中間CA証明書」をインストール

「SSLサーバ証明書」と「中間CA証明書」を用意できたら、サーバーにインストールしていきます。まずはサーバコントロールパネルへログインしましょう。左サイドバーの「ドメイン/SSL設定」をクリックし、インストールするドメイン名の右側にある「更新」をクリックします。「SSLサーバ証明書」と「中間CA証明書」をインストール

「中間証明書のインストール」をクリックします。「中間CA証明書」をインストール

先ほどエディタで保存しておいた中間CA証明書をペーストし、「送信」をクリックします。これで中間CA証明書のインストールが完了。「中間CA証明書」をインストール

続いて、「証明書の再インストール」をクリックします。「SSLサーバ証明書」をインストール

ダウンロードしたSSLサーバ証明書 (.crt)をテキストエディタで開き、コピーしてテキストエリアに貼り付け、「送信」をクリック。「SSLサーバ証明書」をインストール

証明書のインストールができたら、ざっと内容を確認してみましょう。ここでも署名者や組織名が「DigiCert Inc」になっていますね！「SSLサーバ証明書」と「中間CA証明書」をインストール後

このあとサポートサイトでは「新しい設定を有効化する」っていう項目があったんですけど、私のやった時はこの設定がなかったんですよね…。でも、内容がちゃんと変わっていたので設定できたことにします。

【6】ブラウザで表示確認

最後に、設定がちゃんと反映されたかどうかブラウザでチェックしてみましょう。先ほど「GeoTrust Inc.」だった部分が、「DigiCert Inc」に変わっていればOK！ SSLサーバ証明書の適用を確認（Chrome）

デベロッパーツールの警告も出ないようになっています。 SSLサーバ証明書の適用を確認（Chromeデベロッパーツール）

Firefoxで見ても同様に、認証局が「DigiCert Inc」に変わっていますね。 SSLサーバ証明書の適用を確認（Firefox）

さいごに

以前にも一度同じことをやっているのでスムーズに対応できましたが、それでもやはり慣れないことなので、緊張するし疲れました…。でも、これでGoogleから警告を出されることがないので一安心です。対応期日が9月12日までなので、再発行対象の方はお早めに！以上、彩がお伝えしました。

↧

口コミ機能も作れる！Wixの新機能「Wix Code」を紹介【カスタム入力フォーム編】

October 1, 2018, 5:00 pm

≫ Next: 年賀状・和風デザインに使える！筆文字を扱った素材サイト6

≪ Previous: さくらのサーバーでシマンテックのSSLサーバ証明書を再発行した時の手順6

データベースコレクションの作成

まずは左サイドバー「Database」という項目の右にある＋ボタンから「New Collection」をクリックします。データベースコレクションの作成

データベースコレクションの名前を決めます。ここは好きな名前でOK。「データベースコレクションの使用目的」は、今回はカスタム入力フォームの作成なので、「フォーム送信」を選択します。データベースコレクションの作成

データベースの設定ができると、エクセルのような画面が表示されます。ここでデータベースを作っていきますよ。データベース作成の詳細については、詳しくは以前に書いた「データベース作成編」の記事を参考にしてくださいね！データベースコレクションの作成

ちなみに今回は口コミ機能を作りたいので、項目は以下の通り。

フィールド名	フィールドキー	フィールドタイプ
滝名	watarfall_name	Text
ユーザー名	name	Text
総合評価	rating	数値
訪問時期	visit_month	Text
口コミのタイトル	review_title	Text
口コミの本文	review_text	Text
写真1	photo	Image Source
写真2	photo2	Image Source
写真3	photo3	Image Source

以前作った滝のデータベースにも「滝名」という項目があるので、２つのデータベースを紐づけできたらよかったんですけど、それはさすがにできないみたいですね…。というわけで、作成したデータベースは以下のようになりました。データベースコレクションの作成

カスタム入力フォームの作成

データベースができたら、いよいよ入力フォームを作っていきましょう。

入力フォームのパーツを作成

「サイトメニュー」から、「ページを追加」で新規ページを作成します。入力フォームのパーツを作成

新しくページが作成できたら、作成フォームを作るパーツを配置していきましょう。まずは入力欄です。左のアイコン一覧から「＋」をクリック。「ユーザー入力」から好きなデザインを選択してページ上にドラッグ＆ドロップしましょう。入力フォームのパーツを作成

パーツにはプレースホルダーや必須項目、入力できる文字数の制限など様々な設定がクリックひとつで簡単にできます。便利ですね！入力フォームのパーツを作成

ドロップダウンもサクッと作れます。「オプションを管理」をクリックするとドロップダウンの項目を直感的に作ることができますよ。入力フォームのパーツを作成

項目が多い場合など上記のようにひとつずつ作成するのが手間な時は、テキストで一括で設定することも可能です。少し解説すると、項目を作成する時に「ラベル」と「value」という２つを設定をします。「ラベル」はドロップダウンの項目としてユーザーに表示されるもので、「value」がデータベースに送信される値となります。今回の場合はユーザーに表示されるのは「5（とても良い）」などのテキストですが、データベースに送信されるのは「5」という数値のみなので、それぞれ違う値を設定しています。入力フォームのパーツを作成

なんと画像のアップロードボタンも簡単に作れてしまいます！手動で作るとなると知識が必要なんですよね…。「アップロードボタンを管理」をクリックすると表示テキストなど様々な設定ができますよ。入力フォームのパーツを作成

他にもラジオボタンや日付ピッカーなど、様々なパーツが用意されています。一通りパーツが作成できたら、最後に送信ボタンを配置しましょう。ボタンはユーザー入力ではなく、「ボタン」という項目を選択します。好きなデザインを選択してドラッグ＆ドロップ。入力フォームのパーツを作成

入力フォームとデータベースを連携させる

入力フォームのパーツが作成できたら、いよいよデータベースと連携させます。さきほどの流れで、送信ボタンからいきましょう。送信ボタンを選択し、右上の「データに接続」アイコンをクリックします。入力フォームとデータベースを連携させる

「データセットを作成」をクリックし、さきほど作成したデータベースを選択します。ここでは「Review」となりますね。選択できたら「Create」をクリック。入力フォームとデータベースを連携させる

画面上に「Review Dataset」というアイコンが現れました。これで、この入力フォームがデータベースと連携する準備ができました。入力フォームとデータベースを連携させる

送信ボタンを選択すると右上のデータベースアイコンが青から緑に変わっているのが確認できます。入力フォームとデータベースを連携させる

続いて送信ボタンとデータベースを関連付けます。まず、データセットのアイコンを選択し、「Manage Dataset」をクリック。送信ボタンを押したらデータベースに書き込んでほしいので、「モード」を「書き込み専用」に変更します。入力フォームとデータベースを連携させる

次に送信ボタンを選択して、右上のデータベースアイコンから設定パネルを開き、リンクの接続先を「Submit」に変更します。これで、送信ボタンを押すとデータベースにデータが送信されるようになりました！入力フォームとデータベースを連携させる

他にも、送信ボタンを押した後に遷移するページや表示されるテキストなど細かな設定ができますよ。入力フォームとデータベースを連携させる

この調子で入力欄など他のパーツもデータベースと連携させていきましょう。基本的には「Connect a dataset」で連携させたいデータベースを選択し、「Value」には該当するデータベース上の各項目を設定すればOK。入力フォームとデータベースを連携させる

ここまで作ったカスタム入力フォームのサンプルは以下となります！（申し訳ありませんが、サンプルでは送信ボタンを押してもデータベースに登録できないようになっています）カスタム入力フォームサンプル

データベースに入力されるか確認する

データベースとの連携ができたら、いよいよデータを入力して送信ボタンを押してみましょう。画面右上の「プレビュー」を押すと、プレビューモードで入力フォームを動かすことができますよ。データベースに入力されるか確認する

データベースを確認してみると、ちゃんとデータが送信されているようです！こんなに簡単にフォームが作れるなんてびっくり。データベースに入力されるか確認する

注意点

「データベースの中身がサイトに反映されない！」という人はサンドボックスデータがライブデータに同期されているか確かめてみてくださいね。プレビュー画面から登録したデータはサンドボックスデータに蓄積されるので、手動で同期しないとライブデータには反映されないようです。ライブデータの同期は、データベース上の「同期」をクリックし、項目を選ぶだけ。以前にもデータの同期方法を書きましたが、英語だったので最新版のキャプチャを貼っておきます！サンドボックスデータをライブデータに同期

この機能を使ってアンケートフォームを作るでもよし、申し込みフォームを作るでもよし、色々なことができそうですね！さらに、前回の記事で紹介した「動的ページ」機能を使えば、入力されたデータを表示させて口コミ一覧を作るなんてこともできます。サンプルページを作ってみたのでぜひ見てみてくださいね！口コミ一覧サンプル動的ページの作り方は以下の記事を参考にしてみてください。

さいごに

通常はフォームひとつ作るにもプログラムの知識が必要だったりしますが、Wixを使えばクリックだけで簡単にフォームが作れてしまうんですね…便利です。使ってみた感じ、数値データの送信に対応しているのがテキストフォームやドロップダウンだけだったりと、細かいところはまだ実装されていない印象でしたが、今後アップデートされていけばもっと使いやすくなりそうです！サクッとユーザーの情報を集めたい！と思った時に使ってみてはいかがでしょうか。以上、彩でした！

その他のWix関連の記事

↧

年賀状・和風デザインに使える！筆文字を扱った素材サイト6

October 28, 2018, 3:00 pm

≫ Next: 出産のためブログ一時休止のお知らせ＆会社員Webデザイナーの不妊治療との付き合いかた

≪ Previous: 口コミ機能も作れる！Wixの新機能「Wix Code」を紹介【カスタム入力フォーム編】

紹介しているのは有料サイトもありますが、フリー（無料）で使える素材サイトが多めです。そのライセンスのほとんどが「利用規約の範囲内であれば個人・商用OK（クレジット表記なども不要）」なので、別途記載しているもの以外は省略しています。ですが、情報は現時点のものであり、サイトによって規約やライセンスは異なりますので使用の際は自身で再度ライセンスの確認をお願いします。

筆書き素材専門サイト「カリ蔵（カリグラ）」

筆書き素材専門サイト「カリ蔵」 – 筆書き素材が集まるサイト「シルエットデザイン」や「EVENTs Design（イベントデザイン）」など、テーマに特化した素材サイトを数多く運営する「TopeconHeroes」の最新素材サイト！いつもお世話になりすぎていて頭があがりません…！ダウンロード形式はJPG・PNG・SVGのほか、AI形式でも配布してくださっているので大助かり！力強い筆文字が数多くあり、「祝」などの一文字から「ドドドド」といったジョジョ風のマンガ文字まで、幅広い言葉が集まっています。中には「スーザンボイルみたいな顔しやがって」のような、いつ使うのかわからない面白ワードまであるので、ついつい眺めてしまいますw もちろん中にはちゃんと「賀正」や「亥」など年賀状に使える素材もありますよ！ “正月” の検索結果 – 筆書き素材専門サイト「カリ蔵」 ※無料で使用可能ですが、「20素材まで」という制限があります。それ以上使う条件は「Twitterでサイトを紹介する」「LINEスタンプを1つ買う」とのこと。詳しくは使用条件を確認しましょう。

brushstock.

brushstock. | 筆文字素材無料ダウンロード! 豊富な筆文字素材がそろうサイト。干支の一文字だけとってもかなりの種類があります！また、年賀状の賀詞や挨拶文がまるまるダウンロードできるのも魅力ですね！これで字が下手でも悩まなくて済みますw 年賀状のタグ一覧はこちら。年賀状に関する記事一覧 ※年賀状やチラシ、Webページなどのデザインのために使用するには無料で使えるようですが、有料提供によるコンテンツに使用する場合は「エクストラライセンス」という料金がかかってくるようです。詳しくはサイトの利用規約を確認してくださいね！

筆あと。

筆あと。味のある筆文字が特徴の素材サイト。筆文字の他に和風のイラストも配布されているのが嬉しいですね！ダウンロード形式はAI・PNG・JPGの3通りで便利です。「正月」タグで絞り込むと年賀状に使える素材を探せますよ。正月 « 筆あと。

筆文字フリー素材集水扇 -すいせん-

筆文字フリー素材集水扇 -すいせん- 流れるような美しい書体をダウンロードできる筆文字素材サイト！数は少なめですが、どの筆文字も素敵で眺めているだけでうっとりしちゃいますね。ダウンロード形式はJPG・PNG・AIの3通りです。タグ機能ではないですが、「年賀状の挨拶文」「謹賀新年」「賀正」といった単語で検索すると年賀状に使いやすい文字をダウンロードできます。

fude-moji.net

fude-moji.net どことなくオシャレな印象の筆文字が多い素材サイト。英語やドイツ語などの外国語が多いからでしょうか。年賀状に使えそうな素材は少なめですが、なぜか「暑中お見舞い申し上げます」といった挨拶文は豊富にそろっています。また、「のし」のデザインも配布しているのが珍しいです。 PNGデータであれば無料でダウンロードできますが、EPS（ベクター）データは300円〜購入となります。年賀状に使えそうなのは、「お世話になりました」「よろしくお願い致します」などの挨拶文になるでしょうか…。

もじの素

もじの素｜厳選書家達による高品質な筆文字素材のダウンロードサイトこちらはフリー素材サイトではないですが、筆文字のクオリティや豊富さが魅力的なのでご紹介。厳選された書家による筆文字の素材サイトというだけあって、様々な書体の筆文字がそろいます。気に入った書家の方がいたら、その人の筆文字で絞り込んで探すことが可能。無料でダウンロードできるのはミニサイズ（100px）の白背景JPGのみで、大きなサイズや背景透過のPNG・EPS形式に関しては有料での購入となります。年賀状タグの一覧はこちら。年賀状の筆文字｜もじの素

さいごに

一年って早いですよね。まだ2018年始まったばっかりだと思ってたのに、もうすぐ11月ということに最近気づいて愕然としました。というわけで、この時期に年賀状や和風のデザインを作る際に、筆文字の素材サイトをぜひ活用してみてください！以上、彩でした！

年賀状に関するこんな記事もおすすめ！

毎年の年賀状デザインを少しでも楽にするために他にもこんな記事を書きました！よければあわせて読んでみてください！

↧

出産のためブログ一時休止のお知らせ＆会社員Webデザイナーの不妊治療との付き合いかた

October 30, 2018, 5:00 pm

≫ Next: 初めての妊娠・出産！スマホに入っててよかったおすすめアプリ5

≪ Previous: 年賀状・和風デザインに使える！筆文字を扱った素材サイト6

自分の不妊治療の流れについて

3年かかっただけあって、私の治療は手こずったほうかもしれません。不妊治療の流れは人それぞれですが、私は結婚前から妊娠しづらい（自力で排卵する力が弱い）と言われていたため、排卵誘発剤を飲みながら「タイミング療法」から「人工授精」、そして特定不妊治療である「体外受精」「顕微授精」へとステップアップしていきました。

お金がかかる不妊治療は助成制度を積極的に活用しよう！

体外受精と顕微授精は助成制度の対象となる「特定不妊治療」にあたります。私はこの体外受精と顕微授精を合わせて6回経験しました。助成制度を利用できる回数は最初に制度を利用した年度や年齢によって異なりますが、私の場合は6回まで助成制度が受けられる条件に当てはまっていたので、偶然ながら制度をキリよく全て使い切った感じですねw 特定不妊治療にはとてもお金がかかります。3年も続けるとなると、それはもうリアルに…。なので、助成制度は積極的に活用することをオススメします！特定不妊治療までいかない場合でも、医療費控除を活用するとお金が少し戻ってきますよ。不妊治療の助成制度について詳しく知りたい方はこちらの記事をどうぞ。

地味に大変な通院。柔軟に働き方を変えてみるのがオススメ

病院通いの時間は時短勤務でカバー

不妊治療に欠かせないのが通院です。これが地味に大変。私は3回ほど転院しましたが、不妊治療の婦人科はどこも待ち時間がとても長い印象がありました。しかも、排卵の様子を随時確認しながら「明日また来てもらえますか？」と急に言われることもザラにあるため、フルタイムで会社勤めをしながらの治療は困難でした。そのため、私は治療を開始してほどなく上司にのみ不妊治療について打ち明け、6時間の時短勤務にさせてもらいました。最初は自宅近くの病院に通っていましたが、最終的には会社近くの病院に落ち着きました。自宅近くの病院の時は「遅刻」または「早退」という扱いで出勤していましたが、会社近くの病院にしてからは「中抜け」という手段を取っていました。個人的には遅刻や早退より勤務時間内に1〜2時間抜ける中抜け（抜けた分だけその後残って働く）のほうが時間のコントロールや予定の周知がしやすかったので、この「時短勤務＋会社近くの病院」という形式がベストだったと思っています。もしそういった働き方を許してもらえる環境であれば、思い切って上司の方に相談してみてはいかがでしょうか。

Webデザイナーの利点！リモートワーク勤務という選択肢

その後しばらく時短勤務を続けたものの、残念ながら私は妊娠することができませんでした。そこで、いったん仕事から離れてみるべく上司に思い切って退職を考えている旨を相談したところ、「リモートワークで続けるのはどうか」との提案を受けました。 Webデザインの仕事自体は大好きだし、お金がかかる不妊治療期間中に収入が絶たれるのは正直痛いという気持ちもあったため、この提案をありがたく受けることにしました。 SlackやChatworkなどのコミュニケーションツールが発達している現在は、Webデザイナーに限らず、Web系の仕事であれば自宅で働くリモートワークは十分可能になりつつあります。もちろん、ある程度の信頼関係が必要ですが、毎日の通勤や勤務の合間の通院のストレスが減らせると考えたらとても気持ちが楽になりました。（リモートワークならではのストレスというのも多少ありますが…）といっても完全なリモートワークではなく、週2回出勤してそれ以外は自宅で作業という方法を取っていました。UIのデザインやプログラムの仕様など細かいやり取りはチャットだと難しかったため、会社へ出勤した時に打ち合わせをしてカバーしていました。その後ほどなくして妊娠できたため、妊娠期間もそのままリモートワークで働いていました。通院時や体調が悪い時などにひとこと報告を入れてすぐに休めたり、妊娠中も自分のペースで働けるのがいいところかなと思います。もし、自宅で作業が可能な仕事であれば、こういった自分に無理のない働きかたを取りながら不妊治療を続けるのもオススメです！

「限界を作る」のではなく、「期限を決める」のはアリだと思う

さて、制度とか働き方とかは置いておいて、実際どうだったの？というお話。個人的には、ツラくなかったといえば嘘になります。もちろん、不妊治療中の人が全員そうとは限らないし、気負わず前向きに取り組んでいる人もたくさんいると思います。ですが、ひとつ確かなことは、いくら努力しても必ずしも結果が出るとは限らないのが「不妊治療」です。不妊治療はよく「身体に負担がかかる」と言われます。たしかに、治療に使う排卵誘発剤や注射は人によっては体調や気分が悪くなることがありますが、私の場合は身体の負担はそこまで感じていませんでした。それよりも、時間がかかるほど、それに比例して「いくら頑張ってもゴールが見えない」という精神的な負担のほうが大きくなっていきました。

身体より精神的にツラくなってしまった時はターニングポイントのサインかも

そんな時、自分の中である変化がありました。私はいつも出勤時にテンションを上げるために割とアップテンポの曲を好んで聴きます。ルーティンみたいなものですかね。その時ハマっていたのがleccaの｢Sky is the Limit feat. RHYMESTER｣という曲でした。（昔からレゲエもleccaさんも大好きです！）その曲の中に、「限界はない限界はないそう思えたヤツに限界はない」という歌詞があって、その部分を聴くと出勤中にも関わらずなぜか涙が出てくるようになってしまいました。その日だけではなく、聴くと毎日必ずなのです。その時ちょうど社内でも色々あった時期だったというのもありますが、自然と「これは何かのサインかな…」と感じました。

ゴールの見えない不妊治療に自分でコースを作る

その後、上司に不妊治療に専念するため退職を考えていると打ち明けました。好きな仕事だし、ずっと離れるつもりはありませんでしたが、しばらく治療に専念して、それでも妊娠できなかったら「不妊治療をやめよう」と考えていました。ひとつひとつ段階的に期限を決めた上で、目標に向かって努力しようと夫と2人で話し合って決めました。結局、先述したように上司からリモートワークの提案を受けたため、仕事をやめることはありませんでしたが、リモートワークを始めた時も、同時に期限も決めていました。そうすることで、自分でゴールの見えない不妊治療のコースを段階的に見えるようにしました。

期限を作ったことで安心したのか、それともリモートワークになったことでストレスが減ったのか、その後まもなくして妊娠が発覚しました。しかも、不妊治療ではなく、リセット（卵巣や子宮を休ませる期間）の合間に自然に授かった子どもだったので尚さら驚きでした。「自分に限界を作らない」というのは大切なことだと思います。限界を作っては、その先の成長が望めませんしね。ですが、「期限」は自分で作ってもいいのではないでしょうか。「限界を作る」ことと「期限を作る」ことは似て非なるものだと、私は考えています。「期限を作る」といっても、何も仕事や不妊治療を辞めるとか、そういった大きな決断である必要はなくて、例えば「とりあえず半年くらい不妊治療をお休みする」などでもいいと思います。精神的にツラくなった時は、自分の抱えている不安やストレスが少しでも軽くなる方法を見つける時期なのかもしれません。そんな時は一生懸命歩き続けていた足をふと止めて、あたりを見渡してみてはいかがでしょうか。なんだかんだ書きましたが、今ではまたleccaの曲を聴いて元気をもらっています。かなり前のものなんですが、すごくカッコよくて前向きになれる曲なので、興味があればぜひ！

Sky is the Limit feat. RHYMESTER

posted with amazlet at 18.10.26

cutting edge (2013-12-11)
売り上げランキング: 137,822

Amazon.co.jpで詳細を見る

さいごに

ここまで書きましたが、私が妊娠できたのは、不妊治療と向き合うために柔軟に働き方を変えることを許してくれた夫や上司や会社の同僚、周りのすべての人のおかげです。本当に感謝しています。私は幸いにも妊娠することができましたが、全ての人がそうしたからと言って必ずしも結果が出るとは限りません。ですが、もし現在同じような悩みを抱えている人がいたら、少しでも参考になれればと思います。以上、彩でした！

↧

初めての妊娠・出産！スマホに入っててよかったおすすめアプリ5

February 24, 2020, 4:00 pm

≫ Next: 初めての育児をログって乗り切れ！おすすめの記録系スマホアプリ3【リアルデータあり】

≪ Previous: 出産のためブログ一時休止のお知らせ＆会社員Webデザイナーの不妊治療との付き合いかた

産後はこちらのアプリがおすすめ

出産後に重宝した記録（ログ）系のアプリを紹介しています。

トツキトオカ

トツキトオカ：夫婦で共有できる『妊娠記録・日記』アプリ

amane factory inc.無料posted withアプリーチ

妊娠中はこのアプリを毎日開いていました。アプリを開くとお腹の中の赤ちゃんの姿がかわいいアニメーションで見ることができます。週数に応じた姿を見せてくれるので、妊娠初期なんかは「今こんな感じなんだ～」と興味深く眺めていました。赤ちゃんはもちろん、コラムのイラストも可愛くて、見てるだけでほっこりします。

日記や、妊婦検診の管理機能の他にも、パパとアプリと同期してメッセージを送りあえたりなど多機能なアプリですが、私が一番使っていたのは出産までの「カレンダー機能」でした。検診などの予定を立てる時など、「あれ、いま何周だっけ…」とか「来月には何周になっているかな？」と確認することが多々ありました。そんな時、今が何周かすぐにわかるカレンダー機能は地味に助かりました！

[caption id="attachment_10726" align="alignnone" width="750"]

実際に夫に送ったメッセージ[/caption] [caption id="attachment_10727" align="alignnone" width="750"]

今が何周目かって意外と忘れますよね…[/caption]

そしてなにより、アプリのユーザーを対象とした応募者全員サービスのプレゼントがカワイイ！私は「オーダーメイド名づけブック」を選びましたが、名付けの際の知識なども学べるので、名前を考える際にとても参考になりました。自分の姓から、画数のいい名前もピックアップして提案してくれます！

ままのて

ままのて -妊娠･育児情報が毎日届くアプリ

Cluex, Inc.無料posted withアプリーチ

週数に応じた赤ちゃんの姿が見れるのはトツキトオカと一緒なのですが、私はこちらでは主に妊娠・出産の情報を得るために使っていました。同じようなアプリはたくさんありますが、決め手は記事や週数に応じたQ＆Aのコンテンツが医師や助産師が監修しているということで、安心できそうだったからです。

また、記事も検索しやすいです。キーワードはもちろん、タグでも検索できたりなど、Googleでイチから検索するよりアプリ内で検索したほうが早かったりしました。

赤ちゃんが生まれたあとは産後モードに切り替わり、引き続き月齢に応じた情報を得ることができますよ！妊娠時期から産後まで長く使えるアプリ。

Babyプラス

妊娠・出産アプリ Babyプラス - 妊娠の悩み解決

Recruit Co.,Ltd.無料posted withアプリーチ

こちらもアプリを開くとかわいい赤ちゃんのアニメーションがお出迎え。出産した病院で渡された知識系の本が、このアプリと連携していたので、インストールしたのがきっかけです。

情報系コンテンツはもちろん、戌の日がいつかを出産予定日から自動算出してくれる機能、胎動・陣痛カウンターなど、多機能でかゆいところに手が届くアプリです。

どの機能も便利で色々と使いましたが、中でも私が最も使ったのが「食べていいものダメなもの」でした。その名の通り、妊娠中の食べていいものとダメなものがすぐに一覧で調べられる機能です。妊娠中は食べないほうがいいといわれていわれている食材が意外と多く、食事に気を使います。私はかなり心配性なので外食の時などはビクビクしていました。なので、妊娠中は何か気になる食材が出る度にこのアプリで確かめていました。主に食事の時によく開いていたアプリ。

カロママ

カロママ　AI管理栄養士がダイエットサポート

Link and Communication Inc.無料posted withアプリーチ

妊娠中期〜後期に大活躍したアプリ。ダイエットアプリなのですが、私は主に体重管理のために使っていました。妊娠中はビックリするくらいすぐ太ります。妊娠中期に体重の増加ペースが早いと指摘を受け、慌ててインストールしました。写真を撮るだけで食事のカロリーを計算してくれたり、AIのカロリーママが栄養バランスを指摘してくれます。ママの言葉にいつも一喜一憂してましたw

料理のカロリーを調べるのにも使えます。また、歩数からカロリーの消費具合も分析してくれるので、たくさん歩いた日は少しカロリー高めの料理を食べてもいいかな…など、自分なりに食事量を調整することができました。似たようなダイエットアプリはたくさんありますが、決め手は会員登録なしで始められるので気軽だと思ったからでした。

※「カロリーママ」から「カロママ」に名称変更されてアイコンも変更されたようです。アプリ内の画面はほとんど変わっていなかったので画像は名称変更前のものを使用しています。

ママリ

ママリ-妊娠から育児まで女性向けQ&Aアプリ

Connehito, inc.無料posted withアプリーチ

有名なママ同士のコミュニティアプリ。ユーザー目線のリアルな意見が見れて面白いです。自分の出産予定の病院についてのQ&Aが見られたので、それがとても参考になりました。このアプリで入院時に何を準備すればいいかなどを調べていました。

他にも、記事などの読み物系コンテンツもあります。

さいごに

私にとっては待ち望んでいた妊娠でしたが、本当に初めてのことなのでわからないことだらけだし、でもお腹の子を守らなければ…というプレッシャーはあるしで割と途方に暮れてもいました。いまから考えるとそんなに気負わずともよかったのでは…とも思いまずが、当時はとにかく必死で、片っ端から妊娠・出産についての情報を調べて勉強していました。便利な本も色々出ていて、実際私も何冊か買ってしまいましたが、やっぱりいつでも持っているのはスマホなので、手軽に開けるアプリはとても重宝しました。なんてったって、無料アプリだからお金がかからない…（重要）！これから出産を控えている方などに、参考になればと思います。以上、彩がお伝えしました！

出産したらこちらもチェック！

産後に重宝した記録（ログ）系アプリの記事も書きました。興味があればこちらもどうぞ！

産前・産後を快適に過ごそう！

色々とツラい妊娠中に買っておいてよかった便利アイテムを紹介しています。産後まで使えます！

↧

初めての育児をログって乗り切れ！おすすめの記録系スマホアプリ3【リアルデータあり】

April 21, 2020, 5:00 pm

≫ Next: 産後まで使える！妊娠中に買っておいてよかったマタニティグッズ6

≪ Previous: 初めての妊娠・出産！スマホに入っててよかったおすすめアプリ5

赤ちゃんの授乳量・睡眠・ウンチの回数・予防接種・離乳食…などなど、産後は直面しなければならない課題が山積みです。ログなんてつけて何になるの？と思うかもしれませんが、育児にまつわる色々な悩みも、記録して管理することで対応できた場面も多々ありました。

妊娠中の方はこちら

ちなみに、妊娠時期に役に立ったアプリはこちらです！

【育児日記】暗い部屋でも手軽に記録！「ぴよログ」

育児記録 - ぴよログ

Sakabou Inc.無料posted withアプリーチ

暗い部屋でもワンタップで記録できる

赤ちゃんの授乳や睡眠などを記録するアプリ。最初の1ヶ月はノートで育児日記をつけていたのですが、これがまた面倒で…。赤ちゃんがようやく寝てくれた隙に暗い部屋で記録したりするのってすごいストレスです。その点、スマホアプリなら暗い中でも片手でサクッとログを残せるので便利です！実は産後1年以上経った今でも活躍中！母乳育児の方は授乳タイマーもありますよ。

データは自動的に集計される&振り返れる！

食事量・睡眠・排便・体温・日記がログとして残せます。データは1週間ごとに一覧で表示され、それぞれ1日のデータを自動で集計してくれます！紙からアプリに移行した時、これがめっちゃ嬉しかった…！紙の時は1日に飲んだミルクの量や回数をいちいち自分で計算していたので本当に手間でした。新生児の頃はそんなにいちいち記録してられるかー！なんて思っていたのですが、うちの娘はミルクの飲みが悪く便秘がちで、クリニックに連れて行くと「1日何mlくらいミルクを飲みますか？」「前回のウンチは何日前ですか？」なんてきかれることもよくあるため、そういう時のためにもログはとっておいてよかったです。また、私は母乳とミルクの混合授乳だったため、母乳とミルクをそれぞれ何回あげたかなんてのも気にしてました。母乳は3時間おきの赤ちゃんの授乳タイムだけでなく、眠い時やぐずった時など1日に何回もあげていました。いちいち自分で覚えてられないので、カウント機能はめっちゃ便利でした！

[caption id="attachment_10808" align="alignnone" width="750"] ぴよログ授乳量

1日のトータルの授乳量を計算してくれる！[/caption] [caption id="attachment_10809" align="alignnone" width="750"] ぴよログ授乳回数

ミルクと母乳の回数もカウントしてくれる！[/caption]

こんな感じで最初のほうは体温以外の全てを記録していましたが、育児に慣れてきてからは、睡眠だけを記録するようになりました。娘は0歳児の間ずっと、昼も夜もまとまって寝ず、なんとかして睡眠リズムを作りたいと切望していたからです。左が生後2ヶ月頃で、右が7ヶ月頃のデータです！最初の頃は寝たり起きたりバラバラで、いつ眠くなるんだかさっぱりわかりませんでしたが、だんだんと「さっき起きてから○時間経ったから、もうそろそろ眠くなるだろう…」みたいな感じでデータを使えるようになっていきました。

[caption id="attachment_10810" align="alignnone" width="750"] ぴよログ睡眠データ 2ヶ月

生後2ヶ月[/caption] [caption id="attachment_10811" align="alignnone" width="750"] ぴよログ睡眠データ　7ヶ月

生後7ヶ月[/caption]

ちなみに、生後7ヶ月頃のデータを見ると夜よく寝る子みたいに見えますが、4ヶ月あたりから夜泣きが始まり、1歳過ぎまで続いたのでその頃から夜間のログは諦めてますw　夜泣き対応しながらログ取るのとか無理…！！そしてこちらが現在(1歳5ヶ月頃)のデータです！日によって若干ずれることもありますが、ほぼ規則どおり寝るように。（自粛生活で毎日同じようなサイクルで生活しているというのもありますが…）最近では娘がいつ眠くなるのかがバッチリわかるようになりました！長かった…！！ほんとに長かった…！！！ [caption id="attachment_10812" align="aligncenter" width="300"] ぴよログ睡眠データ　1歳5ヶ月

1歳5ヶ月[/caption] 今となっては昼寝の時間に長く寝過ぎてしまうので、「寝たのが2時間前だから、もうそろそろ起こさなければ…」というように起こす目安に使っています。最初の頃は睡眠タイミングがバラバラすぎて正直こんなログつけることに何の意味があるんだって感じでしたが、続けていくと寝かしつけや起こす目安に使えたりと結果的に便利だった気がします。何よりこうして振り返ると非常に興味深いですよ！

日記や成長曲線にも対応

産後は机に向かってペンを走らせるなんてできないんですよ…ほんと。少なくとも私は無理でした。1ヶ月でギブアップでした。実はアプリでも日記は4,5ヶ月ほどでやめてしまったのですが、それでも授乳しながらなど片手でいつでも記録できるので、紙よりははるかに続けやすかったです。過去の日記を読み返すと泣きそうです！また、成長曲線にも対応しているので、赤ちゃんの身長・体重を入力すると赤ちゃんの成長度合いが適切なのかどうかの目安も見ることができます！

ちなみに、ログデータや日記はPDFとして出力したり、電子書籍として印刷できるみたいですよ！紙の日記と同じように冊子で振り返ることもできるのも魅力ですね。

おすすめポイント

暗い部屋でもワンタップで記録できる
データは自動的に集計される&振り返れる！
日記や成長曲線にも対応

【予防接種】おすすめスケジュールが便利！「母子モ」

母子手帳アプリ母子モ ~電子母子手帳~

MTI Ltd.無料posted withアプリーチ

産後、管理で悩まされたのが予防接種スケジュールでした。赤ちゃんの予防接種ってびっくりするくらい多いんですよね…。しかも、いつでも受けられるわけじゃなくて、受けるべき時期を把握して予防接種ごとの間隔を調整する必要があるので非常にやっかいです。いろいろなアプリを試した結果、予防接種の管理としてはこれが一番使いやすかったのでご紹介！

接種記録から次回以降のおすすめのスケジュールを自動で組んでくれる

受けた予防接種を記録すると、次回以降のおすすめのスケジュールを自動的に組んでくれます！こどもクリニックだと、病院側でよしなにやってくれるところもありますが、そうでない場合はこの機能が頼りになります！自分でスケジュールをカスタマイズすることもできるし、間違って登録してしまったときも、「接種の間隔合ってる？」とアラートを出して教えてくれます。

罹患歴があとで見返せる

おすすめスケジュールに頼るだけだと怖い…という場合は、罹患歴があとから見返すことができ、予防接種を受ける適切な時期なども記載されているので、それらを参考に手動でスケジュールを組むことも可能です。

乳幼児検診や身体発育曲線なども記録できる

他にも、乳幼児検診や身体発育曲線のログを残せたり子育てに関する知識が得られたりなど多機能なアプリ。住んでいる地域の子育て情報が見れるのも便利ですね！

おすすめポイント

接種記録から次回以降のおすすめのスケジュールを自動で組んでくれる
罹患歴があとで見返せる
乳幼児検診や身体発育曲線なども記録できる

【離乳食】悩み多き離乳食の頼れる味方！「きほんの離乳食」

きほんの離乳食　管理栄養士が監修のレシピ＆基本情報

Palsystem Consumers' Co-operative Union無料posted withアプリーチ

月齢や食材で指定してレシピが探せる

生協のパルシステムが提供しているアプリ。離乳食は、娘がなかなか寝ないことの次に悩んでいた課題でした。ベビーフードに頼りつつも基本的には手作りで頑張っていたので、レシピがマンネリ化しつつあるとよくこのアプリを開いていました。そして私は離乳食作りがあまりにもきつくてパルシステムに加入したので、パルシステムの商品を使って作れるレシピもあったりして参考になりました！離乳食は、特に初期はパルシステムやコープなどの生協を利用するのがオススメです。ほんと、強くそう思います…。

食材チェック表が便利！ログもつけられる

月齢ごとに赤ちゃんに食べさせてOKな食材や、食べさせてもいい時期が一目でわかる食材チェック表があるので安心。また、赤ちゃんに食べさせたことのある食材やメモを記録できる機能もついているのも地味に便利でした。もちろん、赤ちゃんに食べさせてはNGな食材もわかります！

知識系の情報やQ&Aなども

また、月齢ごとの離乳食についてのQ&Aも見れるので、娘が離乳食を突然食べなくなって悩んでいた時期などは、わらにもすがる思いでQ&Aや知識系のコーナーを読んだりしていました。…が、結局原因はわからず時が解決しましたが。ほんとにあれなんだったの！？きほんの離乳食　Q&A

おすすめポイント

月齢や食材で指定してレシピが探せる
食材チェック表が便利！ログもつけられる
知識系の情報やQ&Aなども

さいごに

いかがでしたか？最近コロナウィルスの影響で、お仕事の復帰が伸びてしまいましたが、逆に言えば時間がまだあるということなので、この機会に産後のことを振り返ってみました。約1年半ほど育児をして思うことは、赤ちゃんって、同じ人なのに昨日と今日とでは全然違うんですよね。昨日と今日とでは寝る時間も違うし、昨日食べたものを今日食べなくなるし、かと思えば昨日できなかったことが今日急にできるようになったりします。その新鮮さが育児の楽しい部分ですが、私はそういった「予測のつかない状況」というものが苦手なほうなので、記録を残すことで育児に対する不安を多少なりともやわらげることができました。たしかに、記録をつけ始めの時は、データの数値だけを見て「昨日はできたのに…」と落ち込んでしまうこともありました。きっとデータに振り回されてしまったんですね。なので、基本的にはログは取るだけで、たまに振り返って傾向を見るくらいがちょうどよかったなと思います。何より、今となってはコツコツ続けて残した記録は大切な宝物です。同じように、日々初めてだらけの連続で育児に悩んでいる方が、ログ系アプリを使って少しでも楽になれればいいなと思います！今回は記録系のアプリに焦点をしぼってご紹介しましたが、役立つスマホアプリは他にもたくさんあるので、それはまた別の機会に記事にしたいと思います！以上、彩がお伝えしました。

こちらもチェック

妊娠時期に重宝したアプリについても以前記事を書いたので、興味があればこちらもどうぞ！

↧

産後まで使える！妊娠中に買っておいてよかったマタニティグッズ6

June 29, 2020, 5:00 pm

≫ Next: あの頃の私へ。いま不妊治療が辛いと感じている人に伝えたいこと

≪ Previous: 初めての育児をログって乗り切れ！おすすめの記録系スマホアプリ3【リアルデータあり】

歩行や靴の着脱を楽に！妊婦向けの靴「ボディバランスシューズ」

オーダーメイドシューズで有名な「KiBERA（キビラ）」というメーカーが「妊婦の産前産後をサポートする靴」というコンセプトで発売しているシューズ。妊娠中は転倒防止のためにヒールは履けません。加えて妊婦健診などで靴を脱ぐ機会が多かったため、ぺったんこで歩きやすくて着脱が楽な靴を探していたところ、こちらを見つけました。

スリッポンタイプで着脱しやすく、内側に5度傾斜したインソールが入っているのが特徴とのこと。そのためか履いていてとても楽ちん！すぐに足の形に合わせて伸びていくので、最初は少しキツめのサイズを選ぶのがポイント。

支援センターや病院、保育園の送り迎えなど、産後は産後で靴を着脱する機会が多いため、リピートして現在進行形で活躍中です。最近防水加工されているタイプ（「ボディバランススリッポンシューズレインブロック」）も発売されたみたいですね〜。ほしい…。

ボディバランスシューズ | 靴の通販ならKiBERA

お腹まわりは常に楽であれ！マタニティ向けボトムス

体質にもよりますが、妊娠するとお腹はすぐ大きくなるし、ちょっとでもお腹まわりが窮屈だとそれだけでつわりも一層つらく感じました…。上に着るものは長めのTシャツなら何でもでいいですが、ボトムスだけはマタニティ用を何着か揃えたほうがいいと思います。

手持ちのボトムスに取り付けてウエストを調節できる「アジャスター」ってのも売ってるんですけど、トイレに行くとき取り外しが面倒だったりするんですよね…。あとジッパーが閉まらないのがなんだかソワソワするというか。とはいえ、前述した点が気にならないようであれば、アジャスターのコスパの高さは魅力です。

犬印本舗マタニティリラックスアジャスターEX 犬印本舗 Amazon

色々なメーカーが可愛らしいマタニティ服を出していますが、私が気に入っていたのは「LEPSIM（レプシィム）」のマタニティ服でした。マタニティとは思えないくらいオシャレです。

しかも、産後はすぐにお腹がぺったんこになると思っていませんか…？ならないんですよ！実は！！！（子宮の収縮や努力次第で戻りますが、戻る時間は個人差あり）これ知ってました？私は出産するまで知りませんでした…。

というわけで、マタニティに見えないマタニティ服は、産後も大活躍できます！

マタニティ | [公式]レプシィム（LEPSIM）通販

腰痛や産後の骨盤もどしにも使える！「トコちゃんベルト」

妊娠中は腰痛になりやすくなります。お腹が大きくなるので姿勢が悪くなったり、出産準備のために分泌されるホルモンの影響で骨盤の靭帯や関節などがゆるむためだとか。それなのに、妊娠中は湿布が貼れないんです…なんてこった。

というわけで、痛みに耐えかねて出産予定の病院で購入しました。たしかに巻いていると骨盤が安定するのか少し楽になった気がします。服の上から装着することになるため、これを巻いている時は基本的に長めのTシャツやワンピースしか着れませんが、産後の骨盤戻しにも使えるのでおすすめ。

ちなみにトコちゃんベルトは1〜3までありますが、妊娠中の人におすすめは2だそうです。

トコちゃんベルト2 青葉 Amazonで見る

就寝中の寝苦しさやこむら返り対策に！妊婦用抱きまくら（授乳クッション）

妊婦は主に妊娠後期にこむら返りにも悩まされることになります。しかも就寝中！ほんと勘弁して…。妊娠後期は、就寝中のこむら返りが怖すぎてビクビクしていました。妊婦って本当に大変ですね。

対策としてはクッションなどで足元を高くして寝るといいらしいので、妊娠後期はずっと抱きまくらを足元に敷いて寝ていました。それでもこむら返りが起こる時は起こりますが、頻度は少し減ったような気がします。

こむら返りが起こらない場合でも、お腹が大きくなると仰向けで寝るのはキツくなるため、体勢的にもなにか足に挟んで横向きで寝ると楽ですよ！私が使っていたのはたまひよSHOPの三日月型の抱きまくらで、産後は授乳クッションとして使えるものでした。

妊娠中のつわり対策・腰痛対策に抱き枕｜ベネッセ公式通販「たまひよSHOP」-マタニティウェア、用品・授乳服

とはいえ、授乳クッションとして使うなら身体にズボッとはめてすぐ授乳できるU字型タイプのほうが個人的には便利だったので、授乳クッションは産後に別途U字型を買い足しました。このへんは好みかもしれません！

運動や陣痛のいきみ逃しにも。DVD付き本「マタニティ・ヨガ安産プログラム」

妊娠中は基本的にリモートワークだったため、朝に少しヨガをするのが日課になっていました。「マタニティ」とあるだけに、妊婦でも負担のないポーズだけが収録されているので無理なく続けられました。「産後モード」は疲労回復や骨盤もどしなどに使えるので妊娠中だけでなく産後まで長く使えるDVD本。

マタニティヨガは体重コントロールに使えるし、何より安産に効果があるとのことで、頑張っていた記憶があります。なにせ、私は極度の痛がり＆怖がりなのです…。出産の痛みを少しでも軽減する努力ならなんだってする勢いでした（しかも無痛分娩だったのに）。そのかいあってか、私の分娩時間は2時間6分というものすごい短時間！

赤ちゃんの状態や体質にもよると思いますし、マタニティヨガのおかげかどうかはわかりませんが、ヨガの呼吸法は陣痛のいきみ逃しにも有効なのでおすすめです！

DVD付きマタニティ・ヨガ安産プログラム (日本語) 単行本森島圭子 Amazon

私が使っていたのは2017年の本なので、現在Amazonには中古しかありませんでしたが、他にもマタニティヨガの本は色々と出ているので、興味があれば自分にピッタリな本を探してみてくださいね！

体勢がツラいお風呂そうじの味方！「バスタブクレンジング」

最後にあんまりマタニティっぽくないグッズですが、これも妊娠時期に導入して非常に助かったものです。妊婦はお腹が大きくなるにつれて、かがんだりしゃがんだりする動作が本当にキツくなります。そんな時、母から「こすらなくても意外とキレイになるよ！」と教えてもらい、導入しました。

妊娠時期にお風呂場でかがんでこすり洗いしなくてもいいのは夢のように楽ちんでした。だいたい流しただけで汚れは落ちます。たまに落ちていないな〜という部分だけ長い棒タイプのスポンジで少しでこすり洗いしていますが、そのくらい。産後の今もお風呂前はめちゃくちゃバタバタするので、大変助かっています。

ルックプラスバスタブクレンジングクリアシトラスの香り本体 500ml ルックプラス Amazon

さいごに

産後も現役で活躍しているほど気に入っているグッズを厳選してみました。人によって合う合わないはあるかもしれませんが、もしこれから出産を控えている方がいたら参考になればいいなと思います。

本当は「買ってよかった育児グッズ」というテーマで書き始めたのですが、えらいボリュームになってしまったので、ひとまず産後とは分けて書きました。育児グッズについてはこの次の記事で書きたいと思います。

以上、彩がお伝えしました！

妊娠中におすすめのスマホアプリ

妊婦時代にお世話になったアプリの記事も書きました。興味があればこちらもどうぞ！

↧

あの頃の私へ。いま不妊治療が辛いと感じている人に伝えたいこと

October 5, 2020, 7:50 pm

≫ Next: 意外と少ない！Macで無料で年賀状の宛名印刷をする方法（macOS Catalina〜）

≪ Previous: 産後まで使える！妊娠中に買っておいてよかったマタニティグッズ6

最近は出産や育児に関する記事ばかり書いていますが、実は出産や育児よりも長い間、不妊治療をしていた時期があります。

私にはもうすぐ2歳になる娘がいますが、娘を授かるまでには3年半かかりました。不妊治療の体験を振り返ってみると色々な想いはありますが、一番は「もっと早く気づけたらよかった」と思うことが多々あるということです。

私にとっては3年半は娘と出会うためには必要な期間だったのかもしれませんが、もう少し早く色々なことに気づけていたら、あの治療期間はもっと違うものになっていたのではないかなとも思うのです。

※今回の内容は、すべて「過去の自分に伝えるなら」というコンセプトで書いています。現実問題に置き換えて、それぞれの事情によってできること、できないことはあると思いますが、記事の内容がすべて「そうするべきだ」という意味ではないことをご理解いただければと思います。

職場には不妊治療中であることを伝えたほうがいい

私が不妊治療を経験してわかったことは、「治療はスケジュール通りにはいかない」ということです。予測通りに治療が進まなければ「明日また来てください」と言われることはザラにあります。

そのため、私は不妊治療が始まってまもなく上司（男性）にだけ治療のことを打ち明け、時短勤務に変えました。その後に不妊治療中であることを話したのは後輩の女の子2人にだけでした。（当時、私以外の女性社員はその2人だけ）

それだけでも十分ではありましたが、私はできるなら上司以外の男性の同僚などにも、不妊治療中であることを伝えておけばよかったと思うのです。

当時の私は不妊治療で時短勤務をしていることに罪悪感を持っていました。後輩に「他の人は知らないんですか？」と聞かれた時も、「うん。不妊治療って、別に治療しなくても命に関わるわけじゃないし…なんとなく言いづらくて。周りの人のモチベーションも下がっちゃうんじゃないかなと思って」などと答えた記憶があります。

「そうですかねえ…？」と後輩は首をかしげてくれましたが、本当に、彼女の素直な反応は正しかったのです。

治療の重要度は命にかかわるかどうかで決まるものではないし、何より他の人のモチベーションはそんなことでは下がりません。仮にもし下がったとしても、それはその人の問題であって、自分の責任ではないのです。

それよりも、同僚が治療について知らないことで、治療期間に急な仕事を依頼されたとしても、「治療のことは知らないのだから…」と無理をして応えてしまうことが増えてしまったので、そちらのほうが問題でした。

早めに同僚に治療のことを打ち明けていれば、例えば通院回数が増える治療期間の週は、急な仕事の依頼は対応できないことがあるなど、前もって伝えられたかもしれません。そうすればお互いにとってスケジュール調整もしやすいし、心身に無駄なストレスかかからないほうが治療もいい方向に進んだのではと思いました。

もちろん必要以上に周知する必要はないし、不妊治療を傘に着るというわけでもありませんが、せめて仕事でよく関わる人にだけは治療について伝えておいてもよかったのではないかなと感じました。

人の幸せを素直に喜べなくなってしまったとしても、誰も悪くない

通院のストレスや治療の痛み、なかなか子どもができないことへの焦り…。不妊治療中に辛いと感じることは色々ありましたが、中でもジワジワとダメージが大きかったのが「周囲の出産報告」や「年賀状やSNSの子どもの写真」でした。

友人からの子どもの写真入りの年賀状や、SNSの子ども関連の投稿は、おめでたいことだし可愛らしいと感じるいっぽう、どうしてもそれを目にすると傷ついてしまう自分がいました。

もちろん、相手は傷つけているつもりは微塵もなく、勝手に傷ついているのは自分です。頭ではわかっていても、そんな自分に嫌気がさす時期が続きました。

あの時は「子どもの写真やめてほしいなぁ」とか「こんな風に人の幸せを喜べない自分はもう嫌だ」と思っていたんですが、実はこれ、別に誰も悪くないんですよね。相手はもちろんのこと、自分も。

今ならわかりますが、子どもが生まれたらもう可愛くて仕方ないので、年賀状やSNSに子どもの写真を載せたくなってしまうのは当然です。けれども、それと同じくらい不妊治療中に「子ども」の写真に傷つくのも人として当然です。決してマイナスの感情を抱いてしまう自分が悪いわけではありません。それなら、別に不必要に自分を責めることはなかったなと思いました。

メンタルは急には強くなりません。傷ついているにも関わらず、さらにその自分を責めていたら、状況は悪化するばかりです。それよりも、「妊娠」や「出産」と名のつくものや、何ならSNSからもしばらく距離を置くほうがよっぽど心穏やかに毎日を過ごせます。

実際に、私は不妊治療を始めて3年ほど経った頃から、「妊娠」や「出産」に関連するものは本や映画、テレビなどもあまり見ないようにしていました。今になってみれば、もっと早くそうしておけばよかったと思います。しばらく離れてみたら、少しずつまた自分が過敏になっているものを目にしても平気になる時がきっときます。

「限界」ではなく「期限」を決めてみる

以前に書いた記事でも触れていますが、私はゴールが見えない不妊治療がいよいよ辛くなってきた時に、ある決断をしました。それは治療のゴールを自分で決めることです。

不妊治療は、どんなに努力したからといって結果が伴うとは限りません。もっと言えば、妊娠できない限りいつまでだって治療は続くのです。不妊治療で一番辛いことは、もしかしたらこれじゃないかなあとも思います。

「いつまで続ければいいのだろう」「来年もその先も、ずっとこれが続くのだろうか」そんなことを毎日毎日、考えていました。そして、その答えは「神のみぞ知る」ことだと思っていたのです。

ですが、その答えは実は自分でも用意できます。勇気がいることですが、私は自分の治療の期限を「ここまで」と決めることにしました。その結果として妊娠できたとしても、できなかったとしても。

治療の期限を決めると今度はプレッシャーが強くなるかと思ったのですが、不思議と肩の荷がおりて気楽になったのを覚えています。状況は何も変わっていないのに、期限ができただけで「とりあえずここまでは頑張ろう」と前向きな気持ちになれました。

治療の期限を設定することは、自分で自分の「限界」はここまでだと決めてしまうように見えるかもしれません。ですが、自分の限界など、いったい誰が決められるでしょうか。それこそ、「神のみぞ知る」ことです。

自分で決められるのは、あくまで治療期間の目安である「期限」だけです。その時がきてもなお頑張れるのであれば、期限を延長すればいい話ではないでしょうか？逆に、そこで治療をやめたとしても、それは限界ではなく、期限まで精一杯やり抜いたという「成果」だと思います。どちらにしても、神様でも誰でもなく自分で決めたことならば、そこには必ず「納得」があるはずです。

ここまで書きましたが、必ずしも「期限を決める」ということが「不妊治療をやめる」などの大きな決断である必要はありません。たとえば、「ここまでは不妊治療を休む」という期限の決め方だってありだと思うのです。

長い道のりでも、無理なく前に進めるように、ゴールや休憩地点を自由に設定してみてください。

「もし子どもができなかったら」のその先を想像してみる

不妊治療中、私はずっと「もし子どもができなかったら」のその先を考えないようにしていました。それはとても辛くて悲しいことだと思い込んでいたからです。

ですが、不妊治療の期限を決めた途端、それまで目をそらしていた「子どもがいない未来」が否が応でも現実味をおび始め、「もし子どもができなかったら」のその先を初めてリアルに考えるようになりました。正直、考えていくうちに憂鬱な気持ちにもなりました。例えば、「両親はがっかりするだろうか」とか「治療をやめることを、夫の実家には謝りにいかなくてはいけないかな」などといった事柄です。

私の両親からも夫の義実家からも、そこまで「子どもはまだか」的なプレッシャーはありませんでしたが、それでも密かに孫を望んでいたと思うので、それを考えると心苦しい気持ちでいっぱいになりました。

ですが、思えば「子どもを作ろう」と決めたのも、「不妊治療の期限を決める」と決めたのも、遠方の両親のためではありません。自分自身と、パートナーである夫のためです。そしてこの先も、自分と最も身近で一緒に生きるのは夫なのです。私は夫に「もし子どもができなかったら」どう思うかきいてみました。

夫は「子どもがいた方がそりゃ嬉しいよ」と答えました。その後に「でも、『なんとしてでも』みたいな感じではないかな。もし子どもができなかったら、そのぶん旅行とかいっぱい行こう」と。

それを聞いた時は、目から鱗が落ちたように思いました。この人は、「子どもがいない未来」を辛いものとは考えていないんだ。「子どもがいる未来」とは違った方法で楽しく生きようとしているんだと。

長い間子どもを切望するあまり、私はそれまで「子どもがいる未来こそが幸せ」と思い込んでいました。たしかに、自分の未来に子どもがいるかいないかは大きく違います。「子どもがいる未来」でしか味わえない幸せはもちろんありますが、それと同じくらい「子どもがいない未来」にも、そこにしかない自由があり、体験ができる。きっと幸せもたくさんあるはずだと思うのです。

それに気付いてからはまたも気持ちが楽になり、「もし子どもができなかったら、それはそれでいい」と思えるようになりました。

幸い、私はそのすぐ後に妊娠することができたので、もしかしたら今まで書いてきたことが説得力に欠けてしまうかもしれません。それでも、不妊治療に悩んでいた時、私はたしかに本気でそう思っていたのです。「子どもができてもできなくても、きっと幸せ」

子どもができないことに苦しんでいた当時の私を救ってくれたのは、案外「子どもがいる未来」の自分ではなく、「子どもがいない未来」の自分だったのではないかと思うのです。なので、もし同じように苦しんでいる人がいたら、怖がらずに「もし子どもができなかったら」のその先について、一度想像してみてはいかがでしょうか。

さいごに

本当はもっと色々「あの頃の私」に伝えたいことがあるのですが、いったんはここで終わりにします。もし、いま不妊治療に悩んでいる人がいたら、参考になれば幸いです。

3年半の間、色々な思いをして、たくさんの経験をしました。全て、不妊治療を始めるまでは全て知らなかったことばかりです。辛いことや悲しいこともたくさんあったけれど、それがあったからこそ、たくさんのことに気づくことができました。その経験は、きっと自分の財産になってくれるはずだと思います。

以上、彩がお伝えしました！

具体的な不妊治療の乗り切り方はこちら

以前に自身の不妊治療について振り返り記事を書きました。より具体的な不妊治療の乗り切りエピソードもありますので、もし興味があればこちらもどうぞ！

↧

意外と少ない！Macで無料で年賀状の宛名印刷をする方法（macOS Catalina〜）

January 1, 2021, 9:00 pm

≫ Next: 伝わってる？テキストコミュニケーションを円滑に進めるためのコツ3

≪ Previous: あの頃の私へ。いま不妊治療が辛いと感じている人に伝えたいこと

明けましておめでとうございます！昨年末に年賀状を作成するにあたりMac（OS Catalina以降）で無料で宛名印刷をする時の選択肢が意外と少ないことが判明し、疲れ果ててTwitterでつぶやいたところ色々な方に情報を教えていただきました。（あらためて、本当にありがとうございました！）

調べるのにかなり苦労したので忘れないように、備忘録として書きました。

Macで、無料で、宛名印刷がしたいだけなんだ…。それなのに何故こんなに探しまわなければならないんだろう？みんなどうやってるんだ…
— 彩 (@maritime_color) December 25, 2020

[toc]

事の発端は「”Adobe AIR. framework”は壊れているため開けません」

Macで無料で宛名印刷できる手段として、「はがきデザインキット」や「プリントマジック」というサービスが有名なようです。私が最初に調べてたどり着いたのは「はがきデザインキット」だったので、まずそれを試してみました。すると…

まさかのエラーが。

こちらの記事を参考にしたところ、どうやらAdobe AIR は「MacOS Catalina」に対応していないそうなんですね…。私のMacOSがまさにCatalinaでした。そしてよく見たら、「はがきデザインキット」のサイトにも、そう注意書きが書いてありました。

【結論】タイプ別おすすめ宛名印刷サービス

人によって最適なサービスは違うと思うので、図にしてみました。

「Catalina」以前のOSを使っている人は、「はがきデザインキット」や「プリントマジック」を使えば無料で宛名印刷ができますよ！（Macで無料で宛名印刷ができる代表的なアプリがそのふたつというだけなので、もちろん、それ以外の選択肢もあります）

OSがCatalina以降の人でどうしても無料でPCから宛名印刷がしたいのであれば、プリンターがブラザーかエプソン製であれば「Web年賀状キット」や「Epson Photo＋」ならば可能です。

「Epson Photo+」はエプソンのプリンタードライバーがインストールされていないと使えないのでエプソン製品のユーザー限定ですが、「Web年賀状キット」はブラウザ版なので他社プリンターのユーザーでも使用することが可能です！

ですが、ここで問題となってくるのが印刷位置の調整。PCの画面に出力されたプレビューと実際の印刷位置にはどうしてもズレが生じてしまい、これを合わせるのが意外と面倒でした…。ブラザー製のプリンターを使っているならもしかしたらそのズレも大丈夫かもしれないので、プリンターがブラザー製だという人は一度試してみる価値ありかもしれません。

年賀状作成の作業をスマホで行うことが気にならないようであれば、各プリンター会社が出しているスマホアプリがおすすめです。私は今回はCanonのスマホアプリを使いました。

macOS Catalina以降でPCで作業を完結したいけれど、プリンターはブラザーでもエプソンでもない…という場合は、残念ですが「宛名職人」などの有料のはがき作成ソフトを使うのが今のところ一番よさそうです。

macOS Catalina以降で宛名印刷ができる無料サービス・アプリ

各プリンターメーカーのPC用年賀状作成サービス

ブラザー「Web年賀状キット」

ブラザーが提供している年賀状作成サービス。ブラウザで動くため、インストールなしで使えます！特に会員登録なしですぐに作り始められるのも嬉しいところ。宛名印刷はもちろん、テンプレートからデザインを選んでデザイ
ン面を作ることもできます。

ただし、あくまでも年賀状の作成を目的としたサービスのため、使用期間が年賀状の作成シーズン限定となっています。

プリンターがブラザー製でなくても利用はできますが、私が実際に使用してみたところ、宛名印刷が実際のプレビューとズレてしまい、位置調整が難しかったです。もしかしたらブラザー製のプリンターを使えば大丈夫なのかもしれないですね。

Web年賀状キット2021

エプソン「Epson Photo+」

エプソンが提供しているPCアプリ。年賀状だけでなく、フォトブックやCDやDVDなどのディスクにも印刷できるそうです。

PCにインストールして使いますが、前述したとおり、こちらはエプソンのプリンタードライバーが入っていないと起動しません。使っているプリンターがエプソン製なら使ってみるといいかもしれません。

カラリオプリンター Epson Photo＋| 製品情報 | エプソン

各プリンターメーカーの年賀状作成スマホアプリ

メジャーなプリンターメーカーから便利なスマホアプリが出ています。スマホで年賀状が作れるのはとても手軽ですよね。

PIXUSはがきクリエイター

キャノンが提供している年賀状・はがき作成アプリ。私は自宅のプリンターがキャノンということでこちらを使いました。宛名印刷の位置調整も特に必要なく、綺麗に宛名印刷ができました。やはりプリンターと同じメーカーのアプリなら、ズレは少なく済むのでしょうか…。

住所登録もスムーズで、最大1,000件登録できるそうです。CSV形式で住所録の読み込みや書き出しが可能なので、作成枚数が多い場合は住所録をPCで作成してからスマホアプリに取り込めば登録作業も楽に済みますね。

年賀状のテンプレートも470点以上と豊富で、喪中・寒中見舞いデザインも収録されているそうなので、デザイン面を作るのも楽しそうです。

PIXUSはがきクリエイター

Canon Marketing Japan Inc.無料posted withアプリーチ

スマホでカラリオ年賀

エプソンが提供している年賀状・はがき作成アプリ。キャノンのはがきクリエイターとできることはだいたい一緒です。

住所録の書き出しがECN形式だったので、書き出したファイルをPCで使って住所録を作ることは難しそうですが、エプソンは先述した「Epson Photo+」というPCアプリもあるので、PCで住所録を作りたければそちらを使えばいいと思います。

また、公式サイトには「（筆まめや筆王など）PCで作った住所録もスマホに送って読み込むだけで、そのまま使えます！」とあるので、筆まめや筆王のCSVファイルを持っていれば、PCから登録してスマホに読み込むことはできそうですね！

スマホでカラリオ年賀

Seiko Epson Corporation無料posted withアプリーチ

Brother はがき・年賀状プリント

ブラザーが提供している年賀状・はがき作成アプリ。できることは先述した二社のアプリとだいたい同じですが、もらったはがきをスキャンしてアルバムのように保存・閲覧ができる「はがきアルバム」という独自の機能が面白いです。

こちらは住所録の読み込み形式はContact-XMLファイルで、書き出しはできないようですが、ブラザーも「Web年賀状キット」というブラウザ版の年賀状作成サービスがあるため、PCで作業したければそちらを使えばいいのではないかと思います。

Brother はがき・年賀状プリント

Brother Industries, LTD.無料posted withアプリーチ

【おまけ】デザイン面で縁なし印刷をする時の悩ましい印刷設定

宛名印刷の話からは逸れますが、デザイン面で縁なし印刷をする時に位置の調整でハマったので書きます。

上下左右に3ミリ程度の塗りたしを作成
塗りたしの部分も含めてデザインを書き出して印刷
ページ設定で対象プリンタを自分の使っているプリンターに設定し、用紙サイズで「はがき縁なし」を選択
プリント設定ではページサイズ処理でサイズを「合わせる」にチェック（倍率が94%くらいになる）

上記の設定でPDFから印刷したら制作ツール（今回はイラレを使用）のプレビュー画面とほぼ同じサイズ感で印刷できました。（あくまで私の場合はなので、参考程度にお願いします！）

以下は私がPDFから縁なし印刷した時の設定画面です。

試していませんが、「プレビュー.app」から印刷するのであれば、「用紙サイズに合わせる」「イメージ全体をプリント」を選べばいける気がします。

さいごに

本当は昨年中に記事をアップしたかったけど間に合いませんでした。もう年が明けてしまって年賀状作成っていう時期でもないかもしれませんが、今回ハマったことをどうしても忘れないうちにメモしておきたかったので書きました。もし同じようにMacで宛名印刷をしようとして困った方がいたら参考になればいいなと思います。

最後になりましたが、今年もDesign Colorをどうぞよろしくお願いします！
以上、彩でした！

↧

伝わってる？テキストコミュニケーションを円滑に進めるためのコツ3

May 23, 2022, 6:00 pm

≫ Next: 育児中のフリーランスがコロナになったら？感染前からできる対策・やったことリストなど

≪ Previous: 意外と少ない！Macで無料で年賀状の宛名印刷をする方法（macOS Catalina〜）

お久しぶりです！彩です。

近頃はすっかりリモートワークが定着してきましたね。オンラインでのやりとりは便利な一方で、不便に感じるのが「テキストコミュニケーション」ではないでしょうか。

私はリモートワークになって数年ほどになりますが、未だにテキスト上で正確に相手に要求を伝えたり、相手の意図を読み取ったりするのに苦労しています。

今回は、お仕事上のテキストコミュニケーションにおいて、私なりに工夫していることを書いてみようと思います。

1. テキストに加えてスクリーンショットも添える

すれ違いをなくすためには、ほとんどの場合において「図で見せる」が最も手っ取り早い方法だと思っています。そのため、私はできる限りテキストと一緒にスクリーンショットをセットで添えるようにしています。

たとえば、「画面の中の◯◯の部分を××して下さい」という依頼をしたい場合。これって、隣にいれば画面を見ながら指差して「ここ」とか「あそこ」とかいう言葉だけで済むのに、文章にしようとすると意外と難しくないですか？

最初から具体的に指示できればいいんですが、テキストだとついパパっとアバウトに送ってしまいがちですよね。

うまくその場で返信できて意思の疎通ができればいいのですが、ちょっとタイミングがズレると「確認がとれるまで着手できない」状態に…。

そんな時、スクリーンショットも添えておけばどこを指しているのか一目瞭然。すぐに返信できない場合でも、依頼内容がすぐに理解できます！赤枠だけでもつけておくと、確認のターン数がぐっと減ると思いますよ。

テキストコミュニケーション：スクリーンショットを添えたわかりやすい指示の例 — あ、ここのことか〜。って、すぐに分かりますよね。

2. 修正後の姿もセットで伝える

主にテキスト修正の場合ですが、指示だけでなく修正後のテキストもセットで伝えるようにしています。

テキストの修正の場合は修正後の姿もセットで伝える

例えば、上記の文章を修正してほしい場合。
こういう時、以下のような指示だと迷ってしまいませんか？

わかるけど！
わかるけど、一瞬「どこだ…？」となってしまうと思うんです。なので、私は以下のように「修正してほしいテキスト」と「修正後の姿」をセットで伝えるようにしています。

テキストコミュニケーション：「修正後の姿」もセットで添えたわかりやすいテキスト修正依頼の例 — 「の」が2回続いちゃっているからね。

3. 質問・依頼の理由も添える

自分の思考の流れって、相手には絶対にわからないですよね。でも、「こういう経緯でこの質問をしたいんだ」っていうのがわからないと、答えづらい場合ってあると思うんです。

なので、なるべく質問や依頼をするときは、その理由もセットで伝えることにしています。

これだけで体感的に相手のレスポンスがだいぶよくなる気がしますし、自分もレスポンスしやすいです。（と言いつつ、私も未だにできていない時あるので自戒を込めて…）

例えばこんな時。

こんな時、デザイナー側としてはちゃんと理由があってのサイズ設定だったりします。
また、単にデザイン内のある要素のみを倍くらいに大きくするとなると、デザイン全体のバランスが狂ってしまう可能性があるので全体的な調整が必要になるケースもあります。

何より、この指示の意図を考えて一瞬手が止まってしまうのではないでしょうか。

ですが、このような場合はたいてい「文字サイズを2倍のサイズにする」ことが目的ではない場合が多いです。周りの要素に埋もれてしまっているなどの理由で「もう少し目立たせたい」ということが目的だったりします。

なので、質問や依頼をする時は、セットで「その理由」も伝えるとやり取りがスムーズだと思います。解決策としてより多くの選択肢も生まれやすいです。

さいごに

在宅ワークは通勤せずに自分のペースでお仕事ができて、とても気楽なんですが、その反面テキストを巧みに扱ってコミュニケーションをとる必要があるのですっごく精神を消耗している気がします。どちらも一長一短ですね…。

以前にLIGさんの以下の記事を読んでとても共感しました。こちらもとても参考になるので、ぜひどうぞ！

テレワークで最適なテキストコミュニケーションって？Webエディターが考えてみました | 株式会社LIG

ひとりごと

ブログを書くのが1年以上ぶりになってしまいました。これからゆっくりとでも再開できるといいなと思っています。

目下の目標は、やっぱりデザインのリニューアルですね。このブログを始めて10年以上になるのですが、ずっとこの状態…。以前は季節ごとにテーマを変えたりはしていたのですが、ここらで本格的に、新テーマを作ってみようと考えています！

投稿伝わってる？テキストコミュニケーションを円滑に進めるためのコツ3 は Design Color に最初に表示されました。

↧

もくじ

今年10月からChromeでHTTP ページのフォームに「保護されていません」という警告が表示される

1.CSRの作成

2.SSLの申し込み

3.認証ファイルをダウンロード＆fileauth.txtとしてアップロード

4.中間CA証明書をインストール

5.証明書をインストール

6.SSL設定を有効にする

7.サイトが「https://」でも表示できるか確認

8.さくらの「常時SSL化プラグイン」を有効化

常時SSL化プラグインの注意点

PHPのバージョンが古いとプラグインが有効化できない

プラグインをいったん停止すると設定が初期化される

9. SSLエラー対応

10.SSL対応したらやっておきたいその他の作業

Google Search Consoleの設定

「https://」のプロパティを追加

XML サイトマップを送信

「 Fetch as Google 」でクロールを依頼

Google Analyticsの設定

Google Search ConsoleとGoogle Analyticsの関連付け

さいごに

「Wix（ウィックス）」とは？

ブログサイト作成の流れ

1. アカウント作成

2. テンプレート選び

3. デザインを編集

4. ブログを管理

5. モバイル表示をチェック

6. サイトを公開

実際に使ってみて感じたことなど

必要最低限のことはすべて無料＆自動でできる！

「アプリ」で様々な機能を追加

さらに作り込むことも可能

テンプレートをオシャレにカスタマイズするには知識が必要かも

無料プランではサイト上下にWixの広告が表示される

Wix間の引っ越しはできるが外部に移転はできない

さいごに

スマートニュース（SmartNews）風の表示とは

Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法

実装のポイント

親要素にdisplay: flex;とflex-wrap: wrap;を指定する

:nth-child()で表示を切り替える

数が足りない時はflex-grow: 1;で要素の幅を伸ばす

-webkit-line-clampで行数を調整

さいごに

映画「ゴッホ～最期の手紙～」

ゴッホはなぜ死んだのか？ゴッホの死の真相を探るアートサスペンス

展示会「ゴッホ展 巡りゆく日本の夢」

ゴッホの絵からわかる浮世絵との共通点とは

開催概要

小説「たゆたえども沈まず」

切なすぎる兄弟の絆と天才画家「フィンセント・ファン・ゴッホ」誕生に関わるひとりの日本人画商

さいごに

Wix Codeとは

「Wix Code」でできること

1. データベースコレクション

2. 動的ページ

3. カスタム入力フォーム

4. カスタムインタラクション

5. API

Wix Codeの使い方【データベース作成編】

「Wix Code」を使うには

データベースを作成

データベースの項目を設定

データの型について

データの入力

さいごに

その他のWix関連の記事

特定不妊治療助成制度とは

助成制度を使える「指定医療機関」について

都道府県の不妊治療助成制度

助成を受けるために必要なもの

申請期限

1月と3月に治療を受けた場合（千葉県）

市区町村ごとの不妊治療助成制度

助成を受けるために必要なもの（松戸市）

申請期限

助成を受けるためのやることリスト

1. 自分の通っている病院が「指定医療機関」かどうか確認

展示会「ゴッホ展巡りゆく日本の夢」

Search Consoleのインデックスカバレッジ画面