「こめでぃ」の「お米プレゼントキャンペーン」の発送の模様

みなさまこんばんは!
好評を博しました「こめでぃ」の「お米プレゼントキャンペーン」にご参加くださった方ありがとうございました!
ランキング入賞者の方で申請がまだの方は申請をお早目に~!
申請の締め切りは4月の30日です!

申請いただいた方には順次お米の発送をしています^^
su-sanに頼んでゆうパックを購入してもらい、お米の袋を一つ一つ丁寧に梱包してお届けしております。

まだ届いてないよという方、今しばらくお待ちくださいませ~。

今回企画したお米プレゼントキャンペーン、楽しんでいただけましたか?
今後もこのようなイベントを企画していこうと思うので、その際はぜひまたご参加ください!^^
今後とも弊社のアプリをよろしくお願い致します。

Webで使う『画像形式』。どう使う?

Webで使う『画像形式』。どう使う?

こんにちわ、最近左だけ花粉症?のWebデザイナー otarie です。
今回は画像形式のJPEGPNGGIFSVGについてのお話をしようと思います。

各画像形式についての特徴や、メリット、デメリットについて調べたことをまとめてみました。

・Joint Photographic Experts Groupの略
 拡張子は「.jpg」または「.jpeg
・静止画像データの圧縮形式:非可逆圧縮の画像フォーマット

インターネットでよく使用されている画像形式ですね。
JPEGは圧縮率が高く、フルカラー(約1,677万色)の画像を扱えるので、たくさんの色を必要とする写真や複雑なテクスチャーに向いている画像形式です。
グラデーションも綺麗に表現できます。

デメリットとして、JPEGは高い圧縮率で圧縮できるのですが、その際、多少の劣化を伴います。
圧縮率を上げるとファイルは小さくなるんですが、画質はブロックノイズのようになり劣化してしまう場合があります。
また、アイコンやアニメ調の平坦なイラストなどは、にじんだように汚くなってしまいます。
さらに、一度低解像度に圧縮した画像は、元に戻すこともできないので元データをバックアップしておく必要があります。

拡張子のjpgjpegの違いは?
MS-DOS時代に拡張子が3文字までという制約があったためjpgを使用していました。
現在では、普及しているOSで3文字までの制約はなくなったのでjpegを使用することができるようになり、混在するようになっているようです。

注意点
UNIX上では大文字と小文字の識別が別ファイルとして認識されるので.jpg」と「.JPG」の違いには気をつけましょう。

Portable Network Graphicsの略
 拡張子は「.png
GIFに替わるライセンス・フリーの画像形式として生まれた画像形式
 :可逆圧縮の画像フォーマット

PNGは可逆圧縮で複数の透過処理ができる画像形式です。
フルカラーにも8bitカラーにもすることができます。
この画像形式は圧縮率が高く同じ内容のGIF画像より10%~30%程度ファイルサイズが小さくなります。圧縮によってデータが捨てられてしまうことがないので、データを完全に復元することができます。
また、ライセンス問題の不安がないのも特徴です。

デメリットはJPEGGIFと比べると新しい技術になるので、古いPCやブラウザ、携帯では表示できない可能性があります。
また、フルカラーにするとJPEGよりファイルサイズが大きくなってしまいます。
アニメーションには対応していません。

PNG-8
Internet Explorer 5から対応しているため、現在では十分に使用できる画像形式です。  
GIFと同じ、インデックスカラーモードの256+1色透過を使うことができて、グラデーションなどを含む画像などに対しては、GIFよりも圧縮率が高い場合が多いです。

PNG-24(32)
JPEGと同様にフルカラー(約1,677万色)の色を扱うことができて、さらにPNG-32ではアルファチャンネルを使用することができます。
注意点として、Photoshopでは、PNG-32PNG-24とされているので勘違いしやすいですが、これは32bitのことです。
IE6に対応させるには、filterJavaScriptを使用する手間がかかってしまい、ファイルサイズも他の画像フォーマットに比べて、重くなる傾向にあります。

Graphics Interchange Formatの略
 拡張子は「.gif
・最大8bit256色)までの色を扱うことのできる圧縮画像形式

256色以上必要としてないロゴやリンクボタン、アイコン、アニメ調の簡単なイラストなど、線の境界(輪郭)もキレイに作ることができる画像形式です。
データ容量も小さく、透過処理もできます。また、256色までのアニメーションを作ることができるのも特徴です。    

デメリットは、色数に制限があるので、風景写真など多彩な色を使う場合では乏しくなってしまいます。
一つの画像で色を256色しか使用できないため、シンプルで色数が少ない画像の場合は、png形式よりファイルサイズを若干小さくできることもありますが、実際のところ、あんまり変わらないです。

Scalable Vector Graphicsの略
 拡張子は「.svg
・静止画像データの圧縮形式:非可逆圧縮の画像フォーマット

