2017年酉年の年賀状はがきのイラストを描いてみた

来年の年賀状イラストに親子のニワトリのイラストを描いてみました。

トップ絵の年賀状の文字に使用しているフリーフォント「ひま字フォント」はこちらからダウンロードできます。

http://www.kfstudio.net/himaji/


イラストのみこちらのサイトで無料配布しています。


【酉年/とり】年賀状イラスト(商用利用可能/フリー無料素材/JPG/PNG/SVG)
鏡餅をイメージした親子のニワトリのイラストです。 … https://t.co/CWRHAIEuGo

— @free-vector (@freevector_m)
2016年12月3日

毎年、年賀状を書くのが間に合わなくなる時が多く遅れて書いて出しています。年末に案件が立て続けに発注されるパターンが多いためです。

今年は案件が停滞している隙に年賀状イラストを早めに描きました。

去年は年末にプリンタのインク切れに気づいてネットショップでインクを発注したけど年明けて配送されたのでさらに遅れました。

大量に年賀状印刷が必要な人はこういう所へ頼んだ方が良さそうです。

http://nenga.aisatsujo.jp/


私は年賀状を出す相手が少ないので大量印刷はしないので自宅のプリンタで印刷しています。10枚程度だと自宅で印刷する方がコストは安いです。

年賀状は既製品のはがきで上等かと思う時がありますが、仮にもフリーランスで絵で多少なりとも収入得てるなら他人のイラストの年賀状で出すのは少し抵抗ありました。

2017年酉年の年賀状はがきのイラストを描いてみた来年の年賀状イラストに親子のニワトリのイラストを描いてみました。 トップ絵の年賀…




サイトのファイルをGitHubへアップして効率化、サーバー費用節約してみた

SourceTreeが使えるようになったのでサーバー費用の節約とファイル管理のためにGitHubに素材サイトのファイルを置くようにしようと考えました。

イラスト素材サイトの場合は季節ごとに毎月イラストが追加されていくのでファイル数も無限に増えていくと考えられます。

今までDropboxにファイル置いてバックアップしながらFTPを使ってレンタルサーバーにあげていました。

レンタルサーバーもいつ解約するかわからないし、なるべく半永久的にサイトのファイルをアップロードできる場所が欲しいと思いました。

そして思いついたのがGitHubでした。

GitHubの無料版を使うと全てのファイルが公開されてしまうので注意が必要ですが 無料素材サイトの画像ファイルは見られても問題はありません。ZIPファイルをコミットしてプッシュすることによってGitHubへアップロードすることができました。

GitHubの容量制限について
  • GitHubのリポジトリは1GBが容量制限。
  • 1GBを超えると警告メールがくる。
  • 1つのファイルは100MB以上のものをプッシュできない。
  • 1つのファイルは50MBを超えると警告メールくる。

静的サイトホスティングサービスなのでWebサイトに使用する程度の画像の容量が限界なのかなと思います。

ファイルが増えてきて1つのリポジトリが1GB超えそうになったら別のリポジトリを新規作成すればいいと思いました。

ソースコードを管理するためのGitHubですが画像管理にも使えそうな印象でした。

私が運営している素材サイト(このブログもそうですが)はTumblrなので記事が増えても0円で運用できてサーバー費用の節約になっています。

ただし、Tumblrは画像、CSS、JSファイルは別途レンタルサーバーへ契約してアップロードする必要があります。

Dropboxのパブリックフォルダ機能(HTMLサイト公開機能)は来年から使えなくなるという通知がきたのでTumblrに使用しているCSS,JSファイルも随時GitHubへアップしていく予定です。 Gitはバックアップやコード修正もできるので一石二鳥です。

GitHubと似たサービスのBitbucketも無料版でもファイルを非公開設定にできるので使い勝手はそちらもよさそうです。

▼SourceTreeでアップロードするファイル内容を見える化できる

image

▼GitHubにレポジトリを作ってZIPファイルのダウンロードURLも作れる

image

サイトのファイルをGitHubへアップして効率化、サーバー費用節約してみたSourceTreeが使えるようになったのでサーバー費用…




kindle unlimited(キンドルアンリミテッド)で無料期間読み放題を試してみた

水曜日にkindle unlimited(キンドルアンリミテッド)の無料期間に登録してみました。

3日くらい使ってみた感想とは思ったよりも本の種類が多かったなという印象です。

私は主にコンピュータ・ITのカテゴリから本を検索してダウンロードして読んでいます。

Kindle Unlimited:読み放題ストアのカテゴリ


私が読みたい本はWeb系、プログラミング言語系の初心者向けの本だったので0円で試し読みできる本のサービスは正直ありがたいです。 


読みたい本があれば月額980円払う価値はあるかなとは思います。

