フレークの素 | Web制作・システム開発のCreativeFlakeブログ

年末が近づくとまた今年もあの季節。 年賀状のシーズンです！ ハガキ年賀状は年々減少しつづけていて、年賀状発行枚数は2003年の44億枚をピークに、2016年は26億枚でした。 通信手段はメールか電話、友だちや家族ならSNSやチャットで連絡が当たり前になってきている今だからこそ、ハガキをおすすめしたい！！ 年賀状注文は面倒？ 年賀状の注文は写真やさん、印刷屋さん、比較的大きなスーパーなどでも取り扱っているほか、本屋さんで年賀状素材集などを買って自宅でプリントするのが大半でしょうか。 イラストレーターなどのソフトを使う手もありますが。 ちなみに弊社の年賀状は毎年イラレで描いています。 無料で作れる年賀状 最近無料で、かつクオリティの高い年賀状作成サービスが出てきています。「早くて」、「無料で」、「誰でも作れる」サービスをご紹介します。 郵便年賀.jpの「はがきデザインキット」 郵便年賀.jpは、あの郵便局が運営しているサービスです。 デザインキットはテンプレートを選ぶだけの簡単操作。 テンプレートは ・和もの ・カワイイ ・ポップ ・喪中・寒中　　のカテゴリから選べます。 そのほか便利な機能として、 ・写真入れ ・文字入れ ・スタンプ入れ ・賀詞入れ などが可能です。 文字の色を変えたり、大きさを変えたりするのも、直感的にできるので簡単にオリジナルデザインが作れます。 できたデザインは、郵便局に印刷注文することも、データをダウンロードして自宅のプリンターで印刷することもできます。 「はがきデザインキット」はこちらから いらすとやの「ねんがや」 「いらすとや」は無料イラスト素材サイトです。 もしかしたらお店やWebページなどでいらすとやのイラストを見たことがある人も多いかも！ こちらもテンプレート一覧からデザインを選んで、データをダウンロードするだけ。 あとはプリンターで印刷して完成！ ・キャラクター ・版画 ・シンプル ・ゆるかわ ・おえかき ・コラージュ ・ししゅう・・・・などなど18カテゴリから選べます。 挨拶文のあり、なしを選択できるので、送る相手にあわせて選べますよね。 「ねんがや」はこちらから 「年賀状AC」 こちらも無料素材サイトの年賀状用サイトです。...

クイック認証SSLの特徴 低価格 審査のオンライン化のため、低価格のSSL 書類不要 オンライン審査によるドメイン認証で、印鑑証明等の書類審査が不要 誰でも申請可能 企業、団体、個人事業主、個人が申請可能 サーバ台数無制限 同一コモンネームであれば、1ライセンスで無制限にインストール可能 コモンネームとは コモンネームとは、SSL証明書を導入する際に、SSL通信を行いたいサイトのURLのことです。 （例） URL コモンネーム http://my-domain.com my-domain.com http://www.this-is-my-website.jp www.this-is-my-website.jp そのため、複数のURLで暗号化通信を行う場合、それぞれのSSL証明書を取得する必要があります。 クイック認証SSLの定価 クイック認証SSLはGMOグローバルサイン社が提供するSSL証明書です。 定価は 34,800 （税抜） ＊2016年11月1日の価格 クイック認証SSLの比較 2016年11月1日の価格 販売代理店 価格（税抜） 定価との比較 さくらのSSL 34,800 0 ドメインキーパー 14,000 20,800 Joe's SSL 15,970 18,830 Bit Star SSL 29,800 5,000 remiseストア 20,925 13,875 データホテルSSL 18,900 15,900 Written by Creative Flake

10月22日（土）に都内の小学校の保護者、教職員の方々を対象に、インターネット、とりわけスマートフォンの安心安全な使い方の講演会をさせていただきました。 これは総務省と文部科学省のサポートにより、全国の学校、団体、地域へ出張して講演を行う、出前講座の「e-ネットキャラバン」の活動です。 講演はどんな内容か 講演は通常45分〜90分ほどの内容です。 パソコンのみならず、スマートフォンも手軽に便利にインターネットを楽しんだり、学習のツールとして使用することのできる便利なものですが、判断力の不十分な子どもたちにとって、スマートフォンの使い方を誤ると、取り返しのつかない事態になってしまうことがあります。 実際社会問題として、 ・スマホ依存症 ・歩きスマホ ・スマホによるいじめ ・LINEやSNSの炎上問題 ・傷害暴行事件、性的被害事件 ・詐欺事件 など、様々な問題が毎日のように起こっています。 これらを未然に防ぐべく、弊社も制作開発を行う、作り手として、e-ネットキャラバン講師として参加させていただいております。 学生向けと大人向けの講座 学生向けとしては小中学生と高校生向けの内容、大人向けとしては保護者教職員を対象とした内容で開催しています。 費用 この講座の講師派遣かかる費用、謝礼、交通費は不要です。 ですので、毎年小学5,6年生を対象に行いたいということでご依頼もできます。 申込方法 申し込みはe-ネットキャラバンの 「講座内容と受講方法」 をご覧になった上で、 「Web申し込みフォーム」 よりお願いします。 Written by Creative Flake

