よくあるコーポレートサイトのワイヤーフレームを無料で配布します｜Yoshiki Kojima / chot Inc.
前回、フリマアプリのワイヤーフレームを配ったら好評だったので再び。 よくあるコーポレートサイトのワイヤーフレームを作りました。 トップページにお知らせやバナーが貼ってあって、各ページに詳しい情報が載ってる感じ。 プレスリリースのページとか。 会社概要とか。 採用ページ モバイルもあります WordPressのテンプレート用にスクリーン名を付けていますコーポレートサイトをオリジナルで作るなら大抵WordPressでやることになるかと思います。なのでスクリーンの名称にWordPressのテンプレート作成時のファイル名を付けておきました。 採用情報ページの募集職種・オフィス環境・福利厚生あたりはカスタム投稿・カスタムフィールドを使うと良い感じにあとから管理しやすくなると思います。 ダウンロード
Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 以前、デザイナーもりたの、デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみたという記事が公開されましたね！ こんな風に、最近LIGのデザイナー＆フロントエンド間では、いかにお互いの仕事をスムーズにするかという話題が増えています。 まだまだ模索中ではありますが、今回は、これを知っておけばお互いにとってハッピーなのでは？というPhotoshopの機能や工夫の豆知識をご紹介したいなと思います。 フロントエンドの方にぜひ知ってもらいたい！というのはもちろんですが、デザイナーの方もこれを読んで気遣いがチラ見えするPSDを作れるようになったら、明日から職場の空気が和やかになるかもしれませんね。 その気遣い、伝わってないかも。 デザイナーは普段Photoshopを使っていて自分の使いやすいようにプラグインを入れていたり、さまざまな機能を駆使してい
Facebook広告ライブラリとは？ベストな使い方は？競合や他社のFacebook・Instagram広告の内容が見れる！ - リスティング広告運用代行｜カルテットコミュニケーションズ
ブログ SNS広告 Facebook広告ライブラリとは・・・ Facebook広告ライブラリとは？ベストな使い方は？競合や他社のFacebook・Instagram広告の内容が見れる！ リスティング広告でもSNS広告でも広告運用をしていると、競合や他社がどんな広告を配信しているのかな？と気になることってありますよね。 検索連動型広告であれば任意のキーワードで検索して広告を見ることもできますが、ディスプレイ広告やSNS広告は見たいタイミングで探したい広告が見つからないものです。 Facebook広告限定ではありますが、そんなときには「Facebook広告ライブラリ」を使って他社の広告を参考にしてみてはいかがでしょうか？ Facebook広告の完全解説はコチラ⇩ Facebook広告とは？広告の費用や特徴、可能なターゲティングなど基本を完全解説 1.広告ライブラリの概要 広告ライブラリでは、F
新人WEBサイト担当者がブクマしておきたいサイト７選
WEB業界２年目のWEBデザイナーです。 コードに強くなりたいと思いつつ、進歩の速さに翻弄されっぱなしですが色々勉強中です！。 Webサイト制作会社へ就職が決まった方など、サイトの更新を任されたばかりの人へ送る「困った時に便利なサイト７選」をお送りします。 制作実績がたくさんある会社ほど過去のサイトを更新する際に古いルールに縛られて対処が難しくなりがちですが、くじけず頑張って行きましょう！ Webディレクターに便利なサイト７選 TinyPNG 「画像重いのでなんとかして！」と言われた時に役立つのがこちらです。 現在png画像全盛期といった感じで透明レイヤーのある画像で溢れていますが、圧縮ファイルではないため重くなりがちですよね？ TinyPNGは画像に含まれているメタ情報などを削除して、pngファイルを軽くしてくれるサイトです。 png画像を放り込むだけなので、使い方もカンタンです。 ただ
WEB制作時に大変重宝する無料WEBツールまとめ。 | 埼玉県熊谷市 Webデザイン・企画・制作「デザイン事務所｜エイビッツ」
WEB制作時に無料で使えて大変重宝するWEBツールをまとめてみました。 フォント、文字関連 PXtoEM.com: PX to EM conversion made simple. フォントサイズを他の単位に換算してくれる。 かなり重宝しています。 font checker（フォント・チェッカー） ブラウザでのフォントスタイルを確認するためのツール wordmark.it – helps you choose fonts! PCにインストールされているフォントのスタイルを一括確認。 文字数計算ツール テキスト文字数を計算してくれる。 ガラケーサイトなど、文字数上限を制限するような際に重宝します。 表示確認ツール Responsive Web Design Test Tool – Designmodo レスポンシブWEBデザインの表示を確認するためのシミュレーター iPhone Screen
Webデザインの勉強を始める人が幸せになれるツール＆サービス
2015年7月7日 便利ツール 先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！ 環境を整えよう まずはWebサイト制作をするための環境を整えましょう。 テキストエディター テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か
これは使える！レスポンシブ対応のさまざまなHTMLメールが簡単に作成できる無料のオンラインサービス -BeeFree
ビジネス用のニュース、プロダクトのリリース、プロモーションなど、さまざまなレイアウトのHTMLメールをドラッグ&ドロップで簡単に作成できるオンラインサービスを紹介します。 デスクトップ・スマホ両対応で、プレビューやメールアプリでのテストなど機能も非常に充実しています。日本語もOKでした！ BeeFree 使い方は簡単です。 上記ページの「Let's get started」をクリックし、HTMLメールを作ってみましょう。 ※HTMLメールの作成やファイルのダウンロード時に登録は必要ありません。作成したメールをサーバー上にキープする時だけ登録が必要です。 まずはテンプレートの選択をします。 2カテゴリ各4種類、画像やテキストが仮配置された「Rich Templates」。
illustratorでどんなフォントもスケッチフォントに変える方法 – creamu
vectipsで、クールなTipsが紹介されています。illustratorでどんなフォントもスケッチフォントに変える方法ですね。 ↑みたいなフォントが作れます。 1. テキストツールでテキストを入力 2. 塗りと線をなしにする 3. アピアランスパネルで、新規塗りを追加 黒を選択 4. 効果 > スタイライズ > 落書き で以下のように設定 5. 2ptの黒で線を追加 6. 線を選択した状態で 効果 > パスの変形 > ラフ で以下のように設定 以上ですね。 さらに、1クリックでこの効果が適用できるように、グラフィックスタイルパネルで新規グラフィックスタイル登録しておけば、1発で効果を適用できますね。 詳しくは以下からどうぞ。 » Turn Any Font Into a Sketch Font MacのDockを自動的に隠す設定にしてウィンドウが広くなりました☆表示するの好きだったんだ
過去のサイトの状態が見れる「Internet Archive Wayback Machine」 | FireWorks.20
管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ 気に入ってたデザインのサイトが突如リニューアルしてしまい、「しまったー！参考に保存しておけばよかったー！」という苦い過去がある人もいらっしゃるでしょう。（僕だけですかね）このサービスを使えば、その思いが救われるかもしれません！ 過去のサイトの状態を時系列で見る事の出来る便利なサイト「Internet Archive Wayback Machine」を使ってみましょう。 Internet Archive Wayback Machineの使い方 Wayback Machineの使い方はとっても簡単です。 Internet Archive Wayback Machine 入力フォームに、調べたいサイトのURLを入力します。
HTMLのイメージマップを簡単に作成できるジェネレーター『Image Map Creator』
HTMLのイメージマップを簡単に作成できるジェネレーター『Image Map Creator』 Image Map Creatorはステップバイステップで簡単にイメージマップのHTMLを作成できるジェネレーター。 先ずは目的の画像のURLを指定して画像をロードします。 画像が読み込まれたら、リンクを張るエリアをマウスを使って指定していき、その部分のリンク先や代替テキスト・開くウィンドウを指定します。 複数エリアを設定する場合は、同じことを複数回繰り返すだけです。 指定し終わったら下のボタンをクリックするとHTMLコードが作成されるので、あとはそれをコピーして貼り付ければOKです。 コードは2種類作成され『HTML Map Code』は通常のイメージマップで使う<map>タグを用いたもので、『CSS Map Code』は<div>タグを使って擬似イメージマップ化したものです。 下は今回作成さ
Adobe Kuler を使い倒す！カラーテーマ作成から配色のテストまでの作業工程
色んな配色パターンをつくれるのと、他の人がつくったパターンを見られるのがいいですね。 似たようなものにColor Schemerがありますが、こちらは有料ソフト。でもさすがにツールは使いやすく色盲のチェックやらサンプルサイトを表示できたりと優れています。ウェブ版はフリーですがそちらは用途が少し違うんですよね。 と、いうわけでコストの面もあってKulerに落ち着いています。 第1部 Kuler とは？ Kuler とは？ ツールを起動しよう ツールにアクセスする カラーテーマ作成画面へ移動する カラーを変えてみる Kuler とは？ Kuler とは？ KulerはAdobe製のオンラインカラースキーマで、カラーテーマをつくったり他の人が作ったカラーテーマを見ることができます。 デスクトップやFlickrの画像から色を抽出できたり、スウォッチにインポートできるファイル（.ase：Adobe
【一瞬】Photoshopでレトロな写真に加工する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。最近、AdobeCCをおねだりしているデザイナーO（王）です。 表題の触れ込みなんですが、「どうせアクションを使うんでしょ？」と、半ば自分の推理を確かめるためにこの記事を読んでいるあなた！ 残念ながら、ハズレでした！ この記事では、「アクション」を使わないで一瞬でレトロ風に加工する方法を紹介します！ Before・Afterはこんな感じです。 Step 2 以下のショートカットキーを押します。 Mac: option+shift+X Win: alt+shift+X ※描画モードを「除外」に設定するショートカットです。 Step 3 以下のショートカットキーを押します。 4 これはレイヤーの不透明度を「40」%に設定するショートカットです。ブラシ系のツールがアクティブの状態だと、そちらの不透明度が優先的に設定されますので、注意してください。 なお、40%はあくまでも参考の一つで
隠れた便利機能ベスト3
こんにちは。デザイナーのハルエです。 今回は、知っているのと知らないのとでは作業時間に圧倒的な差がついてしまうPhotoshopの効率化機能マイベスト3を紹介させていただきます！ 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ ※2014年3月7日に公開された記事を再編集したものです。 その1：Vanishing Pointでハメコミ合成 みなさん、“Vanishing Point（ヴァニシングポイント）”機能をご存じでしょうか？ 機能の存在は知っていても、使ったことのない方が多いかと思います。 このVanishing Point
サイトデザインを手軽かつハイクオリティに フリーフラットUIキットまとめ「30 Free and Flat UI Kits for November 2014」
TOP > Design > サイトデザインを手軽かつハイクオリティに フリーフラットUIキットまとめ「30 Free and Flat UI Kits for November 2014」 webサイトを一からデザインするとどうしても時間がかかってしまうもの。時にはフリーで配布されている素材を使用することで、効率的に仕上げることができると思います。今回はそんな時に参考にしたい、フリーフラットUIキットまとめ「30 Free and Flat UI Kits for November 2014」を紹介したいと思います。 L Bootstrap Freebie – UI Kit Inspired by Android L on Behance いろいろなタイプのフラットテイストなフリーUIキットがまとめられており、便利に活用することができるようになっています。 詳しくは以下 Drib
便利で簡単！Webサイトのプロトタイプが本当に数クリックで作成できてしまうPhotoshopの無料の機能拡張 -Velositey v2
Webサイトのプロトタイプやワイヤーフレームなどに使えるページレイアウトを数クリックで作れてしまうPhotoshop CS6/CC/CC2014対応の機能拡張を紹介します。 今時のコンポーネントが数多く用意されているので、デザインの勉強にもいいですよ。 Velositey v2 Velositey v2とは Velositey v2のインストール Velositey v2の使い方 Velositey v2とは Velositeyをは「Photoshopでの作業がはかどる便利な機能拡張・プラグインのまとめ (1,000 Pocket Thanks!)」で紹介した時からバージョンアップし、機能も大幅に強化されました。このバージョンからCC2014対応です。 Photoshopにインストールすると、最近のWebページで見かけるさまざまなコンポーネントが1クリックで簡単に利用できます。 左上から、
スクラップブック界の神アプリ！？INBOARDの使い方 【画像収集ツール】 | WebNAUT
こんにちは！お気に入りの画像はざっくり整理派のデザイナーのタカハマです。皆さん、アイデアの引き出しとなるスクラップブック作りはどうしていますか？アナログな切り抜き収集？Evernoteでとりあえず保存？それともデスクトップに散らばったまま？ 私は長らくPinterest派でしたが、最近「INBOARD」に浮気しちゃいました！ INBOARDって何？ ラトビアのDRAUGIEM GROUP社が開発している「簡単にスクリーンショット収集が楽しめるMacアプリ」で、2013年11月28日現在はベータ版が公開されています。（対応OSはMac OS X 10.7.5以上） ここ最近使い始めたところ、操作感が気に入ったので使い方を簡単に紹介させて頂きます！（ユーザーが増えてEvernote並みの神アプリになることを期待…！） http://inboardapp.com/ Tired of screen
ダミーテキスト生成
「すぐ使えるダミーテキスト」が暗号化通信（https）に対応しました。 2018年6月現在、移行のテスト中でどちらでもアクセスできます。 【2018年6月12日更新】移行テストが完了し、https に強制転送されるようになりました。
imgタグを記述するだけでダミーの画像を表示してくれるサービス「lorempixel」が便利
Web制作をしていると、ダミー画像を用意しなければならない！なんて時が頻繁にあってわりかし手間なのですが、こういうサービスあったんですね…知らなかった。 と言うわけで、WEBマーケティング ブログさんで紹介されていた、imgタグ内でサイズ・ジャンルなどを指定すれば自動的にダミー画像を作成してくれるサービス、lorempixelがとっても便利でしたのでご紹介。 lorempixelの使い方 まずはlorempixelへ訪れましょう。 lorempixelでは、imgタグ内のsrcをhttp://lorempixel.com/width/height/カテゴリ/ダミーテキストのように記述することで、サイズ・ジャンル・カラーorモノクロ指定したダミー画像を読み込んでくれます。 [html] <img src="http://lorempixel.com/500/350/food" alt=""
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料デザインツールCanvaとは？できることを解説
CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
