tool

オンライン印刷サービス Superprintにて個人名刺作ってみた

さて、以前から、Web業界で活躍する日本人の素敵な名刺デザイン 2013年版
参考になるクリエイティブ名刺デザインなどを拝見し、ちょっとばかり刺激を受けたきっかけで名刺でもつくってみるかと思いたち、
割安であったSuperprintさんにてさっそく制作してみました
Superprintさんのサイト上から入稿用データのテンプレート(.ai)がダウンロード出来ますので、編集して入稿するだけです。

Superprintさんの紹介

1.値段が割安

今回の印刷では標準的なマシュマロホワイトにて作成してみましたが、さらっとみた限り、他用紙・オプションを含めて他の印刷会社さんと比較しても割安ではないでしょうか。

2.用紙やオプションの無料サンプルあり

SuperPrintの用紙・印刷のサンプル集を無料でお届けしていただけますので、事前にデザインの当たりや用紙の質感などがわかりやすいです。また、用紙の種類もオーソドックスなナチュラルなものから個性派のザラザラ系、プラスチックなど質感も多様で、Goodです!ただし、私の場合はサンプルが届くまで多少日数(1ヶ月くらいだったかな・・・)がかかりました。
※無料サンプル請求時の自動返信メールにては、以下のように記載されてありましたが。(用紙サンプルの出荷まで1~2週間のお時間をいただく場合がございます。)
まぁ無料なので文句はありませんが、倍以上の日数でも連絡等も無かったのはちょっと残念です。

3.サポート体制

印刷データのチェック・校正のやりとりでは、PDFによりカンプの表示、カラー(コード)の調整など重点的に行ってくれるようです。

難点として感じたのが、支払い方法が先払い銀行振り込み、または配送時の代金引換(ヤマトコレクト)とちょっと少ないように思えます。

出来上がった名刺

入稿してから、約10日前後でメール便にて届きました。
専用の袋を開封してみると箱の登場!今回は100部の注文でしたので、この箱の中に50部が2セット入っています。

20140208-194541.jpg

今回は普通にマシュマロホワイト-両面フルカラーを利用しました。サラサラとした触り心地です。
裏は塗りでなくとも、モノクロで良かったかな・・・。

20140208-194909.jpg