Googleのセキュリティブログが9月8日に発表した内容によると、今後HTTP接続には警告が表示されることがわかった。 具体的には、Chrome（バージョン56 : 2017年1月リリース予定）から、HTTP接続のサイトで、「パスワード」、「クレジットカード情報」を含むものについて、アドレスバーのところに警告アイコンが表示されるようだ。 ▼表示される予定のChromeのアドレスバー （上が現在のChrome53、下が1月リリース予定のChrome56） 今後は「パスワード」、「クレジットカード」に限らず、広くHTTP通信には警告が表示されることも予想される。 HTTPS化に対応していないサイトは年内を目標に対応することをおすすめする。 Googleセキュリティブログ（英文） 【Googleセキュリティブログ　全文訳】 ユーザーがWebブラウザを安全に使えるようにするため、Chromeはアドレスバーにアイコンで接続セキュリティを表示する。これまでChromeは安全でなくても、HTTP接続に特に表示はしなかった。2017年1月（Chrome 56）からGoogleでは、安全でないすべてのHTTP接続サイトをマークする長期計画の一部として、安全ではないパスワードやクレジットカード情報を送るHTTPサイトをマークすることになった。 Chromeは現在、中立的な指標でHTTP接続を示している。これはHTTP接続において安全性が不足しているという事実を反映していない。ユーザーがHTTPの上のWebサイトを読み込む時に、情報がユーザーに届く前にネットワークの他の誰かがそのサイト閲覧したり、修正できうる。 Webトラフィックの大部分はこれまでにHTTPSに移行させ、HTTPSの利用が現在も増えている。Googleでは、現在HTTPS上に提供されたChromeデスクトップページ読み込みの半分以上でマイルストーンを打ってきている。さらに、2月にGoogleがHTTPSレポートをリリースしてから、トップ100中の12以上のWebサイトが、デフォルトページ指定をHTTPからHTTPSに変更してきた。 これまでの研究で、ユーザーが警告としての「安全」アイコンの不足に気づいていのだけれども、頻繁に警告が表示されると気にしなくなるということが分か...

ドット絵（ピクセルアート）は1980年代ごろのパソコンやゲーム機で、最もよく使われた画像の表現方法でしたが、パソコン等の高解像度化にともなって、ドット絵を使われることはほとんどなくなりました。 以前は解像度が低かったため、写真や画像を今のようにきれいに表示することができなかったので、ドットで描画することが主流でした。目で見てピクセルだと分かる範囲がドット絵と呼ぶそうです。 今だからこそ逆に斬新、かわいいと思うこともあるのですが、せっかくなのでドット絵をCSSだけで描画したいと思います。 もちろん、こんなチョコボを描くことも余裕でできます。 ドット絵に使うCSS HTMLやCSSを使って描く表現方法はさまざま考えられますが、今回は「box-shadow」のみで描いていきたいと思います。 box-shadowでドットを描く HTML <div></div> まずHTMLには空のdivを用意してあげます。これだけでHTMLは完成です。 CSS div { background: transparent; width: 10px; height: 10px; box-shadow: 0 10px red, 10px 20px blue, 20px 10px green; } CSSは基点＜（0, 0）の場所＞をtransparent（透明）とし、基本となるドットの大きさを縦、横ともに10pxずつと設定します。 そのときに、基点から下へ10pxの箇所に赤いドットを、右へ10px、下へ20pxの箇所に青いドットを、右へ20px、下へ10pxの箇所に緑のドットを描画します。 ↓↓↓こんな感じで表示されます 本来box-shadow（ボックスシャドウ）は指定した要素に立体っぽく影をつけるCSSなのですが、ぼかし具合を入力しないことでゼロ、つまりただの直線として認識されます。 ざくざく作っていこう こんな感じで、ドット絵を書いていくには元画像を準備し、ピクセル単位で描画していきます。 チョコボを描く（HTML） <div id="chocobo...

