最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど、インスピレーションが刺激されます。
Web制作者は要チェック！最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages
最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど、インスピレーションが刺激されます。
ひたすらWebサイトを見るのが趣味な私が独断と偏見で選ぶ今年「良い！」と思ったWebサイト16選 - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2019の18日目の記事を担当します、フロントエンドエンジニアのたがみです。普段はwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 去年は私のその時の推しライブラリだったVuetifyについてこのブログを通じて布教したのですが、今年も今の推しライブラリの話をするぜ！・・・と、意気込んでいたのですが。「というか日頃からWebサイト事例収集しまくってるから、今年の素敵だと感じたサイトを振り返るか」と思いついちゃいましたので今年は推しのWebサイトの話をしようと思います。 というのも、私は去年入社してからデザインや演出や作りが素敵なWebサイトを見つけては自分のツイッターに「このWebサイトが良い！」というのをひたすら垂れ流すというのを日常的にやっ
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
WEBデザインが独学で身につく！WEBデザイナー必見の神サイト20選
2023年2月17日 Webデザイナー1年生はもちろん、Web製作に携わるものなら絶対に知っておきたい神サイトを完全収録しました。 独学でWebデザインを勉強したい人、優秀な先駆者たちの知恵を吸収し飛躍したい人は要チェック。 WEBデザイナー必見の神サイト20コリスWebクリエイターボックスコムテブログかちびと.netバンクーバーのうぇぶ屋ホームページを作る人のネタ帳creive【クリーブ】BlackFlagDesignDevelopArchAteitexe アテークゼウェビメモWebparkNxWorldデザイナーのイラストノート株式会社LIGMdN Design InteractiveドットインストールProgateschooコリス コリス サイト制作に関する最新の情報をご紹介 サイト構築、WordPressのTipsを得られます。ただし、Webデザイナー１年制が、今からの更新情報を受
最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd（72種類のレイアウトとチャート） .ai（72種類のレイアウトとチャート） .sketch（72種類のレイアウトとチャート） .png（72種類の各レイアウト） 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
ピクサーから学ぶクリエイティビティの秘密
Early on, all of our movies suck. 我々の映画は最初はすべてヒドイものである。 これは「 ピクサー流 創造するちから（原書 Creativity Inc.）からの一節。ピクサーといえば、最初の長編映画「トイ・ストーリー」以来、ずっとヒットを飛ばし続けている映像製作会社。CGのクオリティもさることながら、彼らが作り出すユニークな物語が人気の秘密だと思います。そんなピクサーが「最初はすべてヒドイ」と本中では断言していますし、「ヒドイ状態からヒドくない状態にすることが仕事」とまで言い切っています。映画を見ている立場からすると信じられない言葉ですが、デザインを含めたクリエイティブな仕事に共通していると思います。 Webデザインにおけるデザインカンプが良い例ですが、最初からほぼ完璧なものを求められることがあります。これはクリエイティビティとは雷が頭に落ちてきたかのよう
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
イベント告知に使える1枚ページを簡単に作成できるサイト「Tackk」 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
非WEB屋でもサイトが作れる驚異的サービス／『サイトを作る』という敷居がどんどん低くなっていると実感する物色々 | バンクーバーのうぇぶ屋
先週くらいのお話ですが、“カナダで留学した後自分たちでスモールビジネスをやるからサイトが欲しい、でもお金無いから自分たちで作りたい。”的な相談があって、「そんな、サイト作るだけのサービスなんぞ、腐る程あるわぁああ！！」と、半分ヤケくそになってお話したので丁度いい機会だからまとめてみようと思います。 まぁ、今日はどちらかというと、完全に非WEB屋な人に向けたサイト自体を作るサービス、問い合わせなどのフォームを作るサービス、ユーザーテストを低コストで行うためのサービス、そういう物をご紹介していこうと思います。 たぶん、趣味やとりあえずサイト作りたいと思っている人には朗報として、とりあえずサイト作れる人がWEBデザイナーだと思っている人へは啓発（的な？）として、記事を書かせて頂けると幸いです！ 加えてたまに、「サイトが作れるようになりたい。」と僕の元に来てくれる人がいますが、もしそういった人が「
新人デザイナーに教えたいWebデザインの基本原則【整列】
以前私は、デザインの勉強を一切したことの無いデザイナー志望の新入社員に、webデザインを教える教育係を任されたことがあります。 教育なんて簡単なんじゃないの？と安易に考えた私は、案の定痛い目を見たわけです。この日から1ヶ月間、私は毎日3時間残業する羽目になってしまいました。 人に教えるのは意外と難しく、何から教えたら良いのかすらわかりませんでした。ただやはり最初なんで基本が大事だろうと思い、先輩達のアドバイスを受けながら、【デザインの基本原則】を教えることになったわけです！ 今まさに新人教育に困っている人がいれば、まずこの記事を読んでもらって見てください！新人デザイナーに教える手間が1.2時間はぶけるかもしれません！(記事がわかりにくければ読ませないでください。その時はごめんなさい) では、早速本題に入りたいと思いますが、まずは私が新人デザイナーに初めに教えることにした【レイアウトデザイン
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" />これで以下のようにダミー画像を表示させる事ができます。 勿論、細かいサ
1年目デザイナーに読ませたい配色の考え方を学べる記事
配色センス0でも大丈夫！？服、インテリア、デザイ... / Webサイト制作において、私なりの色選定の考え方... / 色と人の感覚とウェブデザインのはなし - バニデ...他...全10件
Webデザインで何かと重宝する、フリーのテクスチャー素材
Webデザインで使えるフリーシームレステクスチャ... / グランジテクスチャー30個 | 30 Usefu... / 布風テクスチャー | A Collection ...他...全4件
デザインの引出しを203%拡張させる神Webサイトデザインギャラリー | 秒刊SUNDAY
前回このＷＥＢサイトギャラリー特集を行った際には、フルFlash,フルスクリーンのカッコイイサイトが主流でした。当たり前のようにウインドウが最大化 し、当たり前のようにヌルヌルとＦｌａshが動く。時代は変わったもので、もはやFlashのフの字を聞くだけで『iPadじゃ見れないからねー』が付き まとう今日、ＷＥＢデザインはどのように設計したらよいのでしょうか。今回はそんなＷＥＢサイトデザインに役立つサイトをご紹介したい。 ◆Webデザインポータルサイト ■Webデザインのリンク集 Webデザインポータルサイト S5-Style スタイリッシュで非常に見安いサイト。次々に事例を見て行っても苦にならない。 ◆Webデザインリンク集・ソーシャルブックマーク ■Webデザインリンク集・ソーシャルブックマーク - 最近ページングではなくスクロールローディングに変更された。わざわざページングしなくても良
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
WEBデザインの参考にしているまとめサイトをまとめました[ほぼ国内編：24サイト+追加2] | HTML5でサイトをつくろう
皆さんいつもWEBサイトのデザインをする際に何を参考にしていますか？ 気にいったサイトがあったらブックマークをしてストックしておく、WEB系の本を見る、あとはWEBサイトのまとめサイトを見るですよね？ 自分もまとめサイトを見つけるとブックマークして定期的にチェックしていたのですが、いろいろなまとめサイトがありましたのでまとめサイトをまとめてみました。 このほかにもこんななのがあるよというのがありましたら是非教えてください。 TheFWA http://www.thefwa.com/ High Floater http://www.highfloater.com/ ABM | AnotherBookmark™ – Webデザインブックマークサイト http://www.anotherbookmark.com/ Webデザインのリンク集 Webデザインポータルサイト S5-Style http
![WEBデザインの参考にしているまとめサイトをまとめました[ほぼ国内編：24サイト+追加2] | HTML5でサイトをつくろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0366a92f40229090fad09f8bcea2cb9d905fb02/height=288;version=1;width=512/http%3A%2F%2Fwww.html5-memo.com%2Fwp-content%2Fuploads%2F2011%2F08%2FA29.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize
知っておくと何かと応用が利くCSS3を使った表現テクニックいろいろ
Victor Coulon : Mon blog High Tech