はやく、捌いてしまいたい今日この頃です(笑

気持よくコーディング。サクサクEmmetメモ with Sublime text 2

emmet-sub

イマサラナガラ感満載ですが、年末の季節イベント等での実店鋪多忙によるコーディング離れで、
多々ど忘れすることありますので、メモっときます。

Emmetの導入

Sublime text2なのでPackage Controlインストールありきで、Emmetのpackageを追加。

展開

Ctrl + E
↑↑ 忘れないで ↑↑

コーディングの効率化例

HTMLの雛形

たとえば、サイト制作時に毎度書く下記のようなソースを、”html:5″で展開。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

上の階層へ戻る

これまでの”()”で囲う必要がなくなり、”^”で階層を一段階上に上がる事が出来るようになりました。

<-- これまで(Zencoding) -->
(#header>(.nav+.logo))+#wrapper<!-- 展開は「tab」 -->
 
<-- emmetの場合 -->
#header>.nav+.logo^#wrapper#header>.nav+.logo^#wrapper

地味にグッジョブ!

ダミーテキスト挿入

p*2>lorem

で展開すると、

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor sint aspernatur sit nostrum nisi asperiores vel. Nihil tempore a quia et ducimus quidem beatae impedit rerum provident maxime non assumenda.</p>
<p>Assumenda consequatur porro commodi molestiae eum aut inventore aperiam voluptates pariatur reprehenderit facere est eos earum repellat aliquam magnam dignissimos vitae nisi dolore placeat ab distinctio mollitia modi nobis quasi.</p>

よくあるナビゲーション

<nav>
    <ul id="menu">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>

上記のような、よくあるナビゲーションも

nav>ul#menu>li*5>a[href=#]

で展開。

連番化

ごくたまにありますよね。連番作るの^^

ul>li.nav${メニュー$}*6

で展開すると、以下のように。

<ul>
  <li class="nav1">メニュー1</li>
  <li class="nav2">メニュー2</li>
  <li class="nav3">メニュー3</li>
  <li class="nav4">メニュー4</li>
  <li class="nav5">メニュー5</li>
  <li class="nav6">メニュー6</li>
</ul>

CSS編

以下に例をあげてみますと、

db => display: block;
m:a => margin: auto;
p10 => padding: 10px;
pb10 => padding-bottom: 10px;
tdn => text-decoration: none;
posl => position: relative;
poa => position: absolute;
pf => position: fixed;
w100 => width: 100px;
fsz12 => font-size: 12px;
fsz12pt => font-size: 12pt;
ベンダープレフィックス
-bxs
 
-webkit-box-shadow: inset hoff voff blur color;
-moz-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
-bdrs10
 
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

などなど、コーディングにおける効率化さまさまです。

[amazonjs asin=”4844329456″ locale=”JP” title=”HTML+CSSコーディングが10倍速くなるZen Coding”]

ワイヤーフレーム・モックアップが軽快に作れるmoqupsが便利

moqups

以前から使用しているワイヤーフレームツールのひとつ、
オンライン上でサクサクとワイヤーフレームが作成できるサービス「moqups」のご紹介です。

Moqupsは動作も軽く、直感で使えるモックアップ作成ツールです。
ドラッグ&ドロップで楽に操作することが出来て、基本的な機能も全て揃っています。ただし、画像をアップロードするにはユーザー登録が必要となります。

1.無料で利用可能

  • データ制限無し
  • ユーザー登録にてPDF or PNGに書き出し可能

2.豊富なパーツ

必要なUIパーツが豊富に揃っているので、かっこいいワイヤーフレームが作れます。
パーツはドラックアンドドロップで貼付けることができ、とにかく操作が簡単です。

左のリストから追加したい要素をワイヤーフレーム内にドラッグします。
要素をクリックすると詳細な設定が行えます。

この他、ご紹介しきれない機能が満載です。
登録不要で作成はすぐにできますので、ぜひ一度試してみては。

複数のWebサービスを組み合わせて簡単に連携させることができる「IFTTT」

ifttt

If This Then That(これをやったらあれをやる)というその名の通り、
きっかけとなる操作を実行すると、登録しておいたWebサービスを実行してくれるという便利なサービスです。
例えばブログに記事を公開したらfacebookに記事を投稿する。
IFTTTがiOSとも連携しているので、iphoneのカメラロールに写真が追加されたら、
dropboxに保存するなどといった連携も、IFTTTを使えば簡単に自分のレシピを作成する事ができます。

この手の移植アプリの中でも豊富なチャンネルの中から選択し、
Facebook、Evernote、Weather、DropboxなどのWebサービス同士で連携することができます。

IFTTT

sublime text2ショートカット

最近はコレ一択となっているsublime text2

ショートカット集まとめ

編集

{ ” Ctrl + C ” | 選択していなければ行をコピー }

{ ” Ctrl + X ” | 選択していなければ行を切り取り }

{ ” Ctrl + Shift + K *| 行を削除 }

{ ” Ctrl + Enter ” | 後ろに行を挿入 }
続きを読む

シンプルなオンラインエディタがいい感じ

オンラインエディタscratchpad.ioが「超」シンプルかつ軽快なエディタとして良い感じ。
いろいろと含む場合はjsfiddle使いますが、フロントエンド・エンジニア畑の私は、
ちょぺっとコーディングしたい、それ共有したい・・・って時にはサクッとしてて有効かも。
なによりUIが好き(笑)

Scratchpadの使い方:

  1. HTML & CSS —レンダリングしながらカキカキ
  2. Press ⌘ + i でフルスクリーン切り替え
  3. URLコピってシェア(リアルタイムでアップデート♪)

http://scratchpad.io/VEqdd713Gz