PhotoshopやIllustratorなどで、太文字を書きたいとき文字がつぶれて見づらいことはありませんか？ つぶれ文字の場合 文字がつぶれてしまった場合の多くは、 ・ボールド「B」で太くしている ・枠線をつけて太くしている こういうケースが多く見られます。 これは、元の文字の外側に太線をつけるため、スキマが埋められてしまうことでつぶれて見えるためです。 つぶれない文字にするには 文字をつぶさないようにするには、文字そのもののウェイトで調整します。 ウェイトというのは「太さ」という意味です。 例えば、「●●ゴシック-M」とか、「▲▲明朝-W3」などという、フォント名の最後にアルファベットや数字がついているのを見たことはありませんか？ まずはフォント（文字）を選ぶ際に、ウェイトのバリエーションが存在するかどうか確認してから使うことをおすすめします。 太字にできる無料の日本語フォント そもそもどんなフォントが太字のバリエーションがあるのか、今回は無料の日本語フォントを紹介します。 M+フォント やや丸みのあるやさしいイメージのゴシックフォント。 極細から太字までフォントウェイトがあります。 【ライセンス】商用・非商用可。利用、複製、再配布可能。 配布サイトでダウンロード Kazesawaフォント こちらも丸みのある、認識性の高いフォントです。 エクストラライトからエクストラボールドまで6種類のウェイトがあります 【ライセンス】SIL Open Font License準拠 配布サイトでダウンロード 源ノ角ゴシック AdobeとGoogleが共同開発したオープンソースのフォントです。 エクストラライトからヘビーまで7種類のウェイトがあります 【ライセンス】SIL Open Font License準拠 配布サイトでダウンロード Rounded M+ 丸ゴシックのかわいい感じなのに品のあるのフォントです。 また、「標準」、「丸さ強め」、「丸さ弱め」からも選んでダウンロードが可能です。 【ライセンス】商用・非商用可。利用、複製、再配布可能。 配布サイトでダウンロード Written by Cr...

夏休みはスマホを持ってポケモン探しに出かけよう！という子どもから大人まで多いのでは？ 便利で楽しいスマホですが、今後はスマホ利用に関する問題が多く出てくるのでは、と危惧されています。 特に、小学生や中学生のお子さんをお持ちのご家族の方は危険なトラブルに遭わないよう、注意が必要です。 危険なトラブルに遭わないために、スマホのルールを作ろう 便利なスマホが一転して危険なものや、人を傷つけたり、時にはいじめ問題にもつながりかねません。 そこで一度ご家庭でスマホのルールを作りましょう。 たとえば、 ・決めた時間・場所以外ではスマホを使わない ・迷惑メールは無視する（開封しない、決して返事をしない） ・LINEなどのコミュニケーションアプリでは相手を傷つける発言をしない ・課金については家族のルールを決める などです。 フィルタリングサービスを利用しよう また、 一般社団法人電気通信事業者協会 では、スマホを安心・安全に使うためのルール作りとして、フィルタリングサービスを推奨しています。 フィルタリングの設定方法はこちらから。 今後も増える可能性アリ　ポケモンGO関連トラブル もうすでに世界ではポケモンGO関連のトラブルがいくつも発生していますが、利用方法さえ正しく守れば楽しく遊べるゲームです。 内閣サイバーセキュリティセンター（ＮＩＳＣ）のＨＰに注意喚起が掲載されているので、　是非ご一読ください。 内閣サイバーセキュリティセンターからポケモントレーナーのみんなへおねがい♪ ちなみにポケモン発売当時の1996年に家にあったのは、「緑」でした。 Written by Creative Flake

