デザイン

オンライン印刷サービス 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”]

当サイトも、サクりとレスポンシブデザインにしてみた。

当サイトも、サクサクとレスポンシブデザインにしてみた。

今頃感ただよいますが、
これまで、PC画面サイズ用のみとして機能していたテーマをスマートデバイス向けに、
レスポンシブデザインを適用してみました。

1.モバイルファーストへの転換

PCベースのレイアウトから、基本をモバイルとして1カラムで考え、画面サイズが大きくなることで、
2カラムへと変化させる。

2.viewport の設定

レスポンシブデザインにて、マルチデバイスに対応する為、viewport(width=device-width を設定します。
>HTML

<meta name="viewport" content="width=device-width">

2-2.IE8への対応

・・・。

3.可変を前提とする

>CSS

#container,
.wrapper {
  margin: 0 auto;
  width: 90%;
}

4.ブレイクポイントを設定する

今回は、スマートフォン、PC(タブレット)として320px、768pxの2つをブレイクポイントとしました。

>CSS

/* for SmartPhone */
@media only screen and (min-width: 320px) {
}

モバイルファーストとして考えてるのでベースになります(1カラム)。

/* for Tablet */
@media only screen and (min-width: 768px) {
}

2カラムへ変化。

5.WordPress アップロード画像の処理

レスポンシブデザインにするため、アップロード画像の可変処理を追記します。
(記事本文内の画像がはみ出ないようにね!)

>CSS

img.size-full,
img.size-large,
img.size-medium,
.attachment img {
    max-width: 100%; /* When images are too wide for containing element, force them to fit. */
    height: auto; /* Override height to match resized width for correct aspect ratio. */
}

その他、もろもろ調整はしておりますが、とりあえず主要なとこだけ。
メジャーブレ960pxは、まぁ置いときましょう・・・。

レスポンシブデザイン自体、実際どうかなと想うところもありますが、まぁブログだし。

法要カタログチラシ

さてさて、消費税も上がるのも確実かという今日この頃。
それに伴い、印刷物の税込表示等、頭痛のタネは様々あります。

そのため、現状増刷NGにて取り急ぎのカタログチラシをサクッと準備。

御仏事・御法要チラシ

寒中見舞い

寒中見舞い
2013年も明け、はや8日。

松の内も過ぎ、寒中見舞いを出す頃合いです。

喪中であるものの、年賀状を楽しみに特に報告はせず、皆の便りを楽しんでおりました。
年に1度ですし(笑)

ただ、貰うばかりではなんだかなぁと寒中見舞いを出す事に。
昨年は子供も生まれてる事ありますので…
続きを読む