ビジネスの実用書をたくさん読む人には最適なサービスです。

逆にコミックスの種類が少ないです。


試し読みして本の購入で失敗したくない人には良さそうです。

ネットで本を買うと中身が期待していたほどでなかったということが多いです。


本を貸し出しできる制限は10冊までのようです。

11冊目になるとどれか本を削除しないといけないようです。

図書館の有料電子書籍サービスという感じでした。


▼無料体験は下記のリンクから登録できます。


今すぐ30日間の無料体験を試してみる。


▼kindle unlimited 解約の方法はこちらのサイトが詳しく書かれています。合わないと思った人は期間内に解約すればお金はかかりません。


「Kindle Unlimited」開始から1カ月、解約方法は?
http://www.itmedia.co.jp/mobile/articles/1609/02/news028.html

kindle unlimited(キンドルアンリミテッド)で無料期間読み放題を試してみた 水曜日にkindle…





GitアプリSource-treeでGitHubPagesでWebページを公開する方法【初心者向

最近はドラッグのみで動作するGitのアプリもあるので初心者にとって敷居は下がってきました。

黒画面が慣れていないデザイナーさんでもSource treeを使えばGitHubでWebページやコードを公開したりすることが簡単にできます。


GitHub側で行う作業

(1)GitHub画面のプロフィールアイコンの横にある「+」ボタンをクリックし「New repository」をクリックします。

image

(2)GitHub PagesでWebページを公開するには「アカウント名/(アカウント名).github.io」のレポジトリ名をつけます。「Create repository」をクリックするとGitHub内で新規レポジトリが作成されます。

image

Source treeアプリの設定方法

(1)Source treeのアプリをURLからダウンロードします。
Source tree https://ja.atlassian.com/software/sourcetree

画面に従って入力していき、Atlassianアカウントの作成をしてログインした後にGitHubアカウントと接続するとアプリが使用できるようになります。

image
image

(2)Source treeの画面を開き、レポジストリをクローンしてローカル(PC)とGitHub環境を同期させます。

image

(3)リポジトリのクローンでローカル内にフォルダが作成されるので、フォルダ内にHTMLファイルを作ります。(GitHub PagesではHTML/CSS/JSの静的サイトのみ動作可能です) 

image

(4)(3)のフォルダの中にサイト作成が完了したらSource treeに戻りローカルのタブをクリックしレポジストリ名をダブルクリックします。 

image

(5)作業ツリーのファイルをステージングエリアにドラッグ&ドロップで移動させます。 

image

(6)「コミット」をクリックします。 説明や修正内容を書いたのちにコミットのボタンをクリックします。 

image

(7)コミットをした後は「プッシュ」をクリックします。 

image

(8)GitHubのサイトへ行き変更が反映されていることを確認します。 

image

GitHub Pagesで作成したHTMLページ

https://designlabomika.github.io/


GitHub Pagesはhttpsに対応しているところがいいですね。

PHPには対応していないなど欠点はありますが動的なシステムを組む必要のない静的なHTMLサイトを作成する時にいいと思います。

Source treeからプッシュすればサイトが更新公開されるのでFTPからアップロードしなくていいしブログの代わりに大量に記事のあるサイトも作れそうです。GitHub Pagesだと実質0円でサイト運用が可能です。


私はTumblrテーマ、HTMLサイトのコード配布や宣伝用LPを設置するサーバー代わりに使用しようと思います。独自ドメインも設定できるようなので結構便利です。

無料版GitHubは趣味の個人用プロジェクトにもってこいのツールだと思いました。
本来は共同作業向けツールなのですが、私はあくまでコード公開・自サイト制作に使用しようと思います。


▼参考にしたサイトと書籍

無料で使える!GitHub Pagesを使ってWebページを公開する方法
http://techacademy.jp/magazine/6445

Git初心者でも大丈夫!完全無料でGithub PagesにWebページを公開する方法
https://liginc.co.jp/web/html-css/html/96453

GitアプリSource-treeでGitHubPagesでWebページを公開する方法【初心者向】最近はドラッグのみで動作するGi…




日記としてTumblrを使いたい時に参考になるブログ、無料テンプレートの紹介

Tumblr企業ブログ

シンプルなデザインでTumblrをブログとして導入している企業ブログを探してみました。

ChatWorkCreator’s Note

image

http://c-note.chatwork.com/


Yahoo!JAPAN Corporrate Blog

image

http://yahoojapanpr.tumblr.com/


Nikon

image

http://nikonimaging.tumblr.com/


無料テーマ
文字が見やすく文章を書くことだけに集中できるシンプルな白地系の無料テーマを探してみました。


APOLLO THEME

image

http://apollo-theme.tumblr.com/