SVGJPEGPNGGIFとは異なり、ベクター画像なので、1ピクセル未満のオブジェクトでも画像を拡大・縮小しても画質が劣化せずにくっきりと綺麗に表示することができる画像形式です。

ベクタ形式
点の座標位置や点同士を結ぶ線を演算して表した画像のことです。
計算して表示する画像なので、画像自体のデータは小さく、画像の拡大や縮小も画質を演算して表現するため、劣化せずに表示できます。

ラスタ形式
ラスタ形式は「ドット絵」なので、画像を拡大すると、輪郭がギザギザになります。
ですが、複雑に色や図形が組み合わさったデータ(写真など)の表現には、ベクタ形式よりラスタ形式の方が向いています。
JPEGPNGGIF、などはすべてラスタ形式の画像です。

また、SVGは拡大・縮小に強いので、レスポンシブWebデザインでとても有効です。
ロゴ画像などに使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。
SVGは画像ファイルですが、テキストエディタで中身を見ることができるので、作成や編集も可能です。JPEGPNGGIFの画像ファイルをテキストエディタで開くと文字化けしてしまいます。
また、マークアップ言語である特徴を活かしてHTMLSVGを融合させると、地図や折れ線グラフ、円グラフといった、HTMLだけではできない斜めや曲線の表現ができます。

デメリットは、写真や手書きのイラストなど、色や形状が複雑なオブジェクトの場合は、点や線の集まりでは表現しきれないので不向きです。
また、あまりにも複雑なオブジェクトを表示させようとすると動作速度が遅くなったり、メモリーの使用量が大きくなってしまいます。

いかがでしたか?
画像形式を全部理解するのがとても難しく、まだまだ勉強中ですが、Webデザイナーとして大事な知識だと教わってこうして色々調べて行くと、だんだんその大事さに気づいてきました。

また次回をお楽しみに~^^

アプトピ様にて「こめでぃ」が紹介されました!

こめでぃ

どうもSu-sanです

月曜の朝からとても嬉しい出来事があったので報告です!

 

な、なんと
アプトピ様に「こめでぃ」の紹介記事

書いていただけました!

とっても素敵な記事なので気になった方は是非↓

日本人ならやっぱり白米でしょ!!硬派でシュールなお米パズル【こめでぃ】

「こめでぃ」を今後ともよろしくお願いいたします。

こめでぃ よろしく

GitLabとSourceTree

どうもSu-sanです。

今回はGitLabとSourceTreeの連携について自分のメモがてらやって見たいと思います。

GitLabのHPに行きRegistarに必要情報を入力して登録完了。

GitLab.Register

 

左側にあるタグからProjectsページに飛んで、New Projectのアイコンから新規プロジェクトを作成します。プロジェクト名は今回はTestで作成します。

Gitlab.project

次はSourceTereeの設定をしましょう

SourceTreeをDLし画面に従ってインストールしましょう
途中ユーザー登録をしてくれと言われるので先ほど登録したGitLabのIDを入力し画面に従って設定完了!

 

新規リポジトリを登録からURLからクローンを作成で先ほどGitLabで作ったprojectを選択し、ソースURLの部分にSSHのURLを入力して完了です!

Su-sanでした。

また次回もお楽しみに〜

お米LINEスタンプができるまで!

お米LINEスタンプリリースしました!

こんにちは。
デザイナーのtaeminです。

今月の17日にリリースされたお米LINEスタンプ

「こめでぃのライスな奴ら」

 

皆さんはもうダウンロードされましたか?

 

このように日常でもお使いになれるのでダウンロードがまだの方は是非ダウンロードしてみてくださいね~!

 

 

さて、実はこのお米LINEスタンプ、わたくしtaeminが製作させて頂きました^^

LINEスタンプを一つ作成するのにも様々な工程を踏んで丁寧に製作しています。
せっかくなのでこの「こめでぃのライスな奴ら」の製作工程を今回ご紹介したいと思います!

 

このお米スタンプはこうして作られた!!!

➀使用用途の案作り
まず、こういったスタンプの案作りから始めます~
この段階でとにかくたくさん案を書き出してみて、消去法で残った厳選された案を元に製作しました。

 

➁ラフ製作
出した案を元にいくつかラフのパターンを考えますが、これを元に完成形が決まってくるので重要な部分です。
ここが意外と時間が掛かります。。

 

➂下書き
どんなスタンプにするかだいたい決まってしまえば、後は進めていくのみです!

 

 

➃線画作成
下書きを元に統一感のあるキレイな線にしていきます。

 

 

➄下地着色
ベースになる色を塗ります。
上の線画と見比べると色をつけるだけでもかなり印象が変わってきます。
ここまでくると完成形が見えてきますね^^

 

 

➅影やハイライト
影や光などを足していき、、、

 

 

➆仕上げ
文字入れや細かな調整をして完成です!

 

 

 

このように丁寧に細かな手順を踏んで、こだわりを持って一つ一つ作成をしていますので自信の出来となっております!
是非この機会にダウンロードしてみてくださいませ~~

スタンプ購入はこちら