クソエンジニアが最速でそれなりのWebデザインをできるようになる方法 - UIU
趣味などでWebサービスを作るときにもっとも悩ましいことのひとつがデザインだと思う。外観は重要な要素だとは理解しているし興味も一応あるけれど、実践に乏しいからどうしていいのかわからない。かといって、タダで頼めるような都合のいいデザイナーはいない。結局めんどうになって、Twitter Bootstrapで体裁だけでっち上げた妙にオタク臭いデザインになってしまう。僕もかつてはデザインを気にも留めないクソエンジニアだったけど、必要に迫られて勉強したらそれなりに手を動かせるようになったのでその方法を紹介する。僕が今年入社したスタートアップにはデザイナーがおらず、新機能を作るときなど仕方なくデザインをこなす必要があった。結果的に、仕方ないなりにPhotoshopを使ってプロトタイプを作りHTML/CSSコーディングするくらいはできるようになった。ここに書くのは仕方なくそれなりのWebデザインをする方
かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました
2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！（あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw） ↑私が10年以上利用している会計ソフト！ 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ
Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！ もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞ Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも
もうフローラルな素材には困らない！背景やエレメントで使えるフローラルなベクター素材のメガパック
個人でも商用でも無料で利用できる、高級感のあるしっかりとデザインされたフローラルなベクター素材を紹介します。 そうです、当ブログでもお馴染みのfreepik.comの新作です。
新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法｜MarTechLab（マーテックラボ）
LPO研究所の鳥居です。 「イメージしてたデザインと全然違う」 「これじゃ売れる気がしないんだけど」 「ちゃんと頭使って考えてんの？」 突然ですが、あなたは日常的にこんなことを言われていませんか？ 今の職場でWebデザイナーとして働きはじめてはや７年。私は、今では後輩デザイナーの育成も行う立場なのですが、新人が先程のようなセリフを言われるのを毎日のように目にしています。 無論、私自身も新人の頃はこっぴどくやられました。 今なら分かることですが、これは 新人Webデザイナーが共通して「取るべきコミュニケーション」を取っていないから起こるトラブル なのです。 あなたは今、デザイン制作におけるコミュニケーションに自信を持てていますか？ もしかすると今この記事を読んでいるあなたは「Webデザイナー」ではなく、クライアントから要望を聞く「営業」や「ディレクター」の立場かもしれません。 しかし基本は同
Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
日本のウェブデザインはなぜこんなにも世界と違うのか？ - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
本記事は、ブログ『RANDOMWIRE』の運営者の許可を得て、翻訳しています（元記事）。 静寂が満ちる禅庭園、美しい神社、静穏な寺、洗練された茶道。日本の伝統建築、現代建築、書籍、雑誌は世界中のデザイナーの羨望の的だ。 だが、どうしてか、こうした巧みな技術はデジタルプロダクトには生かされていないようだ。特にそれが顕著なのは、ウェブサイトだ。その多くが、1998年のスタイルから変化していないように見える。 例１：楽天市場 有名な日本のサイトの多くを見てみると、次のような傾向が見られる。（例えば、 Yahoo Japan、楽天、ニコニコ、JR東日本、読売新聞…） 隙間なく敷き詰められている文字 小さく、画質の悪い画像 数えきれないほどのカラム 色同士の調和に欠ける派手な色使い、きらきら光るバナー Flashのような、過剰に使用される時代遅れのテクノロジー 美しい俳句、質素なわび・さびとはかけ離
視覚的に情報を伝える！実例で見るインフォグラフィックスの魅力
2015年1月21日 インスピレーション, 便利ツール インフォグラフィックスとは情報やデータをを視覚的に表現したものです。情報を素早く簡単に表現したい場面で用いられ、私たちの身の回りにある路線図や会議での資料、学校の教科書などなど、様々な形で目にする事があるかと思います。今日はそんなインフォグラフィックスに注目してみましょう！インフォグラフィックスを制作する機会がないという方でも、全体のデザインやアイコン制作、配色のアイデアになりますよ！ ↑私が10年以上利用している会計ソフト！ なんでインフォグラフィックスを使うの？ インフォグラフィックスで情報を視覚化することで、伝わりづらい数値や専門的な情報も比較的伝えやすくなります。簡単に例えると、「チョコレートを食べる量が2011年は200kgだったのが、2012年は240kgに増えました」と文章だけで説明されるより、棒グラフで推移を視覚的に見
Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ
プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。 昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。 そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。 そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。 まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために
世界各国のWebデザインと日本のWebデザインの特徴
2013年10月29日 Webデザイン, 海外情報 私は今まで日本、カナダ、オーストラリア、イギリスと、4カ国での滞在経験があるためか、各国のデザインの違いについて尋ねられる事があります。しかし日本以外のすべての国は英語圏。Webデザインでいえば違いを感じたことはあまりありませんでした。そこで今回は今まで触れる機会のなかった言語圏のWebサイトを比較しました。アメリカ、フランス、サウジアラビア（中東）、中国、そして日本。それぞれのデザイン事情の違いを知って、日本のWebデザインについても考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ マクドナルド アメリカ 現在は全体的に濃い青をメインに使っていますが、これはキャンペーンによって変更されます。ナビゲーションバーやページしたのバナーエリアは基本的に固定。 例えば別のプロモーションページではこんな感じ。一番見せたいものをひと
プロっぽくなった！フォントや「文字」に関するまとめ
作成：2013/10/28 更新：2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつける ８．書体 ９．読みやすいフォントサイズ １０．見やすい文章 １１．Webフォント スライド １２．フォントに関するスライド フォントに関する知識 １．字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
日本の伝統色 和色大辞典 - Japanese Traditional Color Names
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
同色系でまとまりのある配色、WebデザインにするためのTips
いろいろな色相を使わずに、ひとつの色相の彩度違い、明度違いなどでデザインしていく同系色デザイン。 多くの色相を使わない同色系デザインは、たくさんの Webサイトでも使われている人気の配色です。 同色系でデザインしていくと、ページの統一感がでて色の持つ力を印象付け易いというメリットがあるだけでなく、初心者でも比較的まとめやすい ... という作り手側のメリットもありますね！ 同色系でまとめられたデザインは、ページに統一感があって、よくまとまって見えますよね。そして色の持つメッセージを、強く印象付けるのにとっても効果的だと思います。いろいろな色相を使ったデザインに比べて、比較的まとめ易いし、色的な効果を発揮しやすい同色系デザイン。同色系は簡単 … というか、カラフルデザインに比べれば簡単かもですけど、配色における基本的なポイントは、他の配色方法にも通じています。今日は基本的なところを押さえなが
無料でしかも高品質！1ページで構成されたサイトを作るためのWordPressのテーマファイルのまとめ
キャンペーン、ギャラリー、ポートフォリオ、アプリ紹介、ランディングページ、個人ブログなど、1ページで構成されたウェブサイトを作成するWordPressのテーマファイルを紹介します。 全て無料で、レスポンシブ対応です。
【Macアプリ】Webデザイナー向けの便利なおすすめMacアプリ28個
「なんかもっとこう、サクサクとパソコンをいじれないかなあ・・・・」 Macをお使いのあなたはこんな悩みを抱えたことはありませんか？ 確かに、ショートカットキーを使いながら仕事を効率化したり、ツールを利用して今までよりも何倍もの速さでパソコンで仕事ができたら理想的ですよね。 事実、できる人はすでに便利なMacアプリをダウンロードし、利用しています。 仕事を効率化させるアプリを使うのとそうでないのではスピードに大きな差が生まれてしまいます。 そこで今回は、日々Macを使って止まないあなたに、仕事が今より3倍はかどるオススメのMacアプリを28コ紹介します。 この記事を読むことで仕事を効率化できるアプリを知ることができ、今よりもサクサクにパソコンをいじることができます。 ぜひ参考にしてみてください。 デザイナーさんが仕事が圧倒的にはかどるMacのオススメアプリ10選 Alfred まず紹介したい
ペーパープロトタイプ - Webデザイン図工の時間 | ゼロ円でもできる！？ 省コストユーザビリティ向上術
ミニチュア模型の効用プロトタイプは「試作品」と訳されることが多い。しかし私は「試用品」といった方が適切ではないかと考えている。試作品と言うと「制作者が試しに作ってみる」という意味に捉えられがちだが、本当はプロトタイプとは「ユーザーに試しに使ってもらう」ために作るものだからだ。 ここで、たとえ話として、家を建てる場面を考えてみよう。レンガ・木材・コクリートといった素材が、大工などの建築技術者の手によって加工されて組み上げられ、まず家の骨組みができ上がる。さらに屋根や壁が施工され、最後に内装や電気工事を施して家は完成する。しかし、実際には、工事を始める前に建築家が設計図を描いている。その際に建築家は厚紙やスチレンボードを使ってさまざまなミニチュア模型を作ることがある。このような建築模型は、設計の妥当性を検証するとともに、クライアントに見せて、さらに具体的な要望を引き出すために利用される。 模型
グーグル 無料のウェブ制作ツール Web Designerを公開
Googleからものすごそうなツールが登場。Adobeのツールがすべて合体したようなツールです。Illustratorのようなパス描画を可能とし、3Dビューで編集まで可能、さらにAdMobの設定までできてしまい、タイムラインでHTML5のアニメーションまでできてしまうようです。 直感的ツールで作ったデザインをマルチデバイスに対応したウェブページとして吐き出してくれるようです。又、デザインツールで作られたコードをコードビューに切り替えて直接編集することまでできてしまい、まさにかゆいところの手が届く感じの機能が網羅されているようです。 新規ファイル作成画面 3Dビューを備えたイラストレーター的ツール チュートリアルがこちらで用意されています。 Google Web Designer Help これは使い込んで見て損はなさそうですね。恐ろしいツールが出てきてしまいました。Adobeはどう出る？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
I/O 3000
http://handywebdesign.net/2013/12/slide-share-about-color/
