WEB制作
-
illustratorの3D回転ツールで作るカンタンクリスマスオーナメント
世間はハロウィン一色ですが、デザイナーという職業は常に季節を先取りなので、すでに気分はクリスマスです。作るチラシはもみの木サンタにトナカイさん、終わればすぐにおせち料理という具合。 「クリスマスって秋だよね?」と言われるとあたまのおかしい子の扱いを受けます。そりゃそうだー。…
-
簡単にスライダーを実装して動きのあるWEBサイトにしたい!bxSliderの使い方!
こんにちは。今回は「bxSliderの実装方法」について紹介します。 皆さんは、画像が自動でスライドするなど動きのあるWebサイトを見たことはありますか。 例えば、通販サイトでは、特集やセール開催を告知するうえで目立つよう取り入れていると思います。 本日紹介するbxSl…
-
名刺作成におすすめのおしゃれツール。その他グラフィックデザインが簡単にできるCanvaを使ってみた。
PhotoshopもIllustratorもWordもExcelもわからないけど自分で名刺を作って入稿しちゃいたいんですけど! という人のためのさくっと簡単フロー。 オーストラリア発のCanvaは2017年5月にリリースされたグラフィックデザインツール Canva …
-
分かりやすい!IllustratorでFontAwesomeのアイコンを使う方法
IllustratorにFontAwesomeのアイコンを導入しよう! こんにちは。 本日は、IllustratorでFontAwesomeのアイコンを使う方法について解説します! WEBサイトでアイコンを使用することにより、わかりやすいデザインを実現できます。 例え…
-
【Illustrator】本家は強い!Adobe Illustratorを始めるなら本を買うよりさきにこっち!【使い方】
何事も学ぶに大切なのは 面倒くさがらない 言い訳しない 地道にコツコツ の三点です。努力忍耐根性とはよく言ったものですが、私も大嫌いな言葉です。人間ラクができるならいくらだってラクをしたい生き物です。 デジタルにおいてテクニカルなスキルは合理と論理だ…
-
Microsoftから手描きスケッチからHTMLを生成する「Sketch2Code」が発表されたのでAdobeXDのワイヤーを入れてみる
時代がAIですね。 >Microsoft AI Sketch2Code WEBのワイヤーフレームやデザインを起こす際に、Sketch、というソフトを使っている方も多いかと思います。ちょっと名称がややこしいですね……。 もっぱらAdobeXDを利用している当社ですが、…
-
初心者必見!Webサイト制作の流れや制作期間についてまとめました!
Webサイトはどのような流れでつくられているのか。 こんにちは。本日は、現在私が携わっているWebサイト制作について、 これから制作をはじめたい方、興味はあるので知っておきたい方向けに完成までの流れをまとめました! 私自身もまだ初心者レベルですから、皆さんといっしょにステッ…
-
【Illustrator】パターンを使ったちょっとかわいいロゴの装飾の仕方
とりあえずなんかかわいく見せたい! となったときに利用するパターン 他にも典型的なパターンというのは活用方法が多様にあります。スタンダートなパターン集は一つ持っておくと便利ですね。 Illustratorのアピアランス機能とグラフィックスタイルを使…
-
「県名」「市区町村名」「町域」の住所選択用セレクトボックスをそこそこ簡単に作る方法
今回は住所選択用のセレクトボックスをそこそこ簡単に作る方法をご紹介します。 住所を入力するフォーム画面を作成する際には役立つかもしれません! 今回の記事を読むと下記のようなフォームが作成できます。 県名 : ---- …
-
【WordPress】データベースのテーブルの接頭辞を変更してWEBサイトをコピーした時に気を付けること!
似たようなレイアウトで色だけ変える、とか、スライダーの画像だけ変更する、などのようにWordPressのWEBサイトをほぼ複製をしたい場合、一方のサイトを制作してから、それをコピーし、変更箇所だけ手を入れていくことがあります。要はWEBサイトをまるっとコピー&ペーストです。 …
-
GoogleChartsを使用して温度計のようなゲージを表示する
前回は棒グラフや折れ線グラフの表示に関して記事にしました。 [blogcard url="https://incloop.com/chartjsを活用してwebページにグラフを表示する/"] 今回は、下記の温度計のようなゲージを表示する方法を紹介します。 温度計…
-
ロゴやイラストをきれいに見せたい!黄金比で作るイラストレーション
黄金比をなんとなく使ってみると「あ、なんとなくスタイリッシュ」な絵ができるのでそれの簡易的なやり方メモ。 黄金比とは? 近似値1:1.618、約5:8の最も美しい比率とされる貴金属比の一つ。 小難しいことを言っていますが、理解としては「あ、なんかきれーい!」って人に思われや…
-
コピペでOK!「Chart.js」を活用してWebページに棒グラフや折れ線グラフを表示する方法
Webページで折れ線グラフや棒グラフを表現する方法を調べてみたら「Chart.js」を使った非常に簡単な実装方法があったのでご紹介します。 グラフを作成する際の準備 「Chart.js」を活用する際にはライブラリを読み込む必要があります。 今回はCDN経由でライブラリを…
-
2018年8月26日(日)第2回 相模原小・中学生プログラミングコンテスト開催が決まりました。
こんにちは。 今日は第2回 相模原小・中学生プログラミングコンテストの開催のお知らせです。 第1回の様子はこちらからどうぞ。 [blogcard url="https://incloop.com/%E7%9B%B8%E6%A8%A1%E5%8E%9F%E5%B0%8…
-
Illustratorのライブペイントツールを使ってイラストを描く
たくさんのIllustratorさんがIllustratorよりPhotoshopを愛用するのは、ピクセル形式の書きやすさ故だと思うのですが、やはりデザイナーとしては拡大縮小に強く、また比較的単純な形であれば容量としても軽いベクター形式でイラストがあるととてもラクチンというのが正…
-
JavaScriptを使用してテーブルの表示行数を3行、5行、10行とユーザーが自由に切り替えられるようにする方法
最近のWebサイトはスマホにも対応しなければなりませんので「各要素でどれだけの幅を使うべきか…?」という事を考えてページを作らなければなりません。 ですが、テーブル等でキッチリと表示している箇所はなかなか修正が難しいんですよね…。 そのままスマホに対応すると、縦に長くなっ…
-
Illustratorでテキストが打ち変え可能な状態でレトロな雰囲気を出すグラフィックスタイル
よくチュートリアルである「枠を鉛筆で描いてその中は鉛筆で塗りつぶし」ではなくて、細いフォントはそのまま鉛筆のように、太い文字に関してはペンで書いたように見せられないかと試行錯誤。 アピアランスを駆使してフィルターを重ねてそれっぽいものを作る 以下のようにフィルターをかけていき…
-
jQueryで動くslick.jsが動作しない理由はflexboxが理由かも……?
先日実装しているときに詰んだのでメモ。 今回やりたかったこと 投稿記事画面にカスタムフィールドでスライダーを表示させたかったのですね。 その際、カスタムフィールドで画像を選択する形にしたいので、タグに直接カスタムフィールドの出力コードを書く必要がありまし…
-
Illustratorで作る簡単なパターンの作り方
手描き風チラシの依頼が増えてきたので、いろいろ応用するための素材を作成します。 手描き風チラシを作るときのフォントについてはこちら 手書きのチラシを作るときに覚えておくと便利なフォントとIllustratorツール Illustratorで簡単なパターンをさくさく作…
-
日本マーケティング・リテラシー協会(JMLA)様のWEBサイトをリニューアルいたしました
日本マーケティング・リテラシー協会(JMLA)様のホームページをリニューアルいたしました。 日本マーケティングリテラシー協会 日本マーケティング・リテラシー協会(JMLA)とは? 日本マーケティング・リテラシー協会(JMLA)は現代社会におけるマーケティング活動…