ZEN

image

http://zen-theme.tumblr.com/

Solo

image

http://solo-sanographixtheme.tumblr.com/

lnk

image

http://ink-theme.tumblr.com/


まとめ

ブログテーマを作る際は文字の行間を意識しつつコンテンツは整理してみせる方がお洒落に見えますね。

Tumblrのメリットはサーバーやドメインを取得しなくてもブログテーマを選ぶだけでその日のうちから始められることです。自分で独自ドメインを取得していれば独自ドメインのブログやサイトが持てます。

[過去記事]tumblrの独自ドメインの変更の仕方をまとめました

何ページ記事が増えても無料で利用できるという所が気軽に始めやすくていい所です。(実際に1万記事ポストされたブログもあります)

WordPressへTumblr記事をインポートすることもできるので記事をバックアップしたい人はローカルにWordPress入れてTumblr記事をインポートするといいかもしれません。

TumblrからWordPressに移行(引っ越し)したい時は下記のプラグイン使うと簡単です。

Tumblr から3ステップで簡単インポート

日記としてTumblrを使いたい時に参考になるブログ、無料テンプレートの紹介 Tumblr企業ブログシンプルなデザインでTumb…






簡単に背景画像を全画面表示にしてくれるjQueryプラグインBackstretch【MEMO】

Backstretchとはコード数行で背景画像のフルスクリーン表示が手軽にできるjQueryプラグインです。

(1)Backstretchをこちらのサイトからダウンロードします。

http://srobbin.com/jquery-plugins/backstretch/

(2)jQuery本体とBackstretchのJSを読み込みます。


(3)基本的な全画面表示の場合のJSコードは下記のように記述します。


背景写真をフェードさせながらスライドさせたい場合は下記のように記述します。



▼参考サイト

http://blog.nest-online.jp/15521

http://www.webshiki.com/javascript/134.html

簡単に背景画像を全画面表示にしてくれるjQueryプラグインBackstretch【MEMO】Backstretchとはコード数行…


Google Analyticsでは「どんな人が」「どうやって来て」「どのように行動したか」といった情報を分析可能ですが、「ユーザーサマリー」「すべてのページ」「参照サイト」しか確認しないという人も多いのではないでしょう

Google Analytics「チャネル」で訪問の全体像を把握する




2015〜2016年にKindleで購入した本(webデザイン・JS・Sassコーディング・他)

本は紙派でしたがWeb関連の本だと購入したその日にパッと読んで知識を吸収したいと思うようになったので最近はKindleで購入する事も増えました。

時期によって定価より半額くらいで購入できる時もありました。 Web技術の書籍も電子書籍のみでしか発行していない薄い本もあるので1000円未満で購入できるものもあります。

仕事で必要な本があった場合にKindleだと注文してすぐに読めるのがメリットだと思います。 紙の本はAmazonで古本として販売できるのがメリットかなと思います。

▼Amazonで中古本販売する方法は下記のサイトが参考になります。 

http://matome.naver.jp/odai/2136119727085416001?&page=1


Kindleで購入した電子書籍

最近、Create.jsを勉強しようと思ったので今日購入しました。 300ページ超はあるので結構色々載ってそうです。 この内容を全て吸収して身につければデザイナーではなくデベロッパーになれそうです(^^;) 多分ところどころ覚えるだけになりそうな予感。

Animate CCをもっと活用するために購入した本です。Flash Proで作ったアニメにJSコードを書き加えるテクニック,サンプルが掲載されています。

image
北村 崇,浅野 桜 エムディエヌコーポレーション 2016-03-23

コリスさんのサイトで紹介されて気になったので購入した本。当時セール中で980円くらいで購入できました。 受け渡ししやすいWebデザインのデータを作るにはどうすればよいかの基本が掲載されています。 デザイナーがコーダー・エンジニアへデザインを渡す時に読んだ方がいい本だと思いました。

数少ないBracketsの使い方が書かれた本です。基本的な使い方や便利なエクステンションが多く掲載されています。

最近のマルチデバイス対応、フレームワーク(主にBootstrap)のwebサイト構築方法とBootstrapを使ったサイト制作が学べる本です。 近年のレスポンシブ対応必須のWeb制作で一番役に立った本だと思います。Bootstrap対応バージョンは3です。

フロントエンジニア入門の人におすすめな本です。 私の場合は実務ではまだSassとCompassを導入してないので参考程度に購入しました。


購入した本を客観的に見て最近求められているweb技術はインタラクティブ性とマルチデバイスサイトという傾向があるように思いました。

2015〜2016年にKindleで購入した本(webデザイン・JS・Sassコーディング・他) 本は紙派でしたがWeb関連の本だ…





Dreamweaver CC 2017を使ってみた感想(Sassコンパイル関連など)

