クリスマスも終わると、あっという間に年末年始ですね。 洋風から一気に日本らしい装飾に切り替わる時期。 今回は、日本の“わびさび”を感じられるWebサイトデザインを集めてみました。 下記からどうぞ！ 目次 旅館・施設のWebデザイン お寺・神社のWebデザイン 料亭・店舗のWebデザイン 商品・工芸品のWebデザイン その他 旅館・施設のWebデザイン 京都 貴船荘 | 貴船の川床 京料理 https://www.kibunesou.com/ 九州 武雄温泉 御船山楽園 http://www.mifuneyamarakuen.jp/ 式年遷宮記念 せんぐう館 http://www.sengukan.jp/ お寺・神社のWebデザイン 音羽山 清水寺 http://www.kiyomizudera.or.jp/ 寒川神社 http://samukawajinjya.jp/ 料亭・店舗のWebデ

グラフィックやWebなど文字に関わる人なら誰もが知っていると言っても過言ではない王様フォント「Helvetica」。Macでは標準で入っていますが、Windowsには入っていません。なので、WindowsではHelveticaの代わりとして「Arial」というフォントが使われます。 HelveticaとArialはとても似ているフォントですが、実際にどのくらい字形や印象が違うのでしょうか？ 字形の違い colisさんで下記のような記事が紹介されていました。 ArialとHelveticaの違いがはっきりと分かるこの一枚 画像をみるだけで形の違いがわかります。（青がArial、赤がHelvetica） arial & helvetica (via: swissmiss) Helvecitaの方が少し手書きの名残りを残したような柔らかい形をしていますね。 どっちがHelvetica？ 企業ロゴ

ホームページ欲しいけど、デザインできないし、HTML？FTP？とか難しそうだし…。でも、ブログやpixivじゃ味気ない！簡単におしゃれなポートフォリオサイトっていうものが欲しいの！ と、思っているイラストレーターさんに、私がぜひオススメしたいのが「Tumblr」。 Tumblrを使えば、ブログを書くように、簡単にポートフォリオサイトを作って更新できるんです。しかも、無料！ この記事では、実際にTumblrで開設してからイラストの更新までご紹介します！ はじめに Tumblrとは？ Tumblr ブログの縮小版、ミニブログといった感じのWebサービスです。 あと、Facebookのようにシェアしたりいいねをつけたりできるソーシャルネットワーキングの機能もあわせもっています。 おもに画像収集に使われることが多いサービスですね。 Twitterの画像版みたいな。 どうしてTumblrがおすすめな

今までの就活や転職などの経験から、私なりのポートフォリオの作り方やポイントをまとめてみました。なので、グラフィックやWebデザイナーさん向けですが、クリエイティブ業界全般の方にも参考になると嬉しいです。 目次 はじめに：そもそもポートフォリオって？ Step 1：どんなポートフォリオを作ろう Step 2：今までの制作物をリストアップ Step 3：ラフを書いてページ構成を確認 Step 4：印刷データを作る Step 5：印刷・製本する 最後に：完成させるためのコツ おまけ：私のポートフォリオはこんな感じ はじめに：そもそもポートフォリオって？ ポートフォリオとは、簡単にいうと「作品集」のことです。 ポートフォリオは場面によって他にもいろいろな解釈があると思いますが、この記事では「クリエイティブ業界へ就職するために、自分の制作物をまとめたもの」＝「ポートフォリオ」と位置づけてお話ししてい

普段、画像解像度を「dpi」と言っているのですが、いざPhotoshopで確認すると「ppi」と書いてあります。 ・・・ん？「ppi」ってなんだ？！と、そういえばdpiの意味もよく知らなかったので、調べてみました。 以下からどうぞ。 目次 １、そもそも、解像度って？ ２、解像度の単位とは？ ３、dpiとppiは、ほぼ同じ意味で使われる ４、でも、なぜほぼ同じ意味なのに2つあるの？ １、そもそも、解像度って？ 簡単にいうと、写真などのイメージの「密度」を数値化したものです。 解像度の数値が高ければ高いほど、よりきめ細かい綺麗なイメージ（高解像度）ということになります。 解像度の違い “Resolution illustration“. Licensed under Public domain via ウィキメディア・コモンズ. ２、解像度の単位とは？ 解像度を表す単位は、一般的に「dpi」と

