モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます! 明けましておめでとうございます。本年もWebNAUTをよろしくお願い致します。私の新年1本目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター: ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか?デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます
Webサービスほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク!2014年6月13日1 @JUNP_Nです。オンラインで利用することができる無料のWebサービス「Compressor.io」はJPG、GIF、PNG、SVGの画像をビックリするほど軽量化してくれます。面倒なアカウント登録などもなしで、画像をドラッグ&ドロップだけで使えて超便利! 無料で多様な画像ファイルに対応しているのが嬉しい画像軽量化サービス!Compressor.io - optimize and compress your images and photos オフラインではJPEGの画像軽量化には「JPEG mini」を利用、それ以外の画像については「ImageOptim」を利用していたのですが、これだけではGIF動画の軽量化がもの凄く難しい。 関連:1
WEB制作やブログ、プレゼン資料などで、イメージをより直感的に伝えられるイラストやアイコンが欲しいけれど、探すのが面倒なんだよな・・・と思うこと、ありますよね。 今回は、WEB制作やブログ、プレゼン、広告、チラシなど、さまざまなシーンで大活躍間違いなしの、アイコン・イラスト・ピクトグラムの画像、ベクター素材をご紹介します。 全てフリーで、商用利用可能です。 こちらを活用すれば、より豊かな資料作成が無料でできるでしょう。 また、この記事は無料でPDFとしてダウンロードも可能です。写真のフリー素材を探す際にお手元に置いておくのがおすすめです。 【PDF】高クオリティ!商用利用OKのアイコン、イラスト無料(フリー)素材まとめ>>無料ダウンロード 【厳選5サイト】 ビジネスからブログまで幅広く使える無料アイコン・イラスト・ピクトグラム素材がいっぱい!私が普段利用していて便利だな、と思うサイトを5つ
1 pixel|サイバーエージェント公式クリエイターズブログサイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基本的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事や趣味とリンクさせながら理
はい高いですか?こんなもんですか?以下見積もりの説明です。 リニューアルと言っても、既存サイトはCMS化されておらず、たいして情報もアップされていなかったため、ほぼほぼ新規案件に近い、というイメージです。そのため、旧システムからのデータ移行費用が入っていません。その代わり、商品データベースは既存のものがあり、定期的にそこからデータを吸い出してCMS側の商品ページに反映するというカスタマイズが入っています。色々調査した結果、1週間でできそうという見込みのもとに見積もりしていますが、この要望はなかなか軽く収まらないことが多いですね。コンサルティング費用にどのくらいかけるかというのはサイトの規模感によってまちまちだと思いますが、誰に向けたサイトで、何の目的で、対象となる閲覧環境は、用意するサーバーは、考えられるリスクは、など細かく資料に起こしていき、事前に複数回クライアント往訪のうえ打ち合わせ
作成:2013/07/22 更新:2014/11/01Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「0」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。エンジニア速報はTwitter の@commteで配信しています。 もくじ
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 1.三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 2.問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 3.原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
こんにちは、LIGの副社長、ゴウです。 この度、LIGブログに「ページTOPに戻る」機能が実装されました。 どのサイトにでもある、普通の要素だと思うのですが、今回、我々は“ウザさ”にこだわって作ってみました。 ページ右下にある弊社エンジニアの段田をクリックすると… ゴゴゴゴゴ… ドドドドドドドド… という感じで、段田が天に登るラピュタのように上昇していきます。 俺が知る限り、ここまでうざったい「ページTOPに戻る」は無いと思いますし、今回の開発にはデザインとJSの実装で4日ほどかかっており、「うざい」という以外に感想が無いような機能の実装に大切な会社のリソースを割いてしまった事をこの場を借りてお詫び申し上げます。 とは言え、この機能の一番下に、広告領域も設けてあります。 時間にして2秒ほどしか見えない上に、クリックをするにはそれなりの慣れと反射神経を必要とするのですが、今回特別にこの広告枠
契約書なしの口約束でお仕事を受けてませんか? 自分はまだ駆け出しのフリーランスだから…… クライアントへ契約の手間を与えてしまうから遠慮しちゃう…… 契約とか法律とかよくわからないから…… などなど、理由は様々あるのかもしれません。 でも、契約書なしで案件を受けていると必ずいつかトラブルが起きますよ。 例えば、代金以上の労働を求められたり、お金を払わず逃げられたり。 ボクも12年間、ウェブ制作業に関わってきてますが、残念なことにこうした契約に関わるトラブルをいろいろと経験しました。 確かに、契約書を自分で作るのは難しいです。行政書士へ契約書の作成を依頼するとかなりお金がかかります。 でも、契約書がたった1枚あるだけで、クライアントと友好的な関係を長く築けるのも事実です。 この記事のタイトルには「モンスタークライアントから守る」と書きました。 実際は、契約書は制作を受ける側のあなただけを守る
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位!Mac万歳!Chrome万歳!な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】 どうもです。いきなりですが、私は毎年この年末から来年の3月末あたりまで、段階的に仕事周りが騒がしくなって来る時期だったりします。決算期の都合もあるんでしょうかねぇ。似たような状況の方も多いのではないかと思います。ほんと、最近依頼が多いです。 ところで、仕事の依頼があるって嬉しいことです。 普段あまり交流のなかった方から突然の依頼や、または、人づてで紹介を受けたりなど。紹介を受けるってことは「仕事ちゃんとしてくれるよ」ってのを認めてもらえた証拠だと思っています。本気でうれしいです。 と、ここで「依頼」についてちょっと掘り下げたいな~と思いました。本題に入る前に、少しだけ前置きにお付き合いくださいますと幸いです。 ・・・「依頼」っていろいろありますね。 「ハマる依頼」
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました! 使い方は簡単!下記のコードを貼り付ければOK! まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
最近流行り(?)の「見積額」じゃないです。見積書自体の書き方。 ディレクターやってるとこういうのが気になってしょうがないのです・・・ sample.pdf 最下部にデータ置いておくんで、好きに使ってください。リンクも名前....MOREわかりやすい見積書の書き方 is a post from: Maka-veli.com
インフォグラフィックを作ることができるサービスが地味に登場しています。PR、マーケティング手法として重要度が高まっているのでまとめておきます。 ease.ly これまでに11,000以上のインフォグラフィックが投稿されているサイト。テンプレートがいくつか投稿されており、オンライン上で編集することが可能です。 Visual.ly ease.lyと同様の簡単制作サービス。アプリを使って自分のソーシャルメディアの上のデータを引っ張ってきてくれるので、簡単にクールなインフォグラフィックが作れます(作ってみたのですが、エラーが出て出力されませんでした…)。 infogr.am 比較的軽量で良い感じのインフォグラフィック作成サービス。グラフとかオシャレな感じで作れます。これは良いですねー。 Piktochart こちらも良い感じ。なんですが、ちょっと重くて僕のPCだとブラウザがフリーズしました…。多機
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います! 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
無料で資料をダウンロードSEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> 世界中で愛されている永久定番級のフォントといえばHelvetica(ヘルベチカ)、デザイナーじゃなくともお馴染みのフォントです。今回はHelveticaは余りにメジャーすぎてちょっと抵抗がある、、、というひねくれモノのあなたのためにHelveticaの代わりに使えるフォントを30種類紹介した記事を。 —SEO Japan Helveticaは筋金入りの書体だ。明確さ、順応性、徹底的な完璧さを持つそれは、スイスのデザイン文化の証だ。この有名な書体は、数えきれないほどの理由から愛されている。それ自体には何の個性もないために、どんな気持ちや感情や心象も受け入れることができる能力もその1つだ。 Hel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く