タグ

ブックマーク / websae.net (8)

  • アイキャッチ画像の作り方。Photoshopとかじゃなくて他に簡単な方法はないですか?

    はい、これをどうぞ。 ブログのアイキャッチ画像やホームページのバナー画像を作るぐらいなら、これでじゅうぶん。 canvaというサービスです。ブラウザから無料で使えて、操作も簡単。デザインを良くするフリー素材も付いてきます。 無料でcanvaを使ってみる 著者情報:この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談>サービスメニュー】 Follow @websae2012 ちなみに記事の画像もすべてCanvaを使って作成しました (gifアニメ以外) 作り方はこんな感じ。canvaを使えばこうもスピーディーに素敵な画像を作成できます。 だれでも、すぐにマスターできそうなくらい操作は簡単なのですが、親切にもチュートリアルを用意してくれて

    アイキャッチ画像の作り方。Photoshopとかじゃなくて他に簡単な方法はないですか?
  • (Macで)Sassのコンパイル、基本のアレコレをざっくりと。

    忘れてました。せっかくまとめておいたのに。以前、「とりあえずSassを触ってみようよ!」的な記事を二書いて、今回のはそれに続く内容となってます。 『Sass』をサクッとブラウザで試すところまでやる。 1分で。『Sass→Mac』へインストールする手順。 スゴく便利だと噂のSass。試すには、いくつか新しい知識が必要です。その一つが「コンパイル」。聞き慣れない言葉に尻込みしちゃいそうですが、恐れるなかれ。いざやってみると、意外に簡単なことに驚きます。 著者情報:この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談>サービスメニュー】 Follow @websae2012 コンパイルとは? 「Sassファイル」を「CSSファイル」に変換す

    (Macで)Sassのコンパイル、基本のアレコレをざっくりと。
    hachi09
    hachi09 2015/08/12
  • ブルブル震える。ふなっしー好きにはたまらん狂気のCSSアニメーション

    jQueryやCSSで、サイトの雰囲気をすこし賑やかな感じにしたいなあ。アニメーション効果を探していたところ、「こ、これは?」なCSSライブラリを見つけました。 使い方は非常に簡単。対象はなんでもOK。こんなふうに、CSSでClassにひとことふたこと付け加えるだけで、ブルブル震えてくれます。 <div class="shake shake-constant"></div> 動きはまるで「ふなっしー」 スマホの人は、スクロール中は動かないので、少しずつスクロールを止めて見てください。 なぜ、フナ? アニメーションの動きがまるで「ふなっしー」なので。当はふなっしーのイラストや写真を例に紹介したかったのですが、版権的にヤバいかなーと思って。 動きかたには、いくつか種類があります。上のは「垂直」。CSSで指定すれば、「マウスを重ねるとストップする」、あるいはその逆、「マウスオンでブルブル震えだ

    ブルブル震える。ふなっしー好きにはたまらん狂気のCSSアニメーション
    hachi09
    hachi09 2015/06/19
  • スマホ対応のキモ。スマホサイトのナビゲーションメニューが悩ましい。

    1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない><」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか? HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる スマホサイトのナビゲーション。どーいう感じにしようか、いつも悩みます。 最近、よく見られるのは、こういう「ハンバーガーメニュー」。試しに、右上の「三」をクリックしてみると、

    スマホ対応のキモ。スマホサイトのナビゲーションメニューが悩ましい。
  • 密かにわりと長くWebデザイナーやってるけど「Git」は初心者なの。

    って、ヒトは意外と多そうです。 とりあえず普段の業務はこなせているし、特に緊急性が高い技術でもなさそうだし、「興味はあるけどねぇ。そのうち」って感じで、知らないまま放置しちゃってて。 どっちかっていうとエンジニアプログラマーよりの技術なイメージもありますよね。そこが、「難しそう。自分には関係なさそう」という距離感を生み、積極的に学習しようという意欲を奪っている原因かもしれません。 そこで今回はできるだけ専門用語を避けて、初心者向けに平たく「Gitって何?」ってことを伝えたいと思います。 「HTML & CSS + Photoshop」あたりをメインの武器に日々案件と戦うウェブデザイナーさんにとっても、Gitはきっと役立つツールですよ。 著者情報:この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画

    密かにわりと長くWebデザイナーやってるけど「Git」は初心者なの。
    hachi09
    hachi09 2015/05/01
  • HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ

    気でweb制作仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの

    HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
  • 超倍速でWordPressオリジナルテーマ作成!骨だけ「Bones」の使い方をザックリと

    【発表】WP テーマ選びで悩んでる? 日語テーマの比較はこちら。 デモサイトを見ながら使い方とできることを比べられます 【テーマ選び方】8つ比較 「Bones」は、WordPressの「ブランクテーマ」とか、「スターターテーマ」って呼ばれる、カスタマイズ前提のテーマの一つなのだけど、そのカスタマイズのしやすさが他のブランクテーマと比較して圧倒的です。(当人比。ちなみに、その他のブランクテーマは下記リンク先を) 密かに使ってるカスタマイズ前提のWordPress ブランクテーマ4つ 「Bones=骨ばっかり」というその名が示す通り、「骨組み」として、自分好みに肉付けしやすく、オリジナルのテーマ作成をビューンとひとっ飛びに高速で進められます。 簡単にまず、優れた特徴をあげてみましょう。 子テーマ不要 よそ様が作ったテーマをカスタマイズする場合、子テーマを用意した方がいいです。直接、元のテーマ

    超倍速でWordPressオリジナルテーマ作成!骨だけ「Bones」の使い方をザックリと
  • ラクするWeb制作「CSSフレームワークなにソレ?」な初心者へおすすめ7個

    注:今回の記事は初心者向け、Web制作を効率化&スピードアップしてくれる「便利なHTMLCSSフレームワーク」の紹介です。 CSSフレームワークとは? 2021年のおすすめCSSフレームワーク7個 CSSフレームワークの選び方 上の3点をお伝えしていきます。 それなのに、なぜ、カレーの画像で始まるの? その理由は、「CSSフレームワークって何?」を知ると理解できます。 著者情報:この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談>サービスメニュー】 Follow @websae2012 CSSフレームワークって何? CSSフレームワークは、言い方を変えれば「カレーのルー」と例えられます。 ある女は言った 女は言葉を続ける。 「当に

    ラクするWeb制作「CSSフレームワークなにソレ?」な初心者へおすすめ7個
  • 1