CSS（スタイルシート）でfont-sizeを指定するとき、pxを使わない方がいいと聞いたことがあります。 ですが、pxで指定しないとなると、今度はemと%が出てきて、どれがいいんだ？といつもよくわからないまま使っていました。 なので、どれがいいのか？そもそもこの単位たちは何なのか？復習も兼ねて調べてみました！ 目次 ・なぜ「px」で指定しない方がいいと言われているの？ ・font-sizeにおけるpx、em、%の簡単な用語説明 ※一部修正・削除（2016年12月11日） ・px、em、%の違いは、絶対？相対？ ・IEライクなfont-sizeの指定方法 ・古いIEを気にしない、スマホサイトは「rem」がおすすめ ※追記（2014年10月1日） なぜ「px」で指定しない方がいいと言われているの？ むかしむかし「IE」で文字の拡大ができない問題 ブラウザには今見ているWebサイトを拡大できる

この度、デザインメモは新しくなります！ 「デザインメモ 2.0」にバージョンアップをし、新しい場所へ移動することにしました。 新URLはこちら ↓ https://designmemo.jp/ こちらですでに公開されている記事は引き続きお読みいただけます。 これからも新しくなったデザインメモをどうぞよろしくお願いします！ スズキアユミ 追記（2017/12/24） 更新停止としていましたが、こちらのブログも更新を始めようと思います。 姉妹ブログとして、 デザインメモ（このブログ）：Webデザイン初心者〜中級者さん向けのお役立ち情報やツールの使い方などを発信します。 デザインメモ 2.0：デザイナー歴6年のスズキが書きたいことかくデザインのメモです。 という切り分けたような切り分けてないような感じです。 2.0の方が今までの「あくまでもスズキのメモ」というコンセプトを引き継いで運営し、 この

現役Webデザイナーの私が日頃からよく利用していて、Web上に無料で提供されている便利なWebツールのサービスをピックアップしてみました！ 本当に使ってるので、古っとか思われたら恥ずかしい…笑 1. アイコン素材を探したい Free vector icons – SVG, PSD, PNG, EPS & Icon Font – Thousands of free icons さっと使いたい時や自分で作るときの参考になる、無料のベクターアイコン集。png、psd、svg、esp形式がそれぞれ揃ってるのはGOOD！ 2. ファビコンを作成したい Favicon Generator for all platforms: iOS, Android, PC/Mac… PCブラウザだけでなく、iOSやAndroid用など多彩なファビコンを作ってくれます。 3. 差分をチェックしたい Mergely –

要素を選択したり、動画の再生や時間の流れに合わせたり。大きなサークルを効果的に使ったWebサイトを集めてみました。 使いどころは少ないかもしれませんが、うまくハマると個性的なサイトになりますね。 最初の2枚だけGIFアニメ画像にしてます。 Funny hours http://www.funnyfunny.jp/ Configura tu VW http://www.configuratuvw.mx/ Trippeo – Easy Business Travel & Expense Management http://www.trippeo.com/ 30u – SLIP ON http://www.30u.it/ Designer Interactif – Mathilde Jacon http://www.mathildejacon.com/ KUROKAWA WONDERLAND h

デザインを制作しているとき、Webサイトやチラシで電話番号を記載することがありますよね。 そして「0120」から始まるフリーダイアルなら、以下のロゴマークを当たり前のように番号の前に置くと思います。 なので、私も何も考えず置いていました。ですが、最近「フリーコール」と書いてあるロゴマークを見つけて、私のそんな思い込みは一変したのです…！ 目次 1、フリーダイアルはNTTコミュニケーションズの商標 2、他にもある0120から始まる無料通話サービス 3、0120がどの無料通話サービスか調べるには？ 1、フリーダイアルはNTTコミュニケーションズの商標 じつは、そもそも「フリーダイアル」という言葉自体が、 NTTコミュニケーションズが提供している無料電話のサービス名で、商標登録もされています。 NTTコミュニケーションズのWebサイトで配布されているロゴマークの横には、ちゃんと「R」の登録商標マ