前のバージョンからあった機能も多いですが、今日触ってみてDreamweaverが以前よりは使いやすくなったと思いました。

◯Dreamweaver CC 2017を使ってみて良かったと思う所

(1)ワークスペースについて
ワークスペースのレイアウトはウィンドウから「デベロッパー」「標準」を選ぶことができます。 コーディング中心の人は「デベロッパー」、デザイン中心の人(デザイナー)は「標準」がいいと思います。 

image

(2)レスポンシブサイトで便利なサイト幅が表示されたタブ


クリックするとスマホサイト幅になったり、PCサイト幅になったりデバイス毎に切り替わります。 PC、タブレット、スマホで色分けされてるので視覚的にわかりやすいです。
ライブを選ぶとChromeで閲覧しているのと変わらない表示なのでブラウザを立ち上げる手間は省けます。 

image

(3)レスポンシブのデバイス幅が表示されたタブをクリックするとメディアクエリのコードへ移動できる


前からあった機能かもしれませんが今日気づきました。 対応デバイスサイズが多いサイトでは重宝するかもしれません。

image

(4)Sass,Lessが標準機能でコンパイルされるようになった

CSSプリプロセッサーに対応

Dreamweaverが、SassやLESSといったCSSプリプロセッサーに対応。完全なコードの色分け、コードヒント、コンパイルが利用可能となり、短時間でクリーンなコードを作成できます。
http://www.adobe.com/jp/products/dreamweaver/features.html


×Dreamweaver CC 2017を使ってみて残念だと思う所

  • 私の環境ではSCSSをコンパイルするとエラーになってコンパイルされない
  • ⌘EでCSSをインラインで編集できる機能があるがSCSS(Sass)は無理らしい(Bracketsでは可能)
  • 軽量エディタに比べて起動とブラウザのプレビューが遅い


SCSSの編集をすることが多い自分にとっては正常にコンパイルできないのは辛いです。 Bracketsだと正常にコンパイルできます。 そのためコードのエラーとは違うような気がします。

個人的に今のままBracketsを使い続ける方が仕事しやすいと思いました。

Dreamweaverはコーディング苦手なWeb初心者かデザイナー向きのソフトなのかなと思ったりしました。

最近多い縦長のレスポンシブサイトとか1ページでコードが長くなる事が多いので、そういう場合は軽量のエディタソフトが向いています。

Dreamweaverが活躍するケースは複数ページのあるコーポレートサイトの管理かなと思います。 テンプレート機能があるので雛形作って静的サイトページの量産に向いていそうです。


▼Bracketsは下記の過去記事のようなエクステンションをインストールするとSassを保存しなくてもリアルタイムにブラウザに反映されるのでオススメです。
BracketsでSassをコンパイルしてライブプレビューする方法【エクステンション・拡張機能】

▼その他のBracketsに関しての過去記事はこちら

http://blog.designlabo-mika.com/tagged/Brackets

Dreamweaver CC…




Illustrator CC 2017に追加された「ピクセルのスナップ」の新機能でぼやけない画像を作る!

Adobe CCが2017にアップデートされたことによりIllustratorにもピクセルパーフェクトの機能が追加されたので早速試してみました。

Illustratorは端数が出るので、整数化しないと滲んだりぼやけたりして画像が書き出されることがあります。 新しいIllustrator CC 2017でデザイン作業するとピクセルに沿った画像の作成が簡単になります。

(1)「ピクセルのスナップ」のボタンをクリックし「OK」にします。 

image

(2)「選択したアートをピクセルグリッドに整合する」をクリックします。 

image

(3)変形パネルを見るとオブジェクトがピクセルに整数化されました。

オブジェクトの位置はうまく整数化されず端数になりました。

これは自分で手動で修正するしかなさそうです。

image

▼公式Adobeサイト
デザインのピクセルを最適化

https://helpx.adobe.com/jp/illustrator/how-to/pixel-perfect.html

ちなみに「ピクセルのスナップ」機能が追加される前はこのスクリプトを使って 座標オブジェクトの整合化をしていました。

古いバージョンのIllustratorを使っている人はこちらのスクリプトを使うとオブジェクトの端数が整数化されて画像がぼやけなくなります。

座標と画像サイズの整数化、座標の整数化のスクリプト
http://12px.com/blog/2010/05/illustrator/

★おまけ☆便利と思った機能


以前のIllustratorにはなかった機能だと思います。
矩形ツールで丸のオブジェクトを作成した後に「変形」パネルから円グラフのマークをクリックすると簡単に円グラフの図形が作成できます。 

image
image

Illustrator CC 2017に追加された「ピクセルのスナップ」の新機能でぼやけない画像を作る! Adobe…