バッグに入れたはずのスマホが・・・。 あれ？　ポケットにもない！？　え？？ホントないんだけど！　ええええええええ！！！！！！！！！！！！！！！！ ってなる前に読むと、落ち着いてスマホが探せますよ。 もちろん、今まさにスマホないっぽい！人も参考に。 ※Androidユーザのみです。 まずはGoogleのマイアカウント「ログインとセキュリティ」にアクセス １． 「ログインとセキュリティ」にアクセスしましょう。 ２． 「スマートフォンを探す」から、なくした or なくしたっぽいスマホを見つけます。 3. 登録している端末を選択 この「ログインとセキュリティ」からできることは6つあります。 ① スマートフォンをロックする ② スマートフォンに電話をかけてみる ③ スマートフォンでログアウトする ④ 携帯通信会社に連絡する ⑤ 最寄りの遺失物取扱所に連絡する ⑥ 端末のデータの消去を検討する スマートフォンをロックする こんなときにおすすめ↓↓↓↓↓ 普段ロックかけてない人。まずはロックしとけば勝手に中身見られないだろう！！ １． 「スマートフォンをロックする」を選択 2. ロック解除用のパスワードを入力（必須） 3. 発見者に読んでもらうメッセージを作成（任意） 4. 発見者に電話してもらう連絡先を入力（任意） ▲ロック用のパスワードを入力して「ロック」すると ▲ロック完了です。 ▲スマホ側でもちゃんとロックされていました。 スマートフォンに電話をかけてみる 探したんだけど見つからない。 「ログインとセキュリティ」ページ 右上の「着信音を鳴らす」からは、着信音最大音量でスマホを鳴らせます。 まずは携帯に電話してみよう。 固定電話や他の携帯がない場合は、チャットツール（LINE、ハングアウトなど）の電話機能も使ってみて！（とGoogleは言っています。） スマートフォンでログアウトする PCなどからスマートフォンのGoogleアカウントをログアウト。 知らない人にアドレス帳を見られたり、何かを購入されてしまったりするのを防ぎましょう。 携帯通信会社に連絡する ここまで結構探したんだけどやっぱないわ。 という人は契約している...

使用度の高い白とグレーを使った、無料でダウンロードできる背景パターンを集めました。 定番・王道パターンから、最新トレンドのパターンまで素敵なパターンをまとめています。 大きめ白菱型パターン 立体感のあるグラデーションの白菱型パターンはふんわりとした印象にも、ラグジュアリーな印象で、美容系やウェディング系にも使える素材。 大きめ白菱型パターン素材のダウンロード 小さめ白菱型パターン こちらも自然な感じに立体感のある白菱型パターン。背景はもちろん、ボタンの一部にしても使えそうなおしゃれな素材。 小さめ白菱型パターン素材のダウンロード 四角なパターン 幾何学的な空間のような四角モチーフのパターン。奥行き感があって、Web素材にも印刷用素材にも使えそう。 四角なパターン素材のダウンロード ネットワークなパターン 点と点を線でつないだ、ネットワークのような格子状パターン。スタイリッシュな印象にぜひ。 ネットワークなパターン素材のダウンロード 六角形のシームレスパターン 六角形をモチーフにしたつなぎ目のない、シームレスパターンです。色を変えたり、透過度を変えてみてアートな印象にも。 六角形のシームレスパターン素材のダウンロード 四角格子のパターン ドットでつないだ四角形の格子のパターンは、かわいい感じに。 四角格子のパターン素材のダウンロード 白のポリゴンパターン 自分で描くと結構大変なポリゴンパターン。数年前から人気継続中です。 白のポリゴンパターン素材のダウンロード 白のポリゴンパターン 上のポリゴンパターンとはちょっと違う、折り紙を折ったようなパターン。人とは違うポリゴンを探していたという方はぜひこちらを。 白のポリゴンパターン素材のダウンロード セールっぽい放射状のパターン 白い放射状はクリーンでおしゃれ。中心を引き立てたいときにも、背景にももちろん。 セールっぽい放射状のパターン 三角形のパターン どんなイメージにも使えそうな三角形のパターン。ちょっとした色のアクセントでさらに目を引く印象に。 三角形のパターン素材のダウンロード Written by Creative Flake

クリエイティブフレークでは、入門的な研修・補習から、Web担当者を対象にした研修、新入社員やインターン向けの専門的な研修まで、様々な研修を行っております。 それぞれに合った独自のカリキュラムとスケジュールをご用意いたしますので、無駄なく、短期間で実践的な研修・補習が受けられるのが最大の特徴です。 企業向けIT研修の内容 企業向けのIT研修としては、新入社員やインターン、中途採用スタッフのスキルアップを目的とされる企業様がほとんどです。 具体的には、 Webデザイン研修 HTML/CSS研修 JavaScript／ｊQuery研修 PHP研修 SEO、マーケティング研修 その他プログラミング言語 など、さまざまで、期間は3ヶ月〜6ヶ月が最も多い期間です。（週1回〜隔週１回開催のペース） 企業向けIT研修の参加者 どんな方が参加されるかというと、初めてIT分野にチャレンジする方や、デザイナーだけどもマークアップも学びたい方、企業のWeb担当者なので必要な知識を教えて欲しいという方まで様々ま目的、目標を持って受講されています。 また年齢も、これまで20代前半〜50代の参加者がいらっしゃいます。 企業向けIT研修の場所 開催場所はご要望に応じて、ご依頼企業様のオフィス内、貸し会議室など対応いたします。 企業向けIT研修の費用 参加される人数と、期間、内容によって異なりますので、詳しくはお気軽にお問い合わせください。 個人向けIT研修の費用 これからIT業界、Webの分野へチャレンジしたい、転職を考えている、という個人の方にも研修・補習を行っております。 やりたい分野がある場合はもちろん、決まっていないので試しに色々チャレンジしたいという方もいらっしゃいます。 これまで行った研修について 掲載可能な研修内容の一例です。 東京都 港区　株式会社A様（ECサイト運営）の場合 目的 : 新入社員向けに、業務に必要なスキルの研修を行ってほしい 期間 : 5ヶ月（週1回／各2時間） 内容 : Webデザイン、マークアップ（HTML, CSS, JavaScript） 人数 : 2名 費用 : 100,000〜200,000円 東京都 新宿区　株式会社B様（オウンドメデ...