未年に引き続き、2016年版「申年」も筆文字素材をご用意しました！ PNGの透過画像とEPSのベクター素材の2種類です。 個人利用は自由ですが、商用利用するときは必ず下のコメント欄かメールフォームでご相談ください！ サンプルとダウンロードは以下からどうぞ。 年賀状用「申・さる・2016」筆文字素材 PNG透過画像をダウンロード → nenga2016_PNG.zip（2MB） EPSベクター素材をダウンロード → nenga2016_EPS.zip（1.1MB） ※ この素材は個人利用可、商用利用は要相談です。 PNG画像は筆のぼかし感が出ていますが、EPSベクター素材は単色のパスデータになっています。用途に合わせて使い分けて下さい。The post 2016年の年賀状用「申・さる・2016」を筆で書きました！無料筆文字素材 first appeared on デザインメモ.

4月から新しくデザインの会社で働くという方も多いのではないのでしょうか。 そんな新人デザイナーさんにおすすめしたい、現役のWebデザイナーである私が『本当に使ってる』or『新人の時に使っていた』デザイン関連の本を紹介します！ Illustratorの初歩からテクニックまで Illustratorデザインメソッド 新人デザイナーさんにはこの本は抑えておいて欲しい！さまざまなイラレのテクニックがわかりやすく紹介されています。 PhotoshopとIllustratorをうまく使いこなす Photoshop+Illustrator Design Technique こちらも私が新人のときにお世話になった本です。フォトショ、イラレそれぞれ特性をうまく使いこなしたいときに。 覚えておきたい写真加工テクニック ほめられデザイン事典 写真レタッチ・加工 Photoshop フォトショでのさまざまな写真の

クリスマスも近いので、いつものお役立ち記事ではなく、久々に私の考えをちょこっと書こうと思います。 というのも、クリスマスプレゼントを選んでいる時に、ふと「私はこの瞬間が一番楽しいな」と思ったんです。同時に、この気持ちってデザインをするときに似てるなって。 1. 相手を思う プレゼントを選ぶ時、その人を思い浮かべて「あの人ならこれが好きそう」「似合いそう」と相手の立場になって考えますよね。 それには事前のリサーチが必要だし、リサーチとはいかなくても友達や知人ならなんとなく好みがわかります。 あくまでもプレゼントなので、自分の好きなものを押し付けでは、相手は喜んでくれません。 でも、選ぶときって「自分も好きだな」って思いませんか？相手の喜ぶものを選ぶけど、自分が嫌いなものを贈ったりしませんよね。 2. ちょっとしたスパイス そこには、相手の好きなものにプラスして、“私のセンス”というちょっとし

私が常にRSSなどに入れてチェックしているWebデザインのギャラリーサイトを並べてみました。 ときどきギャラリーサイトをチェックしている方は、新たなギャラリーサイトを見つけてみたり。全然チェックしてない方は、これを機にブックマークへ追加してみたり。ぜひお役立てください〜！ ＜ 目次 ＞ 国内のまとめサイト 総合 縦長・ランディングページ スマホ・レスポンシブ パーツ別 海外のまとめサイト 総合 アワード形式 スマホ・レスポンシブ 国内のまとめサイト 総合 AnotherBookmark™ http://www.anotherbookmark.com/ straightline bookmark http://bm.straightline.jp/ I/O 3000 | Webデザインギャラリー http://io3000.com/ Web Design Clip | Webデザインクリップ

今年もあと少しで終わりですね。みなさんはどんな一年でしたか？ デザインメモの記事をまとめてみましたので、年末年始の暇つぶしにどうぞ。 2015年に一番人気だった記事 デザイナーなら常にチェックしておきたい！Webデザインギャラリーまとめ | デザインメモ → この記事を読む 2015年に注目された記事 TOP10 あなたはどれにする？CSSの文字サイズ指定「px、em、%」 イラストレーターさん必見！Tumblrで無料・簡単・おしゃれなポートフォリオサイトを作ろう ちょっと便利！Macのプレビュー活用「１ページに並べて印刷」 Illustratorを入れてれば使用できるフォント一覧（CS3〜CC） Photoshopの動作が重くなった時にすぐできる対処法 Illustratorのリンク切れを直す方法と回避策 iPhone 6 & 6 plusのデザイン対応について【随時更新】 MacのAu

