プロトタイプにも最適！ 誰でもWebサイトを爆速開発できる無料Webサービスをまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に最近のトレンドを意識したWebサイトを作成できる無料のWebサービスを厳選してみました！ 短時間で美しいサイトが作れるので、プロトタイピングにも最適です。 各サービスの特徴や使い方などを簡単にまとめているので、これからWebサイトを作ろうと考えている人はぜひ参考にしてみてください！ ■「Bootstrap 4」ベースのWebサイトを作れるサービス！ 【 Pingendo 】 マウスでポチポチクリックしていくだけで、いつの間にか「Bootstrap 4」ベースのWebサイトが作れてしまうのが「Pingendo」の面白いところ。 当初はシンプルなWebエディタとしてリリースされていましたが、活発にバージョンアップを繰り返して多機能なサービスに変化しています。 豊富なテンプレートやコンポーネントが搭載されており、ファイルの書き出し
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
未経験Webデザイナーが独学で勉強する方法
Webデザイナーに求められるスキルは、HTML・CSS・JQuery・WordPress・タイポグラフィ・配色・コピーライティングなど多岐に渡ります。より多くの知識・技術を身につけていれば、Webデザイナーとして活躍できるチャンスは増えるでしょう。そこで今回は、これらのスキルを独学で学ぶための方法をご紹介します。 ＜この記事に関連する記事＞ 初心者Webデザイナーの独学におすすめの本10選 グラフィックデザイナーからWebデザイナーに転職するには？ Webデザイナーになるには？未経験のための実践的フロー 目次 Webデザイナーの仕事内容と必要なスキル Webデザインを独学で勉強する方法 独学でWebデザインを学習するときにおすすめのサイト 独学をするときの注意点 まとめ Webデザイナーの仕事内容と必要なスキル 独学で勉強をする前に、Webデザイナーの仕事内容とそれに伴って必要となるスキル
JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
画像のファイルサイズを最大70％減らせて複数ファイルも一括処理も可能なフリーソフト「PNGoo」
PNG画像を最大70％圧縮できたり、透過処理したPNG画像も透過処理を残したまま圧縮できたり、複数PNG画像を一括で処理したりもできるファイル圧縮ツールが「PNGoo」です。無料でブラウザ上からファイルサイズを圧縮できる「TinyPNG」や「Kraken.io」でも使われている「pngquant」というコマンドラインツールを使用したフリーソフトで、ブラウザ上で処理を行うわけではないのでインターネットに接続していなくてもいつでもPC上で画像を圧縮できてしまいます。 pngquant — lossy PNG compressor http://pngquant.org/ ◆PNGooを使ってみた 「PNGoo」をインストールするには、上記リンクからpngquantの公式ページへ飛び、「PNGoo」と書かれたリンクをクリック。 すると「PNGoo.0.1.1.zip」というファイルがダウンロード
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
2014年、進化しているWebデザインのトレンドを実際に効果的に使用しているサイトともにチェックできる無料のE-Book
Webデザインの現在のトレンドの多くは2013年頃から浸透しはじめ、さまざまな形に進化し続けています。そんなWebデザインのトレンドを実際に効果的に使用しているサイトともに紹介している無料のE-Bookを紹介します。 2014年も残り半年ちょい、早いものですね。 Web Design Book of Trend 2013-2014 このE-Bookとは別に、トレンドの流れをさまざまな切り口からチェックしたい人は下記の記事も参考にしてみてください。 2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ E-Bookは無料で、全187ページオールカラーのPDFです。各トレンドごとに説明と、実例が15サイトくらい掲載されています。 下記に各トレンドと中身をざっくり紹介します。 1. The Era of Content コンテンツの時代 ウェブサイトのレイア
jQueryのプラグインを探す時に便利なサイトのまとめ
星の数ほどあるたくさんのjQueryのプラグインから、目的にあったものを探すのはなかなか大変ですよね。そんな時に役立つ便利なサイトをまとめました。 まずは手前ミソで自分がまとめたものから。 これは本当に多大な労力と実際の動作確認もしているので自信をもってオススメできます。 jQueryのプラグイン100選 -2013年総集編 日々チェックしているスクリプトから厳選して一年単位でjQueryのプラグインをカテゴリごとに選出しています。プラグインの半分近くは個別に記事も書いてあります。 jQueryのプラグイン100選 -2012年総集編 jQueryのプラグイン100選 -2011年総集編 jQueryのプラグイン100選 -2010年総集編 jQueryのプラグイン100選 -2009年総集編 jQueryのプラグイン100選 -2008年総集編
プレゼン資料のデザイン力がぐっと上がる、お勧めのデザインサイト7選 ｜プレゼンデザイン
プレゼン資料をキレイにわかりやすく作りたい！と思い立った人に、まずお勧めしたいのがこのサイト「伝わるデザイン｜研究発表のユニバーサルデザイン」です。基本的には研究発表を行う学生さんをターゲットとしているサイトですが、ビジネスマンにも読み応えは十分。提案書・企画書のプレゼン資料作成にそのまま利用できる内容となっています。 魅力は、わかりやすいサンプルと豊富な解説。デザイン初心者にうってつけのサイトです。ページはすっきりとしていて非常に見やすく・読みやすくレイアウトされています。 サイト全体の情報量も多からず少なからず、ほどよく網羅されていて、ひととおり目を通し終わった頃には、一歩レベルアップしている自分に気づくこと間違いありません。百聞は一見に如かず。まずはご覧になってみてはいかがでしょうか?
模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの藤田です。 「石の上にも3年」と言いますが、私のWebデザイナーとしてのキャリアもついに2年目が終わり、3年目を迎えようとしております。 日々学ぶ事が多く、とても3年程度で大成するような業種ではないですね（どの業種にも言えることだとは思いますが）。 そんな私がデザイナー1年生だった頃を振り返ると「手っ取り早くデザインが上達しないかなー」なんてよく考えておりました。 そこで今回は、私の経験から最も手っ取り早くデザインが上達する「トレース（模写）」の方法をご紹介いたします。 なぜトレースがデザインの上達につながるのか？ なぜトレースがデザインの上達につながるのか、自分なりに考えてみました。 「デザインは細部に宿る」と言われますが、その細部に気付く 「デザインの引き出しが増える」 「自分の悪い所が解る」←これが一番重要！ などなど、良いことがたくさんあります。 まずはカッ
Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ
プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。 昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。 そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。 そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。 まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために
サイトを企画・設計する前に決めるべき14の項目（ディレ協主催「0ディレ」講演レポ）
「0からのウェブディレクション講座 設計編」に行って来ました！今回の講師はディレ協所属、DCHSの高瀬さん。レポートは初登場のユースケです！よろしくです！ 制作に”入る前”こそ重要 今回は設計編ということで、サイト制作に入る前段階で「明確にすべき項目」と「その方法」にスポットを当てた講演内容となっていて 企画そのものの成功率を上げるに何を知るべきか スムーズに制作を進めるためには何を準備すべきか プロジェクトを高速で進めるための戦略のとりかたは？ といった、現場のディレクターにとって重要すぎるほど重要な内容がギッシリな”濃い”講演でした。 意図不明なサイトや、ぜい肉たっぷりなサービスができあがる原因はどこにあって、どうすれば解消できるのか？今回僕が学んだことを一気に並べて共有したいと思います。 資料スライド公開 このレポート内で紹介している14項目について、講師の高瀬さんが公開してくれてい
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
こんな企業サイトは売上に繋がらない
「ホームページが売上に繋がらない・・・」職業柄このような相談を受ける機会が多々あります。 売れる企業サイトと売れない企業サイト、その違いは何でしょうか？ 売れない企業サイトの特徴 サイト名が企業名のみ 奇をてらったデザイン 新着情報が更新されていない 商品の効果が記載されていない 「スピード対応」など言葉が抽象的 「お客様の声」に良い事しか掲載していない サイト訪問者にとってもらいたい行動が不明確 どうでもよい徒然日記的な社長ブログ Twitterの無意味なつぶやきが表示されている サイドバーにバナーが多い 「用語集」「リンク集」など無意味なページがある ヘッダ画像がスライドしたりフェードして切り替わる 画像が多く重い（ページを開くのに時間がかかる） 1.サイト名が企業名のみ Googleなどの検索エンジンは、サイト名に含まれるキーワードを一つの参考として、検索結果を表示します。 例えば、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ
ushigyunet｜iPhoneからゲームやグルメまで、ひたすら詳しくレビューするブログ
07design.net