そもそもeasing（イージング）って何？みたいなところの人もぜひ。 easing（イージング）……エフェクトの動きを加速／減速させる。 英語では「和らげる、緩和する」の意味。 つまりは、等速で動かすのではなく、「すぅーーっと動かしたい」ときに便利な技です。 まずはデモから easingのデモページ このデモでは、「linear」（リニア）、「ease-in」（イーズイン）、「ease-out」（イーズアウト）の3つの動きで同時に動かしています。 最もシンプルなCSSの書き方 まずは基本となるCSSの書き方 記述例 -moz-transition: 1s ease-in; -webkit-transition: 1s ease-in; -o-transition: 1s ease-in; -ms-transition: 1s ease-in; -moz、-webkit、-o、-msから始まるCSSはそれぞれ、 ・Mozilla系（FireFoxなど） ・Webkit系（Chromeなど） ・Opera系 ・マイクロソフト系（IEなど） のブラウザはそれぞれのCSSを読んでね。という意味です。 すうーーっと動かしたいCSSは「transition」で指定してあげます。 それぞれの動き方 それぞれの動き方は、 linear……ずっと一定 ease-in……出だしは遅く、終わりが速い ease-out……出だしは速く、終わりが遅い 注意すべきは、どれも1秒指定（スタート時から動作終了時までの時間が1秒）です。 結局どれがいいんだろう？ 客観的に見て、ストレスなく見れるのが一番です。 今回のように、「ものを動かしたい」場合、linearやease-outがよいかもしれません。 ease-inだと、出だしが遅くてなんだかちょっと気持ち悪いと思う人もいるかも。 デモはこちらからも easingのデモページ Written by Creative Flake

紙媒体の内容を書き写したいときに便利なOCR、買うと結構高いし、そこまで必要じゃない。 そんなときに便利なのがGoogle Drive。 1. 「撮って」 2. 「切り抜いて」 3. 「アップロード」 だけの超簡単3ステップを紹介です。 1. 「撮る」 スマホでもデジカメでも、とにかく何でもOK。 だいたいな感じで撮影しましょう！ 撮影のポイントは、「明るい場所で」、「焦点をあわせる」、これだけ！！ 2. 「切り抜く」 Photoshopなどの画像ソフトなどで必要なところだけ切り抜きましょう。 もし机などの背景も入っていたら、切り抜くと、より作業がはかどります。 ポイントは、暗すぎる写真は明るくし、コントラストもはっきり、文字をくっきりさせましょう。 ※正しく読み取ってくれないこともあります。 Photoshopなんて持ってないよー！って人は、Gimpでも、スマホのアプリでも大丈夫。 とにかくお手持ちのソフトやアプリで十分です。 ▼必要なところだけを ▼切り抜いてみました 3. 「アップロード」 その前に、Googleドライブにアクセスしましょう。 Google Drive（ https://drive.google.com/ ） ※Googleのアカウントでログインが必要です。 ▼先ほどの切り抜いたファイル（jpgなどの画像ファイル）を、ドロップ＆ドラッグでアップロード ▼ファイルを右クリック → 「アプリで開く」 → 「Googleドキュメント」 ▼開くまでに数秒〜数十秒かかります。 上が画像、下が読み取ってくれたテキストです。 スペース、コンマ、ピリオドなど、ちょっと違う箇所がある場合は目視で修正しましょう。 これまで使ってみて、英語はかなり読み取れています。日本語もそこそこ。 ただ、文脈にそって、どのワードなのか自動的に認識しているようで、文中での単語のスペルミスはほとんどありません。 文頭での「１（数字の一）」と「I（英字のアイ）」と「l（英字のエル）」、「,（コンマ）」と「.（ピリオド）」などは人間がしっかりとチェックしてあげれば、全然問題なしですね。 Written by Creative Flake