Macの最新OS「10.11（El Capitan）」が9月30日にリリースされて、はや1ヶ月。気になっていたものの、なかなか手を出さずにいたので、今更ながらアップグレードをしてみました。 そのときに私が調べたものや対応したときのメモです。 ※この記事は2015年11月3日時点の情報です。 目次 （１）アップグレードする前 ・使用ドライバが対応しているか確認する ・Adobe製品の不具合をチェック ・その他 （２）アップグレードした後 ・対応しているドライバをインストール ・Adobe製品の不具合を対応 — a. Photoshop：アプリケーションの遅延 — b. Photoshop：「画像解像度」実行時の問題 ・メールアプリの不具合を対応 ・XtraFinderが動かないのを対応 — System Integrity Protection（SIP）の設定方法 （１）アップグレードする前

申年に引き続き、2017年版「酉年」も筆文字素材をご用意しました！ JPEG画像とEPSのベクター素材の2種類です。 個人利用は自由ですが、商用利用するときは必ず下のコメント欄かメールフォームでご相談ください！ サンプルとダウンロードは以下からどうぞ。 年賀状用「酉・鳥・とり」筆文字素材 「酉」と甲骨文字の「鳥」、ひらがなの「とり」、謎の「ちゅんちゅん」。 あと、「あけましておめでとうございます」も書きました。「ございます」を配置的に除きやすくしたので、「あけましておめでとう」とフランクな感じにも使えますよ。 JPEG画像の方が筆感がそのままなのでおすすめですが、透過処理しないので加工して上手く使ってください^^ JPEG画像をダウンロード → fudemoji_tori2017_JPEG.zip（1MB） EPSベクター素材をダウンロード → fudemoji_tori2017_ESP.

Webデザインの中でも、ちょっと個性的な幼稚園・保育園のWebサイトを集めてみました。 色の使い方はパステルカラーで、イラストなどをふんだんに取り入れたアナログ感。 ぜひ、やわらかい雰囲気を作るときに参考にしてみては？ 北九州市戸畑区 幼稚園｜教学寺幼稚園 http://kyougakuji-kids.com/ やさか保育園 http://yasaka-hoikuen.net/ 京都市山科区のこども園｜おおやけこども園（おおやけほいくえん）http://www.ooyake.net/ 社会福祉法人富士会 富士保育園 http://atami-fujihoikuen.jp/ 認定こども園 小浜こども園 小浜幼稚園 小浜保育園｜長崎県雲仙市の教育・保育 http://obama-kodomoen.jp/ 押原こども園│山梨県昭和町の認定こども園 http://www.oshiharakodom

アニメ『おそ松さん』が爆発的にヒットしたとき、私は恐ろしくて仕方ありませんでした。 こんなにもヒットしてしまい、グッズは飛ぶように売れてる…もはや社会現象。雑誌の特集記事は当たり前。女性雑誌の表紙まで飾っているし、電車では女子高生がカバンにストラップをつけ、ネットで騒がれ。天邪鬼な私でも「これはもう観るしかない」と思い、Huluで一気観したぐらいです（笑）。 ▲ anan 2016年5月18日号で表紙を飾る６つ子 偶然ではない、きっと誰かが仕掛けたんだ… 私は「誰かが意図的、戦略的に仕掛けたとしか思えない！！このヒットが偶然だなんてありえない！」と思っていました。それは怖くて怖くて、おそ松さんという単語をみるたびに背筋がぞくぞくしたぐらいです。 そんなときに、たまたま書店でこんな本に出会いました。 ▲ 「おそ松さんの企画術」ヒットの謎を解き明かす / 著者：布川郁司 今のもやもやを抱えた私